Home/ Questions/Q 6715033
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:33:56+00:00

I wonder if anyone can work this HTML, CSS, Javascript puzzle out? I’m using

  • 0

I wonder if anyone can work this HTML, CSS, Javascript puzzle out?

I’m using an @media viewport CSS declaration to detect mobile screen sizes, which minifies my website for mobile visitors, purely using CSS which is nice as I only have 1 website to update, not 2. So far so good… 🙂

However, in my HTML there’s a line of code referencing a Javascrit file that makes this really nice ‘soft scrolling’ effect on the main navigational ul li a links (eg ).

This all works fine on the normal version of the site, but for some unknown reason it stops the navigation working altogether on the minified version of the site. If I delete this link to the js/softscroll.js file, then the links on the minified site work fine & I’m OK about loosing this effect on the mini version, but then… the main sites navigation stops! :< I have to have this effect for the main site btw.

So, my question is…

…Is there a way to make some kind of conditional statement, in either HTML or JavaScript (JS I imagine!), that will tell browser to only use that JavaScript (js/softscroll.js) …IF … the visitor is ONLY viewing the normal site, and… obviously ignore the js/softscroll.js file IF the mobile version of the site is being accessed?

Whoaw! I hope you understand what the hell I’m going on about!? Ha! Your probably wondering what I’m trying to achieve here, or why I’m so into this javascript effect? Long story, but let’s just say I’m making one of those crazy side scrolling websites and it’s vital! :0)

So yeh? any help welcome! Thanks for your time!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can conditionally load a script with jQuery:

    http://api.jquery.com/jQuery.getScript/

    if(mainsite) $.getScript('js/softscroll.js');

    UPDATE

    First, when you need Javascript, you REALLY need jQuery. Best to download it and put it on your site – http://jquery.org

    But here’s a way that might work now:

    in the head section of your app:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    Next, you need a way to know if your site is being accessed by a mobile device or not:

    <script>
    var platform = navigator.platform.toLowerCase();
    var mobile = platform.match(/(iphone|ipod|ipad|android)/);

    Then, you need to conditionally load your special script:

        if(!mobile) $.getScript('js/softscroll.js');
</script>

    Those six lines of code, added to the head section of your site, will probably do for now:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
    var platform = navigator.platform.toLowerCase();
    var mobile = platform.match(/(iphone|ipod|ipad|android)/);
    if(!mobile) $.getScript('js/softscroll.js');
</script>
    • 0