Forum Mjukvara Programmering och digitalt skapande Tråd

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

1
Skriv svar
Permalänk
Medlem ★
●

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?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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?

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara