SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Same page with multiple matchMedia queries - newbie question

    Hello everyone,

    I'd be very happy if someone could please help me out. I'm learning website design and JavaScript is presenting a few difficulties.

    I have the following code on my webpage:

    Code:
    <script type="text/javascript">
    if (matchMedia) {
            var mquery = window.matchMedia("(max-width:601px )");
            mquery.addListener(widthChange);
            widthChange(mquery);
    }
    function widthChange(mquery) {
            if (mquery.matches) {
    document.getElementById;
                    
            }
            else {
    document.getElementById;
    
            }
    }
    </script>
    
    <script type="text/javascript">
    if (matchMedia) {
            var mq = window.matchMedia("(max-width:484px )");
            mq.addListener(WidthChange);
            WidthChange(mq);
    }
    function WidthChange(mq) {
            if (mq.matches) {document.getElementById;
                    
            }
            else {document.getElementById;
                    
            }
    }
    </script>
    The scripts work when the if else statements are between their own opening/closing <script> tags (as per the above code), but not if I add them all to single opening/closing <script> tags. I wanted to move most of my JavaScript to an external file, so this is a bit of a dilemma. Only the first if (matchMedia) statement appears to work when I add both statements to an external JavaScript file.

    What am I missing?

    Thanks in advance!!!



    I've removed unnecessary code after document.getElementById because it has no bearing with regards to the problem at hand.
    Last edited by Pullo; Jul 4, 2013 at 02:42. Reason: Added code tags

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RedBishop View Post
    What am I missing?
    Perhaps there's something that I'm not quite understanding in your explanation.
    Can you please show us what you attempted which didn't work?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    thank you for your reply.

    I'm trying to design a responsive website, and I have 2 matchmedia if statements on my webpage. When I move these scripts to an external JavaScript file only the first if (matchMedia) statement will work.


    Only the first if (matchMedia) statement will work in the following code:

    <script type="text/javascript">
    if (matchMedia) {
    var mquery = window.matchMedia("(max-width:601px )");
    mquery.addListener(widthChange);
    widthChange(mquery);
    }
    function widthChange(mquery) {
    if (mquery.matches) {
    document.getElementById;

    }
    else {
    document.getElementById;

    }
    }

    if (matchMedia) {
    var mq = window.matchMedia("(max-width:484px )");
    mq.addListener(WidthChange);
    WidthChange(mq);
    }
    function WidthChange(mq) {
    if (mq.matches) {document.getElementById;

    }
    else {document.getElementById;

    }
    }
    </script>

    Is this because the first statement interferes with the second statement? Do I need to "close" or keep the statements separate from one another?

    Thank you!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RedBishop View Post
    Is this because the first statement interferes with the second statement? Do I need to "close" or keep the statements separate from one another?
    You may want to give the functions different names in this situation.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    sorry for the late reply!

    I already have different names for the functions. Have I written the if (matchMedia) statements in the correct manner? How else would I code these scripts?

    If anyone knows.

    Thank you

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RedBishop View Post
    I already have different names for the functions. Have I written the if (matchMedia) statements in the correct manner? How else would I code these scripts?
    What are you wanting them to do? Currently it seems that nothing is being done regardless of whether things match or not.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    thanks for getting back to me.

    I have two separate events that occur when the window is minimized. At a max-width of 601px I need to display something; above 601px it is hidden. The same goes for when the window has a max-width of 484px.

    The scripts work fine when they are separated:

    <script type="text/javascript">
    if (matchMedia) {
    var mquery = window.matchMedia("(max-width:601px )");
    mquery.addListener(widthChange);
    widthChange(mquery);
    }
    function widthChange(mquery) {
    if (mquery.matches) {
    document.getElementById('foo').style.display='block';
    }
    else {
    document.getElementById('foo').style.display='none';
    }
    }

    </script>

    <script type="text/javascript">
    if (matchMedia) {
    var mquery = window.matchMedia("(max-width:484px )");
    mquery.addListener(WidthChange);
    WidthChange(mquery);
    }
    function WidthChange(mquery) {
    if (mquery.matches) {
    document.getElementById('bar').style.display='block';
    }
    else {
    document.getElementById('bar').style.display='none';
    }
    }
    </script>

    They no longer work when they follow one another in an external JavaScript file.
    if (matchMedia) {
    var mquery = window.matchMedia("(max-width:601px )");

    // rest of code here

    }
    if (matchMedia) {
    var mquery = window.matchMedia("(max-width:484px )");

    // rest of code here

    }

    Then only the first script will work.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RedBishop View Post
    Then only the first script will work.
    Yes, that would seem to be because you have two functions with the same name being defined.

    Try naming them something different, or using just the one function and pass as a parameter the element that you want them to work with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am I not already using different function names?

    The first script has width with a small letter.
    mquery.addListener(widthChange);

    The second script:
    mquery.addListener(WidthChange);

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RedBishop View Post
    Am I not already using different function names?

    The first script has width with a small letter.
    mquery.addListener(widthChange);

    The second script:
    mquery.addListener(WidthChange);
    Oh boy, yes - no wonder is was missed. Capital first letters of functions should be reserved only for object constructor functions.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    thank you for your assistance.

    I have tried other function names but they haven't made any difference.

    For the time being, I'm going to include one of the scripts in my webpage <head> and the other one in my external JavaScript file, until I find another solution.

    There are plenty of other problems that require my attention!

    Thanks again

    Cheers


Tags for this Thread

Bookmarks

Posting Permissions

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