I am trying to use localStorage in jQuery to remember active menu item. But it doesn't seem to work.
This is menu -
<ul class="mainnav ">
<li class="active" title="Ranger Dashboard" rel="tooltip" data-placement="bottom"></li>
<li rel="tooltip" data-placement="bottom" title="Upload a Funcard"></li>
</ul>
jQuery-
<script type="text/javascript">
$(function () {
$('.mainnav li').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var activeIndex = $(this).index();
localStorage.setItem('mySelectValue', activeIndex);
});
});
</script>
<script type="text/javascript">
$(window).load(function () {
var activeIndex = localStorage.getItem('mySelectValue');
$('.mainnav> li:eq("' + activeIndex + '")').addClass('active');
});
</script>
What went wrong with this jQuery code? Please help.
Are you making sure that you're resetting all the menu items on window.load?:
$(window).load(function () {
$('.mainnav li').removeClass('active');
// etc
});
Working demo.
The quotes surround the literal string parts of the selector, which is then joined to the variable with the plus sign.
$('.mainnav> li:eq(' + activeIndex + ')').addClass('active');
Related
I'm learning jquery and I'm trying to make a tab.
I can't realize why this doesn't work
Here I have my HTML
<div class="tab-panels">
<ul class="tabs">
<li rel="panel1"class="active">All</li>
<li rel="panel2">Animals</li>
<li rel="panel3">People</li>
<li rel="panel4">Landscape</li>
</ul>
<div id="panel1" class="panel active">
<img src="images/tab1.jpg"/>
<img src="images/tab2.jpg"/>
</div>
<div id="panel2" class="panel">
<img src="images/tab3.jpg"/>
<img src="images/tab4.jpg"/>
</div>
<div id="panel3" class="panel">
<img src="images/tab5.jpg"/>
<img src="images/tab6.jpg"/>
</div>
<div id="panel4" class="panel">
<img src="images/tab7.jpg"/>
<img src="images/tab8.jpg"/>
</div>
</div>
And here is my jquery
$(function(){
$('.tab-panels .tabs li').on('click', function({
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').show(300, showNextPanel);
function showNextPanel(){
$(this).removeClass('active');
$('#'+panelToShow).slideDown(300, function(){
$(this).addClass('active');
});
});
}));
I made this code from a video that I watched, for this person the code worked perfectly, so I don't understand why it doesn't work for me.
Your forget to initialize it
try like this
$(function() {
$( ".tab-panels" ).tabs();
});
Syntax errors at .on('click', function({ , close of js });}));
Try to call .hide() on .panel before displaying .panel.active ; substitute .slideDown() for .show()
$(function(){
$(".tab-panels .tabs li").on("click", function(e) {
$(this).siblings().add(".panel").removeClass("active");
$(".panel").hide();
$(this).addClass("active");
var panelToShow = $(this).attr("rel");
$("#" + panelToShow).addClass("active")
.slideDown(300);
})
});
jsfiddle http://jsfiddle.net/nLu4Lpoy/
Seem like you misspelled the code(Assuming you have working css code for styling). See indicators shown below :
$(function () {
$('.tab-panels .tabs li').on('click', function () { //<------ here
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').show(300, showNextPanel);
function showNextPanel() {
$(this).removeClass('active');
$('#' + panelToShow).slideDown(300, function () {
$(this).addClass('active');
});
} //<------ here
});
}); //<------ here(must close dom ready function)
You had syntax errors in your jQuery, try this:
$(function(){
$('.tab-panels .tabs li').on('click', function(e){
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').show(300, showNextPanel);
function showNextPanel(){
$(this).removeClass('active');
$('#'+panelToShow).slideDown(300, function(){
$(this).addClass('active');
});
};
});
});
Quick JS Fiddle
Your first click function was not set up properly and the end wasn't closed right. You can usually solve something like this easier by keeping functions spaced out well, grouping your variables, etc..
The jQuery function would append the text between the li's to a div("#title").
something like
$(function () {
$("#videos li a").click(function() {
$(this).attr('id', 'active');
$('#title').text($(this).text());
});
});
but it appends the id "active" to the li clicked on, and is removed when clicked on another.
You can use the following code to get the value and put it in inside the div
$("#examplediv").html( $("#menu>li>a").html());
click here for jsfiddle demo
Add this to your document.ready handler:
$('#menu a').click(function(){
$('#examplediv').text($(this).text());
});
Try like this
$(document).ready(function(){
$('ul#menu li').text('My Text');
})
and your html should be like this
<ul id="menu">
<li>real</li>
</ul>
bec it is broken in your question
Use this:
HTML:
<ul id="menu">
<li id="menu-li">real</li>
</ul>
<div id="examplediv"></div>
JQuery:
$(document).ready(function(){
$("#examplediv").text($("#menu-li").text());
})
To get text in li:
$('ul#menu li a').text()
I can't figure out how to use jQuery to style the current nav item. I've tried several tutorials and such to no avail. Any help would be appreciated.
Thanks in advance.
<div id="menu">
<ul id="nav">
<li>Contact</li>
<li>Gallery</li>
<li>Pool Liners</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul><!--end nav-->
</div><!--end menu-->
/** nav styling **/
//<![CDATA[
jQuery(function() {
jQuery('#nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('current');
}
});
});
//]]>
You can use the Attribute Equals Selector [name="value"] to find out the nav item with the current path.
$(document).ready(function () {
var str = location.href.toLowerCase();
var item = $('#nav li a[href="' + str + '"]');
if(item.length){
$("li.current").removeClass("current");
item.parent().addClass("current");
}
})
Demo: Fiddle
I figured it out!! Thanks for your help Will.i.am and Arun.p.
THe lines of code below is all I needed after giving body id's to each page.
/** nav selector **/
var bodyid = $('body').attr('id');
$('#main_nav ul li a.'+ bodyid).addClass('current');
I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.
Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
I have this simply piece of JQuery that toggle a class on anchor tags/links.
What I don't know is how do I make the class toggle or add/remove when the other links are clicked? Example: The class can only apply to the link that is click and cannot be on more than one at a time. That's where I am stuck. Well, I don't know how to do it.
Secondly how do I use the JQuery Cookie to keep the currently link active. I have downloaded the cookie extension.
Here is what I have done:
HTML:
<ul class="navbar">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
.activeLink{
color: #930;
}
JQuery:
$(document).ready(function() {
$('.navbar li a').click(function(){
$(this).toggleClass('activeLink');
});
});
Thank you!!
Below is a solution that uses event propagation:
$(function() {
var $activeLink,
activeLinkHref = $.cookie('activeLinkHref'),
activeClass = 'activeLink';
$('.navbar').on('click', 'a', function() {
$activeLink && $activeLink.removeClass(activeClass);
$activeLink = $(this).addClass(activeClass);
$.cookie('activeLinkHref', $activeLink.attr('href'));
});
// If a cookie is found, activate the related link.
if (activeLinkHref)
$('.navbar a[href="' + activeLinkHref + '"]').click();
});
Here's a demo (without the cookie functionality as JSFiddle lacks support).
Here is how I do it. It's a little simplistic, but it gets the job done without a lot of brain strain.
<ul class="navbar">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<script>
$(document).ready(function() {
$('.navbar li a').click(function(){
$('.navbar li a').css('color', 'black');
$(this).css('color', '#930');
});
});
</script>