I have
<div class="box box1">
<div class="content">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div>
</div>
What I want to do is make the entire div of box clickable.
I have looked around here in StackOverFlow and seen some great examples but I have tried them and I could not get them to work.
For Example:
$div.next('div.box2').find('a').attr('href', $div.find('a').attr('href'));
Any help would be great on how to do this in jquery
$(".box").click(function(){
window.location=$(".whereeveryourelookingfor").find("a").attr("href");
return false;
});
you can make the mouse pointer also look like the one on href , use the following css
.box{ cursor:pointer; }
http://jsfiddle.net/r9Xhf/
<div class="box box1" style="cursor: pointer">
<div class="content">
<a href="example">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div></div>
JS
$('.box').click(function(){
window.location.href = "http://www.example.com";
});
Related
First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.
You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});
First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});
I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.
I'm trying to display a photo gallery with jQuery. This is my code:
<script>
$("#vsetky").click(function(){
$("#obrazky").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>
When the #vsetky element is clicked... It works, every picture is displayed.
When the #c element is clicked, there aren't any pictures.
I tried to use
$("#obrazky > #cervene").show();
I've tried other methods but nothing is working. Help me please - what am I doing wrong?
What does your css look like? If both #obrazky and #cervene have display:none, then when you click on #c you're only removing the display:none rule from #cervene, but not it's parent wrapping div#obrazky.
Edit:
You'll want to change the css to be hiding #cervene, #zlte, and #zelene, and then show and hide those individually with the javascript. If an element's parent is has display:none, then 'show()'ing it with javascript doesn't to anything because you're not removing the display:none from the parent.
<script>
$("#vsetky").click(function(){
$("#cervene, #zlte, #zelene").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<style>
#obrazky {display:inline-block;}
#cervene, #zlte, #zelene {display:none;}
</style>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>
HTML
<div class="page-content">
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
</div>
jQuery
$(".page-content .image").each(function(i) {
//$(this).closest('.gallery') ??
});
How can I find/select the "next" or "following" .gallery for each `.image``
So when running through the each() loop I want the first gallery for the first image.
When running through the second .image I want to find the .gallery that is "underneath" the second .image in the dom-tree.
Any idea how to do so?
This plugin was written for exactly this. Disclaimer: I wrote it
http://techfoobar.com/jquery-next-in-dom/
$(".page-content .image").each(function() {
$(this).nextInDOM('.gallery');
});
$(".page-content .image").each(function() {
$(this).parent().next('.gallery');
});
Edit : For your updated question:
$(".page-content .image").each(function() {
$(this).parent().nextAll('.gallery:first');
});
See a sample here
One possible solution:
$(".page-content .image").each(function() {
$(this).parent().next(".gallery");
});
Here parent() goes up to <div class="something"> and next(".gallery") gets next sibling element with "gallery" as a class name (if exists).
For the updated question you may use .nextUntil() method:
$(this).parent().nextUntil(".gallery").next();
I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.
I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.
Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/