Swapping an image onClick with jQuery from 4 buttons - javascript

I've had a look through some other questions and was unable to find a solution. I have four buttons and I want them to change the colour of a dress when you click them using jquery. In Dreamweaver I have managed to sort of get it working but rather than replacing the image it seems to replace the buttons, any advice on where I'm going wrong would be greatly appreciated. I created a jsfiddle of it but that works even less, here it is: http://jsfiddle.net/zd72f/
Also sorry for not linking the fiddle properly, hopefully the link I've added will work.
<body style="margin:0 0 0 0;">
<div class="background">
<div id="index-dress">
</div>
</body>
Thanks in advance for any help!

You need to include jQuery in your fiddle as well as changing only the src of the image which is placed inside #index-dress div:
$('#index-dress img').attr('src'........
instead of all images like what you're doing at this moment:
$('img').attr('src'........
Final code should look like this:
$(document).ready(function () {
$('.buttons').click(function () {
$('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/scarlet-dress-sized.png");
});
$('.navy').click(function () {
$('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/navy-dress-sized.png");
});
$('.purple').click(function () {
$('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/purple-dress-sized.png");
});
$('.yellow').click(function () {
$('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/yellow-dress-sized.png");
});
});
Updated Fiddle

Just add a scope to your jQuery image selector:
...
$('img', '#index-dress').attr(..
...
http://jsfiddle.net/zd72f/14/

Related

JavaScript MouseOver Image

I am trying to change the picture by using mouseover however it doesn't seem to be working? can anyone help? here is my code
<img id="myImg" src="Nov1.jpg" alt="November" style="width:452px;height:127px">
<script>
$('#myImg').hover(function() {
$(this).attr('src', '/folder/nov2014.jpg');
}, function() {
$(this).attr('src', '/folder/Nov1.jpg');
});
</script>
There might be two reasons that can create such problem.
See if you've included the jQuery library before using it.
You have to put your code inside $(document).ready(function(){ //here your code goes });
Try this way,
HTML :
<img id="myImg" src="http://www.allgraphics123.com/ag/01/14142/14142.gif" />
jQuery :
$(document).ready(function(){
$('#myImg').hover(function() {
$(this).attr('src', 'http://thumb7.shutterstock.com/display_pic_with_logo/265489/120305665/stock-vector-cartoon-parrot-vector-clip-art-illustration-with-simple-gradients-all-in-a-single-layer-120305665.jpg');
}, function() {
$(this).attr('src', 'http://www.allgraphics123.com/ag/01/14142/14142.gif');
});
});
jsFiddle
Why your code didn't work?????
Before manipulating any DOM element, the page must be loaded first. So one question arises that,
How would I know if the page has already been loaded!!!
Here comes $(document).ready(); as a helping hand from jQuery. It let javaScript execute the code that it contains when the DOM elements are ready for use. So as a developer you don't need to worry if DOM has been loaded or not.
And that's the reason that you were going to manipulate the DOM element #myImg before it has been availabe for use. And your javaScript/jQuery code couldn't find that you are asking for.
I just rephrased this documentation : Here
Try:
<img id="myImg" src="Nov1.jpg" alt="November" style="width:452px;height:127px">
<script>
$("#myImg")
.mouseover(function() {
$(this).attr("src", "/folder/nov2014.jpg");
})
.mouseout(function() {
$(this).attr("src", "/folder/Nov1.jpg");
});
</script>

.click method not working in jQuery

I placed smiley button for popping up new window and show smiles
<textarea class="chattextarea" placeholder="Type message" name="message" id="message" ></textarea>
<div class="smileybutton" id="smileybutton"></div>
and i wrote script like this
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
But the alert is not working.. if i placed another alert outside of bracket, it work on page loading.
PUT the function code like this
$(document).ready(function(){
jQuery('.smileybutton').click(function() {
alert("Clickeddddd");
});
});
Do not forget to include the jQuery library:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Then add your code inside a document.ready block:
$(document).ready(function()
{
$('#smileybutton').click(function()
{
alert("Clickeddddd");
});
});
Fiddle here:
http://jsfiddle.net/6tnmtf75/
Important: Somehow give dimensions to your #smileybutton so you have something to click on. I added some text on my example on jsfiddle. -i assume you have some css applied to it (width/height and a background image of a smiley maybe?)
It will be working if you change the Javascript by:
$(function(){
$('#smileybutton').click(function() {
alert("Clickeddddd");
});
});
Try putting the jQuery code inside document.ready, like this:
$(document).ready(
function() {
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
}
);
Or
jQuery(document).ready(
function() {
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
}
);
in case you don't want to use the dollar sign.
Also, be sure to include jQuery as suggested by Axel and Sharky.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Edit (special thanks to Axel and Sharky for pointing this out)
After short research, it turns out to be even better to put your script inclusions inside the body section of your Web page.
Here is JFiddle: http://jsfiddle.net/LSostaric/qjcu8862/.
Try this code, another way to track click event.
jQuery('.smileybutton').live('click',function(){
alert("Clickeddddd");
});
You need to be added document.ready as other said. If you add as external javascript file, you need to wrap in
$(function(){});
And For now, If you don't set width and height of div, it will be zero and no matter wherever you click, it won't attached with DOM. so you might need to set up div width and height as follows;
#smileybutton{
width:100px;
height:100px;
}
you can look in jsfiddle version.

Jquery show/hide hover or mouse enter issue

Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves
so far ive got this on my fiddle
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
Thanks any help would be great
You Should Read Basic of JavaScript
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
})//added
Updated Demo
You were missing a });
Also, you can simplify your code to:
$(document).ready(function () {
$(".image").mouseover(function () {
$(".hover").show();
}).mouseout(function () {
$(".hover").hide();
});
});
BTW, your HTML is broken. Fix that first.
Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
});
$(".image").mouseout(function(){
$(".hover").hide();
});
});
You can test it here: http://jsfiddle.net/5PR5E/3/

Jquery click function problems

New to jQuery I am trying to have an image that when I click on it I want to move up a certain amount of pixels then when another image is clicked go back down to the original state?
so far i have tried this
$(".wrap").click(function(){
$(this).css("margin-top", "-15px");
});
I just cant figure out how to make it move down to its original place
thanks
Try to do:
$("img.wrap").click(function(){
$("img.wrap").css("margin-top", "0px");
$(this).css("margin-top", "-15px");
});
For better look use Jquery animate
$( ".wrap" ).click(function() {
$(this).animate({
top: "15px",
}, 500);
});
Place it in document.ready and use latest JQuery source file:
<script type="text/javascript>
$(document).ready(function(){
$(".wrap").on('click',function(){
$(this).css("margin-top", "-15px");
});
});
</script>
Try to wrap it in ready()
And css() may not apply margins so use javascript marginTop like,
$(function(){
$(".wrap").click(function(){
this.style.marginTop='-15px';
});
});
Live Demo
As per my understanding of your question. I've created a fiddle to help you find a solution. Please have a look at the fiddle and the code snippet below. Appreciate your time.
$('.sample img').bind('click',function(){
$('.sample img').removeAttr('style');
$(this).css('top',-5);
});
Do you want like this:
var mt = $('.wrap').css('margin-top');
$(".wrap").click(function(){
if($(this).css('margin-top') == '-15px'){
$(this).css('margin-top',mt);
} else {
$(this).css("margin-top", "-15px");
}
});

.Show() not working in Jquery Mobile

I'm looking to simply hide and image before the page loads and then once the page has loaded to show the image. Problem is when I try to show the image it doesn't show the image at all.
Here is my html code:
<body>
<div id ="splash" data-role="page">
<center>
<div id='class'> <img src="BookBayText.png"></div>
<div id='book'> <img src="Book.png"></div>
</center>
</div>
</body>
Here is my javascript/jquery mobile:
<script type="text/javascript">
$(document).on('pagebeforeshow','#splash',
function()
{
$("#book").hide();
});
$(document).on('pageinit','#splash',
function(){
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
},3000);
//For some reason this line below doesn't run
$("#book").show();
});
</script>
Any ideas why this isn't working??
I managed to get the desired effect I wanted with the following code:
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
$("#book").show();
},2000);
Basically I moved the $("#book").show(); line into the setTimeout function. But it still leaves me a tad lost as to why the code wouldn't show the image outside the function. If anyone with the answer to this could update this answer it would really be appreciated.
kinda similar to this post jQuery mobile popup on pageinit .
Although the post blames a delay in the browser, for me it is still unclear why it does it. I have never experience such behaviour.
I wonder what if you do the following changes:
put your center tag inside a data-role:content,
replace pageinit for pageshow.
search your iem as follows
inside either pageinit or pageshow (not settimeout).
>
var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage
if (elem.length) {
// check height or img width here...
}

Categories