2010-12-06 20 views
0

Ich erstelle eine Website, die ihre Größe dynamisch ändert, wenn Sie die Größe des Browserfensters ändern. Dies wird mit Prozentsätzen in CSS erreicht. Ich brauche aber auch meinen Akkordeon-Regler, um die Größe des Browserfensters zu ändern, was ich mit CSS nicht tun kann. Ich nehme an, der beste Weg, dies zu lösen, ist die Verwendung von jQuery, aber ich kann nicht herausfinden, wie ich es machen soll. Wie kann ich die Höhe und Breite des Schiebereglers ändern, wenn die Größe des Fensters geändert wird? Jede Hilfe wäre willkommen.Größe/Breite des Schiebereglers ändern, wenn die Größe des Fensters geändert wird

ist die Seite gefunden in:

Antwort

0

Ohne Ihre Kwicks jQuery-Code zu sehen, [link removed] ist es schwierig, eine gute Antwort zu geben, aber von dem, was ich sagen kann, ist Ihre beste Wette ist, um die aktuelle Fenstergröße zu berechnen mit JS und dann legen Sie die "min" Größe Ihres Kwicks Akkordeon und dann aktualisieren Sie es entsprechend.

bearbeiten: durch die für weitere Informationen ghostpool, etwas in dieser Richtung

//after acknowledging window size change 
var minsize = applicableAccordianWidth/numberOfElements; 
$('.kwicks').kwicks({ 
    min: minsize, 
    spacing: 5 
}); 

Sie sollten den kwicks Container, und senden Sie die Option für eine Mindestgröße aufgeteilt auf die Größe des Elements auf Basis neu zu initialisieren der Lage sein, Anzahl der Elemente im Akkordeon.

+0

Ich verwende das folgende Skript ohne Änderungen: http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.js. Ich bin mit dir am Ausarbeiten der aktuellen Fenstergröße, von der ich annehme, dass es nur 'jQuery (window) .width()' ist - aber ich folge dann nicht mit der minimalen Breite des Akkordeons weiter? – GhostPool

+0

@GhostPool, hoffentlich sollte meine Bearbeitung Ihnen mehr geben, um weiterzumachen. –

0

Der genaue Ansatz hängt davon ab, welches Plug-In Sie für den Schieberegler verwenden, aber Sie möchten zunächst eine Funktion an das Ereignis anpassen. Hier einige Dokumentation dazu: http://api.jquery.com/resize/

Und ein Beispiel:

$(function() { 
    $(window).resize(function() { 
     //do your resizing stuff here 
     alert('You resized me!'); 
    }); 
}); 
+0

Ich hätte sagen sollen, dass ich diese Route heruntergefahren habe, ich habe mehrere verschiedene Lösungen mit der jQuery resize-Methode gegoogelt, aber ich kann es scheinbar nicht zum Laufen bringen. Tatsächlich erzeugt die Verwendung des obigen Codes nicht einmal eine Warnung, wenn ich die Größe des Fensters in irgendeinem Browser ändere - oder ist das nicht beabsichtigt? – GhostPool

0

der folgende Code wird empfangen für das Ändern der Größe

(function ($){ 
    $(window).resize(function(){ 
    var w = $('#kwicks').width(); 
    var eachw = (w/5.0); 
console.log(w,eachw); 
    $('.kwick').css('width',eachw+'px').css('left',function(idx){return idx*eachw}); 
    }); 
})(jQuery); 

aber Sie müssen auch das Plugin sagen, um die neuen Werte zu verwenden, wenn animieren, und ich weiß nicht, ob sie das unterstützen.

Verwandte Themen