I have a very simple page that uses jQuery to hide and show content. I have 3 links, and 3 divs related to those 3 links. When you click one of the links that div get displayed. The jQuery script also adds a .active class to the link so I can show what link is currently active.
My problem is that I need to have 3 different .active classes, one for each link, so they can all have a different background image when it's active. Here is the jQuery code that runs it all:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.link').click(function(e) {
e.preventDefault();
// Remove any active classes:
$('.active').removeClass('active');
$(this).addClass('active');
// Hide all the content:
$('.content').fadeOut();
$('.logo').fadeOut();
// Show the requested content:
var content = $(this).attr('rel');
$('#' + content).fadeIn();
});
});//]]>
</script>
I couldn't figure out how to create a jsfiddle, so I have a link to the dev page here: http://agoberg.tv/kiosk/index.html
I figured it out. I added 3 classes in the css, one for each link. Then I tweaked the jQuery to this:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.activediv1').removeClass('activediv1');
$('.activediv2').removeClass('activediv2');
$('.activediv3').removeClass('activediv3');
// Add the 'active' class to this link:
$(this).addClass('active' + content);
// Hide all the content:
$('.content').fadeOut();
$('.logo').fadeOut();
// Show the requested content:
$('#' + content).fadeIn();
});
});//]]>
</script>
Related
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/
I am having an issue with my newly published website. As soon as the site is loaded it shows all the contents including paragraph, videos (from other pages as well) etc.. under one single tab (in my case it HOME tab). But once any tab is clicked its fixed automatically. Please look here.
So, it's a problem! I want the contents previously fixed (shouldn't wait for an user click).
Now I am well aware of my design. I haven't used multiple pages link. I stored everything in my main index file and used the following jQuery code to just redirect them to the corresponding section (after clicking a corresponding tab):
Please help me to improve the code so that my page loads as I want.
I guess my issue is related with this piece of code:
/*Make the tabs work-begins*/
$(document).ready(function(){
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
/*Make the tabs work-ends*/
Hide all the divs and then show only the first div inside #all_contents. This should do the trick:
/*Make the tabs work-begins*/
$(document).ready(function(){
//Hide all divs first
$('#all_contents>div').hide();
//Then show only first
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
/*Make the tabs work-ends*/
If you want to hide all of the contents initially then you should apply the css styles added by clicking home to your html rather than applying it on js load:
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
So this hides all pages except the one which was clicked by adding the style display:none; inline to all of the selected elements. Because tehy aren't hidden on page load, the site only works after clicking on a link. You should do the same, but add the style as a rule in your css rather than in-lining:
#all_contents > div {
display:none;
}
I have two "ul" list. With javascript a remove childrens from the second list and add inside the first ul list. But while the page is loading the second menu appears unstyled. see here and the web
Here is the code. #main-menu and #section menu are the ul lists:
//dinamyc main menu
if( $('body').hasClass('page-template-templateshome-page-php') ){
$('#section_menu').children().each(function(i, e){
var firstLi = '#' + $('.navbar').next().attr("id");
$('.home .menu-item-home a').removeClass('external').attr( "href", firstLi );
if($('#main-menu div ul li').is($(e).insertAfter('#main-menu ul li:eq(0)'))){
$(e).insertAfter('#main-menu ul:eq(0)');
}
$('#section_menu').css('display','none');
});
}else{
$('#section_menu ').children().remove();
$('#section_menu').remove();
}
CSS:
#section_menu { display:none; }
<div id="hidden-during-page-load">Loading...</div>
$(window).load(function(){
// this will ensure that all content has loaded before the div is shown
$("#hidden-during-page-load").show();
});
#hidden-during-page-load {
display:none;
}
try like this
<div id="mydiv" style="disply:none">somedata</div>
then make that div whenever you want. If you want to show it in page load,
$(document).ready(function(){
//after executing some functions
$("#mydiv").show()
});
Have you tried puting a breakpoint inside your each function?
That'd confirm that that process is causing the glitch. (or you can also add a small delay in it)
Put the breakpoint and do what you've been doing so far, if the menu remains that way until you let it continue, it means you need to change your logic: Hide the menu during processing and only show it when the process is complete.
You could create a css rule to hide the second list for example:
.hidden-list {
visibility: hidden
}
If after loading you want to see the second list, just listen to the ready event and remove the class.
$(document).ready( function($) {
$('ul').removeClass('hidden-list'))
// Do something else if needed
});
I have links within an unordered list, when one is clicked it changes the url of a stylesheet link in the head. Using the cookie plugin the browser remembers which has been clicked.
I've managed to add an add/remove active class on click but I need to also have the correct active class on the corresponding a tag when the site is returned to. How do I use jQuery to check which stylesheet href has been used and assign the active class to the corresponding 'a' tag?
Current code is below.
Any help appreciated!
$(document).ready(function () {
$("#text-size a").click(function() {
$("link.fontsize").attr("href",$(this).attr('rel'));
$('ul li.active').removeClass('active');
$(this).closest('li').addClass('active');
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
$(document).ready(function () {
$('#text-size a[rel="' + $('link.fontsize').attr('href') + '"]').closest('li').addClass('active');
});
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 :)