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 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times

    How to remove clone() rule in Javascript when screen is smaller than ...

    Hi,

    I've been fiddling around with my navigation menu and decided to add a feature when you scroll down past a certain point the NAV slides down into viewport so that the user doesn't have to scroll back up to the top of the page to navigate. This is something that's become quite popular lately.

    So I fiddled around and this javascript did the trick (note that I am not fluent with jquery at all):

    Code:
    jQuery(document).ready(function($){
        $(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
        $(window).on("scroll", function () {
            $("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
        });
        
    });
    Now I read that as ... duplicate or 'clone' (make another) .menu_wrapper element before the original + add the class .shrink to it ... AND only once we've scrolled past 700px, we'll see this duplicate NAV because of the class .slidedown

    CSS:

    Code:
    .shrink { position:fixed; top:-400px; left:0; width:100%; border-top: 0px solid #35d3c3; z-index:99999}
    .slidedown .shrink { top:0;}
    Now this is working 100% and I'm stoked BUT (it's never smooth sailing is it!!!) now I've got a problem when I change my viewport to a screen width less than 767px - YES my website is responsive and this is where my NAV changes to the typical drop down (even without the javascript / effect above) by using css and javascript:

    Code:
    jQuery(document).ready(function($){
        $('.menu_wrapper').prepend('<div id="menu-icon">Menu</div>');
        $("#menu-icon").on("click", function(){
            $("#menu").slideToggle();
            $(this).toggleClass("active");
        });
    });
    My problem is that there is now a duplicate dropdown prepended NAV (1 on top of the other), like so:

    -----------------------------------
    + MENU
    -----------------------------------
    -----------------------------------
    + MENU
    -----------------------------------

    The one NAV works but the other doesn't ... anyway regardless, when my media query hits 'mobile status' (below 767px) and the NAV prepends to a dropdown, this is when I DON'T want the whole slide-down-effect-clone (first jquery posted above) thing anymore. I want that rule to almost not exist or not apply when I'm below 767px screen width. How can I do this?

    I've tried one of the obvious like:

    .shrink { display:none}
    .slidedown .shrink { display:none}
    which almost seems like I've hit the jackpot leaving me only 1 prepended menu:

    -----------------------------------
    + MENU
    -----------------------------------

    but nothing happens when I click on it - it doesn't slidedown and show the menu items (maybe a simple solution lies here?).

    ... but I'm thinking like adding a rule within the javasacript:

    Code:
    jQuery(document).ready(function($){
        $(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
        $(window).on("scroll", function () {
            $("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
        });
        
    });
    that when we get below a width of 767px, we ignore the clone() function / rule etc?

    I've done some googling of removeclass etc but because I'm a bonehead at javascript, I'm probably doing it all wrong ... (Ronald and Msliem know already haha).

    Any help I'd appreciate it?

  2.  

  3. #2
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    Hmmmm can anyone help me here?

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    What you need to do is pull the width of the page and if it's over 767px, trigger the statement with the .clone() method.

    I could spend some time making this a little prettier, but here's how it would look in the code you already have:

    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));
      });
    });
    Last edited by Ronald Roe; Aug 21st, 2014 at 07:23 AM.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    Thanks, that code was exactly what I was looking for (only triggering the code after a certain width -awesome idea)! Works 100% ... though, I do have a little bit of a problem:

    1)
    When I view my website at my full screen width and then resize my browser below 767px (to typically test the media queries and the code you've given me etc), the prepended menu button:

    -----------------
    + Menu
    -----------------

    doesn't drop down to show my menu items BUT only if I refresh my page (at that same browser width - still below 767px), then the button works.

    2) Then kinda the opposite happens ... when I open my website starting off with the browser below 767px wide and click the menu button (this problem doesn't happen when I don't click on the menu button), then resize my browser to my full screen width (1440px), the menu doesn't do it's clone() function.

    I keep thinking this kinda problem is like a display:block / display:none issue ...

    (Haha, I hear what you're saying about neatness or "prettiness" of the code, though with when it comes to jquery, I'm like if it works, then it's pretty, lol!)

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    1) Yes, that will happen, because the measurement is taken when the DOM is ready (jQuery(document).ready(...)). You can add an event listener to listen for a resize, but it's not likely to be necessary except in certain edge cases.

    2) See #1. Same answer.


    Quote Originally Posted by reflex84 View Post
    (Haha, I hear what you're saying about neatness or "prettiness" of the code, though with when it comes to jquery, I'm like if it works, then it's pretty, lol!)
    That comment really didn't have as much to do with jQuery as it did the fact that I was just jamming the logic into your existing function, which isn't generally the way I do things. I chose to go the route I did to help you understand what I was doing. If you're interested, I can show you how I would have done it if I'd written it from scratch.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    1) Yes, that will happen, because the measurement is taken when the DOM is ready (jQuery(document).ready(...)). You can add an event listener to listen for a resize, but it's not likely to be necessary except in certain edge cases.
    Ohhhh rightyyy ... at least there's a reasonable explanation for this (and not really a problem that needs to be solved). Okay so my reason for wanting to add an event listener would be ... let's say someone has a tablet that has a screen size smaller than 767px when it's held long ways vertically and then when it's held long ways horizontally, the viewport width is larger than 767px which can result in the user experiencing the issues I did.

    So how would be add ears / eyes to this code? Let me guess, change the
    (jQuery(document).ready(...))
    to something else?

    I hear what you're saying about "jamming logic ..." - basically it's a quick fix / sloppy job (even though it'll work).

    If you're interested, I can show you how I would have done it if I'd written it from scratch.
    yeah, go ahead (if it isn't too much trouble)

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by reflex84 View Post
    let's say someone has a tablet that has a screen size smaller than 767px when it's held long ways vertically and then when it's held long ways horizontally, the viewport width is larger than 767px which can result in the user experiencing the issues I did.
    In that case, instead of using an event listener, I would use the orientation media query.
    Quote Originally Posted by reflex84 View Post
    yeah, go ahead (if it isn't too much trouble)
    It isn't much trouble at all. I'll try to do it this evening.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    In that case, instead of using an event listener, I would use the orientation media query.
    Interesting... I never knew about ORIENTATION till now, thanks for that article nevertheless. Though there are so many different screen sizes out there that all have PORTRAIT and LANDSCAPE "modes" ... so shouldn't there be different orientation queries for the various screen sizes that can obviously go into PORTRAIT and LANDSCAPE "modes"? otherwise it looks like there is only 1 orientation query for all screen sizes? Put it this way, I don't see much difference between orientation queries and the general media queries being used? Though I might have overlooked the point of orientation queries...

    Regardless... I don't think orientation queries is the solution as we've already worked out that it's the DOM ready (jquery part not CSS) that needs to be changed to now listen... which is what my css is already doing - or is the CSS (media query) the "event listener" you were referring to?

    Am I confused?

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You would combine queries like so:
    Code:
    @media (orientation:landscape) and (max-width:767px){ /* STYLES AND WHAT-NOT */ }
    You are just a little confused. You set event listeners in JavaScript, but I'm telling you that you won't need to. You'll just use orientation queries with width queries to set the styles for the class you're adding with jQuery.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    You'll just use orientation queries with width queries to set the styles for the class you're adding with jQuery.
    If a DOM (jquery) is already worked out when the website is loaded in a portrait view for example, surely that overrides a media query when the device is changed to landscape view? Because that's what I'm already experiencing. To me (correct me if I'm wrong) ... orientation query is the same as a media query ... the only difference is the understanding of width (media query) against width vs height (orientation query) ... so because I'm already using media queries there's no difference to me using orientation queries?


Page 1 of 2 1 2 LastLast

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 08:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com