tabs and javascript usefulness

K

Kristiinatrix

New Member
I want to design a tabbed menu for my website, but I don't know javascript. I found a code example that I liked and I'm still trying to figure it out.

Found it here:http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html

One thing that surprised me is that all of the website content is placed in one html file and javascript is used to hide or show the correct page content. During my research I saw this elsewhere as well but isn't that a really bad idea? I mean, what it the viewer doesn't have javascript enabled? They would just see the entire page content as one long page.

But if I use seperate html files, what good is javascript in tabs? :rolleyes: I could probably create the hover effects with css and I could make a class called "active" and use it for the active tab and bring it in front with z-index.

So, I have two questions:
Is it a good or a bad idea to place the entire website in one html file and hide the extra data with javascript?
Why use javascript at all if I make seperate html files for each tab?
 
conor

conor

New Member
Hi Kristinatrix,

Firstly, I think that it is reasonable to assume that everyone in this day and age has javascript installed and enabled.

I think it would usually be a bad idea to have the entire content of a website in one html file. You also could just make seperate html files for each tab.

The reason people use javascript instead of seperate files is that it reduces the amount of page loads, ie the user only has to load the website once then they can read everything in the website rather than having to load seperate pages. It just makes the site flow a bit more.

Also, if you don't know any javascript I would advise starting with jQuery. Its a javascript library which makes it easier and faster to code more efficiently. http://jquery.org. jQuery UI - an extention for jQuery has support for tabs http://jqueryui.com/demos/tabs/. You'll find that with jQuery and jQuery UI it will be a lot easier to perform any task in javascript.

I can propose one alternative to you, which is the way I would do it. Its kind of a combination of the two methods you mentioned. I would use tabs, but have the content of the tabs loaded via AJAX so that you dont have to load the whole site up at once. This is quite easy to do with jQuery UI. This is taken from the example at http://jqueryui.com/demos/tabs/#ajax:

Code: 
<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs({
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			}
		});
	});
</script>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Preloaded</a></li>
		<li><a href="ajax/content1.html">Tab 1</a></li>
		<li><a href="ajax/content2.html">Tab 2</a></li>
		<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
		<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</div>
</div>

If you need a more detailed explination just let me know.

Thanks
 
J

jumpingspider

New Member
conor said:
Hi Kristinatrix,

Firstly, I think that it is reasonable to assume that everyone in this day and age has javascript installed and enabled.

I think it would usually be a bad idea to have the entire content of a website in one html file. You also could just make seperate html files for each tab.

The reason people use javascript instead of seperate files is that it reduces the amount of page loads, ie the user only has to load the website once then they can read everything in the website rather than having to load seperate pages. It just makes the site flow a bit more.

Also, if you don't know any javascript I would advise starting with jQuery. Its a javascript library which makes it easier and faster to code more efficiently. http://jquery.org. jQuery UI - an extention for jQuery has support for tabs http://jqueryui.com/demos/tabs/. You'll find that with jQuery and jQuery UI it will be a lot easier to perform any task in javascript.

I can propose one alternative to you, which is the way I would do it. Its kind of a combination of the two methods you mentioned. I would use tabs, but have the content of the tabs loaded via AJAX so that you dont have to load the whole site up at once. This is quite easy to do with jQuery UI. This is taken from the example at http://jqueryui.com/demos/tabs/#ajax:

Code: 
<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs({
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			}
		});
	});
</script>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Preloaded</a></li>
		<li><a href="ajax/content1.html">Tab 1</a></li>
		<li><a href="ajax/content2.html">Tab 2</a></li>
		<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
		<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</div>
</div>

If you need a more detailed explination just let me know.

Thanks
Click to expand...

This pretty much explains very well!
 
K

Kristiinatrix

New Member
conor said:
Hi Kristinatrix,

Firstly, I think that it is reasonable to assume that everyone in this day and age has javascript installed and enabled.

I think it would usually be a bad idea to have the entire content of a website in one html file. You also could just make seperate html files for each tab.

The reason people use javascript instead of seperate files is that it reduces the amount of page loads, ie the user only has to load the website once then they can read everything in the website rather than having to load seperate pages. It just makes the site flow a bit more.

Also, if you don't know any javascript I would advise starting with jQuery. Its a javascript library which makes it easier and faster to code more efficiently. http://jquery.org. jQuery UI - an extention for jQuery has support for tabs http://jqueryui.com/demos/tabs/. You'll find that with jQuery and jQuery UI it will be a lot easier to perform any task in javascript.

I can propose one alternative to you, which is the way I would do it. Its kind of a combination of the two methods you mentioned. I would use tabs, but have the content of the tabs loaded via AJAX so that you dont have to load the whole site up at once. This is quite easy to do with jQuery UI. This is taken from the example at http://jqueryui.com/demos/tabs/#ajax:

Code: 
<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs({
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			}
		});
	});
</script>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Preloaded</a></li>
		<li><a href="ajax/content1.html">Tab 1</a></li>
		<li><a href="ajax/content2.html">Tab 2</a></li>
		<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
		<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</div>
</div>

If you need a more detailed explination just let me know.

Thanks
Click to expand...
Thank you for the nice reply. :)

I keep reading that there are still plenty of users who have disabled javascript for security reasons or just can't enable it for some reason. Major javascript tutorials all stress that javascript shouldn't be used for functionality, more like a bonus. The website should still work without javascript.

After a lot of trial and error I haven't been able to get any javascript tabs working. I tried the ajax+jquery option that you proposed and for some reason that doesn't work either. I downloaded all the files that I should need, changed the paths and file names and it all worked in Dreamweaver live view. However, when I opened it in a real browser (IE and Firefox), all the tabs were empty except for the first one. The tabbed menu doesn't look exactly like I'd want it to look. Also, the code somehow made a mess of the javascript code that I use to obscure email addresses (found it online a couple of years ago).

Currently I still want to make something myself. I just want the tabs to have a cool hover effect or something that would give the entire website a more professional feel. I don't see why there's always so much code for so little effect. :confused: What does the code do that I don't see?
 
You must log in or register to reply here.
Top