0

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;

}
}
user3150583
  • 125
  • 1
  • 2
  • 10
  • 3
    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 Aug 01 '14 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 Aug 01 '14 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 Aug 01 '14 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 Aug 01 '14 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 Aug 01 '14 at 14:36
  • @AndrewPolland this is my understanding that PHP parsing is done at the server. Browsers don't see PHP tags. What comes out to the browsers is HTML page without any php tag. Even if there were variables set in JS code, browser still can't figure out what to do with ?php tag. Browsers don't run PHP code. – Allen King Aug 01 '14 at 15:11
  • @AllenKing Yes, which is why the code posted is the server side code. By the time the browser gets it, the variables will have been replaced by the server. The server will never see the php, instead it will receive whatever text is set in its place by the php. – AndrewPolland Aug 01 '14 at 15:17
  • @AllenKing A bit like how JS and PHP are shown used together here: http://stackoverflow.com/questions/5895842/how-to-assign-php-variable-value-to-javascript-variable I've realised I possibly didn't word by comments in the best way, but hopefully this link will show the point I'm making. – AndrewPolland Aug 01 '14 at 15:21
  • @AndrewPolland I think you are missing the point. What you are showing through that link is the code that is executed at the server and comes to the browser. Here, if window.width > 719, this – Allen King Aug 01 '14 at 16:12
  • @AllenKing I'm really confused. Because I have not said that the – AndrewPolland Aug 01 '14 at 16:20
  • @AndrewPolland you stated "Because I have not said that the – Allen King Aug 01 '14 at 16:56
  • 2 years later, here's a proper explanation of how PHP and JS can work together. http://www.ampzone.com/blog/how-you-can-use-php-within-javascript – AndrewPolland Mar 16 '17 at 08:20

2 Answers2

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;}

Pixelomo
  • 6,373
  • 4
  • 47
  • 57
  • Will this technique just hide the elements or will the styling behave as if they weren't there at all? – user3150583 Aug 01 '14 at 14:23
  • 1
    "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. – Paulie_D Aug 01 '14 at 14:23
  • the styling will behave as if they aren't there but they will still exist within the DOM – Pixelomo Aug 01 '14 at 14:28
  • @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 Aug 01 '14 at 14:32
  • You probably have a syntax error in your CSS. You'd have to post the whole thing for us to know what's wrong. [Read this first](http://css-tricks.com/css-media-queries/), it has lots of examples to use. – Blazemonger Aug 01 '14 at 14:35
  • Thanks, I'll take a look. I edited my comment above. I think there is something wrong with the way I've set up my media queries. – user3150583 Aug 01 '14 at 14:38
  • yep there must be a syntax error with your media queries code, can you set up a fiddle or something? – Pixelomo Aug 01 '14 at 14:45
  • 1
    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. – user3150583 Aug 01 '14 at 14:46
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>")
Maibock
  • 1
  • 1