Here is my html:
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td>
<a rel="img1">Link1</a>
</td>
<td>
<a rel="img2">Link2</a>
</td>
</tr>
</table>
</div>
<div id="box">
<img src="cant-believe-it-icon.png" id="img1"/>
<img src="too-much-icon.png" id="img2"/>
</div>
<span>Text with fist image</span>
<span>Text with second image</span>
And my jQuery:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('#'+imgid).fadeIn('slow');
});
When the first td is clicked, the first image is visible. When the second td is clicked, the first image is hidden, and the second image is visible. How do I apply this to the spans as well?
Update: I set for all images and spans a class="groups". Then I paired the first image with the first span etc. using id="group1", "group2" and so on. Then I set the rel's of the td's to "group1", "group2" etc. The javascript now reads:
$( window ).load(function() {
$(".groups").hide()
$('a').click(function(){
var rel = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$(".groups").hide()
$('#'+rel).fadeIn('slow');
});
Everything hides when opened, but when the td's are clicked nothing happens?
Solution
HTML
<div id="box">
<img src="http://placehold.it/350x250/&text=img1" class="img1"/>
<img src="http://placehold.it/350x250/&text=img2" class="img2"/>
</div>
<span class="img1">Text with fist image</span>
<span class="img2">Text with second image</span>
CSS
$('a').click(function(){
var rel = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('span').hide();
$('.'+rel).fadeIn('slow');
});
It works as the same..
Look jsfiddle: http://jsfiddle.net/kychan/j8vqX/
$('a.show').click(function()
{
$('.hideSpan').fadeIn();
});
$('a.hide').click(function()
{
$('.hideSpan').fadeOut();
});
Use your rel attribute on the spans:
<span rel="img1">Text with fist image</span>
<spa rel="img2">Text with second image</span>
JavaScript:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a, span').removeClass('active');
$(this).addClass('active');
$('img, span').hide();
$('#'+imgid + ', span[rel="' + imgid + '"]').fadeIn('slow');
});
Sidenote: it would be better to use a data-rel attribute, as that's what the data-* attributes are for.
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('span').hide();
spanid = imgid.substr(4) - 1*1;
$('#'+imgid).fadeIn('slow');
$('span:eq('+spanid+')').fadeIn('slow');
});
Instead of using ID in the image, use a particular class and add the same class to the spans also. So when alongwith the image with that class, spans will also be shown/hidden. Modified Code:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img,span').hide();
$('.'+imgid).fadeIn('slow');
});
Here is the link for jsfiddle :http://jsfiddle.net/EuGr3/
Related
I have four DIVS, one is ready and the other three are still hidden. When the link to the second div is pressed, I want the second div to show up, and so for the next link.
The problem is, all the four DIV doesn't have ID and has the same class.
I just want it to automatically run without knowing what is the ID and the class of the div, or anything inside the div. It may look like a slideshow but on click function.
<p> link to the ready div </P>
<p> link to the second div </P>
<p> link to the third div </P>
<p> link to the last div </P>
<div id="wrapper">
<div> this is the div that is ready. This div has no ID and has the same class with others <div>
<div> this is the second div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the third div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the last div that is hidden. This div has no ID and has the same class with others <div>
</div>
FIDDLE
i have made a fiddle that might suite your case please have a look. You can make some modifications according to your needs.
var currentDiv = 0;
$(document).ready(function(){
$(".container div").click(function(){
$(".container div").eq(currentDiv+1).css( "display", "block" );
currentDiv++;
})
});
JSFIddle Link
Im pretty sure this is what you are looking for.
jQuery
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here
So what we are doing is getting the index for the link pressed and then using that to select the div we want to show (this is using :nth-child()).
Note: I have put a container around the links so you it doesn't pick up every p on the page.
If you want only one at a time you can just set them all to hide before showing one.
jQuery:
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div").hide();
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here
JS FIDDLE DEMO
Explanation
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2</a>
<a idx="3">3</a>
<a idx="4">4</a>
</div>
$('.buttons a').click(
function(event)
{
var idx = $(event.target).attr('idx');
$('.div').hide(); //Hides all the divs
$('.parentDiv div:nth-child('+idx+')').show(); // Shows required div
}
);
DISADVANTAGE
If you will insert more contents, there is more work. Else no problem..
If you insert a div , you have to change all the links.
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2.0 Inserted Div</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2.0</a>
<a idx="3">2</a>
<a idx="4">3</a>
<a idx="5">4</a>
</div>
Not here , All the idx has to be changed. Since my code uses nth-child property
Edited
Updated Fiddle
Another Update
I don't know what I am doing wrong with changing href attribute in link from ?page to &page. It stays on ?page. Thank you for any advice.
Jquery:
var article_pagination_change = function(){
$('pagination a').each(function(){
$(this).href.replace('?page','&page');
});
}
article_pagination_change();
HTML:
<div id="pagination80" class="pagination" style="">
<a class="first" data-action="first" href="?page=1"><<</a>
<a class="previous" data-action="previous" href="?page=1"><</a>
<input class="pag_input_80" type="text" value="1 of 12" data-max-page="12" readonly="readonly">
<a class="next" data-action="next" href="?page=2">></a>
<a class="last" data-action="last" href="?page=12">>></a>
</div>
You need to actually set the attribute:
var article_pagination_change = function(){
$('.pagination a').each(function(){
var newurl = $(this).attr('href').replace('?page','&page');
$(this).attr('href', newurl);
});
}
article_pagination_change();
Note that I added the . before pagination and am using attr('href') instead of just href.
Here's a working jsFiddle.
If you don't mind changing your code a bit more, you can try this simpler approach:
var article_pagination_change = function(){
$('.pagination a').attr('href',function(index,attr){
return attr.replace('?','&');
});
}
article_pagination_change();
You don't really need the .each() nor replacing ?page with &page unless you had extra ?s on your hrefs...
Sample JSFiddle
I have this code, works fine but the problem is when I click on link (1) shows all the DIVs while I need each Link showing ONLY its own div.
Java Script
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Map //Link(1)
<div class="slidingDiv">
hide
</div>
Map//Link(2)
<div class="slidingDiv">
hide
</div>
Map//Link(3)
<div class="slidingDiv">
hide
</div>
//...............And so on.....
If I click on any of those links it shows all the DIVs while it should show just its own one.
How to do that?
You are targeting all elements with slidingDiv class, Change below code
$(".slidingDiv").slideToggle();
As below and try
$(this).next(".slidingDiv").slideToggle();
Update*:
You have show_hide class as child of slidingDiv to handle it's click event try below code
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var div = $(this).next(".slidingDiv");
console.log(div);
if (!div.length) {
div = $(this).parent('.slidingDiv');
}
console.log(div);
div.slideToggle();
});
});
jsFiddle
Try this;
HTML:
Map //Link(1)
<div class="slidingDiv">
hide1
</div>
Map//Link(2)
<div class="slidingDiv">
hide2
</div>
Map//Link(3)
<div class="slidingDiv">
hide3
</div>
jQuery:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(this).next().slideToggle();
});
});
Here is the fiddle: http://jsfiddle.net/MrvXB/
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 jQuery:
$(document).ready( function() {
$("#links .button").click(function() {
var id = $(this).attr("id") + "-fade";
$("#sliding-blocks").fadeOut(100);
$("#" + id).fadeIn(300);
});
});
And the simplified HTML:
<table id="links">
<tr>
<td>
<div id="projects" class="button">
Projects
</div>
</td>
</tr>
</table>
<table id="sliding-blocks">
<tr>
<td>
<span id="projects-fade" class="block">
<img class="icon" src="github.png" height="20" width="20" />
</span>
</td>
</tr>
</table>
The non-simplified HTML contains more entries in #links and #sliding-blocks, but all following the same "fade" naming convention.
For some reason, I can't get anything to work (not even something I can work from). And yes, I've loaded jQuery.
Solution:
$(document).ready( function() {
var blocks = ["projects-fade", "blog-fade", "online-fade", "resume-fade"];
$("#links .button").click(function() {
var id = this.id + "-fade";
$("#sliding-blocks").fadeOut(100,function() {
$.each(blocks, function() {
$("#" + this).hide();
});
$("#" + id).show();
$(this).fadeIn(300);
});
});
});
Your fade out the #sliding-blocks table, and fade in one element of it, but the table itself is still faded out. You should instead fade out all .block elements, then fade in the one you want, leaving the table visible all the time.
Because you've faded out an ancestor of the element you're trying to fade in.
When the ancestor is faded out, none of its descendants will be visible.
I assume you're looking for something like this...
$(document).ready( function() {
$("#links .button").click(function() {
var id = this.id + "-fade";
$("#sliding-blocks").fadeOut(100,function() {
$("#" + id).show();
$(this).fadeIn(300);
});
});
});
you're hiding sliding-blocks and then your're trying to fade a child element of it in. that won't work as the parent container sliding-blocks is invisible