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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with document.getElementById

    I am trying to display a section of text depending on the size of the screen. The code I have does this and is as follows:-

    <script type="text/javascript">
    <!--
    function myFunction() {
    if (screen.width<1200)
    {
    document.getElementById('myText').innerHTML = 'Click for Mobile Page';
    }
    else {
    document.getElementById('myText').innerHTML = 'Empty';
    }
    }
    //-->
    </script>

    I am able to get the correct text ('myText) to appear but only after a used clicks on a Button as follows:-

    <button onclick="myFunction()"></button>
    <div class="mobile-site"><div id="myText"></div></div>

    What I need is for 'mytext' to appear automatically with no need for a click on a button. I also need to be able to format the text output to suit my site.

    Really would appreciate some help as I have been struggling with this for several days. Thanks.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    I woul dbet you are including this code in your head section?just put the script block in the bottom of the page before the closing body tag

  • #3
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    This should be rather done using CSS media queries – use a search engine of your choice to see what it is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Kill the function. Put the JS after the <div>.

    Dirt simple:
    Code:
    <div class="mobile-site"><div id="myText"></div></div>
    <script type="text/javascript">
    if (screen.width<1200)
    {
        document.getElementById('myText').innerHTML = 'Click for Mobile Page';
    } else {
        document.getElementById('myText').innerHTML = 'Empty';
    }
    </script>
    Slightly simpler:
    Code:
    <div class="mobile-site"><div id="myText"></div></div>
    <script type="text/javascript">
    document.getElementById('myText').innerHTML = 
        screen.width < 1200 ? 'Click for Mobile Page' : 'Empty';
    </script>
    Oh...and kill the ridiculous <!-- ... //--> stuff. When MSIE 5 arrived on the scene in about 1998 that became obsolete.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    robinantill (07-21-2013)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    I agree with Airblader. This can be done using pure CSS via media queries. That is how responsive web design is done.

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys, i will try these suggestions and see how io go on. Cheers.


  •  

    Posting Permissions

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