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.
Related
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
When the user clicks on the image I want to replace the 'input type:image' with a 'iframe' in the same position and the same height. iv tried adding the iframe and setting the display to invisible then visible when clicked but this causes alignment issues
also tried setting display of iframe to none, which looks good at the start but then how do i get it to appear where the map previously was?
<script>
function showIframeMapOnClick() {
alert("this is a test");
$("#Image1").css('visibility', 'hidden');
$("#iFrameMap").css('visibility', 'visible');
/// $("#iFrameMap").css('visibility', 'block');
}
</script>
<div id="Contact Us" class="backimage2" style="width:100%;">
<div id="Fullcontent">
<div id="thirdPageDiv" class="wrapper whitediv">
<div>
<input type="image" ID="Image1" onclick="showIframeMapOnClick();return false" src="/images/mapImage.png" style="float:right; position:relative; width:550px" />
<iframe id="iFrameMap" src='https:' width='50%' height='400px' style="float:right; position:relative; width:550px; visibility:hidden"/*also tried display:none*/></iframe>
</div>
<div class="black-header">Contact Us</div><br />
This House,<br />
This Street,<br />
This Door,<br />
This LetterB,<br />
Please,<br />
Come Again,<br />
<br />
</div>
</div>
</div>
anyone know how to resolve this?
thanks
Give id to your div,(here its myDiv), and define height & width for it. Inside that use your image.
When user clicks button, change the content of div, thus the iframe will be shown in same position. Code shown below
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
function showIframeMapOnClick() {
$("#myDiv").html("<iframe id='iFrameMap' src='https:' width='50%' height='400px' style=''></iframe>");
}
</script>
<div id="Contact Us" class="backimage2" style="width:100%;">
<div id="Fullcontent">
<div id="thirdPageDiv" class="wrapper whitediv">
<div id="myDiv" style="float:right; position:relative; width:550px">
<input type="image" ID="Image1" onclick="showIframeMapOnClick();return false" src="/images/mapImage.png" />
</div>
<div class="black-header">Contact Us</div><br />
This House,<br />
This Street,<br />
This Door,<br />
This LetterB,<br />
Please,<br />
Come Again,<br />
<br />
</div>
</div>
</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
});
});
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 ...
});
I want to write a script that changes page content but within a foreach array. I have this HTML:
<div id="bigleftproject">
<p>content which will be swapped</p>
</div>
<!-- thumbnails (foreach array -->
<div class="prj_thumb" id="thumb1">
<h2 class="active">project 1</h2>
<img src="../img/thumbnail1.png" alt="thumbnail" width="100" height="50" />
</div>
<div class="prj_thumb" id="thumb2">
<h2 class="active">project 2</h2>
<img src="../img/thumbnail2.png" alt="thumbnail" width="100" height="50" />
</div>
<div class="prj_thumb" id="thumb3">
<h2 class="active">project 3</h2>
<img src="../img/thumbnail3.png" alt="thumbnail" width="100" height="50" />
</div>
<!-- end -->
and I have the beginnings of my jQuery script:
$(document).ready(function(){
$('.prj_thumb').click(function() {
$('#bigleftproject').load('http://www.mysite.com/projects/small/thumb1');
});
});
Essentially, what I am trying to achieve is for the jQuery script to grab the ID of '.prj_thumb' and pass that into the final part of the URL in the .load function.
Is this what you're looking for?
$(document).ready(function(){
$('.prj_thumb').click(function() {
$('#bigleftproject').load('http://www.mysite.com/projects/small/' + this.id);
});
});
Style class -
.btn {
}
Javascript (jQuery) -
jQuery(document).ready(function() {
jQuery(".btn").each(function(index, element) {
alert(this.id);
});
});
HTML -
<div class="btn" id="btn1"></div>
<div class="btn" id="btn2"></div>
<div class="btn" id="btn3"></div>