Earlier this week I was using a tutorial to achieve something similar, but I have decided to strip it down to a basic functionality. I want the user to be able to click on the bottle they want to know about and a content opens up. But if a person does not click the X and instead clicks on other bottles, it should fade out the current content and then show the newly clicked one.
My knowledge of J Query is limited, so I know I am using a longer technique by targeting each one by their id. I would love a more structured shorter version if someone can show it to me.
But based on my knowledge this is what I could construct.
HTML
<div id="two" class="colorbottle">
<img src="images/2.png">
</div>
<div id="three" class="colorbottle">
<img src="images/3.png">
</div>
<div id="four" class="colorbottle">
<img src="images/4.png">
</div>
<div class="clearer"></div>
</div>
<div class="ei_descr" id="onedescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
<div class="ei_descr" id="twodescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
<div class="ei_descr" id="threedescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
<div class="ei_descr" id="fourdescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
Javascript
$(document).ready(function() {
$(".colorbottle").click(function () {
if(!$(this).hasClass('selected'))
{
$(".colorbottle.selected").removeClass("selected");
$(this).addClass("selected");
}
});
$("#one").click(function() {
$("#onedescr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
})
$(".contact_close").click(function() {
$(".ei_descr").fadeOut("slow");
$(".colorbottle").animate({opacity:1});
});
$("#two").click(function() {
$("#twodescr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
})
$("#three").click(function() {
$("#threedescr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
})
$("#four").click(function() {
$("#fourdescr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
})
});
Right now all it does is, fade in the one that is clicked, and makes the other bottles transparent.
here is the fiddle
Thanks
You need to use html data- attribute to store the id of div which needs to be shown on click of bottle div:
HTML:
<div id="wrapcraft">
<div id="one" class="colorbottle" data-id="onedescr">
<img src="http://i61.tinypic.com/v8n2hv.png">
</div>
<div id="two" class="colorbottle" data-id="twodescr">
<img src="http://i61.tinypic.com/v8n2hv.png">
</div>
<div id="three" class="colorbottle" data-id="threedescr">
<img src="http://i61.tinypic.com/v8n2hv.png">
</div>
<div id="four" class="colorbottle" data-id="fourdescr">
<img src="http://i61.tinypic.com/v8n2hv.png">
</div>
<div class="clearer"></div>
</div>
<div class="ei_descr" id="onedescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="twodescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="threedescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="fourdescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
JQUERY:
$(document).ready(function () {
$(".colorbottle").click(function () {
if (!$(this).hasClass('selected')) {
$(".colorbottle.selected").removeClass("selected");
$(this).addClass("selected");
$(".ei_descr").fadeOut(1000);
$('#' + $(this).data("id")).fadeIn(1000);
$(".colorbottle").not(".selected").animate({
opacity: 0.2
});
$(".selected").animate({
opacity: 1
});
}
});
});
UPDATED DEMO
<div id="two" class="colorbottle" onlick = "goto('two')">
<img src="images/2.png">
</div>
<div id="three" class="colorbottle" onlick = "goto('three')">
<img src="images/3.png">
</div>
<div id="four" class="colorbottle" onlick = "goto('four')">
<img src="images/4.png">
</div>
<script>
function goto(id){
$("#"+id+"descr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
}
<script>
You just need to tell the descriptions to fadeout on click and only fadein the one you clicked: http://jsfiddle.net/Lvqn2sk5/5/
$('.ei_descr').fadeOut();
$('#'+this.id+'descr').fadeIn();
Check the below simplification code and working demo
$(".colorbottle").click(function () {
$(".colorbottle").removeClass("selected");
$(this).addClass("selected");
var popupId= $(this).attr("id").split("_")[1];
$("#"+popupId).fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
});
$(".contact_close").click(function() {
$(".ei_descr").fadeOut("slow");
$(".colorbottle").animate({opacity:1});
});
Also, you need to rename the id of 4 bottles div (for example bootle1 as follows)
<div id="b_onedescr" class="colorbottle">
instead of
<div id="one" class="colorbottle">
Related
If I add an alert in the page head the alert shows up normally and after clicking on OK the website loads, but when I move the alert into the end of the body element the webpage (according to YT videos) should load immediately but it doesn't. It still waiting on me on clicking "OK".
So where I did mistake?
<body>
<div id="contact-us">
<h2>Contact Us</h2>
<p>You can contact Mr Green in various ways ...</p>
<div class="contact-method">
<h3>By Phone</h3>
<p>222-222-FISH</p>
</div>
<div class="contact-method">
<h3>By Email</h3>
<p>iammrgreen#green.com</p>
</div>
<div class="contact-method">
<h3>By carrier pidgeon</h3>
<p>To do this, order your podgeon at www.mrgreenspidgeonemporium.com</p>
</div>
</div>
Go to top
<script>
alert("Yo Ninja, welcome to my website!");
</script>
</body>
You can do an experiment for example with setTimeout.
In this snippet if the timeout is too small the alert will appear before anything is painted on the screen, slightly bigger and the whole screen gets painted before the alert appears. It doesn't happen in bits.
<body>
<div id="contact-us">
<h2>Contact Us</h2>
<p>You can contact Mr Green in various ways ...</p>
<div class="contact-method">
<h3>By Phone</h3>
<p>222-222-FISH</p>
</div>
<div class="contact-method">
<h3>By Email</h3>
<p>iammrgreen#green.com</p>
</div>
<div class="contact-method">
<h3>By carrier pidgeon</h3>
<p>To do this, order your podgeon at www.mrgreenspidgeonemporium.com</p>
</div>
</div>
Go to top
<script>
function afterwait() {
alert("Yo Ninja, welcome to my website!");
}
setTimeout(afterwait, 10);
</script>
</body>
I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.
I have made a multiple choice quiz and when there is one on a single page it works exactly as I want it to. The issue is that I need to have multiple quizzes appear on one page and the behaviour on one quiz is affecting the behaviour of any other quizzes that appear on that same page
I've been looking online to see if there's a way for the function to handle each quiz ID separately (as if they each had their own separate function) but nothing I've found so far looks to be something I can apply to the function I already have.
Here's the Javascript
jQuery(document).ready(function(){
jQuery('.answer').click(function(event){
jQuery('.active').removeClass('active');
jQuery(this).addClass('active');
event.preventDefault();
});
});
Here's the HTML
<div id="Quiz1" class="quiz">
<div class="question">Is this a really good question?</div>
<div class="interaction">
<div class="answer" data-answer="correct">
<div class="answer-content">
<span>Answer 1</span>
</div>
</div>
<div class="answer" data-answer="wrong1">
<div class="answer-content">
<span>Answer 2</span>
</div>
</div>
<div class="answer" data-answer="wrong2">
<div class="answer-content">
<span>Answer 3</span>
</div>
</div>
<div class="response-text correct">Correct</div>
<div class="response-text wrong1">Wrong 1</div>
<div class="response-text wrong2">Wrong 2</div>
</div>
</div>
<div id="Quiz2" class="quiz">
<div class="question">Is this a really good question?</div>
<div class="interaction">
<div class="answer" data-answer="correct">
<div class="answer-content">
<span>Answer 1</span>
</div>
</div>
<div class="answer" data-answer="wrong1">
<div class="answer-content">
<span>Answer 2</span>
</div>
</div>
<div class="answer" data-answer="wrong2">
<div class="answer-content">
<span>Answer 3</span>
</div>
</div>
<div class="response-text correct">Correct</div>
<div class="response-text wrong1">Wrong 1</div>
<div class="response-text wrong2">Wrong 2</div>
</div>
</div>
Here's the CSS
.answer[data-answer="correct"] ~ .correct {
display:none;
}
.answer.active[data-answer="correct"] ~ .correct {
display:block
}
.answer[data-answer="wrong1"] ~ .wrong1 {
display:none;
}
.answer.active[data-answer="wrong1"] ~ .wrong1 {
display:block
}
.answer[data-answer="wrong2"] ~ .wrong2 {
display:none;
}
.answer.active[data-answer="wrong2"] ~ .wrong2 {
display:block
}
So, with one quiz on the page everything works as expected - Clicking each bubble will give the user a corresponding response: Correct, Wrong, Wrong2. As each bubble is clicked the css takes whichever .answer element has the .active class and displays the corresponding answer response based on the data-attribute given.
This is wonderful until I have more than one quiz on the page
When there are two quizzes on one page and you click the bubbles in the second quiz it will remove the last answer response from the quiz above it.
I need each quiz to act independently and not have one quiz affecting the others.
I hope this makes sense, I'm terrible at explaining myself.
I've set up a fiddle so you can see it in action - https://jsfiddle.net/g8qpvtcz/1/
If I understand you, you just want to be able to display more than one "response box"?
If so, this might do the job for you:
In your fiddle, change line 3 of the javascript:
jQuery('.active').removeClass('active');
to
jQuery(this).parent().children('.active').removeClass('active');
This gets the parent element of the clicked answer (i.e. the div.interaction) for the given quiz and only removes the active class in its children.
Edit
You could also just use the siblings() method. Which would be even prettier. Don't really know why I forgot about that one.
jQuery(this).siblings('.active').removeClass('active');
I have a link in my page that downloads a PDF file however after they have clicked either of the download links, I would like to take them to another page.
The page gives them one of 2 choices for selecting a download file but I only wish to allow them to make one choice and then exit to another page.
My code is as follows:
<div class="columns medium-6">
<h3 class="text-center">7 Tips for Creating a <br />Happy Workplace</h3> <img src="https://www.maylake.com.au/_assets/images/mini-guide/bookcover-7-tips-workplace.png" height="250px" alt="7 Tips for Creating a Happy Workplace eBook">
<p style="font-size: 18px;" class="text-center">Discover how you can make your workplace a healthier environment by simply making being a happy place to work for everyone</p>
<div class="choose">
<input type="radio" name="choice-books" id="choice-7-tips">
<label>I would like to receive a copy of the eBook</label>
<div class="reveal-if-active">
<p class="text-center">DOWNLOAD Now </p>
</div>
</div>
</div>
<div class="columns medium-6">
<h3 class="text-center">Your Short Guide to Leasing a Commercial Office Space</h3> <img src="https://www.maylake.com.au/_assets/images/mini-guide/bookcover-leasing-commercial-office.png" alt="Guide to Leasing Commercial Office" height="250">
<p style="font-size: 18px;" class="text-center">Understand what you should be considering before leasing any commercial office space. Being forewarned and prepared could save you lots
of money and grief</p>
<div class="choose">
<input type="radio" name="choice-books" id="choice-leasing">
<label for="choice-leasing">I would like to receive a copy of the eBook</label>
<div class="reveal-if-active">
<p class="text-center">DOWNLOAD Now </p>
</div>
</div>
</div>
I would change your a elements to something like this:
<a target="_blank" href="/LiteratureRetrieve.aspx?ID=192014" class="button radius text-center" onclick="window.location='http://google.com';">DOWNLOAD Now</a>
This will take them to google.com at the same time they are downloading the pdf.
I have a javascript script with a function called fuctionone() that displays a graph. I call this script below in a p tag so when 'HERE' is clicked the graph is displayed below each header.
<svg width="480" height="250">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h3 class="card-title">Example one</h3>
<p> HERE </p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h3 class="card-title">Example two</h3>
<p> HERE </p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</svg>
However I want to display the same graph in each column but when I click the HERE link above only one graph is displayed under Example one when I want two graphs displayed for each.
One under Example one and one under Example two.
Is the <svg> tag messing this up somehow?
functionOne has no idea where it's being called from if I had to guess. Next time I'd recommend posting your javascript for clarity. Pass the element to your javascript function, then manipulate the DOM.
functionOne(this)