Great! it’s a well-done video tutorial with alive programmer, I mean with “on the fly” code breaks, that’s good! because some of us where looking for the break too!
A time ago I made a jQuery tabs code that’s a little similar, but it doesn’t care about the URL as yours.
However, my tabbed interface is halfway down the page and whenevery i click the tabs, the page focuses on the anchor tab causing the page to jump so the tabs are at the top of the screen.
Great Tutorial, thank you.
Any suggestion, how can we implement ajax call, to load external files, instead of paragraph in the page.
Also, how to fade tabs(not content) on hover?
Regards
I was able to follow along with the excellent video and get the javascript to work EXCEPT for the proper URLs. I am not able to refresh to a specific tab like Jack does at 20:43. Any ideas why?
Here is the code, as best as I could copy it for the benefit of everyone:
Hi Paul, if you want to send me your email address to jack [at] jackfranklin.co.uk I can zip up the working version I have and send it to you, I can’t see any obvious mistake in your code, there must be one though! When you try to refresh like in the video, what happens?
Photoshopped Image Killer is a very useful application to get detailed information of a JPEG image as for whether it has been Photoshopped. PSKiller opens and decodes your JPEG file, then several image statistics features are analyzed to see whether some of them are abnormal compared to those of untouched images.
Sweet tutorial!
I’ll have to use this on one of my sites!
ewqeqw
Someone probably already said it, but:
after splitting the url on the hash, if the one-th element of the resulting array is “undefined” make it “tab1″. Then you can just proceed as normal.
It is often difficult to explain to a client the complexity of a website. Thank you for your tutorial!
Looks good. Not bad.
Great! it’s a well-done video tutorial with alive programmer, I mean with “on the fly” code breaks, that’s good! because some of us where looking for the break too!
A time ago I made a jQuery tabs code that’s a little similar, but it doesn’t care about the URL as yours.
Good!
Followed the tutorial and got it all working
However, my tabbed interface is halfway down the page and whenevery i click the tabs, the page focuses on the anchor tab causing the page to jump so the tabs are at the top of the screen.
Any ideas?
sorted
add
return false;
to the end of the click function
Hey digisam,
Thanks for that info, should help a few people, glad you got it all working.
Thanks for all the comments.
Great Tutorial, thank you.
Any suggestion, how can we implement ajax call, to load external files, instead of paragraph in the page.
Also, how to fade tabs(not content) on hover?
Regards
I was able to follow along with the excellent video and get the javascript to work EXCEPT for the proper URLs. I am not able to refresh to a specific tab like Jack does at 20:43. Any ideas why?
Here is the code, as best as I could copy it for the benefit of everyone:
ul li {float: left; list-style: none; font-size: 12px; text-align: center; }
li a {display: block; margin: 0 1px 0 0; height: 35px; width: 100px; background-color: #ccc; padding: 17px 0 0 0; border: 2px solid black;}
p {clear: both; border: 2px solid black; width: 800px; position: absolute; margin: 55px 0 0 0; }
active { color: red; border-bottom: none; background-color: white; }
$(document).ready(function() {
$(“p”).css(“display”, “none”);
var curtab = window.location.href;
curtab = curtab.split("#");
curtab = "#" + curtab[1];
$("a").each(function(i) {
if(curtab == $(this).attr("href")) {
$(this).attr("id", "active");
} else {
$(this).attr("id", "");
}
});
if (curtab !== '#undefined') {
$(curtab).css("display", "block");
} else {
$(".default").css("display", "block");
var defid = "#" + $(".default").attr("id");
$("a").each(function(i) {
if(defid == $(this).attr("href")) {
$(this).attr("id", "active");
}
})
}
$("ul li").click(function() {
$("ul li").children().attr("id", "");
$(this).children().attr("id", "active");
var tabtocall = $(this).children().attr("href");
$("p").fadeOut ("slow");
$(tabtocall).fadeIn ("slow");
});
});
</script>
<ul>
<li><a href="#tab1">tab 1</a></li>
<li><a href="#tab2">tab 2</a></li>
<li><a href="#tab3">tab 3</a></li>
</ul>
<p id="tab1" class="tab default">Tab 1</p>
<p id="tab2" class="tab">Tab 2</p>
<p id="tab3" class="tab">Tab 3</p>
Hi Paul, if you want to send me your email address to jack [at] jackfranklin.co.uk I can zip up the working version I have and send it to you, I can’t see any obvious mistake in your code, there must be one though! When you try to refresh like in the video, what happens?
Thanks for the kind comments everyone.
Jack.
Thank you, I’ll certainly give it a try.
Photoshopped Image Killer is a very useful application to get detailed information of a JPEG image as for whether it has been Photoshopped. PSKiller opens and decodes your JPEG file, then several image statistics features are analyzed to see whether some of them are abnormal compared to those of untouched images.