jquery add on page load show requested tab feature - javascript

I'm a newbie with jquery and i've used this code for tabs
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
What i need is to be able to load a specific tab when open a url like:
www.mysite.com/page.html#tab1
html link looks like this:
name link
name link2
name link3
I've tryied lots of scripts, but maybe is my fault (i'm a dude with javascript)
Thank you in advance

JQuery-UI have a tab-widget You can use.
Much simpler and more stable than writing your own.
For different URL's please have a look at this post.
It tells you how to leverage on the UI-themes and load different URl's.
Otherwise You have to do a $('#theIdOfTheDiv').load(url) on the click event in the tab

You need an anchor like click to see tab1
You need to redirect the user to #tab1 so you have to remove the return false; line of your function wich disables the redirecting
Your function is being triggered when the <a> is clicked, you need to trigger it once more when the page is being loaded
your function will look like this
$(function(){
onClickHandler = function() {
$('div.tabs > div').hide();
$(window.location.hash).show();
}
$('div.tabs ul.tabNavigation a').click(onClickHandler);
onClickHandler();
});

The tab you want displayed by default should have a class of selected in your HTML. So should the associated content wrapper. The others should not.

window.location has a hash attribute. So, you can check it against the empty string and if it's not empty, select that tab:
if(!window.location.hash === "")
$(window.location.hash).show();

Related

Jquery show div content onload and hide of the first click

I have created a side menu bar that menu items has id's 'h1-1', 'h1-2','h1-3' and so on. when first load the page I need to show the 'h1-1' content. so I've written code
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
But here, when I click other menu item first, 'h1-1' content is still show on the page and clicked list item content showing below the 'h1-1' content .
However when I 'h1-1' itself first and then click other list items, it works fine (when I 'h1-1' itself first, 'h1-1' content still showing and then click other list item 'h1-1' content go away and show clicked item content).
I've tried to write hide the 'h1-1' content on the first click but then, 'h1-1' content is not showing even when click the 'h1-1' list item itself.
Can anyone suggest a way how can I solve this..
Fiddle Demo
You are relying on the content of curPage to hide the previous page, but you initialize it to "". Instead, set it to the first page.
var curPage="h1-1";
Updated fiddle
try this... all the codes are there.. I just updated your code.
$(function() {
var curPage="";
$("#menu a").click(function() {
$('#h1-1').hide();
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/454/
I think you are complicating the things. Use a selector to get all elements to hide (jsFiddle).
$(function() {
$('#h1-1').show();
$("#menu a").click(function() {
var curPage = $(this).data("page");
$('.main div.content').hide();
$("#" + curPage).show();
});
});
Just change var curPage=""; to var curPage="h1-1";
$(function() {
var curPage="h1-1";
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/457/

adding rel="external" to every link

Hi I need to add rel="external" to every link () on my site is this possible?
so far i have tried $(".content a").attr("rel","external”);
I would add them manually but it is a 1000 page site and don't really want to code it on every link
thanks in advance
If you want it on all your links then you have to iterate through all of them and change that attribute
$(function () {
$('a').each(function () {
$(this).attr('rel', 'external');
});
});
If your intent is to change every link within the element with class content then what you have should properly change it just wrap it in the function
$(function () {
$('.content a').each(function () {
$(this).attr('rel', 'external');
});
});
Inspect the links in this jsfiddle to see that the attr has been added to those existing links
http://jsfiddle.net/4d06xb0x/

how to link directly to jQuery accordion tab

I have a wordpress theme that has a build in shortcode for creating an tabbed interface. The problem is that I can't link from an external page to a specific tab. I saw that there are multiple questions about the same issue, but no answer worked for me. I have to mention that my javascript / jQuery skills are close to zero so even if this might seem simple, I have no idea what to do.
I found the jQuery code responsible for the accordion tabs in a file in my theme, here it is:
// ---------------------------------------
// TAB
// ---------------------------------------
function base_tab() {
$('.tabs-wrap').each(function(){
var tab_group = $('.tabs-wrap');
$('.tabs li', tab_group).click(function(e){
e.preventDefault();
$('.tabs a', tab_group).removeClass('current');
$('a', this).addClass('current');
$('.panes .pane', tab_group).hide();
$('.panes .pane', tab_group).eq($(this).index()).show();
});
// Trigger Initial Tab
var initial_tab = parseInt( $('.tabs', this).attr('initial-tab') );
$('.tabs li', tab_group).eq(initial_tab).trigger('click');
});
}
As far as I understood from previous, similar questions I need to add this code but I can't figure out on my own where and how to make it work:
$(window.location.hash).click();
All the links to the tabs are currently like this: http://www.websitename.com/page/#
I'll appreciate any help, thanks!
First change your html into this
<ul class="tabs" initial-tab="0">
<li>All</li>
<li>Kids Place – Kidproof</li>
<li>Baby Rattle Toy</li>
<li>Kids Place Video Player</li>
<li>Letters With Ally</li>
<li>Mommy bird and her chick</li>
</ul>
Then write some extra code
$(function(){
var hash = window.location.hash;
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
});

Using JavaScript to switch through tabs without changing layout?

My webpage is at http://sarahjanetrading.com/js/j/index.html
I have done all the layout and coding. I want the tabs to toggle when clicked over them. I tried google but was in vain. I am willing to achieve the effect using either JavaScript or jQuery. My tabs are empty right now, And I want the layout to remain the same.
NEW :
This is my code so far:
<script type="text/javascript">
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab-content").hide();
$("ul#main-tabs li a:first").addClass("active").show();
$("#wrap > div").hide().filter(":first").show();
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
});
</script>
For the full HTML and JavaSript code (new) please go to http://sarahjanetrading.com/js/j/index.html
What it does is that when I click on a list item, it changes the tab, but not the content. And when I click on the anchor of a list item, it changes the content, but not the tab. I want both the content and the tab to change consistently.
Thanks
jQuery UI is probably the best solution. You can use the .tabs()
to accomplish what you are trying to do. You can also edit the layout easily by using ThemeRoller.
This quick test is working pretty well
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
Of course it doesn't consider the content of the tabs, but it's a start :)

How to add a text in a certain div when click in a link

This is my first incursion in jQuery so I am really newbie with this. I read the documentation (actually, I am still on it) to get to know it better!
The thing is that I have a website with several links into a li element and I want to achieve that every time I click in one of these links, a certain piece of text will appear in a div id="container" in the webpage.
How could I do this?
Quick, simple answer:
$('#yourlist li a').click(function(){
//grab link's href attribute
var href = $(this).attr('href');
//update content
$('#container').html("Loading page " + href + "...");
//load page via AJAX using link's href
$('#container').load(href);
});
I added more code to show how you would access the given link using $(this) and further load its href via AJAX.
$('li a').click(function(){
$('#container').html('Text you want to add');
});
try
<script src="your/downloaded/jquery/path.js></script>
<script>
$(document).ready(function() {
$('a#idOfLink').click(function() {
$("div#container").html("<span class='red'>Your certain text</span>");
});
})
</script>

Categories

Resources