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.
Related
I have a very frustrating situation, that should be seemingly simple.
Whem item (.item-2) is hovered I now have 2 div id that toggles (#text_2, text_2-2). Then when item is clicked, I want both #text_2 and #text_2-2 to "stay" meaning being visible until either of them is clicked.
I have found a script, that works but only #text_2-2 stay when item-2 is clicked.
Both id has been assigned the class "hide-default", but this is a class that's assigned for every other id's in the script also , and is quite entangled with another JavaScript function.
Also the items have been assigned a data-target id's #text_2, #text_3, #text_4 etc. Which I guess could be the reason, that I want to make them stay, the way I want.
Can anybody tell what to do and perhaps explain, why it is being so tricky and possibly how the data-target effects how it works in JavaScript?
Here's a simplification of your code:
jQuery($ => { // DOM ready and $ alias secured
$(".item[data-target]").on({
mouseenter() {
if (!this._active) $(this.dataset.target).removeClass('hidden');
},
mouseleave() {
if (!this._active) $(this.dataset.target).addClass('hidden');
},
click() {
this._active = !this._active; // Toggle
$(this.dataset.target).removeClass('hidden');
}
});
});
.items { display: flex; cursor: pointer; }
.hidden { display: none;}
<div class="items">
<div class="item" data-target="#text_2">
<img src="//placehold.it/60x60/2e8" alt="Some image 1" width="60">
</div>
<div class="item" data-target="#text_3">
<img src="//placehold.it/60x60/f69" alt="Some image 2" width="60">
</div>
</div>
<div>
<div class="hidden" id="text_2" style="color:#2e8;">Textile design</div>
<div class="hidden" id="text_3" style="color:#f69;">Objects</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
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";
});
Today I am building my self a vertical navigation menu and I'm wondering how I would go about build a particular feature I was thinking of.
Here is the coding behind my buttons:
html:
<div class="button"><a href="#">
<img src="../images/article.png" />
<p>Articles</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/leaderboards.png" />
<p>Leaderboards</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/events.png" />
<p>Events</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/search.png" />
<p>Search</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/other.png" />
<p>Other/Tools</p></a>
</div>
css:
.button{
border-left:10px solid #e5dad6;
padding-left:5px;
margin-bottom:20px;
width:120px;
height:120px;
text-align:center;
}
My Goal:
Now my goal is to change the image of the relevant buttons when a user hovers over the whole div (button div), now of course I can do this by adding a hover state in css, but that's not what I want to do, because I don't want to just change that particular div.
What I want:
I want it so I can basically say = if .button is being hovered over, then change the img src of something else on the page, NOT change something related to the element being hovered over.
Do something like this with jQuery:
$(document).ready(function() {
var oldSrc = $('.myNewImage').attr('src');
$('.button').hover(function() {
//on hover of your element
$('.myNewImage').attr('src','http://mynewimagesrc.com');
}, function() {
//when the cursor leaves your element
$('.myNewImage').attr('src', oldSrc);
});
});
You'll have to switch out the .myNewImage, class for the actual class of the image on your page but that should work for what you're asking. It also assigned the original source of your image so that you can always return the element back to it.
you may want to check .hover() for jQuery
You can do what you want really easy with jquery.
<div class="button" id="article_button"><a href="#">
<img src="../images/article.png"/>
<p>Articles</p></a>
</div>
$('.button').on('hover', function(){
$('#some_other_element').data('oldimg', $('#some_other_element').attr('src')).attr('src','other_image.jpg');
}, function(){
$('#some_other_element').attr('src', $('#some_other_element').data('oldimg'));
});
I want the image to act as a toggle so when it's clicked on it will reveal the div with the text.
Here's the CSS class I'm using:
.hidden { display: none; }
.unhidden { display: block; }
and the JS:
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}//
Here's the HTML:
<div class="4u">
<!-- Box -->
<section class="box box-feature">
<a href="javascript:unhide('test');" class="image image-full"
<img src="images/pic01.jpg" alt="" /></a>
<div id="test" class="hidden">
<header>
<h2>Put something here</h2>
<span class="byline">Maybe here as well I think</span>
</header>
<p>Test and more text and more text and more text.</p>
</div>
</section>
</div>
You have a syntax error. Change line 4 to:
<a href="javascript:unhide('test');" class="image image-full">
Note the > at the end of the line.
Unless you're determined to use vanilla JavaScript, a much easier way would be to use jQuery. Add this to your <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
And then your a href could be just javascript:$('#test').toggle() and you wouldn't need to define any functions or CSS classes.
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();