close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

javascript degrading for browsers not enabled

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

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 ?

Sign in to reply to this post

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>
Sign in to reply to this post

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

Sign in to reply to this post

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.

Sign in to reply to this post

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

Sign in to reply to this post

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.

Sign in to reply to this post

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

Sign in to reply to this post

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.

Sign in to reply to this post

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.)

Sign in to reply to this post

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

Sign in to reply to this post
loading

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.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...