Changing a image for another after clicking on it with jquery - javascript

this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.
I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:
<script type="text/javascript">
$(document).ready(function() {
// when click on the tag with id="btn"
$('#btn').click(function() {
// change the state of the "#idd"
$('#idd').toggle(800, function() {
// change the button text according to the state of the "#idd"
if ($('#idd').is(':visible')) {
$('#btn').attr('images/button2.png', this.href); // Show Less.. button
} else {
$('#btn').attr('images/button.png', this.href); //Learn More.. button
}
});
});
});
</script>
and my Html:
<div id="idd" style="display:none;">
- Here my hidden content -
</div>
<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">
What im doing wrong? Please Help :(

Check the syntax for .attr. It should be something like
$('#btn').attr('src', 'your image src');
Function Reference: http://api.jquery.com/attr/

To change the value of src you use 'attr' like this:
$('#btn').attr('src', 'images/button2.png');
Here is a DEMO
HTML
<div id="idd" class='display-none'>
- Here my hidden content -
</div>
<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">
CSS
.display-none {
display:none;
}
jQuery
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
// change the button text according to the state of the "#idd"
if (idd.hasClass('display-none')) {
btn.attr('src', 'http://placekitten.com/50/50');
idd.removeClass('display-none');
} else {
btn.attr('src', 'http://placekitten.com/40/40');
idd.addClass('display-none');
}
});
});

take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change..
here is simillar example i'm working on. hope will help you.!
$('#play-pause-button').click(function () {
// $('#play-pause-button').play();
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
$("#play-pause").attr('src', "Image1 path");
}
else {
$("#media-video").get(0).pause();
$("#play-pause").attr('src', "Image2 path");
}
});

You should use css to associate image(s) on your "button" and a css class to determine which to show.
You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.
markup
<div id="idd">
- Here my hidden content -
</div>
<div id="btn">Click Me</div>
css
#idd.off {
display:none;
}
#btn {
border:1px solid #666;
width:100px; height:100px;
background:#fff url(images/button.png) no-repeat 0 0; // Show Less.. button
}
#btn.off {
background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}
jquery
$('#btn').click(function(){
$('#idd').toggleClass('off');
$('#btn').toggleClass('off');
});

Related

Hide div and show another divs

I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});

About click or hover functions

We have a code, when you click the icon, a div appears.
We want to make it appear when hover on icon, not click.
How can we do it?
This code is in my Wordpress theme's footer section.
It needs a change to work like i want. Code is this:
<script type="text/javascript">
$(document).ready(function(){
var searchi = 0;
$("#social-medias").click(function(){
$("#medias-icons").slideToggle("fast");
if ( searchi == 0 ){
$(this).addClass("searchAct1");
searchi = 1;
}else{
$(this).removeClass("searchAct1");
searchi = 0;
}
});
});
</script>
instead of .click(function() { //code here; }); use .mouseover(function() { //code here; });
then to get it to undo, use .mouseout(function() { //reverse code here; });
I see these elements are nested, so you can achieve this using only styles
.a{
color:blue;
}
.a .b{
color:red;
}
.a:hover .b{
color:green;
HTML:
<div class="a">
a
<div class="b">
b
</div>
</div>
Following this example, you can override nested classes behaviour(e.g. display:none/block) when cursor is over it's parent (hover)

Remove class if display = none

How to add and remove class with the condition of CSS display. For example, I have some Div that can be hidden and shown. I want that, if the div is hidden with the display:none;, then the class of the div is removed.
But if the div is shown with the display:block;, I want to add a class to the div.
Here is what I have been trying:
$(document).ready(function(){
if($('.bigPicture').css('display') == 'block')
{$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');};
if($('.bigPicture').css('display') == 'none')
{$('.bigPicture').find('div').removeClass('easyzoom easyzoom--overlay');}
});
EXPLANATION
I have multiple slideshows in one pages. Not all of the slideshow is going to be shown in the page, one of them will only show if the link to that slideshow is clicked. It sames like auto hide and show function. If one slideshow is shown, then other slideshows are hidden.
Each slideshow has their own thumbnails to control them.
The problem is all of the slideshow has no ID and has the same class, while all the slideshow is run with the same script.
If the thumbnail in the second slideshow I click, the slideshow doesn't move. And I realize it slides only the first slideshow.
SO, the solution is I have to remove the class of the slideshow.
Try is visible:
$(document).ready(function(){
if($('.bigPicture').is(':visible')){
$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');
} else {
$('.bigPicture').find('div').removeClass('easyzoom');
}
});
This is what you are trying to do?
If so, it's easy to convert it to jquery syntax instead.
It would be easier if you had provided a jsFiddle of your problem.
CSS
.bigPicture {
width: 50px;
height: 20px;
border-style: solid;
border-width: 2px;
}
.hidden {
display: none;
}
.easyzoom {
background-color: red;
}
HTML
<div class="bigPicture">
<div>One</div>
</div>
<div class="bigPicture hidden">
<div class="easyzoom easyzoom--overlay">Two</div>
</div>
<div class="bigPicture hidden">
<div class="easyzoom easyzoom--overlay">Three</div>
</div>
Javascript
document.addEventListener('load', function () {
Array.prototype.forEach.call(document.querySelectorAll('.bigPicture'), function (bigPicture) {
var div = bigPicture.querySelector('div:first-of-type');
if (div) {
if (window.getComputedStyle(bigPicture).display === 'none') {
div.classList.remove('easyzoom', 'easyzoom--overlay');
} else {
div.classList.add('easyzoom', 'easyzoom--overlay');
}
}
});
}, true);
On jsFiddle
I think your code is somewhat working. Here is a fiddle where I have shown and hidden on the click of the buttons.
Code Snippet:
$(document).on('click','#addBigPicture',function(){
$('.bigPicture').css('display','block');
if($('.bigPicture').css('display') == 'block')
{$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');};
});
$(document).on('click','#hideBigPicture',function(){
$('.bigPicture').css('display','none');
if($('.bigPicture').css('display') == 'none')
{$('.bigPicture').find('div').removeClass('easyzoom easyzoom--overlay');}
});
The if loops are as desired by you. Hope it helps!!

How to show the child div on mouse hover of parent div

I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.
The following is my current markup:
<div class="content">
<div class="parent_div">
<div class="hotqcontent">
content of first div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of second div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of third div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of fourth div goes here...
</div>
<hr>
</div>
</div>
What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.
To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!
<script>
$(document).ready(function() {
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$('.hotqcontent').toggle();
});
});
});
</script>
How can I modify or replace my existing code to achieve the desired output?
If you want pure CSS than you can do it like this....
In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.
.hotqcontent {
display: none;
/* I assume you'll need display: none; on initialization */
}
.parent_div:hover .hotqcontent {
/* This selector will apply styles to hotqcontent when parent_div will be hovered */
display: block;
/* Other styles goes here */
}
Demo
Try this
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
Or
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
You can use css for this,
.parent_div:hover .hotqcontent {display:block;}
This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):
.parent_div {
height: 50px;
background-color:#ff0000;
margin-top: 10px;
}
.parent_div .hotqcontent {
display: none;
}
.parent_div:hover .hotqcontent {
display:block;
}
This will ensure that your site still functions in the same way if users have Javascript disabled.
Demonstration:
http://jsfiddle.net/jezzipin/LDchj/
With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.
$('.hotqcontent', this).toggle();
$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
JSFIDDLE
you don't need document.ready function inside document.ready..
try this
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
and yes your code will toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div
updated
you can use on delegated event for dynamically generated elements
$(function() { //<--this is shorthand for document.ready
$('.content').on('mouseenter','.parent_div',function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
you can try this:
jQuery(document).ready(function() {
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
jQuery(this).hover(function(){
jQuery(this).children("div.hotqcontent").show(200);
}, function(){
jQuery(this).children("div.hotqcontent").hide(200);
});
});
});

Javascript Image roll over with onclick toggle

I currently have code to roll over an image link as below:
<a id="show" href="#"><img src="images/show-me.png" border=0 onmouseover="this.src='images/show-me_over.png';" onmouseout="this.src='images/show-me.png'"></a>
on clicking this it shows a div
jQuery(document).ready(function(){
jQuery("#show").toggle(
function(){
jQuery('#home-hidden-extra').animate({'height': '480px'} ,1000);},
function(){
jQuery('#home-hidden-extra').animate({'height': '0px'} ,1000);}
);
});
What i would like to do but i cant find/figure out is to use show_me.png and show_me-over.png when the div is hidden and then hide_me.png and hide_me-over.png when the div is shown.
How is the simplest way to achive this?
Thanks again!
You should be putting static hover styles to CSS. Define
.linkShow {
background-image: url("images/show_me.png");
}
.linkShow:hover {
background-image: url("images/show_me_hover.png");
}
.linkHide {
background-image: url("images/hide_me.png");
}
.linkHide:hover {
background-image: url("images/hide_me_hover.png");
}
Then add these classes to the link with jquery.
$("#show").removeClass().addClass("linkShow");
This ought to work:
HTML
<a id="show" href="#">
<img id="the-image" src="images/show-me.png" />
</a>
JS
$(document).ready(function(){
setupHover(); /* Defined below */
$('#show').toggle(function(){
$('#home-hidden-extra').animate({'height': '480px'} ,1000);
setupHover();
},function(){
$('#home-hidden-extra').animate({'height': '0px'} ,1000);
setupHover();
});
});
function setupHover(){
/* Unbind existing hover handlers */
$('#show').unbind('mouseenter mouseleave');
/* Use the correct image filenames depending on the situation */
if($('#home-hidden-extra').height() > 0){
images = ['show-me.png','show-me_over.png'];
}
else {
images = ['hide_me.png','hide_me-over.png'];
}
$('#show').hover(function(){
$('#the-image').attr('src','images/' + images[1]);
},function(){
$('#the-image').attr('src','images/' + images[0]);
});
}

Categories

Resources