How can I highlight active link in the following scenario?
I gave .spcusr:hover, .spcusr:active{color:#adsder;}
In this situation hover property works but active property doesn't work as its not a static link. Is there anyway that I can show different color to active span?? thnaks
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#accordion" ).accordion({
autoHeight: false,
collapsible: true,
navigation: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
window.showim = function(src) {
$("#divcont").html(src);
};
});
</script>
<h3>
<a href="#" style="height:200px;">
<img src="unitedstates.jpg" width="100%" alt=""/>
</a>
</h3>
<div>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
</div>
<div id="divcont"></div>
Here's a FIDDLE
.active {
background: #ddd;
}
$(function() {
$('.spcusr').click(function() {
$(this).addClass('active').siblings('.spcusr').removeClass('active');
});
});
and of course you could set active class for currently active span in HTML
<span class="spcusr active" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
It is not possible with CSS so use jquery.
Create a separate active class and add it when click function hits.
$('.spcusr').click(function () {
$('.spcusr').removeClass('active');
$(this).addClass('active');
});
DEMO
css
.active{color:#cdcdcd}
Jquery
$(document).ready(function() {
$('.spcusr').click(function() {
$('.spcusr').removeClass('active');
$(this).addClass('active');
});
});
as per your current markup and js:
onclick="showim('<h1>This is active now</h1>', this);"
//---------------------------------------------^^^^---pass current el here
$(document).ready(function () {
window.showim = function(src, el) { //<----get it here
$(el).addClass('active').siblings('.spcusr').removeClass('.active');
$("#divcont").html(src);
};
});
in the css do this:
.spcusr:hover,
.spcusr.active{
color:#adsder;
}
add separate class for active link using jquery
Related
I want to toggle between two classes on two anchor tags. When I click on the non-bold link, I want it to go bold, and then the other go to normal. However I don't really know how to go about it.
I've tried a few approaches:
$(".link").click(function(e) {
e.preventDefault();
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2<a>
</div>
Here, I add and remove based on the target and check if that class is present but it doesn't handle the other non-clicked anchor - I need to click that to remove the bolding when it needs to happen automatically.
I then mess around toggleClass():
$(".link").click(function(e) {
$(this).toggleClass("selected");
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2</a>
</div>
Which is definitely a step closer but I don't understand how to establish a relationship with toggleClass() and more than one element.
Am I going about this the right way or is there something better?
How about this. You can use siblings() method.
$(".link").click(function(e) {
$(this).toggleClass("selected");
$(this).siblings('a').toggleClass('selected');
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2</a>
</div>
The accepted answer is the right one, but something that should be added:
$(".link").click(function(e) {
var isSelected = $(this).hasClass("selected");
e.preventDefault();
if (!isSelected) {
$(this).toggleClass("selected");
$(this).siblings('a').toggleClass('selected');
}
});
Essentially, only perform the toggle action if what you're clicking on is NOT the selected element.
A simpler solution
$(".link").click(function(e) {
e.preventDefault();
$(".link").removeClass("selected");
$(this).addClass("selected");
});
Remove selected class from all .link then add it to the clicked element. This will work for more than 2 links and it is simpler. There is no need to check for selected class or get siblings.
I'm having a problem with my script where i click the H3 it will expand and only change the first text in span no matter if i click the second H3. After i wanna collapse it , it doesn't change back to the original text.
What should i use ? TQ
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery('#span1).html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
You need to set up a toggle function for the arrows. As this can't be done with the html codes you need to use ids so you can target them specifically here is the jquery you need:
$(document).ready(function () {
$('.pad').hide();
$('.heading').click(function () {
$(this).next('.pad').slideToggle();
if($(this).find('.span1').attr('id') == 'yes') {
$(this).find('.span1').attr('id', '').html('∨');
} else {
$(this).find('.span1').attr('id', 'yes').html('∧');
}
});
});
Fiddle Demo:
http://jsfiddle.net/Hive7/5xueU/2/
You can try this one
$(document).ready(function() {
$(".pad").hide();
//toggle the componenet with class msg_body
$(".heading").click(function()
$heading = $(this);
$(this).next(".pad").slideToggle(500,function() {
var sign = $(this).is(':visible') ? '∧' : '∨';
$heading.find('span').html(sign)
});
});
});
I did a JsFiddle version for you to look at here: http://jsfiddle.net/gUTTK/
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
jQuery(this).next(".pad").slideToggle(500);
if (jQuery(this).find('.span1').is(':visible')){
jQuery(this).find('.span1').hide();
jQuery(this).find('.span2').show();
} else {
jQuery(this).find('.span2').hide();
jQuery(this).find('.span1').show();
}
});
});
The HTML
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
Since you are selecting #span1, it's going to return only the first instance of that in your document every time. IDs must be unique. Try this instead:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery(this).find("span").html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
To toggle the arrows back, try checking for the visibility of the .pad element:
http://jsfiddle.net/tjnicolaides/W6nBG/
jQuery(document).ready(function () {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
var $pad = $(this).next(".pad");
var $arrow = $(this).find("span");
if ($pad.is(':visible')) {
$arrow.html('∨');
} else {
$arrow.html('∧');
}
$pad.slideToggle(500);
});
});
Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});
Given a group of elements with no target attribute (e.g. following code), what is the most effiecient way to set a highlight-styling for a selected element while unsetting the same styling for a previously selected element ?
<div id="uno" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
<div id="dos" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
<div id="tres" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
I would add and remove a class on clicking the anchor, like so:
$('.element').on('click', function(e) {
e.preventDefault();
$(this).addClass('active')
.closest('div')
.siblings('div')
.find('a')
.removeClass('active')
});
CSS
.active {color: red;} /* or whatever */
or:
$('.element').on('click', function(e) {
e.preventDefault();
$('.element.active').removeClass('active');
$(this).addClass('active');
});
Something like:
$(".element").click(function() {
$(".element").removeClass("active");
$(this).addClass("active");
});
$('.element').on('click',function(e){
$(this).addClass('active');
$('.element').not($(this)).removeClass('active');
});
The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)