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

_Admin__ · 16-12-2008, 16:05

Sitze hier seit ner Stunde rum und weiß einfach nicht wie ich das Problem lösen kann. Das problem taucht nur im IE auf, wie immer

Habe eine Slide-Funktion gemacht.. es wird mit setInterval auf und zu geslidet.

Im IE behält er aber nicht height: 0px;, er setzt immer die Höhe auf die Mindesthöhe von der Texthöhe. Wisst ihr, wie ich das Problem lösen kann?

PHP-Code:

  <script type="text/javascript">
<!--
var sliding=false;

function Slide(div, sliderHeight, slideSpeed) {
    if(sliding) { return; } else { sliding=true; }
    if(!slideSpeed) { slideSpeed=10; }
    slider=document.getElementById(div);
    var thisObject = this;
    if(slider.offsetHeight==sliderHeight) {
        sliderIntervalId = setInterval(function() { thisObject.SlideUpRun(); }, 30); 
    }
    else {
        sliderIntervalId = setInterval(function() { thisObject.SlideDownRun(); }, 30); 
    }
    
    this.SlideUpRun = function() {
        slider=document.getElementById(div);
        if(sliderHeight<=0) {
            sliding=false;
            clearInterval(sliderIntervalId);
        }
        else {
            sliderHeight -= slideSpeed;
            if(sliderHeight<0) {
                sliderHeight=0;
            }
            slider.style.height = sliderHeight+'px';
        }
    }
    this.SlideDownRun = function() {
        slider=document.getElementById(div);
        if(slider.offsetHeight>=sliderHeight) {
            sliding=false;
            clearInterval(sliderIntervalId);
        }
        else {
            newHeight = slider.offsetHeight+slideSpeed;
            if(sliderHeight<newHeight) {
                newHeight = sliderHeight;
            }
            slider.style.height = newHeight+'px';
        }
    }
}
-->
</script>



<div style="position: absolute; top: 200px; left: 400px; border: 1px solid #FFFFFF; width: 400px;">
    <div id="titleBar" style="height: 20px; width: 400px; background: #3B587A;" onclick="Slide('testDiv', 200);">Titel Bar</div>
    <div id="testDiv" style="width: 400px; background: #85A1C2; height: 200px; overflow: hidden;">test<br>test<br>test<br>test<br>test</div>
</div>

Nicmare · 16-12-2008, 16:15

ich weiß was du meinst aber mit overflow:hidden müsste des doch gehen?!

_Admin__ · 16-12-2008, 16:18

Kopier dir den Code mal bitte kurz in den Texteditor und speicher als html-file und probier es im FF und im IE. dann siehste, dass es leider nicht funktioniert..
eigentlich dachte ich, dass es funktioniert..beschäftige mich schon knapp 5 jahre mit php und js..

Nicmare · 16-12-2008, 16:21

ja ok. mache ich wenn mir IE wieder zur verfügung steht. reicht ie7?

_Admin__ · 16-12-2008, 16:22

Ja..

es klappt im ff2, ff3, opera, netscape, safari, nur im ie6 und 7 nicht..

pilzebub · 16-12-2008, 16:37

habe mir dein Script jetzt nicht genau angesehen, aber probier mal mit:

line-height:0px oder ...style.lineHeight

grüße

_Admin__ · 16-12-2008, 16:39

bringt leider auch nichts

Nightflyer · 16-12-2008, 17:05

http://docs.jquery.com/Effects/slide...#speedcallback

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="application/xhtml+xml; charset=iso-8859-1" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

	<script type="text/javascript">
	
	$(document).ready( function(){
		
		$('#titleBar').click( function(){
			
			$('#testDiv').slideToggle("slow");
			
		});
		
	});

	</script>

</head>
<body>

<div style="position: absolute; top: 200px; left: 400px; border: 1px solid #FFFFFF; width: 400px;">
    <div id="titleBar" style="height: 20px; width: 400px; background: #3B587A;">Titel Bar</div>
    <div id="testDiv" style="width: 400px; background: #85A1C2; height: 200px; overflow: hidden;">test<br>test<br>test<br>test<br>test</div>
</div>  

</body>
</html>

:: RK :: · 16-12-2008, 17:45

[OT]
haben wir n neuen Admin?

[/OT]

_Admin__ · 16-12-2008, 19:02

nene

Weiß keiner eine Lösung zum Problem mit dem IE ohne Framework?

Weil ich brauche nur diese eine Funktion..bin dabei eine Community zu programmieren..sie ist schon rießen groß vom Code und Umfang her, da will ich nicht noch ein Framework einbinden, wo auch nochmal viel traffic und ladezeit verbraucht....

Nicmare · 16-12-2008, 19:57

Zitat:

Zitat von _Admin__

nene

Weiß keiner eine Lösung zum Problem mit dem IE ohne Framework?

Weil ich brauche nur diese eine Funktion..bin dabei eine Community zu programmieren..sie ist schon rießen groß vom Code und Umfang her, da will ich nicht noch ein Framework einbinden, wo auch nochmal viel traffic und ladezeit verbraucht....

traffic und ladezeit?? oh man...
an deiner stelle hätte ich von anfang an auf nen js framework zurückgegriffen. du glaubst garnicht wieviel arbeit das abnimmt und im endeffekt sparst du noch an traffic und ladezeit da die coredatei ja gecacht wird und nur einmalig lädt! Hinzukommt dass die meisten gebräuchlichen FUnktionen schon verfügbar und crossbrowserkompatibel sind! sorry dass das dir nun nicht mehr hilft aber ich musste dir nun einfach mal ins gewissen reden!

:: RK :: · 16-12-2008, 20:06

aber um was konstruktives beizutragen: wenn ich deinen oberen Code in nen
anständigen DOCTYPE setze, dann funktionierts im Safari, im Firefox und im IE7!

Lass ich das HTML Gerüst weg, schließt die Box zwar komplett aber gleich darauf
springt sie wieder auf die Höhe des Inhalts.

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>
	</head>
	<body>
		
	<script type="text/javascript">
	<!--
	var sliding=false;
	
	function Slide(div, sliderHeight, slideSpeed) {
	    if(sliding) { return; } else { sliding=true; }
	    if(!slideSpeed) { slideSpeed=10; }
	    slider=document.getElementById(div);
	    var thisObject = this;
	    if(slider.offsetHeight==sliderHeight) {
	        sliderIntervalId = setInterval(function() { thisObject.SlideUpRun(); }, 30); 
	    }
	    else {
	        sliderIntervalId = setInterval(function() { thisObject.SlideDownRun(); }, 30); 
	    }
	    
	    this.SlideUpRun = function() {
	        slider=document.getElementById(div);
	        if(sliderHeight<=0) {
	            sliding=false;
	            clearInterval(sliderIntervalId);
	        }
	        else {
	            sliderHeight -= slideSpeed;
	            if(sliderHeight<0) {
	                sliderHeight=0;
	            }
	            slider.style.height = sliderHeight+'px';
	        }
	    }
	    this.SlideDownRun = function() {
	        slider=document.getElementById(div);
	        if(slider.offsetHeight>=sliderHeight) {
	            sliding=false;
	            clearInterval(sliderIntervalId);
	        }
	        else {
	            newHeight = slider.offsetHeight+slideSpeed;
	            if(sliderHeight<newHeight) {
	                newHeight = sliderHeight;
	            }
	            slider.style.height = newHeight+'px';
	        }
	    }
	}
	-->
	</script>
	
	
	
	<div style="position: absolute; top: 200px; left: 400px; border: 1px solid #FFFFFF; width: 400px;">
	    <div id="titleBar" style="height: 20px; width: 400px; background: #3B587A;" onclick="Slide('testDiv', 200);">Titel Bar</div>
	    <div id="testDiv" style="width: 400px; background: #85A1C2; height: 200px; overflow: hidden;">test<br>test<br>test<br>test<br>test</div>
	</div>  

	</body>
</html>

_Admin__ · 16-12-2008, 23:05

Danke, das war das Problem.

Ich Idiot..war meine eigene Dummheit..

Und zum Cache..kommt alles noch..

16-12-2008, 16:05	#1 (permalink)
_Admin__ Neuer User Registriert seit: Sep 2006 Beiträge: 83	Hallo liebes Forum Sitze hier seit ner Stunde rum und weiß einfach nicht wie ich das Problem lösen kann. Das problem taucht nur im IE auf, wie immer Habe eine Slide-Funktion gemacht.. es wird mit setInterval auf und zu geslidet. Im IE behält er aber nicht height: 0px;, er setzt immer die Höhe auf die Mindesthöhe von der Texthöhe. Wisst ihr, wie ich das Problem lösen kann? PHP-Code: <script type="text/javascript"> <!-- var sliding=false; function Slide(div, sliderHeight, slideSpeed) { if(sliding) { return; } else { sliding=true; } if(!slideSpeed) { slideSpeed=10; } slider=document.getElementById(div); var thisObject = this; if(slider.offsetHeight==sliderHeight) { sliderIntervalId = setInterval(function() { thisObject.SlideUpRun(); }, 30); } else { sliderIntervalId = setInterval(function() { thisObject.SlideDownRun(); }, 30); } this.SlideUpRun = function() { slider=document.getElementById(div); if(sliderHeight<=0) { sliding=false; clearInterval(sliderIntervalId); } else { sliderHeight -= slideSpeed; if(sliderHeight<0) { sliderHeight=0; } slider.style.height = sliderHeight+'px'; } } this.SlideDownRun = function() { slider=document.getElementById(div); if(slider.offsetHeight>=sliderHeight) { sliding=false; clearInterval(sliderIntervalId); } else { newHeight = slider.offsetHeight+slideSpeed; if(sliderHeight<newHeight) { newHeight = sliderHeight; } slider.style.height = newHeight+'px'; } } } --> </script> <div style="position: absolute; top: 200px; left: 400px; border: 1px solid #FFFFFF; width: 400px;"> <div id="titleBar" style="height: 20px; width: 400px; background: #3B587A;" onclick="Slide('testDiv', 200);">Titel Bar</div> <div id="testDiv" style="width: 400px; background: #85A1C2; height: 200px; overflow: hidden;">test<br>test<br>test<br>test<br>test</div> </div> Geändert von _Admin__ (16-12-2008 um 16:14 Uhr)

16-12-2008, 17:45	#9 (permalink)
:: RK :: Neuer User Registriert seit: Jan 2002 Ort: Umgebung Stuttgart Beiträge: 5.412	[OT] haben wir n neuen Admin? [/OT] __________________ Das Glück im Leben hängt von den guten Gedanken ab, die man hat. Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs

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

16-12-2008, 16:15	#2 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	ich weiß was du meinst aber mit overflow:hidden müsste des doch gehen?!

16-12-2008, 16:18	#3 (permalink)
_Admin__ Neuer User Registriert seit: Sep 2006 Beiträge: 83	Kopier dir den Code mal bitte kurz in den Texteditor und speicher als html-file und probier es im FF und im IE. dann siehste, dass es leider nicht funktioniert.. eigentlich dachte ich, dass es funktioniert..beschäftige mich schon knapp 5 jahre mit php und js..

16-12-2008, 16:21	#4 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	ja ok. mache ich wenn mir IE wieder zur verfügung steht. reicht ie7?

16-12-2008, 16:22	#5 (permalink)
_Admin__ Neuer User Registriert seit: Sep 2006 Beiträge: 83	Ja.. es klappt im ff2, ff3, opera, netscape, safari, nur im ie6 und 7 nicht..

16-12-2008, 16:37	#6 (permalink)
pilzebub · Registriert seit: Oct 2003 Ort: ·· Beiträge: 722	habe mir dein Script jetzt nicht genau angesehen, aber probier mal mit: line-height:0px oder ...style.lineHeight grüße

16-12-2008, 16:39	#7 (permalink)
_Admin__ Neuer User Registriert seit: Sep 2006 Beiträge: 83	bringt leider auch nichts

16-12-2008, 19:02	#10 (permalink)
_Admin__ Neuer User Registriert seit: Sep 2006 Beiträge: 83	nene Weiß keiner eine Lösung zum Problem mit dem IE ohne Framework? Weil ich brauche nur diese eine Funktion..bin dabei eine Community zu programmieren..sie ist schon rießen groß vom Code und Umfang her, da will ich nicht noch ein Framework einbinden, wo auch nochmal viel traffic und ladezeit verbraucht....

16-12-2008, 23:05	#13 (permalink)
_Admin__ Neuer User Registriert seit: Sep 2006 Beiträge: 83	Danke, das war das Problem. Ich Idiot..war meine eigene Dummheit.. Und zum Cache..kommt alles noch..