I have been trying to use the following code to get my nav element to stay highlighted once clicked. My page will not reload, but will display all content on one page - show this should work. Do I have a problem with selectors? Or is something else wrong? It looks like it should be working to me...
HTML:
<div class="admin-main-area">
<div class="admin-left-nav">
<ul id="admin-left-links">
<li><a class="link" href="#">Orders</a></li>
<li><a class="link" href="#">Reports</a></li>
<li><a class="link" href="#">Add Product</a></li>
<li><a class="link" href="#">Update Products</a></li>
<li><a class="link" href="#">Update Stock</a></li>
<li><a class="link" href="#">Update Pricing</a></li>
</ul>
</div>
<div class="admin-content-area">
<p>this is some content</p>
</div>
</div>
Javascript:
<script>
$('a.link').click(function(){
$('a.link').removeClass("active");
$(this).addClass("active");
});
</script>
CSS:
.active {
background-color: #f43333;
}
At the time you setup the click event handlers the links are not yet loaded in the DOM.
Try this (it will setup the handlers when the DOM is loaded):
$(window).ready(function() {
$('a.link').click(function() {
$('a.link').removeClass("active");
$(this).addClass("active");
});
})
Of course, you will also need to include jQuery before the <script> snippet
Here's a working fiddle:
https://jsfiddle.net/nsjfe5g1/
I don't understand what you need , but for my understandings you can simply do this with css :focus selector
a:focus {
background-color: #f43333;
}
Try with demo https://jsfiddle.net/nsjfe5g1/2/
Related
I'm doing a site where, when I click on the Alagoas word "div_alagoas" appears. When I click on the BAHIA word, "div_alagoas and hide" "div_bahia" show.
In this example, I tested with input Radio and it worked. But I do not know how to work with the tags <li> <a>.
How can I do that?
HTML:
<form>
<li><a name="alagoas" id="ala">ALAGOAS </a></li>
<br>
<li><a name="alagoas" id="ba">BAHIA </a></li>
</form>
<div id="div_alagoas" value="alagoas" style="border:1px solid black">
content
</div>
<div id="div_bahia" value="bahia" style="border:1px solid black">
content
</div>
JQUERY:
$(document).ready(function(){
$(' ??? [name=alagoas]').change(function(){
if(this.id == 'ala'){
$('#div_alagoas').show();
$('#div_bahia').hide();
}
else if (this.id == 'ba'){
$('#div_bahia').show();
$('#div_alagoas').hide();
}
});
});
well, if you want a click listener:
$('[name=alagoas]').click(function(event){
if($(event.target).attr('id') === 'ala'){
$('#div_alagoas').show();
$('#div_bahia').hide();
}
else if ($(event.target).attr('id') === 'ba'){
$('#div_bahia').show();
$('#div_alagoas').hide();
}
});
Another note, your HTML should be better formatted, like putting li tags inside a ul or ol
<ul>
<li><a name="alagoas" id="ala">ALAGOAS </a></li>
<li><a name="alagoas" id="ba">BAHIA </a></li>
</ul>
Another way to do this is splitting into different listeners:
$('#ala').click(function(){
$('#div_alagoas').show();
$('#div_bahia').hide();
});
$('#ba').click(function(){
$('#div_alagoas').hide();
$('#div_bahia').show();
});
I am having a terrible time with the first of the following scripts. I'm not sure if the issue is that there are two similar scripts on the page or if my HTML5 code is incorrect. Any help would be appreciated:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
</script>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
</head>
And the targeted HTML:
<div class=links>
<ul>
<li>
<a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" >WHAT WE DO</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >OUR MISSION</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >WHO WE ARE</a>
</li>
</ul>
</div>
As stated, the problem is in the first script where my intention is that the active anchor should change back to the default anchor attribute as the others are clicked by the user.
Thanks again.
Wrap all into document.ready()
<script>
$(document).ready(function(){
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
}):
</script>
The following snippet of JQuery is only working on one li item in an ul. When I hover on the other items in the list it won't work.
$(document).ready(function() {
$("#link").hover(function() {
$(this).animate({ color:'#fe57a1'}, 100);
}, function() {
$(this).animate({ color: '#fff'}, 300);
});
});
The html is as follows:
<div class="col span_6 main-menu">
<ul>
<li><a id="link" href="about.php">About</a></li>
<li><a id="link" href="soon.php">Place</a></li>
<li><a id="link" href="soon.php">Shop</a></li>
<li><a id="link" href="blog.php">Blog</a></li>
</ul>
</div>
HTML
<div class="col span_6 main-menu">
<ul>
<li><a class="link" href="about.php">About</a></li>
<li><a class="link" href="soon.php">Place</a></li>
<li><a class="link" href="soon.php">Shop</a></li>
<li><a class="link" href="blog.php">Blog</a></li>
</ul>
</div>
Javascript
$(document).ready(function() {
$(".link").hover(function() {
$(this).animate({ color:'#fe57a1'}, 100);
}, function() {
$(this).animate({ color: '#fff'}, 300);
});
});
You should not use same id for more then one element
ids should only be used once per page. You need to change 'link' to be a class:
$('.link')....
<a class="link">...
An id (such as your id="link" should be unique - there should only be one element with the same id. Try changing these tags to class="link" and then using the selector $(".link").hover to select all of these elements.
"link" should be the class of the elements not the id. If you have more than 1 element with the same id, JavaScript will only find the first one.
I´m trying to target a <div> which is the next <li> of the parent <div> of the function show_projectinfo(). I've tried .next(), .closest(), etc... with no luck, any ideas?
The function is that if I click on a.more_info then the li.slider img is hidden... I don´t know if it is out of scope completely... This is a div that is repeated so I can´t just use the IDs.
markup:
<li class="info">
<a id="previous-slider"> < </a>
<span>01/15</span>
<a id="next-slider" href="javascript:void(0)"> > </a>
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo()">Info</a>
</li>
<li class="slider">
<img src="img/horizontal.jpg" alt="horizontal" width="624" height="429">
</li>
this is the script:
function show_projectinfo(){
$(this).closest('.slider img').hide();
$('.info_content').fadeIn();
}
The basic problem is that you are calling the method from onclick instead of binding it with jquery.
In the way you use it, the this refers to the window and not the element that was clicked.
function show_projectinfo(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
$(function(){
$('.more_info').click(show_projectinfo);
});
and remove the onclick attribute from the html
If you have (although you shouldn't) to use the onclick attribute then pass it the this as an argument
function show_projectinfo(element){
$( element ).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
and
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo(this)">Info</a>
Try:
$(this).parent().next() // parent() should be the <li> then next() will get your next <li>
$('.more_info').click(function(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
});
Instead of .closest use .parent and .next, then select the img with .find.
Check out this jsFiddle:
$("a.more_info").bind("click", function(e){
e.preventDefault();
$(this).parent("li").next("li.slider").find("img").hide();
$('.info_content').fadeIn();
return false;
});
$('li').click( function (){
var nextLi = $(this).closest('div').next().children('li:first-child').attr('id');
console.log(nextLi);
});
Considering below markup:
<div id='div1'>
<li id='1'>1</li>
<li id='2'>2</li>
<li id='3'>3</li>
</div>
<div id='div2'>
<li id='4'>4</li>
<li id='5'>5</li>
<li id='6'>6</li>
</div>
You can see my live jsFiddle for more details.
<ul data-role="listview">
<li>Facebook</li>
<li>Google</li>
<li>Apple</li>
</ul>
$(document).bind('pagebeforecreate',function(){
$('form ul li').each(function(){
$(this).html('<a role="button" data-icon="plus" data-iconpos="left">'+$(this).text()+'</a>');
});
});
The code above should change the listview into a list of buttons with a plus icon on the left side. However, it isn't working for me. The <a...></a> is being inserted correctly, but the icon isn't showing up correctly. This default icon is still being displayed. How can I fix this?
In addition to #patrick's reply above, you also need to initialize the button widget after attaching it to the document. Try this,
$(document).bind('pageshow',function(){
$('ul li').each(function(){
var $this = $(this);
$this.html('<a data-role="button" data-icon="plus" data-iconpos="left">'+$this.text()+'</a>');
var $btn = $('a', $this);
$btn.button();
});
});
According to the jQuery mobile docs a data-role="button" attribute is required to style any anchor link as a button.
In your code you have:
<a role="button"
This is incorrect.
You need to change this to:
<a data-role="button"
So your whole code will now be:
<ul data-role="listview">
<li>Facebook</li>
<li>Google</li>
<li>Apple</li>
</ul>
$(document).bind('pagebeforecreate',function(){
$('form ul li').each(function(){
$(this).html('<a data-role="button" data-icon="plus" data-iconpos="left">'+$(this).text()+'</a>');
});
});