jQuery, lägga till CSS på flera element?

Skriv svar

2010-05-13 12:16

Permalänk

JesperA

Medlem ★

Plats: Halmstad
Registrerad: Apr 2003

●

jQuery, lägga till CSS på flera element?

Hej!

Är ganska grön när det gäller jQuery, har en funktion som visar och döljer en "hud" längst nere på sidan, problemet är att när sidan behöver scrollas så kommer nedre delen av footern inte att synas om huden är expanderad, så när huden är expanderar skulle jag vilja lägga till antingen "margin: 0 0 30px 0;" på .footer eller lägga till en till class på div class="footer", någon som har lust att visa hur man gör, vill helst baka in det i befintliga koden så jag minimerar antalet tecken i koden!

Just nu ser det ut såhär:

$('.collapseHud').click(function() {
        $('.collapseHud').css("display","none");
        $('.expandHud').css("display","block");
        $('#hud').css("display","none");
        $.cookie('leftCol', 'collapsed', {expires: 7, path: '/'});
    });
    // When the expand button is clicked:
    $('.expandHud').click(function() {
        $('.expandHud').css("display","none");
        $('.collapseHud').css("display","block");
        $('#hud').css("display","block");
        $.cookie('leftCol', 'expanded', {expires: 7, path: '/'});
    });

Vore riktigt schysst

Edit:

Efter närmare eftertanke så behövs en class eller css läggas till på .footer om en cookie för den expanderade versionen är aktiv:

// Left column state
    var leftCol = $.cookie('leftCol') 
    // Set the user's selection for the left column
    if (leftCol == 'collapsed') {
        $('.collapseHud').css("display","none");
        $('.expandHud').css("display","block");
        $('#hud').css("display","none");
    };
    
    if (leftCol == 'expanded') {
        $('.collapseHud').css("display","block");
        $('.expandHud').css("display","none");
        $('#hud').css("display","block");
    };

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Rapportera Redigera

Citera flera Citera

2010-05-13 12:27

Permalänk

JesperA

Medlem ★

Plats: Halmstad
Registrerad: Apr 2003

●

Hmm, kanske skulle experimentera lite mer innan jag frågade, men kan ju fråga om jag gjorde rätt iaf:

$(document).ready(function() {
// LEFT COLUMN:
    // When the collapse button is clicked:
    $('.collapseHud').click(function() {
        $('.collapseHud').css("display","none");
        $('.expandHud').css("display","block");
        $('#hud').css("display","none");
        $('.footer').css("padding-bottom","20px");
        $.cookie('leftCol', 'collapsed', {expires: 7, path: '/'});
    });
    
    // When the expand button is clicked:
    $('.expandHud').click(function() {
        $('.expandHud').css("display","none");
        $('.collapseHud').css("display","block");
        $('#hud').css("display","block");
        $('.footer').css("padding-bottom","50px");
        $.cookie('leftCol', 'expanded', {expires: 7, path: '/'});
    });

    

// COOKIES
    // Left column state
    var leftCol = $.cookie('leftCol') 
    // Set the user's selection for the left column
    if (leftCol == 'collapsed') {
        $('.collapseHud').css("display","none");
        $('.expandHud').css("display","block");
        $('#hud').css("display","none");
        $('.footer').css("padding-bottom","20px");
    };
    
    if (leftCol == 'expanded') {
        $('.collapseHud').css("display","block");
        $('.expandHud').css("display","none");
        $('#hud').css("display","block");
        $('.footer').css("padding-bottom","50px");
    };
 
});

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Rapportera Redigera

Citera flera Citera

Skriv svar

jQuery, lägga till CSS på flera element?

jQuery, lägga till CSS på flera element?

Externa nyheter

Spelnyheter från FZ