The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> JavaScript Development
|
Alternative for javascript, noscript??
Discuss Alternative for javascript, noscript?? in the JavaScript Development forum on Dev Shed.
Alternative for javascript, noscript?? JavaScript Development forum discussing JavaScript and DHTML, AJAX, and issues such as coding cross-browser JavaScript.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
November 18th, 2012, 09:07 PM
|
 |
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
Alternative for javascript, noscript??
Hi, I have an 'about us' page which uses javascript to switch between 'tabs' to display different content. Trouble is, if the user switches off JS in their browser, my page no longer works. I tried using the <noscript> tag to create an alternative but my original content is still being displayed.
Here is my code, which uses the javascript :
Code:
<div id="about_container">
<div id="tabs">
<div id="tab1">
<h4 id="head1" onclick="change_content(1);">History</h4>
</div>
<div id="tab2">
<h4 id="head2" onclick="change_content(2);">General Information</h4>
</div>
</div>
<div id="wrapper">
<div id="tab1content" class="tabBody">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500sLorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500sLorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s</p>
<img src="/GardenableImproved/images/conservatory.jpg" alt="Workplace" title="Workplace" id="workplace_img" border="0" />
</div>
<div id="tab2content" class="tabBody">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by
injected humour, or randomised words which don't look even slightly believable.There are many variations of passages of Lorem
Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't
look even slightly believable.There are many variations of passages of Lorem Ipsum available, but the majority have suffered
alteration in some form, by injected humour, or randomised words which don't look even slightly believable.There are many variations
of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words
which don't look even slightly believable.There are many variations of passages of Lorem Ipsum available, but the majority have
suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many
variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or
randomised words which don't look even slightly believable. or randomised words which don't look even slightly believable. There
are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.</p>
</div>
</div>
</div>
As you can see I have 'tab1' and 'tab2' which both have a heading 4 inside them, which uses the function to change the content when they are clicked. If javascript is turned off, I wanted to create 2 separate div's containing both sets of information separately.
Hope I explained well enough.
Look forward to your replies.
Regards,
NM.
|
November 18th, 2012, 11:13 PM
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
It's not clear to me what you mean by this:
Quote: | If javascript is turned off, I wanted to create 2 separate div's containing both sets of information separately. |
Anyway, I would not use noscript elements. The best approach is to use progressive enhancement techniques for writing the JavaScript. I suggest you read these:
You cannot rely on JavaScript being available. Period.
Progressive Enhancement and the Future of Web Design
Accessibility is seldom just up to the interface developer
"This is not another XMLHttpRequest article"
Here's an old demo which does something similar to what you're doing. It's a basic example of progressive enhancement.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript"><!--
function toggleDisplay(elId) {
if(!document.getElementById) return;
var el = document.getElementById(elId);
if(!el || !el.style) return;
el.style.display = el.style.display=='none'?'':'none';
}
window.onload = function(){
if(!document.getElementById) return;
document.getElementById('demoBtn').onclick=function(){
toggleDisplay('one');
toggleDisplay('two');
}
toggleDisplay('two');
}
// -->
</script>
</head>
<body>
<div><input id="demoBtn" type="button" value="swap elements"></div>
<div id="one">element one</div>
<div id="two">element two</div>
</body>
</html>
|
November 19th, 2012, 02:35 AM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
|
What I mean is that if javascript is turned off, rather than not being able to switch between the content, I wanted to display 2 separate div's containing the relevant information.
Kind regards,
NM.
|
November 19th, 2012, 03:29 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Yeah, that's what I thought you meant but I wanted to be sure. 
Do you have any questions about my previous reply? One thing I should note (which is not done correctly in the demo I posted), is that if you have a link or button that only works when JavaScript is enabled, you should use JavaScript to add it to the page in the first place.
|
November 19th, 2012, 04:42 PM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
|
Yea i like that example you posted. Works exactly how I want, trouble is I can't understand that code which is annoying me right now so I'm gonna scrap JS for that page and just display it as 2 separate div's and 2 separate headings.
Thanks anyway.
Regards,
NM.
|
November 19th, 2012, 06:54 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
|
Some intermediate techniques were used in the demo script. I would be happy to try to explain them if you'd like. Is it just the things in the "toggleDisplay" function that are mysteries to you or do you not fully understand the onload event handler either?
|
November 20th, 2012, 05:58 AM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
I understand the window.onload event handler as I have used it in conjunction with a setInterval() to display/update time every second (on a different site).
What I'll do is, explain what I think is happening, then if you would be so kind to tell me my errors, I would really appreciate it.
Ok so, when the document loads you run an anonymous function. You check to see if document.getElementById() does not return TRUE, if so return.
Just to note, I'm not sure why you haven't passed an ID to the getElementById function....
If we get past this, when the button is clicked we run a function, this function will take in the id of the div elements and swap them accordingly. To finish the onload, if nothing was clicked, we display <div id="two"> by default.
When the button is clicked, we go into another function called toggleDisplay(). This function accepts 1 parameter, the id of the div element. Again we check to see if getElementById doesn't return true and if it doesn't, we return from the function. If we do have the element we carry on.
This is pretty much where I get completely lost and also I don't understand how this works without JS. Like I said though it is exactly the effect I wanted I just hate to copy and paste code which I don't understand how it works because I'll never learn anything!
Kind regards,
NM.
|
November 20th, 2012, 03:11 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Quote: | Just to note, I'm not sure why you haven't passed an ID to the getElementById function.... |
It's a best practice to check for support for a feature before you try to use it (it's often referred to as "object detection"). However, in this case, since it's a DOM Level 1 (DOM1) feature, you have to go back to ancient browsers, like IE4 and Netscape 4, to find a major browser that doesn't support it.
Quote: | To finish the onload, if nothing was clicked, we display <div id="two"> by default. |
Not quite. The fact that the onclick handler was defined doesn't matter. Also the element with the ID "two" is hidden by default.
Quote: | This is pretty much where I get completely lost and also I don't understand how this works without JS. |
Without JS support enabled, nothing happens. The elements are all visible, because the JS script didn't hide any when the page loaded.
The following line gets (or attempts to anyway) a reference to the element with a given ID and stores it in a the "el" variable. If it fails, the "null" value will be returned.
Code:
var el = document.getElementById(elId);
This line makes sure that such an element exists and that it has the style property/object we need to use to show or hide it:
Code:
if(!el || !el.style) return;
This line uses the " ternary operator" (follow the link for more information), which is just a basic if/else conditional that can be used within a statement, allowing for shorter code (which, in this case, is about half):
Code:
el.style.display = el.style.display=='none'?'':'none';
it's the same as this, which checks if the element is hidden (via a certain method) and if so shows it, otherwise it hides it:
Code:
if(el.style.display=='none'){
el.style.display = '';
} else {
el.style.display = 'none';
}
Does that more sense to you now?
Last edited by Kravvitz : November 20th, 2012 at 03:13 PM.
|
November 20th, 2012, 05:29 PM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
|
Ah ok I never knew you could check for support using that. I'll remember that one!
Riiight so because the JavaScript is what set's the display to none (depending on certain things), is it's turned off, both are displayed because the 'display' code never executes.
I am aware of ternary operators and used them before in PHP.
so it's basically saying, if this element's display attribute is equal to 'none' already, do nothing, else, set it to none...
Thanks for your help to understand the code. I have a better understanding now.
Kind regards,
Nm.
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
