How to attr one link to multiple elements? - javascript

I am not really sure if the title points to my question but:
I would like to show two different elements(contents and images) at the same time with one link.. It s kinda content and image slider so if you click link1 attr content1 and image1, if you click on link2 attr content2 and image2 and so on..
That way I can attract boxes but how would I call images too?
$(".box").hide();
$(".box:first").show();
$("a").click(function() {
var activeLink = $(this).attr("href");
$("a").removeClass("active");
$(".box").hide();
$(activeLink).slideDown("normal");
return false;
});
I have come so far..
http://jsfiddle.net/2GR3W/2/
Thnx in advance!

Try:
$(document).ready(function () {
// Text Box
$(".box, .img").hide();
$(".box:first,.img:first").show();
$("a").click(function (e) {
var idx=$(this).index();
e.preventDefault();
var activeLink = $(this).attr("href");
$("a").removeClass("active");
$(".box, .img").hide();
$('.container div').eq(idx).slideDown("normal");
$('.container img').eq(idx).slideDown("normal");
});
});
jsFiddle example

Try refactoring your image ID references to follow a convention named after your link href values.
<img id="box3-img" class="img" src="asd.jpg" width="300" height="200" alt="img3"/>
Then you can treat the 'href' attr value as a mere prefix against the ID for the images:
$(activeLink + "-img").show();
http://jsfiddle.net/2GR3W/5/

My solution for you is:
$(document).ready(function() {
$('.links').on('click','a',function() {
if(!$(this).hasClass('active')){
$('.links a').removeClass('active')
$(this).addClass('active');
$('.container').find('.box, img').hide();
$('.container').find('.box').eq($(this).index()).slideDown('normal');
$('.container').find('img').eq($(this).index()).fadeIn('normal');
}
});
});
$(window).load(function(){
$('.links').find('a:nth-child(1)').trigger('click');
});
Fiddle:
http://jsfiddle.net/2GR3W/7/
With this code you can put infinites <a/>, <div class="box"/> and <img/>, it will always find the .box and the img in the same 'order' and show it

Related

jQuery: remove or hide overlay div?

I'm creating an overlay div using the following code when an image thumbnail is clicked:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs)
return false;
});
});
</script>
This works fine.
Now i need to remove or hide the overlay div when the user clicks on the img with the id of imgBig. so I tried this:
<script>
jQuery(document).ready(function(){
jQuery( "#overlay #imgBig" ).click(function() {
jQuery("#overlay").remove();
});
return false;
});
</script>
but for some reason it just doesn't work which means it doesn't hide/remove the overlay div!
Could someone please advise on this issue?
Thanks in advance.
The click function doesn't work with dynamically created elements. Also, id's are unique so you should only need to use #imgBig in the selector.
Try this:
jQuery(document).ready(function(){
jQuery( "#imgBig" ).on('click', function() {
jQuery("#overlay").remove();
});
return false;
});
You should use the second part inside the first function, like this (I replaced Jquery with $):
...
var imgs = (this.href);
$('#overlay #imgBig').attr("src", imgs);
$( "#overlay #imgBig" ).click(function() {
$("#overlay").remove();
});
return false;
A JSFiddle example:
JSFiddle
Now i need to remove or hide the overlay div when the user clicks on
the img with the id of imgBig
Try assigning click event to img element having src set to imgs
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs);
// assign `click` event to `img` element having `src` set to `imgs`
jQuery("img[src=" + imgs + "]").on("click", function() {
// do stuff
// e.g., remove or hide the overlay div
$(this).parent().remove();
});
return false;
});
});
The problem is that the on() or the click() function doesn't work with dynamically generated HTML content. Previously you could use the live() method but currently it's deprecated in jQuery. Fortunately, the on() method accepts a second argument especially for these cases. So you can use:
jQuery( "body" ).on( 'click', '#imgBig', function() {
jQuery("#overlay").remove();
});
Here's a Fiddle: http://jsfiddle.net/y5y1x5vm/
Hope that solves your problem.

Removing active class if clicking active link a second time?

I came across a question that wanted to add an active link to the currently clicked menu item.
The solution was to add:
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
Now how can we remove the active class if we click the active link a second time? I'm guessing we need to use toggleClass() but I haven't been able to make it work. Note only one link should have active class at a time.
Here is a demo: http://jsfiddle.net/A6dqQ/
You can do:
$('a').click(function(e){
e.preventDefault();
var $a = $(this);
$a.toggleClass('active').siblings().removeClass('active');
});
Use toggleClass() then:
$(this).toggleClass("active");
Code:
$("a").click(function(){
$(this).toggleClass("active");
$("a").not(this).removeClass("active");
});
FIDDLE DEMO
Check if current link is active then add/remove active class based on that, Try this:
$("a").click(function(){
var $this = $(this);
var isActive = $this.hasClass('active');
$("a").removeClass("active");
isActive ? $this.removeClass("active") : $this.addClass("active");
});
jsFiddle
here you have a simple answer:
$("a").on("click", function() {
$("a").removeClass("active");
$(this).addClass("active");
});
$("nav").on("mouseleave", function() {
$("nav").find("a").removeClass("active");
});
What this does is, when your mouse leaves the nav it will automatically remove you active class on a. here you have the DEMO
Something like this?
$("a").click(function () {
var $this = $(this);
if ($this.hasClass("active")) {
$this.removeClass("active");
} else {
$("a").removeClass("active");
$this.addClass("active");
}
});
Fiddle

Changing image by clicking in image from class

I have 4 images in the same class. Wen I click one of the images of that class i want to replace that image, but only that image and no other from the same class:
<img src="1..." class="things">
<img src="2..." class="things">
<img src="3..." class="things">
<img src="4..." class="things">
In the javascript code (using jQuery) I have:
$(".things").click(function(){
$(this).attr('src', 'other_image.png');
})
It doesn't do nothing!
Before I have a .hover() for change the icon image when the mouse is hover it! Maybe is that the problem!
Few mistakes in code - change it to --
$(".things").click(function(){
$(this).attr('src', 'other_image.png');
});
See DEMO
New Demo with Hover
var isClicked = false;
$(".changeImage").hover(function(){
isClicked = false;
$(this).attr("src","http://thumb10.shutterstock.com/thumb_small/210376/124505092/stock-photo-beautiful-businesswoman-portrait-124505092.jpg");
},function(){
if(!isClicked)
$(this).attr("src","http://thumb10.shutterstock.com/thumb_small/91282/117241141/stock-photo-image-of-pretty-businesswoman-looking-at-camera-117241141.jpg");
else
isClicked = false;
}).click(function(){
isClicked = true;
});
You missed some quotes I think:
$(".things").click(function(){
$(this).attr('src', 'other_image.png');
})
hey buddy please check out this code..
<script>
$("document").ready(function (){
$("img").click(function(){
$(this).attr('src', 'Blue hills.jpg');
});
});
it works fine for me.

Hide/Show different links

I have a script that works on one link on jsfiddle.
I have two links. Link one is "Link one" the other one is "Link two" you can see the code on jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/
It works to show and hide but i cant make it show one and other. It shows everything.
If i press Link one I want to show ".open-container-One"
And if I press Link two i just want to show "open-container-Two"
Hope you understand my issue.
jsCode:
$(document).ready(function() {
var $div = $('.test');
var height = $div.height();
$div.hide().css({
height: 0
});
$('a').click(function() {
if ($div.is(':visible')) {
$div.animate({
height: 0
}, {
duration: 500,
complete: function() {
$div.hide();
}
});
} else {
$div.show().animate({
height: height
}, {
duration: 500
});
}
return false;
});
});​
Get the index from the clicked anchor, in this case that would have to be the wrapping li, and then use that index to select the right one in the collection of .test elements. No need to recreate the slideUp/Down already built into jQuery.
$(function() {
var elems = $('.test').hide();
$('a').click(function(e) {
e.preventDefault();
var selEl = elems.eq($(this).closest('li').index());
selEl.slideToggle(600);
elems.not(selEl).slideUp(600);
});
});​
FIDDLE
Although I like #adeneo's answer, I prefer this method using selectors rather than elements :
$(".test").hide();
$('.list a').each(function(i) {
$(this).on("click", function() {
$(".test").slideUp(0).eq(i).slideDown(400, function() {
$(".close a").on("click", function() {
$(".test").slideUp();
}); // on click close
}); // after slideDown (shown div)
}); // on click link
}); // each
The only condition is that there should be the same number of links (list items) as the number of div to be shown and in the same order.
See JSFIDDLE
Give class to the anchor tag,
Link 01
Link 02
give the appropriate class as id to the div tag as
<div id="link1" class="test">
...
...
</div>
<div id="link2" class="test">
...
...
</div>
Do the below change in your javascript function
$('a').click(function() {
$('div.test').hide();
var showDivClass = $(this).attr("class");
$("#" + showDivClass).show().animate({
height: height
}, {
duration: 500
});
$('div.test').not("#" + showDivClass).hide().animate({
height: 0
}, {
duration: 500
});
});
Update and test.
Please provide the id to anchor tag which will be same as the class you need to show/hide.
and replace the $div with the id tag

Dynamically setting anchor text from javascript click()

I have an anchor in the body of my html:
<a id="title" class="acc" ></a>
Then I have the following javascript. The anchor text is set to 'aaa' from the first statement below. When I click on the 'list' element, I get the alert but the anchor text is not updated. Is something wrong here?
$(document).ready(function(){
$('#title').text("aaa");
$("#list").click(function() {
alert($(this).text());
$('#title').text("new title");
});
});
try it with .html like this
$(document).ready(function(){
var title = $('#title').html("aaa");
$("#list").click(function() {
alert(title.text());
title.html('new title');
});
});
This is nicer:
$(document).ready(function(){
$('#title').html("aaa");
});
$("#list").do("click", function() {
alert($(this).html());
$('#title').html("new title");
});

Categories

Resources