I know this question has been asked before — I've truly done my best to try to make use of the responses — but I just cannot for the life of me figure out how to map the responses onto my own code. (Relatively new to coding, so I am having difficulty reverse-engineering the responses to code that is quite different from my own.)
I'm trying to fade between image1 and image2 on load, but I keep getting the white space in between.
https://jsfiddle.net/68xsn01r/4/
<div id="container1" class="container">
<img class="image1" src="https://i.imgur.com/XJZvyAh.jpg" alt="Mandarinazul" width="100%" height="100%" />
<img class="image2" src="https://i.imgur.com/7iOp5Xc.jpg" alt="Mandarinazul" width="100%" height="100%" />
<span id="wrapper">
→
</span>
</div>
JQuery:
$("#container1").fadeIn("fast",function(){
$(".image2").fadeIn("slow", function(){
$(".image1").fadeIn("slow", function(){
});
});
});
I am trying to work this out as part of a project. What changes do I need to make to my JS Fiddle?
Use On click function jquery and then use Radio button to select the image so that on click radio button according to selected radio button jquery fade in or out the image.
<div class="color-choose">
<div>
<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label>
</div>
<div>
<input data-image="blue" type="radio" id="blue" name="color" value="blue">
<label for="blue"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
and images are look like this
<div class="left-column">
<img data-image="black" src="abc.jpg"
alt="">
<img data-image="blue" src="abd.jpg" alt="">
<img data-image="red" class="active" src="abs.jpg" alt="">
and script
<script>
$(document).ready(function() {
$('.color-choose input').on('click', function() {
var headphonesColor = $(this).attr('data-image');
$('.active').removeClass('active');
$('.left-column img[data-image = ' + headphonesColor +
']').addClass('active');
$(this).addClass('active');
});
});
</script>
and use jquery cdn too
Related
I have three images that each change to a second image on mouseover. On mouseover they also reset the others to the standard image. This all works fine.
However..
I would like each of the second images to be clickable links to another page.
Hope someone can help, many thanks.
$(document).ready(function(){
$('#s1').mouseover(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
So the links would need to be on click-1.png, click-2.png, click-3.png.
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" id="s1" width="300" height="300" />
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" id="s2" width="300" height="300" />
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" id="s3" width="300" height="300" />
</div>
</div>
</div>
Just make each image tag (s1, s2, and s3) a link. The actual src attribute of the img tag can change to display whatever image you want, it's really irrelevant. After all, A user can only click on something they've moused over.
I am extending my previous question. I am trying now if one of the radio button is selected then other should de-select by default.
I have tried by adding this :
JS
function Show_Div(Div_id) {
if (!$(Div_id).is(':visible')) {
$(Div_id).prev().children().prop('checked', true);
$(Div_id).show(250);
} else {
$(Div_id).prev().children().prop('checked', false);
$(Div_id).hide(250);
}
}
function cbChange1(obj) {
var cb1 = document.getElementsByClassName("cb1");
for (var i = 0; i < cb1.length; i++) {
cb1[i].checked = false;
}
obj.checked = true;
}
HTML
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div(Div_1)" width="100px">
<p>
<input type="radio" onclick="Show_Div(Div_1)" class="cb1" onchange="cbChange1(this)">Flower 1</p>
<div id="Div_1" style="display: none;">
Flower is pink.
</div>
<br/>
<br/>
<img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div(Div_2)" width="100px">
<p>
<input type="radio" onclick="Show_Div(Div_2)" class="cb1" onchange="cbChange1(this)">Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>
But by above code only the radio buttons are select and de-select. The show and hide div which is connected with radio buttons is not show and hide by above.
Can anyone help me in this?
You're going about it wrong, it's actually quite simple. If two radio boxes are effectively answers to the same question then all you need to do is give both elements the same name. Then to handle showing and hiding of div's you can do this -
function Show_Div(Div_id, element) {
$("input[name='radio1']").not(element).parent().next('div').hide(250);
if (!$(Div_id).is(':visible')) {
$(Div_id).prev().children().prop('checked', true);
$(Div_id).show(250);
} else {
$(Div_id).prev().children().prop('checked', false);
$(Div_id).hide(250);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div(Div_1)" width="100px">
<p>
<input type="radio" name="radio1" onclick="Show_Div('#Div_1')" class="cb1" >Flower 1</p>
<div id="Div_1" style="display: none;">
Flower is pink.
</div>
<br/>
<br/>
<img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div(Div_2)" width="100px">
<p>
<input type="radio" name="radio1" onclick="Show_Div('#Div_2')" class="cb1" >Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>
I want to develop a web application where you can specify a question and then provide a choice of multiple answers. I require extra answer 'boxes' to be added when the plus button is clicked, but only added to the specific formRow (see code).
I have tried the JQuery last function but it will always add after the answer box with id=4.
HTML:
<div class="formRow">
<img src="images/icons/color/cross.png" alt="" />
<label>Multiple Choice: </label>
<div class="formRight" style="height:28px;">Question1: <input type="text" class="MCQuestion" QID="'+QID+'" /><img src="images/icons/color/plus.png" alt="" /></div>
<div class="formRight MCAns" id="1">Answer 1: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="formRight MCAns" id="2">Answer 2: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="clear"></div>
</div>
<div class="formRow">
<img src="images/icons/color/cross.png" alt="" />
<label>Multiple Choice2: </label>
<div class="formRight" style="height:28px;">Question2: <input type="text" class="MCQuestion" QID="'+QID+'" /><img src="images/icons/color/plus.png" alt="" /></div>
<div class="formRight MCAns" id="3">Answer 1: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="formRight MCAns" id="4">Answer 2: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="clear"></div>
</div>
Javascript
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$(".MCAns").last().after("New Answer Optition"); //Tried this first
$(".MCAns :last-child").after("New Answer Optition"); //Then this
});
});
Use this :
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$(this).closest('.formRow').find('.MCAns').last().after("New Answer Optition");
});
});
The probleme with your code is that you are selecting every MCAns and take the last one. You should take the last of .formRow add button you clicked.
Use that code:
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$('.formRow').find('.MCAns').last().after("New Answer Optition");
});
});
Check jsfiddle
You can try to get the container formRow first, then you can add as many tags as you want.
Here is the code:
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
var parent = $(this).parents('.formRow'); // Find the container .formRow first
parent.find('.MCAns:last').after("New Answer Optition"); // Add new content after last one
});
});
I have three divs, each containing multiple images.
There are also three buttons on the page.
I would like to create an effect where clicking on each button fades in the corresponding div and fades out the other two divs.
I have tried to follow code posted previously for similar effects, but have been unsuccessful and am hoping for some help from those who have more skill than I do! Thanks, Ross
The HTML is as follows;
<div id="GROUP-Join">
<img class="CentreBox" src="images/CentreBox.png"
width="487" height="173">
<img id="TitleOne" src="images/TitleOne.png"
width="339" height="19">
<img id="TitleTwo" src="images/TitleTwo.png"
width="143" height="14">
<body onLoad="focus();signup.email.focus()"></body>
<form method="post" name="signup" action="signup.php">
<input id="EmailAddress" type="text" name="email"
placeholder="e-mail" style="color: #000000;
font-family: 'Arial'; font-size: 20px; background-color:transparent;
border:hidden;" size="24" maxlength="49">
<input id="Go" type="image" name="submit" src="images/Go.png"
alt="submit" value="GO">
</form>
</div>
<div id="GROUP-About">
<img class="CentreBox" src="images/CentreBOX.png"
width="487" height="173">
<img id="AboutHead" src="images/AboutHead.png"
width="132" height="19">
<img id="JumpAround" src="images/JumpAround.png"
width="379" height="33">
<img id="Win" src="images/Win.png"
width="254" height="15">
</div>
<div id="GROUP-Contact">
<img class="CentreBox" src="images/CentreBOX.png"
width="487" height="173">
<img id="ContactHeading" src="images/ContactHead.png"
width="124" height="19">
<img id="Email" src="images/e-mail.png"
width="24" height="17">
<img id="Twitter" src="images/tw.png"
width="24" height="20">
<img id="fb" src="images/fb.png"
width="10" height="21">
</div>
<button id="button1">Join</button>
<button id="button2">About</button>
<button id="button3">Contact</button>
I'm not sure this is what you're meaning, but this will fade in each corresponding div and fade out the other two.
<script type="text/javascript">
$(document).ready(function () {
$('#btn1').click(function () {
$('#div1').fadeIn();
$('#div2').fadeOut();
$('#div3').fadeOut();
});
$('#btn2').click(function () {
$('#div1').fadeOut();
$('#div2').fadeIn();
$('#div3').fadeOut();
});
$('#btn3').click(function () {
$('#div1').fadeOut();
$('#div2').fadeOut();
$('#div3').fadeIn();
});
});
</script>
And the markup:
<div>
<div id="div1">
hello
</div>
<div id="div2">
hello 2
</div>
<div id="div3">
hello 3
</div>
<div>
<input type="button" id="btn1" />
<input type="button" id="btn2" />
<input type="button" id="btn3" />
</div>
</div>
The jquery fadeIn and fadeOut functions also have callbacks, so you could also do:
$('#div2').fadeOut(100,
function() { $('#div3').fadeOut(100,
function() { $('#div1').fadeIn(100);
});
});
Check this FIDDLE
This script should get the work done for you
$(function(){
$('button').on('click', function() {
var btnText = $(this).text();
$('div').fadeOut('slow');
$('#GROUP-'+btnText).fadeIn('slow');
});
});
When you run an effect in jQuery such as fadeIn, you can provide a callback so that you can perform actions once that effect has completed. For instance, in your case:
$('#button1').click(function() {
$('#GROUP-Contact').fadeOut(500);
$('#GROUP-About').fadeOut(500, function() {
$('#GROUP-Join').fadeIn(500);
});
});
This is my best guess of what you are looking for without seeing any JS code.
how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image
If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.
Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});