We Keep Coding

Slidetoggle Not working properly on child element of the parent

On clicking .cart-contents-toggle the #cartplus-dropdown div should slide down and at the same time slide up without clicking on it a second time. Here is the URL where this is implemented: Website Link
jQuery(document).ready(function() {
jQuery('#cartplus-dropdown').hide();
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').slideToggle();
});
});

Please use the updated code below and let me know if you have any issue or query.
jQuery(document).ready(function() {
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').toggle();
jQuery('#cartplus-dropdown').slideToggle();
});
});
Hope this may be helpful to you.

Tried this and working now
jQuery('.c-btn').mouseenter(function(e) {
jQuery('.cartplus-dropdown').slideDown();
e.stopPropagation();
});
jQuery('.c-btn').mouseleave(function(e) {
jQuery('.cartplus-dropdown').slideUp();
e.stopPropagation();
});

Show and hide a div in jquery

I'm facing an issue, issue is I've a product page where image thumbnails are appearing,
i want when user hover or mouseenter on any thumnail the associated 'add to cart' button should appear, current when i mouseenter on any product all 'add to cart' buttons are appearing,
link is: http://etekstudio.org/demo/crateen/en/men
cod is:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
jQuery(target).mouseenter(function(){
jQuery('.popUpPrice button ').show();
});
});

I'd go with something like this:
jQuery(document).ready(function(){
jQuery(".product-image").hover(function(){
jQuery(this).find(".popupPrice button").show();
}, function() {
jQuery(this).find(".popupPrice button").hide();
});
});
That way it hides it on mouse exit as well.

Try to use:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
Also target is already a jQuery object. You can just use target.mouseenter instead of jQuery(target).mouseenter

Try this:
jQuery(".product-image").mouseenter(function(){
jQuery('.popUpPrice button').show();
});
use hover in jquery
jQuery(".product-image").hover(
function() {
jQuery('.popUpPrice button ').show();
}, function() {
jQuery('.popUpPrice button ').hide();
}
);

try this :
jQuery(document).ready(function(){
jQuery('.product-image').hover(function(){
jQuery(this).next('.popUpPrice').find('button').show();
},function(){
jQuery(this).next('.popUpPrice').find('button').hide();
});
});

Try it.
And you also don't have need to create new object with the name target.You an do directly with this way also.
jQuery(document).ready(function(){
jQuery('.product-image').mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});

You can try this:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.each (function () {
jQuery(this).mouseenter(function(){
jQuery(this).find('.popUpPrice button').show()
});
});
});

inside the function
you are selecting all elements with '.popUpPrice button', you must find the correct button to show.
in this html structure, for instance:
<div class="product">
<div class="product-image><img src="" /></div>
<div class="popUpPrice"><button>Add to cart</button></div>
</div>
all you have to do is:
jQuery('.product-image').mouseenter(function(evt) {
var target = jQuery(evt.currentTarget);
target.parent().find('.popUpPrice button').show();
});
evt.currentTarget is the element which triggered the event. In this case will always be .product-image

Try this
$('.product-image').hover(function(){
$(this).next('.popUpPrice').find('.disc button').show();
},function(){
$(this).next('.popUpPrice').find('.disc button').hide();
});
DEMO

Slide Effects for Tabs Part 2

Ok so my original question got answered and now my slide effect only happens when I click in anywhere in my div region..here is the code:
$(document).ready(function(){
$('#tabs').tabs();
$("#tabs").click(function() {
$(this).effect( "slide", "medium" );
});
});
Now I'm wondering what if somebody wants to copy text from one of my tab regions? Every single time they try to highlight, the tab will slide away. How do I make it so that the tab region only slides when the actualy tab ul is clicked?

Use combination of mousedown and mouseup:
Demo Fiddle
var down=0;
$(document).ready(function(){
$("#tabs").mousedown(function(event){
down=event.clientX+"||"+event.clientY;
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
Updated code which prevent slidedown on right-click copy text:
Demo Fiddle 2
var down="||";
$(document).ready(function(){
$("#tabs").mousedown(function(event){
switch(event.which){
case 1:/*Left mouse button pressed*/
down=event.clientX+"||"+event.clientY;
break;
default:/*middle or right mouse button pressed*/
down="||";
}
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});

You can use the event capturing option on click method. By using that, you can get the element on which the mouse is clicked. And then you can use the target object as below,
$('#tabs').click(function(e){
if(e.target.nodeName == 'P') {
e.stopPropagation();
return;
}
$(this).effect( "slide", "medium" );
});
Hope it will help.

DropDown Scrolls up?

I am trying to get my dropdown menu box so that if i click outside it it will scroll up. I am using the code below to do just that. But for some reason when i click it it just scrolls on up for no reason. You can see a demo here of what i mean. http://bit.ly/sIvM2I To see an example click see our newfeed.
And this is the jfiddle im using http://jsfiddle.net/zBkxj/6/ To see an example click see our newfeed.
Why is it just scrolling up when i click it on http://bit.ly/sIvM2I ? What is wrong with my javascript? To see an example click see our newfeed.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#bottom').click(function() {
$('#content').slideDown();
});
$(document).click(function(e) {
if (e.target.id !='bottom') {
$('#content').slideUp();
}
});
});//]]>
</script>

This code works as you expected
$(document).ready(function() {
$('#bottom').click(function() {
$('#content').slideDown();
event.stopPropagation();
});
$('html').click(function(e) {
//alert(1);
if (e.target.id != 'bottom') {
$('#content').slideUp();
}
});
});
try the live demo at js fiddle

jQuery Hide Toggeled Div On Document.click

I currently have the following code:
$(function(){
$('#btn_signIn').click(function(){
$('#div_signInBox').toggle("fast");
});
});
I need to hide the div_signInBox toggled div anytime any other part of the window is clicked...
Thanks!

Is this what you want?
$(function() {
$('#div_signInBox,html').click(function() {
if ($(this).is('#div_signInBox'))
return false;
$('#div_signInBox').toggle("fast");
});
});