I have the following code.
When I select a link, it goes from blue to red - great!
When I refresh the page, the clicked link will remain red - great!
When I click the red link, it returns to blue - great!
However, when I refresh the page that blue link goes red - not great!
I want it to remain blue when refreshed. Can someone help me out with this?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
a {color: blue}
.active {color:red}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$('.filters a').on('click', function() {
var data_filter = $(this).closest("a").data('filter');
if($(this).hasClass("active")) {
$(this).removeClass("active");
localStorage.setItem(data_filter,true);
}
else {
$(this).addClass("active");
localStorage.setItem(data_filter,false);
}
});
$('.filters a').each(function(){
var data_filter = $(this).closest("a").data('filter');
var checked = localStorage.getItem(data_filter);
if(checked){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
</script>
</head>
<body>
<div class="filters slide-down">
<ul class="groups inline naked right">
<li class="group">
<h3 class="text-right filter-heading trigger" data-target="#colours_filters">Colour</h3>
<ul class="naked" id="colours_filters">
<li class="filter-option">Black</li>
<li class="filter-option">Blue</li>
<li class="filter-option">Brown</li>
<li class="filter-option">Gray</li>
</ul>
</li>
<li class="group">
<h3 class="text-right filter-heading trigger" data-target="#theme_filters">Theme</h3>
<ul class="naked" id="theme_filters">
<li class="filter-option">Carefree</li>
<li class="filter-option">Decay</li>
<li class="filter-option">Dramatic</li>
<li class="filter-option">Family</li>
<li class="filter-option">Nautical</li>
</ul>
</li>
</li>
</ul>
</body>
</html>
it should be $('.filter-option a'), not $('.filters a').
localStorage setting true and false should change their places (true when it was false and vice versa).
if (checked) actually will work even for false value, because it turns out that checked is String, not Boolean. So it should be if (checked == 'true')
I also simplified some places in code.
Updated fiddle.
$(document).ready(function()
{
$('.filter-option a').on('click', function()
{
var data_filter = $(this).data('filter');
$(this).toggleClass("active");
localStorage.setItem(data_filter, $(this).hasClass("active"));
});
$('.filter-option a').each(function()
{
var data_filter = $(this).data('filter');
var checked = localStorage.getItem(data_filter);
if (checked == 'true')
{
$(this).addClass('active');
}
});
});
Related
I want to color the LI item on mouseover with javascript.
for the people who think i can use Css. You are right but for this one i need Javascript
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<p>An unordered list:</p>
<ul id='lijst'>
<li>Coffee</li>
<li>Thea</li>
<li>Milk</li>
</ul>
<p id="demo"></p>
<script>
window.onload = function() {
var list = document.getElementById('lijst');
var y = list.getElementsByTagName('LI');
list.addEventListener('mouseover', function(e) {
});
}
</script>
</body>
</html>
So, when you move with your mouse over coffee or thea or milk. Than they will be orange. But i have no idea how.
you can simply use css for this.
.list li:hover {
color : #FF0000
}
<ul class="list">
<li >Coffee</li>
<li >Thea</li>
<li >Milk</li>
</ul>
you can use javascript like this
function hoverList(list) {
list.style.color = "#FF0000";
}
<ul class="list">
<li onmouseover="hoverList(this)">Coffee</li>
<li onmouseover="hoverList(this)">Thea</li>
<li onmouseover="hoverList(this)">Milk</li>
</ul>
var list
var y
window.onload = function() {
list = document.getElementById('lijst');
y = list.getElementsByTagName('LI');
for(var i = 0; i<y.length; i++){
y[i].addEventListener('mouseover', function(e) {
this.style.color = 'blue'
});
y[i].addEventListener('mouseleave', function(e) {
this.style.color = 'black'
});
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<p>An unordered list:</p>
<ul id='lijst'>
<li>Coffee</li>
<li>Thea</li>
<li>Milk</li>
</ul>
<p id="demo"></p>
</body>
</html>
You don't need JS for this. This can be easily achieved by CSS
Have an error
var list = document.getElementById('lijst');
var y = x.getElementsByTagName('LI');
don't have x var, change to
var list = document.getElementById('lijst');
var y = list.getElementsByTagName('LI');
The preferred way to handle this task is to use the hover property of CSS. The code for that is
<style>
li:hover{
color: orange
}
</style>
However, if you insist to use the mouseover property, you can by using the following way
<script>
var li = document.getElementsByClassName("item-list");
li[0].addEventListener('mousedown', function(){
this.style.color = "orange";
});
li[1].addEventListener('mouseover', function(){
this.style.color = "orange";
});
li[2].addEventListener('mouseover', function(){
this.style.color = "orange";
});
</script>
The below onclick event is working good. I want the same event should work after we reloading the page also. I tried to implement the localStorage method but not getting the expected output.
Anyone help me resolve this. Thanks in advance!
Script I have tried:
$("ul li").click(function () {
$('ul li').removeClass("one");
$(this).toggleClass("active");
localStorage.setItem('listItem', 'one');
});
$(document).ready(function(){
if(localStorage.getItem('listItem') == 'one') {
$('ul li').addClass("active");
}
});
$('ul li').click(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
ul li.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
This is the perfect solution of your problem
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
ul li.active {
color: red;
}
</style>
</head>
<body id="hello">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
<script type="text/javascript">
$('ul li').click(function(){
$("ul li").removeClass("active");
$('ul li').removeAttr('id');
$(this).addClass("active");
var activeElement = $(this).text();
console.log(activeElement);
localStorage.setItem('active', activeElement);
});
$(document).ready(function(){
$( "ul li" ).each(function( index ) {
if($( this ).text() == localStorage.getItem('active')){
$(this).addClass("active");
}
});
});
</script>
Here is my Fiddle link where you can check your output. Note: clear your localStorage before executing the code.
Try this Tested code. or Click here
Note: keep li id's are unique
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
ul li.active {
color: red;
}
</style>
</head>
<body >
<ul>
<li id="1">One</li>
<li id="2">Two</li>
<li id="3">Three</li>
</ul>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$("ul li").each(function(index) {
if ($(this).attr('id') == localStorage.getItem("Activeli")) {
$(this).addClass("active");
}
});
response = JSON.parse(localStorage.getItem("wishlistID"));
$('a[data-pdtId="' + response + '"]').addClass('active')
});
$('ul li').click(function() {
$("ul li").removeClass("active");
$(this).addClass("active");
var id = $(this).attr("id");
console.log(id);
localStorage.setItem("Activeli", id); //create a localstorage
});
</script>
Hope this help you, thanks
I have a simple function to show a dropdown menu.
This is a responsive menu, it only works with defined sizes on my media queries, that's why I want to hide submenu after click.
I want to click on one of the links and then this dropdown menu hides. I am aware of .hide() but I can't get it to work.
Any help?
I want to keep this code simple & clean.
HTML
<nav>
<ul class="navigation">
<img src="img/menu.png" alt="mobile" width="50" height="50"/>
<li class="n1">Principal</li>
<li class="n2">Serviços</li>
<li class="n3">Equipa</li>
<li class="n4">Contactos</li>
</ul>
<span>Euclides Style | 965648044</span>
</nav>
Javascript
$("nav").click(function () {
$(".navigation").toggleClass('open');
});
UPDATE
I used a simple solution:
$(".navigation a").click(function () {
$(".navigation").removeClass('open');
});
Thanks everyone for your help!
hide() is working.
Try:
$("nav li").click(function () {
$(".navigation").hide();
});
DEMO
$("a").on("click", function (e) {
e.preventDefault();
$(".navigation").fadeOut();
});
or you can try .hide() even .fadeOut();
Assuming that open class has display: none or display: block attribute (it depends on the starting state) will work fine.
Alternatively you can use toggle function.
Demo: http://jsfiddle.net/IrvinDominin/uQg2X/
$("nav").click(function () {
$(".navigation").toggleClass('open');
});
and you should add some css
.navigation{ display:'none'}
.navigation.open{display:'block'}
First: it is not allowed to have a img-tag directly inside ul-tag. This is an example of a working code with some modifications:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hiding/showing navigation</title>
<style>
.closed{
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("nav").click(function(){
$(".navigation").toggleClass('closed');
});
});
</script>
</head>
<body>
<nav>
<h1>The nav</h1>
<ul class="navigation">
<li class="n1">Principal</li>
<li class="n2">Serviços</li>
<li class="n3">Equipa</li>
<li class="n4">Contactos</li>
</ul>
<span>Euclides Style | 965648044</span>
</nav>
</body>
</html>
The hide(); solution will totally hide the menu and will not show again the next time, the toggle solution will toggle all the other menus on the page, so here below is my solution, this effect will apply to all your dropdown menus on a page.
$(document).on("click",".dropdown-menu li a", function(){
jQuery(this).parent('li').parent('ul').parent('div').removeClass('open');
});
I've got my code:
$(document).ready(function() {
$('#topznav ul li').click(function() {
$('#topznav').animate({
marginLeft: '10px'
}, 400);
});
});
I've got a question about the second line. It won't work. I mean, nothing really animates. The script file is loaded correctly because other functions work. What am I doing wrong here?
try this:
$(document).ready(function() {
$('#topznav ul li').click(function() {
$('#topznav').animate({
marginLeft: '+=10px'
}, 400);
});
});
Here I am posting what I got
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#topznav ul li').click(function() {
$('#topznav').animate({
marginLeft: '+=10px'
}, 400);
});
});
</script>
</head>
<body>
<div id="topznav">
<ul >
<li>
test1
</li>
<li>
test2
</li>
<li>
test3
</li>
</ul>
</div>
</body>
</html>
This works fine
I'm looking to load a text file into a content div when the user selects a tab, the content is being inserted into the HTML file but the content div is being set to style="display: none;.
How can I get it to set the display to block whenever the relevant tab is selected and set all other contents divs to hide?
JQuery:
$(document).ready(function() {
function resetTabs() {
$("#content > div").hide();
$("#tabs a").attr("id", "");
}
var myUrl = window.location.href;
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0, 4);
(function () {
$("#content > div").hide();
$("#tabs li:first a").attr("id", "current");
$("#content > div:first").fadeIn();
$("#tabs a").on("click", function (e) {
e.preventDefault();
if ($(this).attr("id") == "current") {
return
}
else {
resetTabs();
$(this).attr("id", "current");
$($(this).attr('name')).fadeIn();
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='" + myUrlTab + "']").attr("id", "current");
$(myUrlTab).fadeIn();
}
}
})()
});
$(document).ready(function() {
$("#tabContent1").load("test.txt");
$('a[name="#tab2"]').click(function() {
$("#tabContent2").load("test.txt");
});
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/common.css" />
<script src="JS/common.js"></script>
<title></title>
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>Specifications</li>
<li>Gallery</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
</div>
</body>
</html>
I'm also getting the following error:
Uncaught TypeError: Object #tabContent2 has no method 'fadeIn'
i
st.event.dispatch
st.event.add.y.handle
How are tabContent and the tab connected? Try setting the name of the tabs to the actual content id's like this:
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>Specifications</li>
<li>Gallery</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
</div>
This way your function $($(this).attr('name')).fadeIn(); should work a little bit better.
try this for your fadeIn
var title = $('#current').attr('name');
$(title).fadeIn()
instead of
$($(this).attr('name')).fadeIn();
(oops check edit)
Got it working using a combination of #Jaco Koster JSFiddle and the following JQuery.
$(document).ready(function () {
$("#tabContent1").load("test.txt");
$('a[name="#tabContent1"]').click(function () {
$("#tab2").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent1").load("test.txt");
$("#tabContent1").show();
$("#tabContent2").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent3"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab2").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent3").load("test3.txt");
$("#tabContent3").show();
$("#tabContent1").hide();
$("#tabContent2").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent4"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab2").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent4").load("test4.txt");
$("#tabContent4").show();
$("#tabContent1").hide();
$("#tabContent2").hide();
$("#tabContent3").hide();
});
});