Mobile JavaScript Not working

Discussion in 'HTML & Website Design' started by SidRock7, Apr 28, 2016.

0
  1. #1
    Hi I've just begun to make my website mobile friendly, but I've hit a roadblock. My Javascript code here is not working in mobile but it's perfect for desktops. In device view in chrome it works perfectly but in mobiles the
    "document.getElementById("side").style = 'top:' + topheight + 'px;';"​
    doesn't work. I've alerted the values of width and topheight, they returned their values perfectly. I just want to position an "z-index:1" element so that it doesn't overlap the top elements. I've checked this code on 2 phones of 360px and 320px width.
    Image of the way I want it(Google Developer Tools Device Mode)
    Image of The Painful Truth(Mobile 640x360px)

    NOTE: I'VE OMITTED SOME LINES OF CODE WHICH ARE IRRELEVANT TO ENHANCE READABILITY OF THE CODE, 'CAUSE I'M TALKING ABOUT >50 LINES OF CODE HERE

    ------------------------------------------HERE IS THE CODE------------------------------------
    JAVASCRIPT
    var width = screen.width;
    alert(width);
    if(width < 320){
    window.location.href = "/root/nomobile.php";​
    }
    var topheight = document.getElementById('top').offsetHeight;

    if (document.getElementById("ul") != undefined) {
    width = document.getElementById("ul").offsetWidth;​
    }
    if (screen.width > 319) {
    document.getElementById("side").style = 'top:' + topheight + 'px;';​
    }
    /* Some other code which are irrelevant to the question*/
    HTML
    <div id="top">
    /*Welcome Message If logged in*/
    /*Nav Menu*/
    </div>
    <div id="side" class="w3-sidenav">
    /*Content*/
    </div>


     
    SidRock7, Apr 28, 2016 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Why are you using javascript to do css's job? I haven't looked closely, but your description of the issue tells me the css solution is simplicity itself.

    Rule of thumb? Never use javascript for basic functionality. It's an enhancement, not core.

    cheers,

    gary
     
    kk5st, Apr 28, 2016 IP
  3. SidRock7

    SidRock7 Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    As I mentioned earlier this code is used for responsive design. The value of 'topheight' will change according to device resolution. Since CSS have no method of getting the screen width, I am stuck with js.
     
    SidRock7, Apr 28, 2016 IP
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Do a Google search again. For example: https://davidwalsh.name/device-state-detection-css-media-queries-javascript
    or follow gary's signature to learn more about it.
    CSS rendering engine consumes less power than JavaScript engine on mobile devices, do you know? So help save the earth.
     
    ketting00, Apr 30, 2016 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    No, you're not. Your current design / layout might be, but that just means your layout/design sucks. There is normally no reason _at all_ to do positioning with JS for regular page-elements with predefined proportions. Even fluid layouts with dynamic proportions can in 99% of cases be done using pure CSS. While JS can be good for swapping out classes and such on the fly, or calculating specific values on movable elements, I see no reason why what you have explained should warrant using JS.
    You should probably rethink your code, or give us a link to the site in question so we can see what might be done with it.
     
    PoPSiCLe, Apr 30, 2016 IP