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 wele! Thanks for your time!

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 wele! Thanks for your time!

• javascript
• html
• css
• conditional-statements

Share Improve this question Follow asked Oct 20, 2011 at 19:07 DarrenDarren 1,11511 gold badge1010 silver badges1313 bronze badges 1

• can do without the bolds. Real eye catching! – Jawad Commented Oct 20, 2011 at 19:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can conditionally load a script with jQuery:

http://api.jquery./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

But here's a way that might work now:

in the head section of your app:

<script type="text/javascript" src="http://code.jquery./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./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>

you can use mediaqueries.js http://code.google./p/css3-mediaqueries-js/ i prefer adapt.js https://github./nathansmith/adapt

As Matt H (+1) correctly pointed out, you can conditionally load a script using JS.

Also, you can see an article which deals with Viewport size here.