Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

Nicmare · 29-10-2008, 16:17

Hallo,

Wie kann ich mit Javascript einen div 100% hochmachen und 50 pixel abziehen?
Hintergrund:
da das mit CSS nicht möglich ist, würde ich hier gerne auf JS zurückgreifen.
Habe das mal via jquery so probiert:

Code:

<script type="text/javascript">
jQuery(document).ready(function($){
	var divheight = "100%";
	$('#wrapper').height(divheight-50);
	
});
</script>

Aber das funktioniert nicht.
jemand ne idee?

Ich habe das hier schonmal vor Jahren mit nem fertigen Script gesehen aber finde es nicht mehr wieder.

Nicmare · 29-10-2008, 16:31

erster fortschritt:

HTML-Code:

<script type="text/javascript">
jQuery(document).ready(function($){
	var divheight = $(window).height();
	$('#wrapper').height(divheight-50);
	
});
</script>

so gehts zwar. aber wenn man ohne pagereload den browser in der größe verändert, wird das layout nicht onthefly angepasst. erst wenn man f5 drückt.

Nightflyer · 29-10-2008, 16:36

Code:

<script type="text/javascript">
$(document).ready(function(){
	var height = screen.height - 50+"px";
	$('#wrapper').css({'height':height});
	
});
</script>

zombienoxx · 29-10-2008, 16:37

Hi,

schreib doch die division ein eine extra variable dann müsste es gehen

MfG

Nicmare · 29-10-2008, 16:44

@nighty:
irgendwie funzt des net. der div scheint viel zu hoch?!
wobei das snippet eigentlich ganz logisch ausschaut

@zombie: >jetzt< verstehe ich dich nicht ;-). wie meinst du das?

Nightflyer · 29-10-2008, 16:54

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
	
		function resize_div(){
			
			var height = window.innerHeight - 50+"px";
			$('#wrapper').css({'height':height});
				
		}
		
		$(document).ready(function(){
			
			resize_div();
			
			
		});
		
		$(window).resize(function(){
			
			resize_div();
			
			
		});
		
	</script>
	
	<style type="text/css">
	
		#wrapper{
			background-color:red;
			border: 1px solid black;
		}
	
	</style>
</head>
<body>

	<div id="wrapper">
	</div>

</body>
</html>

geht ber nicht im IE

Nicmare · 29-10-2008, 17:01

ja der kennt innerheight nicht?!

edit: habs mal überarbeitet. so gehts auch im IE6 (sogar besser als im FF):

HTML-Code:

<script type="text/javascript">
$(document).ready(function(){
		function resize_div(){		
			var divheight = $(window).height();
			$('#wrapper').height(divheight-50);		
		}
		
		$(document).ready(function(){
			
			resize_div();
			
			
		});
		
		$(window).resize(function(){
			
			resize_div();
			
			
		});
	
});
</script>

zombienoxx · 29-10-2008, 22:36

@nicmare: hat sich schon geklärt, aber ich meinte:

PHP-Code:

  var divheight = $(window).height();
var subtrahieren = divheight-50;

aber es ist ganz offentsichtlich ein anderer way to go und nicht platzsparend :-)

also vergiss den comment einfach. ;-)

MfG

Nightflyer · 29-10-2008, 22:54

@zombienoxx: Warum mbenennst du eine Variable division wenn du nur subtrahierst?

richtsteiger · 30-10-2008, 08:12

Zitat:

Zitat von Nicmare

ja der kennt innerheight nicht?!

In die jQuery-Version 1.2.6 ist ja das dimension-Plugin in das Release mit
integriert worden. Somit hast du jetzt auch ein innerHeight zur Verfügung.
Daher kannst du jetzt auch folgendes machen:

HTML-Code:

  var divheight = $(window).innerHeight();

zombienoxx · 30-10-2008, 12:28

@nightflyer: ui ich bin nicht mehr si fit in den mathematischen be´zeichnungen für + - * /, was eigentl. schon sehr peinlich ist für jmd. der js und php programme entwickelt.

ich habs einfach mal editiert ;-)

MfG

29-10-2008, 16:17	#1 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	100% height -50px Hallo, Wie kann ich mit Javascript einen div 100% hochmachen und 50 pixel abziehen? Hintergrund: da das mit CSS nicht möglich ist, würde ich hier gerne auf JS zurückgreifen. Habe das mal via jquery so probiert: Code: <script type="text/javascript"> jQuery(document).ready(function($){ var divheight = "100%"; $('#wrapper').height(divheight-50); }); </script> Aber das funktioniert nicht. jemand ne idee? Ich habe das hier schonmal vor Jahren mit nem fertigen Script gesehen aber finde es nicht mehr wieder.

29-10-2008, 16:31	#2 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	erster fortschritt: HTML-Code: <script type="text/javascript"> jQuery(document).ready(function($){ var divheight = $(window).height(); $('#wrapper').height(divheight-50); }); </script> so gehts zwar. aber wenn man ohne pagereload den browser in der größe verändert, wird das layout nicht onthefly angepasst. erst wenn man f5 drückt.

29-10-2008, 16:36	#3 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Code: <script type="text/javascript"> $(document).ready(function(){ var height = screen.height - 50+"px"; $('#wrapper').css({'height':height}); }); </script> __________________ (\__/) (='.'=) (")_(")

29-10-2008, 17:01	#7 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	ja der kennt innerheight nicht?! edit: habs mal überarbeitet. so gehts auch im IE6 (sogar besser als im FF): HTML-Code: <script type="text/javascript"> $(document).ready(function(){ function resize_div(){ var divheight = $(window).height(); $('#wrapper').height(divheight-50); } $(document).ready(function(){ resize_div(); }); $(window).resize(function(){ resize_div(); }); }); </script> Geändert von Nicmare (29-10-2008 um 17:05 Uhr)

29-10-2008, 22:36	#8 (permalink)
zombienoxx Neuer User Registriert seit: Feb 2008 Ort: Bremen Beiträge: 78	@nicmare: hat sich schon geklärt, aber ich meinte: PHP-Code: `var divheight = $(window).height(); var subtrahieren = divheight-50;` aber es ist ganz offentsichtlich ein anderer way to go und nicht platzsparend :-) also vergiss den comment einfach. ;-) MfG Geändert von zombienoxx (30-10-2008 um 12:27 Uhr)

29-10-2008, 16:37	#4 (permalink)
zombienoxx Neuer User Registriert seit: Feb 2008 Ort: Bremen Beiträge: 78	Hi, schreib doch die division ein eine extra variable dann müsste es gehen MfG

29-10-2008, 16:44	#5 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	@nighty: irgendwie funzt des net. der div scheint viel zu hoch?! wobei das snippet eigentlich ganz logisch ausschaut @zombie: >jetzt< verstehe ich dich nicht ;-). wie meinst du das?

29-10-2008, 22:54	#9 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	@zombienoxx: Warum mbenennst du eine Variable division wenn du nur subtrahierst? __________________ (\__/) (='.'=) (")_(")

30-10-2008, 12:28	#11 (permalink)
zombienoxx Neuer User Registriert seit: Feb 2008 Ort: Bremen Beiträge: 78	@nightflyer: ui ich bin nicht mehr si fit in den mathematischen be´zeichnungen für + - * /, was eigentl. schon sehr peinlich ist für jmd. der js und php programme entwickelt. ich habs einfach mal editiert ;-) MfG

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln