Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to change my Javascript depending on screen width?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #33295
    Arde
    Participant

    Hi

    I’m a noob with javascript and cant understand how to make this work.

    I’m using Media Queries for layout in mobile phones on my webpage and i would like to turn of fancybox and jFlow slider if the screen width is 480px and under.

    Here is my Javascript:

    $(function() {
    $("div#controller").jFlow({
    slides: "#slides",
    width: "290px",
    height: "284px"
    });

    });

    $(document).ready(function() {

    $("a[rel=works-group]").fancybox({
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'inside',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
    return 'Work ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';
    }
    });
    });


    I think it sould work with something like this but i cant figure it out how to implement it in code:

        if (screen.width > 480) {

    slideUp/slideDown/fadeIn/fadeOut

    } else {

    show/hide

    }

    Can someone push me in the right direction?

    #82514
    jamygolden
    Member

    Check out resize().
    And for the window width:

    $(window).width();   // returns width of browser viewport

    Add those two together with an if statement and you’ve got what you’re looking for :p

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.