Ergebnis 1 bis 9 von 9
  1. #1
    Mufasa ist offline Foren As
    registriert
    10-06-2008
    Beiträge
    79

    Question jQuery UI Slide ändert DIV-Höhe?!?

    Hi Leute,

    ich hab hier ein kleines Problem an dem ich langsam am verzweifeln bin. Ich möchte mit jQuery ein div sliden sobald das dokument geöffnet wird. Aber sobald die Zeile mit den JS-Code reinkommt wird mein Div in der Höhe verkleinert..... ganz ganz komisch.
    Bitte schaut Euch das doch mal an.

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Slider</title>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script language="javascript" type="text/javascript">
      	$(document).ready(function() {
    		$("#slider1").hide("slide", {direction: "left"}, 7000);		// <----------- diese Zeile -------------
    	});
      </script>
      
      <style type="text/css">
    	#slider1 {
    		margin:0;
    		left:0;
    		bottom:80px;
    		width:700px;
    		height:60%;
    		background-color:silver;
    		position:fixed;
    		float:left;
    		border-top-right-radius:15px;
    		border-bottom-right-radius:15px;
    	}
      </style>
    </head>
    
    <body>
    
    	<div id="slider1" class="slider1"></div>
    
    </body>
    </html>
    so wenn man jetzt die markierte Zeile auskommentiert sieht man wie hoch das Div eigentlich sein sollte.....

    Hat einer ne Idee wie das auf einmal zustande kommt??

    Danke schon mal! :-)

  2. #2
    Bieber ist offline König
    registriert
    10-12-2007
    Ort
    Erfurt
    Beiträge
    964

    AW: jQuery UI Slide ändert DIV-Höhe?!?

    gib die Höhe des Div's in Pixel oder em an, dann gehts... warum das mit Prozenten nicht geht, kann ich dir leider nicht sagen
    crazy

    Schach online: Lust auf eine Partie Schach gegen mich? Einfach kostenlos auf onlineschach.eu registrieren und den Bieber suchen.

  3. #3
    Mufasa ist offline Foren As
    registriert
    10-06-2008
    Beiträge
    79

    AW: jQuery UI Slide ändert DIV-Höhe?!?

    Ja ich weiß so hatte ich es auch schon..... das sollte eigentlich schon mit der Prozentangabe sein, weil wenn ich das mit Pixeln fest mache und einer hat eine höhere Auflösung dann ist oben zu viel frei.... und bei einer niedrigeren Auflösung (z.B. Netbooks) entstehen Scrollbanken im Haupfenster....

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: jQuery UI Slide ändert DIV-Höhe?!?

    Ein erster Schritt wäre z.B.:
    Code:
      <script language="javascript" type="text/javascript">
    	$(document).ready(function() {
    		$("#slider1").height($("#slider1").height());
    		$("#slider1").hide("slide", {direction: "left"}, 7000);
    	});
      </script>
    Und mit onresize() Selfhtml...Änderungen der Fenstergröße überwachen die Höhe dann neu berechnen lassen.
    Hoffe ich konnte helfen

  5. #5
    Mufasa ist offline Foren As
    registriert
    10-06-2008
    Beiträge
    79

    AW: jQuery UI Slide ändert DIV-Höhe?!?

    hmmm...... onresize kenne ich jetzt gar nicht so sehr. Kann man damit sagen z.B.
    Code:
    für (jeden Pixel, den sich das Fenster vergrößert/verkleinert)
            solange (Minimalhöhe < slider1.höhe < Maximalhöhe)
                    slider1 um entsprechende Pixel vergrößern/verkleinern
    das wäre dann glaub ich auch nicht verkehrt.....

  6. #6
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: jQuery UI Slide ändert DIV-Höhe?!?

    Ja das kann mann. Es müssen dann entsprechend nur die genauen Angaben (Minimalhöhe, etc.) gemacht werden.
    Hoffe ich konnte helfen

  7. #7
    Mufasa ist offline Foren As
    registriert
    10-06-2008
    Beiträge
    79

    AW: jQuery UI Slide ändert DIV-Höhe?!?

    Wie würde diese Schleife dann in JS aussehen? Also ich meine wie genau schreib ich das "für jedes Pixel".....

    Danke!

  8. #8
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: jQuery UI Slide ändert DIV-Höhe?!?

    Welche Werte willst du denn für Minimalhöhe und Maximalhöhe einsetzen?
    Du willst doch immer eine Höhe von 60% haben oder?
    usw.

    Du kannst die 60% ja jeder Zeit berechnen...

    Deswegen schrieb ich auch:
    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Es müssen dann entsprechend nur die genauen Angaben (Minimalhöhe, etc.) gemacht werden.
    Denkanstoss:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Slider</title>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script language="javascript" type="text/javascript">
    	window.onresize = SetSize;
    	
    	$(document).ready(function() {
    		$("#slider1").height($("#slider1").height());
    		$("#output").text($("#slider1").height());
    //		$("#slider1").hide("slide", {direction: "left"}, 7000);
    	});
    
    	function SetSize(){
    		$("#slider1").height($(window).height() * 0.6);
    		$("#output").text($("#slider1").height());
    	}
      </script>
      
      <style type="text/css">
    	#slider1 {
    		margin:0;
    		left:0;
    		bottom:80px;
    		width:700px;
    		height:60%;
    		background-color:silver;
    		position:fixed;
    		float:left;
    		border-top-right-radius:15px;
    		border-bottom-right-radius:15px;
    	}
      </style>
    </head>
    
    <body>
    
    	<div id="slider1" class="slider1">height of #slider1:&nbsp;<span id="output"></span></div>
    
    </body>
    </html>
    Geändert von miniA4kuser (24-02-2011 um 15:11 Uhr) Grund: Denkanstoss hinzugefügt
    Hoffe ich konnte helfen

  9. #9
    Mufasa ist offline Foren As
    registriert
    10-06-2008
    Beiträge
    79

    AW: jQuery UI Slide ändert DIV-Höhe?!?

    oooh SÜÜÜPER!! danke schön! Funzt genau so wie ich es erträumt hatte :-)

Ähnliche Themen

  1. Slide Panel jquery IE6 Fehler
    Von zenten im Forum Script-Check
    Antworten: 2
    Letzter Beitrag: 22-07-2009, 01:43
  2. Antworten: 0
    Letzter Beitrag: 26-02-2009, 18:52
  3. jQuery Image Slide problem
    Von Ecstasy im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 30-12-2008, 12:43
  4. Höhe ändert sich obwohl fest definiert
    Von Don Carlos im Forum CSS und (X)HTML
    Antworten: 12
    Letzter Beitrag: 21-07-2008, 17:59
  5. Höhe von iFrame an Höhe von Quelldatei anpassen
    Von Amatron im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 12-11-2005, 16:19

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •