Removing And Adding Elements Based On Window Width Using jQuery Doesn't Work

Question

As far as I can tell I have set up my jQuery so that it removes some elements when the window gets too small and puts them back when it gets larger again. Without the code that appends the elements, they remove themselves fine. But with the append code they never disappear. In addition, the jQuery window.width() seems to be different than that of my css media queries. Thanks in advance.

Here is my jQuery:

$(window).resize(function () {

if ($(window).width() < 719) {

    $("#logo").remove();
    $("nav").remove();


}

else if($(window).width() > 719) {

    $("header").append("<nav>

                            <ul>

                                <li><a href = 'index.php' class='<?php if ($section == 'About') { echo 'selected'; }?>'>About</a></li>
                                <li class = 'greyed-out'>/</li>
                                <li><a href = 'work.php' class='<?php if ($section == 'Work') { echo 'selected'; } ?>''>Work</a></li>
                                <li class = 'greyed-out'>/</li>
                                <li><a href = 'contact.php' class='<?php if ($section == 'Contact') { echo 'selected'; } ?>''>Contact</a></li>

                            </ul>

                        </nav>");

    //<div id = "logo"><img src = "img/logo.png"></div>
}

});

Here are my media queries. I had to fiddle around with the jQuery widths in my if statement to get the elements to disappear and corresponding styling to be applied roughly at the same time (719 px != 738):

@media(min-width: 1250px) {

#skills-container {

    margin-left: auto;
    margin-right: auto;

    max-width: 810px;
}
}


@media(max-width: 738px) {

html {

    width: 100%;
    background-image: none;
    border: none;

}

.wrapper {

    width: 100%;
    margin-left: 0;
}

.page-section, footer {

    width: 98%;
    margin-left: 1%;
}

header {

    width: 100%;
    margin: 0;
    background-color: #00bf8a;

}
}

What might be more efficient (and easy) here is using solely media queries to hide/show elements, rather than actually adding/removing them from the DOM with jQuery. Have you considered that option, or are there reasons why it cannot be used? — Serlite
– Serlite, Commented Aug 1, 2014 at 14:15
Pardon my ignorance, but this manipulation is taking place in the browser. How will PHP code (in your append function) run in the browser? — Allen King
– Allen King, Commented Aug 1, 2014 at 14:18
@AllenKing I'm assuming the JS must be within a PHP page, in which case it would get set before the JS runs. But otherwise, that would be a problem. — AndrewPolland
– AndrewPolland, Commented Aug 1, 2014 at 14:22
@AndrewPolland window.resize function will not send the updated page back to the server and browser certainly cannot decipher php locally. May be I am missing something. — Allen King
– Allen King, Commented Aug 1, 2014 at 14:25
@AllenKing Again, I'm only guessing that this is how it's set up. But if this JS is set within a PHP page, won't the PHP variables be set within the JS code on load. Then no matter how many times the JS function is called, the variables won't change, but they will have been permanently set in the code outputted by the server. — AndrewPolland
– AndrewPolland, Commented Aug 1, 2014 at 14:36

Pixelomo · Accepted Answer · 2014-08-01 14:21:11Z

2

Do it using media queries, for example:

Show #skills-container on desktop

@media(min-width: 1250px) {#skills-container {display: initial;} }

Hide #skills-container on tablet

@media(max-width: 738px) {#skills-container {display: none;}

answered Aug 1, 2014 at 14:21

Pixelomo

6,8354 gold badges49 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user3150583 Over a year ago

Will this technique just hide the elements or will the styling behave as if they weren't there at all?

Paulie_D Over a year ago

"Removing" is not the same as "not displaying". Removing will take the element out of the DOM. Display:none will leave it in the DOM but it won't being shown.

Pixelomo Over a year ago

the styling will behave as if they aren't there but they will still exist within the DOM

user3150583 Over a year ago

@AlanSutherland thanks for the response. I looked up in the documentation and display: none; is supposed to achieve the effect I'm looking for. I tried the property on the element outside of my media query. It works there. However, inside my media query it does not.

user3150583 Over a year ago

Thanks everyone for your help. I managed to fix my problem. I just had to apply the display: none; property to both the div and the img inside it. I continually get surprised by the speed and friendliness with which I can get help here! Unfortunately, I don't have enough reputation to up vote, but if I could I would.

|

Maibock · Accepted Answer · 2014-08-01 14:47:47Z

0

I agree with using media queries for this, but to answer why your jQuery isn't working, it's likely because you have carriage returns in your $.append()

$("header").append("<nav>

                        <ul>

                        </ul>
                     </nav>")

Will break for the same reasons you can use a carriage return instead of a semi-colon (;) at the end of a statement in javascript.

Try:

$("header").append("<nav><ul></ul></nav>")

answered Aug 1, 2014 at 14:47

Maibock

11 bronze badge

Collectives™ on Stack Overflow

Removing And Adding Elements Based On Window Width Using jQuery Doesn't Work

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related