Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › General / Announcements › JavaScript › javascript degrading for browsers not enabled

javascript degrading for browsers not enabled

Thread began 5/23/2010 3:36 pm by CraigR | Last modified 5/25/2010 6:52 am by Jason Byrnes | 3996 views | 10 replies |

5/23/2010 3:36 pm | #1 CraigRBeta Tester

javascript degrading for browsers not enabled

i have employed a few javascript plugins, based on jquery and mootools, which degrade nicely when using image slideshows.

when using textual content such as news tickers etc, i want to give users with javascript enabled, the page as intended, but for those whose js in disabled, the page should still appear nice.

is there an 'accepted' way of showing /hiding content, presumably by setting the css in js ?

5/24/2010 8:13 am | #2 Jason ByrnesWebAssist

this is done using the <noscript> tag. for example:

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

5/24/2010 8:25 am | #3 CraigRBeta Tester

Hi.

Can I give an example to show what I mean,

I have a page demonstrating a javascript news ticker.

With javascript enabled, it works fine.

If javascript is disabled, the content of the news ticker is revealed as an unordered list.

i would like to hide the list and display an alternative message if javascript is disabled.

bbcticker.php

5/24/2010 9:17 am | #4 Jason ByrnesWebAssist

create a div for the news ticker, and set it to what should be shown for browsers with JS disabled
<div id="newsTicker">
js is disabled
</div>

then use js to change the innerHTML on page load:

script type="text/javascript">
function setTicker() {
document.getElementById('newsTicker').innerHTML = '<ul id=\"news\">\n\
	<li>You can have a series of new items, either containing links...</li>\n\
    <li><a href=\"http://www.forthwebsolutions.com\">Link to Forth Web Solutions Web Site</a></li>\n\
    <li>Or alternatively you can have a news item with just text</li>\n\
    <li>After the last news message, the list continues from the start</li>\n\
</ul>';
}
</script>
</head>

<body onLoad="setTicker()">
<div id="newsTicker">
js is disabled
</div>

this way, the div will only show the ticker list if js is enabled.

5/24/2010 9:48 am | #5 CraigRBeta Tester

Thanks for the reply Jason.

That code works in that it successfully shows or hides the div successfully, but when js is enabledm the ticker no longer works.

I tried pasting the script in the head both before and after the existing js elements.

amended page is here..

bbcticker2.php

5/24/2010 10:10 am | #6 Jason ByrnesWebAssist

perhaps instead of using the setTicker function, add the document.getElementById('newsTicker').innerHTML inside the $(document).ready(function():

$(document).ready(function() {
 

  var options = {
    newsList: "#news",
    startDelay: 10,
    placeHolder1: " "
  }
document.getElementById('newsTicker').innerHTML = '<ul id=\"news\">\n\
	<li>You can have a series of new items, either containing links...</li>\n\
    <li><a href=\"http://www.forthwebsolutions.com\">Link to Forth Web Solutions Web Site</a></li>\n\
    <li>Or alternatively you can have a news item with just text</li>\n\
    <li>After the last news message, the list continues from the start</li>\n\
</ul>';
  $().newsTicker(options);
});

Not really sure of the best way to integrate the solution into your ticker function, but the concept is to show the disabled content by default , and use javascript to change it if enabled. you will need to play with how to implement the idea.

5/24/2010 10:17 am | #7 CraigRBeta Tester

The suggestion you posted doesn't work, but I understand the concept.

I'll have a play with it.

Is the best/only way to implement this via onLoad in the body tag ?

Regards

5/24/2010 10:28 am | #8 Jason ByrnesWebAssist

It looks like you are using mootools to implement the ticker which uses:
$(document).ready(function() {

instead of onload.

If you view the page in fire fox and check the error console,
you see the following:
Error: settings.newsLinks[currentItem] is undefined
Source File: bbc_newsticker.js
Line: 52

basically the list isn't being created before it is being used. you need to find a way to modify the script so that the ticker list gets created it is used.

5/24/2010 11:00 am | #9 CraigRBeta Tester

Thanks Jason.

it's a jQuery pligin, i'll check out the firebug.

Thanks for pointing me in the right direction, i have found a couple of jquery tutorials.

Will post back when working.

(I have been planning on learning jquery for a while, looks like it's time.)

5/25/2010 2:26 am | #10 CraigRBeta Tester

sorted

This being a jquery plugin, I adopted the following...

created a div in the css and set display:none;

in the script in the page head, after $(document).ready(function() {
add the line $('#divname').show();

this will only show the div if js is enabled.

conversely to this, for non-js enabled browsers, $('#nonjsdivname').hide(); added in addition to the line above will hide content only if js is enabled.

tested in FF3 and chrome

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.