Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 2 of 2 FirstFirst 1 2
Results 11 to 18 of 18
  1. #11
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Orientation is another media query, just like max-width, min-width, etc,. There's also a pixel ratio query. They're all part of media queries and can be chained together using logical operators.

    If you use the $(document).ready() method, it does everything when the DOM is ready to be manipulated. That will have nothing to do with media queries, which are calculated and redrawn every time the queried property changes. You can do that with JavaScript, but I'm telling you there's no need to, and in fact, your site will perform better if you don't use JS.

    The script you have to clone the menu and add the class is really all you need. Control the rest with media queries. It will do exactly what you're wanting without less performant JS.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  2.  

  3. #12
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    I've got about 5 media queries for typical or general screen sizes but even with the media queries, I'm still experiencing the problem where the menu doesn't open and clone doesn't work when the screen has changed size which you've pointed out has to do with the jquery DOM.

    So already with the media queries (as mentioned about 5 media queries), when a guy with a tablet loads my website whilst in portait view, the onpage jquery DOM works out the media queries specific to that screen size but when the guy turns his tablet to portrait view, although the layout of the website changes accordingly to other media queries, my problems with the menu not opening / or cloning not working is still there (and I assume that's got to do with the jquery we've got onpage - the jquery code you've given me).

    So I hear what you're saying about the media queries, I just don't think the problem with the menu not opening / cloning not happening can be resolved using CSS (because I'm already using CSS / media queries to sort the problem out).

    Put it this way, If I completely remove the jquery for cloning the menu:

    Code:
    jQuery(document).ready(function($){   var pageWidth = $(window).outerWidth(true);   if (pageWidth > 767){     $(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));   }   $(window).on("scroll", function () {     $("body").toggleClass("slidedown", ($(window).scrollTop() > 700));   }); });
    ... my menu works (100%) fine in terms of opening up without having to refresh the page in order to open the menu up when changing from landscape / portrait views etc... which tells me my media queries is fine. I'm not sure if you understand what I'm trying to get?

    I'll fiddle around nevertheless to see what I can do...

  4. #13
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Ok. Here's where you're confused:
    Quote Originally Posted by reflex84 View Post
    ...when a guy with a tablet loads my website whilst in portait view, the onpage jquery DOM works out the media queries
    jQuery, and JavaScript in general for that matter, don't have anything to do with media queries. The goal was to use jQuery to add a class based on the screen size, which we were only doing when the DOM (which also has nothing to do with jQuery, but is a representation of the document's HTML and CSS as a JavaScript object) loaded.

    Here's where I got confused:
    Quote Originally Posted by reflex84 View Post
    my problems with the menu not opening / or cloning not working is still there (and I assume that's got to do with the jquery we've got onpage - the jquery code you've given me).
    I guess I got so lost in the orientation media query thing I forgot what the original issue was.

    Let's take a step back. Remove the jQuery I gave you and restore what you had before, which IIRC, cloned the menu when the user scroll down a certain amount. Then, unless I'm still misunderstanding, just add a CSS rule with a media query below 767px that sets .shrink to display:none; and see if that works. That way, in your scenario, the media query would recalculate and show the menu when the user switches to landscape, assuming the device is more than 767px wide in landscape. If that doesn't work, just put the page up somewhere and post a link to it so I can play with it.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #14
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    I will respond better in a bit .... you can view the site on http://www.nhoxani.com/2014

  6. #15
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    just add a CSS rule with a media query below 767px that sets .shrink to display:none; and see if that works.
    I've done this already hey and it didn't work... in fact, I've organised that the GALLERY page doesn't have your jquery code (only the gallery page - all the other pages still have your jquery code in it) except the previous code of:

    jQuery(document).ready(function($){
    $(".menu_wrapper").before($(".menu_wrapper").clone ().addClass("shrink"));
    $(window).on("scroll", function () {
    $("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
    });
    });
    and in my media query below 767px (when the navigation menu prepends to be a dropdown), the css is set to:

    .shrink { display:none}
    .slidedown .shrink { display:none}
    Now you'll notice on the gallery that all works well except the menu doesn't want to open up.
    ---------------------
    EDIT:

    ---------------------

    just add a CSS rule with a media query below 767px that sets .shrink to display:none; and see if that works.
    This actually DID work (never displayed .shrink which is what display:none is supposed to do of course) but my navigation menu just doesn't want to drop down for some bizarre reason and I can only assume it's the jquery that's somehow effecting it.

    You'll see when you visit my website ...
    Last edited by reflex84; Aug 22nd, 2014 at 10:16 AM.

  7. #16
    Member DerrickE's Avatar
    Join Date
    Jul 2007
    Location
    Houston, TX
    Posts
    58
    Member #
    15580
    Liked
    10 times
    Your code doesn't account for screen size changes, only for the initial size.

    Add .prop('id','menu_wrapper_clone') to your document ready code.

    Then you'll need to add a resize handler as well. If the window grows bigger, add the clone in if it's not already there. If it shrinks, remove it if it's below the threshhold.

    Code:
    $( window ).resize(function() {
        var pageWidth = $(window).outerWidth(true);
        if (pageWidth > 767){
            if(!$('#menu_wrapper_clone').length) $(".menu_wrapper").before($(".menu_wrapper").clone().prop('id','menu_wrapper_clone').addClass("shrink"));
        }
        else {
            $('#menu_wrapper_clone').remove();
        }
    });

  8. #17
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    @DerrickE

    Thanks for your post and help - I appreciate it

    Your code doesn't account for screen size changes, only for the initial size.
    Add .prop('id','menu_wrapper_clone') to your document ready code.
    Ok before I go simple jack on you ... I am adding:

    .prop('id','menu_wrapper_clone')
    to document ready code which is:

    jQuery(document).ready(function($){
    and then beneath that, I'll have the code you've posted:

    $( window ).resize(function() { var pageWidth = $(window).outerWidth(true); if (pageWidth > 767){ if(!$('#menu_wrapper_clone').length) $(".menu_wrapper").before($(".menu_wrapper").clone ().prop('id','menu_wrapper_clone').addClass("shrin k")); } else { $('#menu_wrapper_clone').remove(); } });
    Now I see you've added an ID of #menu_wrapper_clone ... do I need to add any css rule to this ID?

    So my code should look:

    jQuery(document).ready(function($){

    .prop('id','menu_wrapper_clone')

    $( window ).resize(function() {
    var pageWidth = $(window).outerWidth(true);
    if (pageWidth > 767){
    if(!$('#menu_wrapper_clone').length) $(".menu_wrapper").before($(".menu_wrapper").clone ().prop('id','menu_wrapper_clone').addClass("shrin k"));
    }
    else {
    $('#menu_wrapper_clone').remove();
    }
    });

    });
    ?

  9. #18
    Member DerrickE's Avatar
    Join Date
    Jul 2007
    Location
    Houston, TX
    Posts
    58
    Member #
    15580
    Liked
    10 times
    addClass("shrin k")); should be shrink

    I meant put the .prop() part on
    $(".menu_wrapper").before($(".menu_wrapper").clone ().prop('id','menu_wrapper_clone').addClass....


Page 2 of 2 FirstFirst 1 2

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 01:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com