jQuery & CSS Tabs

Run what code ? I have everything setup local and I also have the copy live(beta) and I can’t see it to position it, and my paths are correct as well.

I’m not really even participating in this thread and it’s frustrating the hell out of me.

If you turn off Javascript, you will see exactly where your three tabs are positioned. Is that what you mean?

Is this the URL we’re supposed to be working with? Anyone?

http://www.thecreativesheep.ca/page8_adjust/home3.htm

If so, there’s no #tabnav element present in the markup for jQuery to get it’s teeth into. e.g. something like this should be within the #tabwrap div:

<ul id=“tabnav”>
<li><a href=“#tab1”>Link1</a></li>
<li><a href=“#tab2”>Link2</a></li>
<li><a href=“#tab3”>Link3</a></li>
</ul>

My connection is tanking on me tonight, if someone can notify me if the page is loading with the tabs showing so I can try this locally in the AM. I inserted the code as suggested I noticed I was styling the code based on Paul’s jQuery Tabs suggestion, oops :slight_smile:

The page shows a javascript error. Looks like you have incorrect paths for

jquery-1.4.2.min.js
fading-tabs.js

I’ve fixed the path for the tabs and they are not showing up as well the font for “Title” should show the correct font as I had hoped that the conversion for all browsers to load a specific would work as mentioned by Font Squirrel but it doesn’t appear as it is :frowning:

Please confirm whether your updated page is

http://www.thecreativesheep.ca/page8_adjust/home3.htm

because the path is still incorrect there:

<script type="text/javascript" src="images/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="images/fading-tabs.js"></script>

i.e. the js files are not in the images directory. I believe them to be in the same directory as the html file, so the paths should be

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fading-tabs.js"></script>

…the font for “Title” should show the correct font…

Hold your horses! How about sorting out the tabs first and leaving @font-face fixes for a separate topic? :slight_smile:

Hold your horses! How about sorting out the tabs first and leaving @font-face fixes for a separate topic?

OK, after the tab issue is resolved :slight_smile:

Now the paths should be fixed, but the tabs continue to not load on my connection for me to align properly.

You still have the page showing jquery in the images folder but it doesn’t seem to be there.

It seems to have gone missing from the other folder now as well (which is where it was before).

I have a hunch they are in an folder named “images” in the root.

My vote is for their permanent home to be the “js” folder in the root along with styleswitcher.js and others. The path will then be:

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/fading-tabs.js"></script>

The server moved it into the wrong folder, oddly enough.

I’ve updated the page and the code in hopes I would see the tabs, but nothing.

Even though jquery-1.4.2.min.js and fading-tabs.js are listed, a direct request for the files returns a 404 error.

Try deleting them both and uploading again - to the root js folder as suggested. This way, you can always use the same path (as in my last post) no matter where your pages are located.

Alright, it’s changed. I hope it works.

The tab links are there and the tab content changes as expected when they are clicked. Are you viewing online or locally? Have you tried refreshing/quitting/reopening/cache clearing your browser? What browser/version are you using?

The tabs work, though hard to see. Maybe add a temporary dark background to #tabnav li a so you can see what your working with?

My vote is for their permanent home to be the “js” folder in the root along with styleswitcher.js and others.

:tup:
Shall we start a poll to see if we all agree :slight_smile:

No need. The Sheep has already been polled :slight_smile:

Now try, I’m seeing nothing on this end, except the anchor <link1><link2>etc then it disappears when the entire page is loaded.

I knew it my connection sometimes doesn’t load everything as you would expect and in this case it’s not loading everything, not even all of my images that for you or others it’s probably loading just fine. I’ve done all that you have suggested, and my browser clears the cache automatically on restart, I’m using FireFox 3.5. Viewing it locally won’t load the javascript, I’ve tried with no success so the only option I can think of is if someone can position it, although I know there is only one hover image available I’ll make the other two as soon as I know one is at least working !