I am trying to get a DIV to replaced by another DIV when clicked. Right now I have it so that the first DIV appears and then disappears when other DIVs are clicked but when I try to get the other DIVS to appear when clicked, the first DIV pops up with it. Here is a link to the page http://melinajesser.com/ArchFitters/womens.php, you can click on the Walk image and it is fine but click on the seasonal image and it messes up. How can I fix this?
<div id="infor1">
<div class="side col-md-4 align-center">
<p>Full EVA Midsole Provides Signature Hoka Cushioning</p>
<img src="images/valorwomensside.png">
</div>
<div class="bottom col-md-4 align-center">
<p>Early-Stage Meta-Rocker Provides Propulsion</p>
<img src="images/valorwomensbottom.png">
</div>
<div class="description col-md-4 align-center">
<p>Comfort reigns supreme in the VALOR from the Comfort-Frame lycra upper to the Ultrasize midsole that provides the signature HOKA ONE ONE cushioned ride. Built on an Early-Stage-Meta-Rocker for propulsion, the Valor is a smooth-riding shoe that is best suited for running on man-made surfaces.</p>
</div>
</div>
<div id="infor2">
<div class="side col-md-4 align-center">
<p>Lightweight, padded contour cork footbed</p>
<img src="images/trulieside.png">
</div>
<div class="bottom col-md-4 align-center">
<p>Lightweight Rubber</p>
<img src="images/truliebottom.png">
</div>
<div class="description col-md-4 align-center">
<p>A truly scrumptious leather sandal made in Spain. Man made woven hook and loop straps provide a custom feeling fit. Incredible comfort comes from the lightweight, padded, contour cork-polyurethane footbed lined in suede.</p>
</div>
</div>
$(document).ready(
function(){
$("#walk").click(function () {
$("#infor1").toggle("slow");
});
});
$(document).ready(
function(){
$("#run").click(function () {
$("#infor1").fadeToggle();
});
});
$(document).ready(
function(){
$("#seas").click(function () {
$("#infor1").fadeToggle();
});
});
$(document).ready(
function(){
$("#seas").click(function () {
$("#infor2").toggle("slow");
});
});
$(document).ready(
function(){
$("#run").click(function () {
$("#infor2").fadeToggle();
});
});
$(document).ready(
function(){
$("#walk").click(function () {
$("#infor2").fadeToggle();
});
});
There's no need to wrap each click function in a document ready they can go in the same one, that being said you should use a class to attach the click function or bind it to a handler.
$('.toggle').on('click', function(e){
//do stuff here
});
http://jsfiddle.net/6w0v8nw3/
$(document).ready(function () {
$('.toggle').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
if ($(id).is(':visible')) {
$(id).slideUp('fast');
return false;
}
$('.info:visible').slideUp('fast');
$($(this).attr('href')).slideDown('slow');
});
});
Have a link, make the anchor tag the id of the container you want to toggle.
Related
Can someone please help me understand the jQuery code and how it relates to my HTML. The links are going through and hiding all the divs, however I can't figure out why the div isn't showing when it's link is clicked.
HTML:
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="meet-the-team-info">
<div class="conor-div">
<h1>Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm div2</div>
<div class="tracey-div">I'm div3</div>
<div class="frank-div">I'm div4</div>
<div class="rosie-div">I'm div5</div>
</div>
</div>
</div>
</section>
jQuery:
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
$(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});
You just need to change one line of your jQuery.
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
$(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target+"-div").show() //added "-div" and changed toggle to show
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="meet-the-team-info">
<div class="conor-div">
<h1>Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm div2</div>
<div class="tracey-div">I'm div3</div>
<div class="frank-div">I'm div4</div>
<div class="rosie-div">I'm div5</div>
</div>
</div>
</div>
</section>
#natels's solution works and deserves to be the accepted answer. But even his solution can be shortened a little bit:
$(function () {
$("a").click(function () {
$(".meet-the-team-info div:visible").hide(); // first hide all visible team divs,
$("."+this.dataset.target+"-div").show(); // then show the chosen one
}).eq(0).click(); // emulate a click on the first link (index=0)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
<div class="meet-the-team-info">
<div class="conor-div">
<h1>I'm Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm Kyle</div>
<div class="tracey-div">I'm Tracey</div>
<div class="frank-div">I'm Frank</div>
<div class="gwen-div">I'm Gwen</div>
<div class="rosie-div">I'm Rosie</div>
</div>
</div>
</div>
</section>
The code in this snippet does not need to be adjusted if more divs are to be included in the page. The individual class names do not occur in the code any more.
i think you have an extra hide() there. The first hide(), hides all the divs on page load. But then on click you say "hide" and "toggle". They're canceling each other or doing something unexpected. Try just toggle(). And also you're missing the "div" part in your selector.
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
// $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target+"-div").toggle();
});
});
When i hover over one element, all of them are highlighted
here is my html and jquery code
$('.hover-text').hide();
$('.movie-content').hover(
function () {
$('.movies_post_text').hide();
$('.hover-text').show();
},
function () {
$('.movies_post_text').show();
$('.hover-text').hide();
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="movie-content movie-big" style="background-image: url('Images/incidentbyabank-900x498.jpg');">
<a href="http://www.cricbuzz.com">
<div class="movies_post_text">
<h3>INCIDENT BY A BANK</h3>
<p>Sweden/12 MIN</p>
<p>Award Winning, Drama, Thriller</p>
<p>DIR.Ruben Ostlund</p>
</div>
<div class="hover-text">
<div class="row movie-info">
<div class="col-md-4">
<div class="reactions pull-left">
<div class="view">429<i class="fa fa-eye"></i></div>
<div class="like">252<i class="fa fa-thumbs-up"></i></div>
</div>
</div>
<div class="col-md-8">
<h3 class="grid-title">INCIDENT BY A BANK</h3>
<div class="movie-desc">
<p>Shot using a single camera, 90 people meticulously recreate a failed bank robbery that took place in Stockholm in June 2006. A superb single shot.The short went on to win the Golden Bear at </p>
</div>
</div>
</div>
</div>
</a>
</div>
Please suggest me any solutions to this with jquery or any html classes to use.Help me to get rid of it i know that if i use this it get resolved but how to use that this to get it working
The problem is that in your event callbacks you're not restricting your selectors to the operate only within the hovered parent.
$('.hover-text').hide();
$('.movie-content').hover(
function () {
$('.movies_post_text').hide(); //<-- all matching elements, not just the
// one inside the hovered div
$('.hover-text').show(); //<-- same here
},
function () {
$('.movies_post_text').show(); //<-- " "
$('.hover-text').hide(); //<-- " "
}
);
Should be
$('.hover-text').hide();
$('.movie-content').hover(
function () {
$(this).find('.movies_post_text').hide();
$(this).find('.hover-text').show();
},
function () {
$(this).find('.movies_post_text').show();
$(this).find('.hover-text').hide();
}
);
I understand the rules of SO that I must search first in similar questions for the answer, but none of them in the topic got what I'm looking for. I'm trying to make a div that has an image on it fade in, and after it finishes that effect then another one fades in next to it. I'm pretty sure it has to be done with jQuery callbacks, but everything that I've tried doesn't seem to work.
Here is the HTML and the jQuery:
$(document).ready(function() {
$(".responsive").fadeIn(2500).removeClass("responsive", function() {
$(".responsive2").fadeIn(5000).removeClass("responsive2");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="https://picsum.photos/id/237/100" class="responsive">
<a href="lu-sound.html">
<h1 class="center left">SOUND</h1>
</a>
</div>
<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="https://picsum.photos/id/1062/100" class="responsive2">
<a href="lu-suspension.html">
<h1 class="center right">SUSPENSION</h1>
</a>
</div>
</div>
The CSS is simple:
Both classes, .responsive and .responsive2 have a display property of none.
Your thinking seems to be ok, but check your code again, you have the callback for removeClass, but it has to be for fadeIn.
$(".responsive").fadeIn(2500, function() {
//callback
}).removeClass("responsive");
Most of the jquery animation functions have two parameters: duration and [on]complete. You can use this second parameter to 'continue' with the next animation, ie:
$(function() {
$(".responsive").fadeIn(2500, function() {
$(this).removeClass("responsive");
$(".responsive2").fadeIn(5000, function() {
$(this).removeClass("responsive2");
});
});
});
So I was basically trying to create a drop-down list with jquery. I was successful in achieving but came across with a slight problem. Here's the code
HTML
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
JQUERY
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").slideDown();
});
$(".dropdown_container").mouseleave(function(){
$(".dropdown_container").slideUp();
});
});
Once I hover over the dropdown_heading the dropdown shows-up and I'm able to navigate over it but the only way the it slides back up is if i actually have the cursor in the dropdown_container. If I try to slide it up removing the mouse from dropdown_heading, the dropdown is still visible. How would I be able to slide the submenu back up when the mouse leaves both div_container and div_heading?
I've tried to execute this function but therefore I am unable to navigate over the container. Thanks.
$(".dropdown_heading").mouseleave(function(){
$(".dropdown_container").slideUp();
});
You can try a timer based solution like
jQuery(function($) {
var $target = $(".dropdown_container");
$('.dropdown_heading').hover(function() {
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function() {
var timer = setTimeout(function() {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$target.hover(function() {
clearTimeout($(this).data('hoverTimer'));
}, function() {
$(this).stop(true, true).slideUp();
});
});
.dropdown_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect..
Try this,
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
Here is a screenshot of what I'm trying to accomplish:
Here's a snippet of the html:
<section id="obstacles">
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive topBox" id="theTank">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive topBox rightBox" id="sundaeSlide">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive" id="hamster">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox" id="downTheHatch">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<img id="smallSlime" src="/assets/otherAssets/smallSlime.png">
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<a href="#">
<hgroup>
<h2>Down the Hatch</h2>
<h3>6ft Slide Covered in Gunk!</h3>
</hgroup>
</a>
</div>
</div>
</section>
And here's the jQuery I'm using to change the large picture that shows up on the right:
$(document).ready(function() {
$("#theTank").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-tank.png' />");
$(this).toggleClass('active inactive');
})
$("#sundaeSlide").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/sundae-slide.png' />");
$(this).toggleClass('active inactive');
})
$("#hamster").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/hamster-wheel.png' />");
$(this).toggleClass('active inactive');
})
$("#downTheHatch").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/down-the-hatch.png' />");
$(this).toggleClass('active inactive');
})
$("#pickIt").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/pick-it.png' />");
$(this).toggleClass('active inactive');
})
$("#theWringer").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-wringer.png' />");
$(this).toggleClass('active inactive');
})
})
Right now, when I click on the thumbnail image on the left, the background turns yellow and the correct large image displays on the right. However, when I click another image, the highlighted image remains highlighted. I am sure there is an easy fix to this, I'm just not confident of how to traverse the DOM to do what I want. Any help is greatly appreciated!
How about:
$(".active").toggleClass("active inactive");
Add this as the first line in your click functions.
$("#theTank, #anotherimg").click(function(event){
event.preventDefault();
var imgsrc = $(this).find('img').attr('src');
$('.largeObstacles').html("<img src='"+imgsrc+"' />");
$(this).toggleClass('active inactive');
});
Try this:
(function() {
var LMenuItems = $("a > .box");
var RMenuItem = $(".largeObstacles");
LMenuItems.foreach(function(MenuItem) {
MenuItem.onclick = function(event) {
event.preventDefault();
RMenuItem.html(MenuItem.childNodes[1]);
// Combined with Bill Read's answer -> Box class containing active class
$(".box > .active").toggleClass("active inactive");
}
});
}());
This method allows you to select all the menu items you have on the left menu by creating an array. Using .foreach allows you to iterate through the array and bind the click event to each menu object you have.
As others have mention. Your code makes it difficult because you are using individual event listeners for each element.
A good way to solve this would be to make your code more universal.
Adjusting for my lack of attention in seeing that the image source are different for small/large images.
First make you dom elements share a universal selector (.small-image)
And use a data-attribute on you element containing the large image src.
Note I used the same image for both just to make examples easier. Each data-imgsrc should have its respective image.
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive small-image" id="hamster" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox small-image" id="downTheHatch" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
Then with your javascript we can simple pull the data-imgsrc attribute from out clicked element and set it to the large container.
$('.small-image').on('click', function (ev) {
ev.preventDefault();
// remove any currently active small-images
$('.small-image.active').removeClass('active');
// make clicked active
$(this).addClass('active');
// Get the image src from the clicked elements data-imgsrc attribute
// and inject into large container
var imgText = '<img src="{img-src}" />';
var imgSrc = $(this).data('imgsrc');
$('.largeObstacles').html(imgText.replace('{img-src}', imgSrc);
});
This seems to be the best solution I've found:
("#obstacles .small-image").on('click', function(){
event.preventDefault();
var selector = '#'+$(this).attr('id');
var image = $(this).find('img').attr('data-attr-putItOver');
$(".small-image.active").removeClass('active').addClass('inactive');
$(selector).addClass('active');
$('.largeObstacles').html("<img src='"+image+"' />");
});