I want to show a div when a user hovers the element. I want that when you hover over div named distinguished the div class prod-desc changes it's opacity to 1.
Please help me and thank you in advantage!
Here's the HTML:
<section id="distinguished" class="four columns"> <a class="dist-img" href="#" alt="" border="0" > <img src="images/e1.png" onClick="window.location='#Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"/> </a>
<div class="descContent">
<div class="distinguished-bar"> <a class="categoryMain" href="#Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"></a> <a class="btAdd" href="#" title="ADD"><span class="iconAdd"></span>
<p>ADD</p>
</a> </div>
<div class="infoContent">
<div class="prod-desc ">
<p>Category</p>
<p>Title</p>
<p>Description</p>
</div>
<div class="prod-price">
<div>
<p class="priceTitle">Precio</p>
<span class="priceRegular">$300</span></div>
</div>
<div class="buttonsBox"> <a class="btAddLarge hom2" id="addToCart" href="/Cart/AddToCart">
<p>#this.Message("Add")</p>
</a> </div>
</div>
</div>
</section>
Here's the jQuery:
$('.prod-desc').hover(function () {
$('.prod-desc', this).stop().animate({
"opacity": 1
});
}, function () {
$('.prod-desc', this).stop().animate({
"opacity": 0
});
});
Try using mouseover and mouseleave instead:
$('.prod_desc').mouseover(function() {
$(this).stop().clearQueue().animate({
"opacity": 1
});
$('.prod_desc').mouseleave(function() {
$(this).stop().clearQueue().animate({
"opacity": 0
});
});
});
You can see it in action in this fiddle: http://jsfiddle.net/svNpQ/3/
It's easy, just use in your code:
$('#distinguished').hover(function() {
$('.prod-desc').animate({"opacity": 1});
});
Here is the example: jsFiddle Demo
In your case you must refer to the element by id, which is 'distinguished'. Then you define the action which is hover and inside of the function you specify which element and what to do, in your case '.prod-desc' animate (change css property) to 1.
Remember to set initial css opacity property of .prod-desc to something lower than 1 to see the difference.
Target the element you wish to attach the event handler to, not the element that will have the fading effect :
$('#distinguished').hover(function() {
$('.prod-desc', this).stop().animate({"opacity": 1});
},function() {
$('.prod-desc', this).stop().animate({"opacity": 0});
});
FIDDLE
Related
I've got a couple of divs to scroll between. I need to set the one in active view (after a link was clicked) to 'active' and all the other div's should have that class removed.
Using toggle I can't get it to work.
$('.projecten').click(function () {
$('#due').toggleClass('selected'),
$paneTarget.stop().scrollTo('#due', 800, {
margin: true,
onAfter: function () {
$("body").animate({
backgroundColor: "#1f8311"
}, 800),projectenfade();
}
}); menuShow(),titleFadeOut();
});
the html
<div id="due" class="elements">
<h3 class="resizeme">...</h3>
</div>
<div id="otto" class="elements">
<h3 class="resizeme">...</h3>
</div>
<div id="etc" class="elements">
<h3 class="resizeme">...</h3>
</div>
...
<div id="menu">
<p>
<a class="welkom pointme">Welkom</a> <a class="blog pointme">Blog</a> <a class="media pointme">Media</a> <a class="projecten pointme">Projecten</a> <a class="contact pointme">Contact</a>
</p>
</div>
why not just use addClass and removeClass:
$(".selected").removeClass("selected");
$(this).addClass("selected");
to only remove selected from divs use this for the first line:
$("div.selected").removeClass("selected");
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>
Currently I have this JS code:
$('.tile').on('click', function() {
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson').css('backgroundColor','#4c7fb5');
$('.metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("company-overview.html");
}, 2000);
});
I also have some HTML <a> which are buttons and they are all called tile
I want to load the specific href defined in the <a> as seen here with two of them:
<a class="tile double bg-tile7color animated seven flipInX" data-click="transform">
<div class="tile-content image">
<div class="padding10">
<h2 class="fg-white ntm">Cost</h2>
<p class="fg-white ntm">Pricing and Proposals</p>
</div>
<div class="brand">
<div class="label"></div>
</div>
</div>
</a>
<a class="tile bg-tile8color animated eight flipInX" data-click="transform">
<div class="tile-content icon">
<span>
<img src="images/mthc/referrals.png">
</span>
</div>
<div class="brand">
<div class="text-center padding10 ntp">
<p class="fg-white">Referrals</p></div>
</div>
</a>
How do I change the JS to load whatever they have in their href's and not what is currently specified in the .load() part of the function? Currently it's loading company-overview.html. While that is the case I will also need to make the color changes unique to the buttons so is there any way to integrate this change into the s ?
Simply replace load("company-overview.html") with .load($(this).attr('href') to reference the href attribute of the current/target .tile being clicked:
$('.tile').on('click', function(e) {
e.preventDefault(); // stop the default link click behavior
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson').css('backgroundColor','#4c7fb5');
$('.metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load($(this).attr('href'));
}, 2000);
});
You can use the this keyword in the click handler to refer to the clicked element. From that you can retrieve the href attribute:
$('.tile').on('click', function(e) {
e.preventDefault();
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson, .metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load($(this).prop('href'));
}, 2000);
});
I am currently using the "SwipeJS" plugin (https://github.com/bradbirdsall/Swipe) to create a photo slider.
Following is the code for the div. I have MULTIPLE instances of this div on a single page (below am using 2 div's only.
<div id='slider1' class='swipe'>
<div class='swipe-wrap'>
<div class="swipe_index"><img src="/images/default/business.jpg" alt="/images/default/business.jpg" id="img1_1" width="100" height ="100" / > </div>
<div class="swipe_index"><img src="/images/default/News.jpg" alt="/images/default/News.jpg" id="img1_2" width="100" height ="100" / > </div>
<div class="swipe_index"><img src="/images/default/Gaming.jpg" alt="/images/default/Gaming.jpg" id="img1_3" width="100" height ="100" / > </div>
</div>
</div>
<span class="nav prev">Prev</span>
<span class="nav next">Next</span>
<span class="nav now">now</span>
<div id='slider2' class='swipe'>
<div class='swipe-wrap'>
<div class="swipe_index"><img src="/images/default/business.jpg" alt="/images/default/business.jpg" id="img1_1" width="100" height ="100" / > </div>
<div class="swipe_index"><img src="/images/default/News.jpg" alt="/images/default/News.jpg" id="img1_2" width="100" height ="100" / > </div>
<div class="swipe_index"><img src="/images/default/Gaming.jpg" alt="/images/default/Gaming.jpg" id="img1_3" width="100" height ="100" / > </div>
</div>
</div>
<span class="nav prev">Prev</span>
<span class="nav next">Next</span>
<span class="nav now">now</span>
I am not aware as to how to bind the following jquery code to every instance of the div. Below is my attempt to modify the jquery
<script>
$(document).ready(function() {
$('.swipe').each(function(){
Slider = $(this).Swipe({
continuous: false,
stopPropagation: true,
callback: function(index, elem) {
alert(index);
},
}).data('Swipe');
$('.next').click(function(data){
Slider.next();
//alert($(".swipe_index .current").data('index'));
});
$('.prev').on('click', Slider.prev);
});
});
</script>
However, the above code doesn't work well. This only binds the jquery to the last div.Can someone please help correct the code above?
Whats the best way to bind jquery to multiple instances of divs on a webpage.
Try
$(document).ready(function () {
$('.swipe').each(function () {
//create a closure variable instead of a global one
var Slider = $(this).Swipe({
continuous: false,
stopPropagation: true,
callback: function (index, elem) {
alert(index);
},
}).data('Swipe');
//use relative tranversal to find the next/prev elements
$(this).next().next('.next').click(function (data) {
Slider.next();
//alert($(".swipe_index .current").data('index'));
});
//try using $.proxy
$(this).next('.prev').on('click', $.proxy(Slider.prev, Slider));
});
});
I've got a set of elements where when I click on a specific button, I want to animate one element at a time using jquery.
This is my html markup.
<ul class="image-wrapper">
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
</ul>
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="overlay"></div>
<div class="menu"></div>
This is my jquery code for animate each element.
$('.left-arrow').click(function(){
$('.image').first().animate({
width:'0px'
},1000);
})
But the problem is after the first animation, I cannot continue with the rest! how can I loop through the elements to slide in each element.
you need to keep and index
var index = 0, $imgs = $('.image');
$('.left-arrow').click(function(){
$imgs.eq(index ).animate({
width:'0px'
},1000);
index = index == 0 ? $imgs.length - 1 : index - 1 ;
})
Demo: Fiddle
Try jquery's .each(),
$('.left-arrow').click(function(){
$('.image').each(function(){
$(this).animate({
width:'0px'
},1000);
})