so I am totally new to jQuery and just tinkering at the moment, I am using a test script at the moment (below) what I want to achieve is to have images where when its clicked a div slides down with more info - similar to the new google images effect.
The problem with the script below is that it loads with the div open (I need it to open on click) and also, this will only work on one div, do I need to do the script multiple times for multiple divs?
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#clickme').click(function() {
$('#me').animate({
height: 'toggle'
}, 500
);
});
});
</script>
<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img id="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
First of all, you cannot use the same ID for multiple elements. Instead, use a class. jQuery will only select the first occurrence of an ID and will ignore the rest.
Secondly, you will need to provide the function some context - i.e., $(this).next()- This is because when you have multiple elements with the clickme class, the browser will know that it will have to select the next occurring element with a class of me, instead of any other .me element.
$(document).ready(function() {
// Hide image onload
$('.me').hide();
// Provide context for each click event
$('.clickme').click(function() {
$(this).next('.me').animate({
height: 'toggle'
}, 500
);
});
});
HTML:
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
To start off with the div hidden, you can set it to display: none, either using inline styles or (preferably) a <style> element or CSS file.
Then you can uses classes and relative positioning to achieve what you're trying to do:
<script>
$(document).ready(function() {
$('img.clickable').click(function() {
$(this).prev('.image-info').first().animate({
height: 'toggle'
}, 500
);
});
});
</script>
<div style="background-color: #333333; color: #FFFFFF;
padding: 10px; width: 200px; cursor:pointer; display:none;"
class="image-info">
Info about the image you clicked
</div>
<img src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png"
alt="It's me....ah!!!" title="Allen Liu" width="100" height="77"
class="alignnone size-full wp-image-552 clickable" style="border: none;" />
Do what the above commenter suggested, and change your image to a class based approach.
Secondly, add this to the beginning of your document.ready block
$('.me').hide();
Fiddle here
Related
Apologies as it has been a few years since I have done much with jquery, I am in a marketing role now but my employer really wants me to add this functionality to the site.
I am trying to have a page where I click a tab and it hides an image loaded at the top of the page. tried repurposing an old bit of code but no dice :(
JS:
jQuery(document).ready(function( $ ){
$( ".contacttabbyheaders" ).click(function() {
$( ".hideonclick" ).css( "display", "none" );
});
//} /* extra, cause of breaking */
});
HTML:
<img class="hideonclick" src="https://linestar.ca/wp-content/uploads/2022/07/Map.png" alt="" width="auto" height="300px !important" class="aligncenter size-full wp-image-41833" style=" margin-left: auto; margin-right: auto; display: block; max-height: 350px" />
<br>
[tabby title="British Columbia" class="contacttabbyheaders"]
Sorry again for the bad code, I no longer do coding and don't plan on getting back into it just need this fix!!
you have defined two classes in img tag merge them
<img class="hideonclick aligncenter size-full wp-image-41833"
src="https://linestar.ca/wp-content/uploads/2022/07/Map.png" alt=""
width="auto" height="300px !important"
style="margin-left: auto; margin-right: auto; display: block; max-height: 350px" />
Hope this topic doesn't exist twice. I'm searching for a week now and didn't find anything that helped me out.
Ok. I just made a new website with "jimdo" and I'm quite happy with what I've managed so far. My new website is almost done but I have a huge problem to hide a play button on click and show a pause button then. Then click the pause button and the play button appears. I'm sure there are a lot of codes out there but I can't find anything that works for me :(
Here is an image of how it looks at the moment:
play-pause button parallel
These two image buttons are connected to a SoundCloud iframe player and it works but it would be just awesome to have one button instead of the two side by side.
The code looks like this:
<div style="position: relative;">
<img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" style="position: absolute;width: 100%;max-width: 20px;filter: invert(100%);cursor: pointer;margin: -30px 1px;" name="playSound2"><img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa" style="position: absolute;width: 100%;max-width: 20px;filter: invert(100%);cursor: pointer;margin: -30px 22px;" name="stopSound2">
$(function(){
var widget1 = SC.Widget("so2");
$("#playSound2").click(function() {
widget1.play();
});
$("#stopSound2").click(function() {
widget1.pause();
});
});
I really dont know how to make this work.
If you are able to adjust the CSS you can implement jQuery's .addClass() and .removeClass.
Here's a working example where the play and pause buttons are placed on top of each other. A click event registered and when fired, the button with the .hide class is assigned to the toShow variable. Then, the hide class is added and removed depending on which button is shown. As you clarified in the comments that it's a requirement to have the code work while there are several buttons on the page, here's a working example.
Make sure the buttons are within the button-wrapper class as the code uses this to find the button that is currently hidden.
$('.opa').click(function(e) {
var toShow = $(e.target).parent().find('.opa.hide')[0];
$(e.target).addClass('hide');
$(toShow).removeClass('hide');
});
.button-wrapper {
position: relative;
height: 50px;
}
.opa {
position: absolute;
width: 100%;
max-width: 20px;
filter: invert(100%);
cursor: pointer;
margin: -0px 1px;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-wrapper">
<img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
<img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">
</div>
<div class="button-wrapper">
<img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
<img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">
</div>
<div class="button-wrapper">
<img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
<img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">
</div>
Icon needs to display a message when you mouse over and the message becomes hidden when you mouse out. Plain javascript please
<img src="helpicon.png" width=50 height=50 onmouseover="mytoolTip('Click a form field to see its requirements.');" onmouseout="mytoolTip('');" />
function mytoolTip(ValueToDisplay)
{
document.getElementById("helpicon").innerHTML = ValueToDisplay;
}
You can always use the HTML5 title attribute. e.g.
#myBigFatDiv {
padding: 100px;
background-color: #DDD;
cursor: pointer;
text-align: center;
}
<div id="myBigFatDiv" title="Hell Yea it is!">Hover over me to find out if this is a great answer</div>
There is no element with id helpicon in your html. Try adding an element with the id and give it a shot!
Something like:
<img src="helpicon.png" width="50" height="50" onmouseover="mytoolTip('Click a form field to see its requirements.')" onmouseout="mytoolTip('')">
<p id="helpicon"></p>
JavaScript - I am aware that this is where I need to add something to enable multiple instances to run, however I really have no idea of how to code this correctly.
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('#images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
$('#images_full img').attr({
'src': newImageSrc
});
return false;
});
</script>
CSS - This was simple enough
#images_full img,
#images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
#images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML - Finally the HTML elements
<div id="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div id="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set03.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set03.jpg" />
</a>
</div>
It works perfectly fine until I add a second instance on same HTML page, the second set just open in own window like they have almost by-passed the Java commands.
I'm going to take a stab in the dark and say that your problem is that you are just using ids (#) instead of classes (.) to represent your multiple photo galleries. If you want similar behavior among multiple "instances," your jQuery script should be acting upon a class instead of an id. For example:
http://jsbin.com/otiTOyU/1/edit?html,css,js,output
Script:
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('.images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
// Traverse the DOM to change this's respective '.images_full img'
$(this).parent().prev().children().first().attr('src', newImageSrc);
return false;
});
</script>
CSS:
.images_full img,
.images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
.images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML:
<div id="gallery1">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
<div id="gallery2">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
There are different ways you could go about optimizing the code. However, I'll leave that to you as an exercise. Be sure to check out the link I gave near the beginning of my post for a live demo.
So I have the following code.
<script src="http://jamesleist.com/wp-content/uploads/2013/01/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.me').hide();
$('.clickme').click(function() {
$(this).next('.me').animate({
height: 'toggle'
}, 500);
});
});
</script>
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
It works fine when running on its own, however when I implement this into the main site it does not work.
You can see where I have tried to implement it at the following URL.
http://jamesleist.com/portfolio
It is really confusing me :-( I am using Wordpress by the way and jQuery is linked to in the header.php file.
I am assuming this is a problem with Wordpress?
Many thanks in advance for your help.
.me is not the next element, the next element is a paragraph containing the image ?
$(document).ready(function() {
$('.me').hide();
$('.clickme').on('click', function() {
$(this).next('p').find('.me').animate({
height: 'toggle'
}, 500);
});
});
Your img tags have two class attributes defined. I'm not sure if this is 100% the cause, but that should definitely be fixed.
Like this:
<img class="me alignnone size-full wp-image-552" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" style="border: none;" />
Your images have 'class' defined twice, you can't do that. You need to include all your classes including the 'me' class inside one class declaration separated by spaces. A simple run through a validator shows the errors pretty clearly.
I would also consider moving your scripts both internal and external to the bottom of your page so that the dom isn't waiting on them to load. Moving all your inline styles into the stylesheet would be a good idea as well so your code is easier to read and debug.