Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Javascript to run only on small screens

    Hi Everybody. I have a page that has two pricing lists. The lists are supposed to be visible on large screens, then when viewed on mobile phones, they collapse and expand when clicked. You will see when you go the the link that the javascript is kind of working. It did collapse the divs but it shouldn't do that until the screen size is small. It also isn't making anything clickable. Any suggestions and/or solutions are seriously appreciated. Thank you!

    Link:
    http://waxstudios.businesscatalyst.c...vicesTest.html

    Code:
    <script type="text/javascript">
    // Variable to detect window width.
    var windowWidth = $(window).width();
    
    function expander() {
    
    jQuery(document).ready(function() {
      jQuery(".MenuContent").hide();
      jQuery(".Menuheading").click(function()
      {
        jQuery(this).next(".MenuContent").slideToggle(500);
      });
    });
    
    };
    
    // Wait for the page to load
    jQuery(document).ready(function ($) {
        // Trigger function for a certain window width
        if (windowWidth>768) {
            // Load expander.
            expander();
        }
    });
    </script>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok, so first off, I would advise using a much newer version jQuery. -- 1.8.2

    - you dont need a dom.ready in the expander function, because you are already calling it within a dom.ready block
    - you used jQuery instead of $ on almost everything except the windowWidth Variable, so I changed that as I assume you are trying to avoid conflicts, but since I moved it into the dom ready that you have contained, you could use $ if you wanted to.

    - side note you can use $(window).resize(function(){expander();}) to call expander if the viewport size changes

    Code:
    <script type="text/javascript">
    function expander() {
      jQuery(".MenuContent").hide();
      jQuery(".Menuheading").click(function()
      {
        jQuery(this).next(".MenuContent").slideToggle(500);
      });
    };
    // Wait for the page to load
    jQuery(document).ready(function ($) {
    // Variable to detect window width.
    var windowWidth = jQuery(window).width();
        // Trigger function for a certain window width
        if (windowWidth>768) {
            // Load expander.
            expander();
        }
    });
    </script>
    Last edited by DanInMa; 11-08-2012 at 07:17 PM.

  • Users who have thanked DanInMa for this post:

    LaurelRose (11-08-2012)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    I would do it this way, but you may have other concerns

    Code:
    <script type="text/javascript">
    function expander() {
    // Variable to detect window width.
    var windowWidth = jQuery(window).width();
    
     if (windowWidth>768) {
      jQuery(".MenuContent").hide();
      jQuery(".Menuheading").click(function()  {
        jQuery(this).next(".MenuContent").slideToggle(500);
      });
    }
    };
    // Wait for the page to load
    jQuery(document).ready(function ($) {
            // Load expander.
    expander();
    $(window).resize(function(){
    expander();
    });
    });
    </script>

  • Users who have thanked DanInMa for this post:

    LaurelRose (11-08-2012)

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Unfortunately, neither of the codes work, but I do truly thank you both for reading and replying. I think I am ditching the java and attempt to recreate using pure css.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    oh dear. Ok, I see youve but some div's inside of the UL, but outside of the LI in the list.

    - thats not valid html, which is why I was confused sorry.

    ok to work with your current design you need to change :

    Code:
    jQuery(this).next(".MenuContent").slideToggle(500);
    to :

    Code:
    jQuery(this).parent().parent().find(".MenuContent").slideToggle(500);
    or fix the html first.

    - 25 valdiation error sunfortunately , I probabaly shoudl have checked that first:

    http://validator.w3.org/check?uri=ht...Inline&group=0


  •  

    Tags for this Thread

    Posting Permissions

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