Is it possible to conditionally change a div tag based on the screen size of the user?

4 Views

I have a snag in a static website to wordpress theme translation. The original navbar in the website has a host of jquery’s and custom javascript for navigation. It makes really pretty animated transitions for hover and mouse over events (and the client does not want to change it).

I would like to swap the the navigation bar for smaller screen sizes. So I add some css to the media query rules that I set up but the custom.js file still wants to play with my new nav bar because of the div id and or class, which is made in the php header for the wordpress files.

Read More

So the basic question is how do I swap the the div id or class based on the size of the browser? My original div is: 

<div id="main_navigation" class="main-menu" role="navigation">
<?php html5blank_nav(); ?>
</div><!-- NAVIGATION CLOSE -->

Many thanks for any advice?

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. Maybe this solution looks weird, but if you can’t disable the custom.js file for smaller screen sizes, then you have to be sure that any script that makes changes to the html of navigation is executed before the custom.js file. And it will not guarantee that everything will work without problems.

    This solution uses html templates to create the navigation on server side. Template is stored as 'text/template' script in footer.

    Put this above wp_footer(); call in footer.php file.

    <script id="nav_menu_tpl" type="text/template">
<?php html5blank_nav(); ?>
</script>

    Replace original nav ( <div id="main_navigation" ... </div> ) with placeholder:

    <div id="navigation_placeholder"></div>

    And, finally, put this script below placeholder ( or enqueue with wp_enqueue_script() if you like ):

    <script>
    jQuery(function ($) {
        // change to desired min value of screen
        if ( $(window).width() > 420 ) {
            // here we will replace the placeholder with navigation for large screens
            $( "#navigation_placeholder" ).replaceWith( '<div id="main_navigation" class="main-menu" role="navigation">' + $( '#nav_menu_tpl').html() + '</div>' );
        } else {
            // and here for smaller screens, change "<div id="main_navigation" class="main-menu" role="navigation">" with yours html
            $( "#navigation_placeholder" ).replaceWith( '<div id="main_navigation" class="main-menu" role="navigation">' + $( '#nav_menu_tpl').html() + '</div>' );
        }
    });         
</script>

    It is fairly flexible and easy solution, because now you have full control over html. You can, for example, create two completely different templates for different screens, or just modify the wrapper of the navigation.

  2. You can get window height and with via jQuery .height() and .width() methods. Then you’ll need to use .attr('class') to fetch the class and do any kind of modification. Something like this:

    if(($(window).height()<anyHeight) && ($(window).width()<anyWidth)){
    $('#main_navigation').attr('class',nameOfTheNewClass);
}

    Don’t forget to wrap this function into a $(document).ready or something similar in order to assure it will be properly loaded.

  3. Maybe you can use something like this with jquery

    if ($(window).width() < 440) {
    $('#main_navigation').removeClass('main_menu').addClass('name_of_class');
} else {
    $('#main_navigation').addClass('main_menu').removeClass('name_of_class');
}

    Change 440 for any value you want to be the screen width.
    You are going to firs remove the class the nav already have .main-menu and then you are going to add your own class to control the nav .name_of_class

    In the else statement, you are just going back to the default class it was.

    You can also take a look in here: http://api.jquery.com/addclass/

    Hope it helps.