Develop Reference

Trigger each div independently using same script

I'm trying to get each blue div (<div id="rectangle"></div>) to fire independently.
Right now, if you hover/click over the first one, both fire simultaneously, and if you hover/click over the second one, neither fires.
This is a common question and has been addressed elsewhere, but I've tried to implement several different versions and apply it to this particular code, and it's not working. I was hoping someone could provide some explanation to help me learn, and I can compare to the other posts I've tried out to understand what the difference is.
$('.rectangle1').hide();
$('#rectangle').on('click', function() {
clicked = !clicked;
});
$('#rectangle').hover(function() {
$('.rectangle1').slideDown()
},function() {
if (!clicked) {
$('.rectangle1').slideUp()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rectangle"></div>
<div class="rectangle1"></div>
<div id="rectangle"></div>
<div class="rectangle1"></div>
http://jsfiddle.net/Q5cRU/99/

One problem is that you're using id="rectangle" for two elements. According to MDN:
The id global attribute defines a unique identifier (ID) which must be unique in the whole document.
jQuery is only adding the event listeners to the first element with that ID.

The answer is simple: The event listener was only applied to the first #rectangle. jQuery does not select more than one #ID'd element. With that being said it is not semantic to use the same id on more than one element.
Here's what you are looking for: http://jsfiddle.net/Q5cRU/116/
$(document).ready(function() {
$('.rectangle1').hide();
$('.rectangle').data( 'clicked', false).click(function() {
$(this).data( 'clicked', !$(this).data('clicked'));
}).hover(
function() {
$(this).next('.rectangle1').slideDown();
},
function() {
if (!$(this).data('clicked')) {
$(this).next('.rectangle1').slideUp();
}
}
);
});
$("div.rectangle1").mouseover(function() {
$(this).stop(true, true).show();
});

Well in HTML, the id attribute must be unique per element. See this. The class attribute can be shared by multiple elements to have the same style effect or same purpose. So the first and second div can't have the same id - "rectangle". To fire event independently you can assign different id for them.

HTML:
<div>
<div class="rectangle"></div>
<div class="rectangle-hover"></div>
</div>
<div>
<div class="rectangle"></div>
<div class="rectangle-hover"></div>
</div>
CSS:
.rectangle {
width: 140px;
height: 80px;
background: #037CA9;
margin-bottom:10px;
}
.rectangle-hover {
width: 140px;
height: 150px;
background: red;
}
Javascript:
$(function(){
var clicked = false;
$('.rectangle-hover').hide();
$('.rectangle').hover(
function(){
$(this).parent().find('.rectangle-hover').slideDown();
},
function(){
if (!clicked) {
$('.rectangle-hover').slideUp()
}
}
);
});

Set opacity with js or close modal window

I would like to "close" a modal window. It's a wordpress template and it's ugly...
I have a div :
<div class="modal">
<section style="position:relative;z-index:10;">
<div style="margin-bottom: -50px; margin-right: 50px; text-align: right;">
<img src="./wp-content/img.png" alt="Close">
</div>
<p><img src="./wp-content/img2.png" alt="test"></p>
</section>
</div>
And when the img with alt="Close" is clicked, I would like to close or set the opacity of all the div.modal at 0. Is it possible with JS?

jQuery
$('img[alt*=Close]').click(function() {
$('.modal').hide();
});
JS
var img = document.querySelector('img[alt*=Close]'),
modal = document.querySelector('.modal');
img.addEventListener('click', function() {
modal.style.display = 'none';
});

when the img with alt="Close" is clicked, I would like to close or set the opacity of all the div.modal at 0.
Absolutely!
First i want to mention that there is some attribute selectors which are now officially available in css3, so that can be used as a jQuery selector like:
$('body').on('click', 'img[alt="Close"]', function(e){
$(this).closest('.modal').fadeOut(); // to fade out the entire div.
// $(this).closest('.modal').hide(); // hide will hide the modal
});
If your modal is dynamically created then you have to follow the technique of event delegation, which has the syntax like:
$(staticParent).on(event, selector, callback);

Yep! Just set thee css property opacity
$(".modal").css({ opacity: 0.5 });

You can listen for click events on the img div with:
document.querySelector("img[alt=Close]").addEventListener("click", yourHandler);
However, accessing an image using its alt attributes looks like a terrible idea. alt is to display infotip and accessibility message for the user, not to identify a DOM element.
It would much better if you can give this image an id or a class:
document.getElementById("yourImgId").addEventListener("click", yourHandler);
Then:
var modal = document.querySelector(".modal");
function yourHandler(){
modal.style.opacity = 0;
}
or
function yourHandler(){
modal.style.display = "none";
}
A last solution can be to define the style properties in a stylesheet like:
.modal.disabled {
display: none;
}
And then add the class to modal to disable it.
function yourHandler(){
modal.classList.add("disabled");
}
This last solution is more flexible and easier to maintain as it separates the logic to the style.

How to show the child div on mouse hover of parent div

I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.
The following is my current markup:
<div class="content">
<div class="parent_div">
<div class="hotqcontent">
content of first div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of second div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of third div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of fourth div goes here...
</div>
<hr>
</div>
</div>
What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.
To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!
<script>
$(document).ready(function() {
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$('.hotqcontent').toggle();
});
});
});
</script>
How can I modify or replace my existing code to achieve the desired output?

If you want pure CSS than you can do it like this....
In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.
.hotqcontent {
display: none;
/* I assume you'll need display: none; on initialization */
}
.parent_div:hover .hotqcontent {
/* This selector will apply styles to hotqcontent when parent_div will be hovered */
display: block;
/* Other styles goes here */
}
Demo

Try this
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
Or
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});

You can use css for this,
.parent_div:hover .hotqcontent {display:block;}

This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):
.parent_div {
height: 50px;
background-color:#ff0000;
margin-top: 10px;
}
.parent_div .hotqcontent {
display: none;
}
.parent_div:hover .hotqcontent {
display:block;
}
This will ensure that your site still functions in the same way if users have Javascript disabled.
Demonstration:
http://jsfiddle.net/jezzipin/LDchj/

With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.
$('.hotqcontent', this).toggle();

$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
JSFIDDLE

you don't need document.ready function inside document.ready..
try this
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
and yes your code will toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div
updated
you can use on delegated event for dynamically generated elements
$(function() { //<--this is shorthand for document.ready
$('.content').on('mouseenter','.parent_div',function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});

you can try this:
jQuery(document).ready(function() {
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
jQuery(this).hover(function(){
jQuery(this).children("div.hotqcontent").show(200);
}, function(){
jQuery(this).children("div.hotqcontent").hide(200);
});
});
});

How do I make this code work for each click?

I have h3 block's and on click of each of the block I am showing the section associated with it. It is actually something like accordion(hide and collapse). I have also given a drop icon to the h3 tags, means that when the block is opened the h3 should have a dropicon pointing downwards while others h3 should have there dropocons towards right. I am controlling this behaviour using backgroundPosition. I am using the jQuery visible condition to see if the particular block is visible then give its drop icon one background position and to the rest other. It works fine but only for first click. It doesn't work for second click; can somebody explain why? Here is my code:
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
UPDATED CODE:
$("h3").click(function() {
$(".tabs").hide();
$(this).next().show();
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
} else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
})

If you wrap the whole block in a div it might make traversing easier.
Html:
<div class="drop-block">
<h3>Click this</h3>
<ul>
<li>Drop</li>
<li>it</li>
<li>like</li>
<li>it's</li>
<li>hot</li>
</ul>
</div>​
Jquery:
var dropper = $('.drop-block');
$(dropper).find('h3').click(function(){
$(this).toggleClass('active');
$(dropper).find('ul').toggle();
});​
Example

I Belive that you are looking for live
So it will be something like this:
$(element).live('click', function(){
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
}

Instead of editing the css of them, make a css class "open" (or similar), and then add / remove the class on the click to open / close.
It is much easier to debug by checking for the existence of a class than it is to check the css properties of something in JS.

Better make a class name for each situation and easly handle the action
$('h3').on('click', function(){
if($(this).hasClass('opened')) {
$(this).removeClass('opened');
}
else {
$(this).addClass('opened');
}
}

$(document).on('click', 'h3', function(e) {
$(".tabs").hide('slow');
$(this).css({'backgroundPosition':'0px 14px'});
if(!$(this).next().is(':visible'))
{
$("h3").css({'backgroundPosition':'0px -11px'});
$(this).next().show('slow');
}
});
You can remove 'slow' from show/hide if animation is not required
Here is an example.

It sounds like you need to bind click events to the h3 elements and toggle the visibility of the child elements:
$(function(){
$("h3").click(function(){
$(this).next(".tabs").toggle();
});
});
Example markup:
<h3>Item 1</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
<h3>Item 2</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
Here's a jsFiddle to demonstrate.

jQuery find div help

I am currently building a menu bar that consists of icons that show a contextual submenu when hovered over. Essentially, when hovering over an icon a popup menu/tooltip appears (with more options), but the icon itself should be clickable as well.
So far, I use the following HTML construct and jQuery for each menu item:
<div id="profile" class="menu-item">
<div id="profile-tip" class="tip">
**insert profile menu options**
</div>
</div>
<div id="search" class="menu-item">
<div id="search-tip" class="tip">
**insert search menu options**
</div>
</div>
and
$(".menu-item").hover(function() {
$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find("div").hide();
});
});
What I wish to do is to change the HTML to look as follows (so I can apply an onClick link to the "profiles" div):
<div id="profile" class="menu-item" onclick="window.location = 'profile.php'"></div>
<div id="profile-tip" class="tip">
**insert menu options**
</div>
However, I don't know how to modify the jQuery to find the matching div to display when hovered over. The associated tooltip/popup menu div will always be xxxx-tip (where xxx is the name of the parent div).
As an example, I imagine it will look something like this (keep in mind I know very little about jQuery so I'm well aware this will look stupid):
$(".menu-item").hover(function() {
$.find("div").attr('id'+"-tip").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$.find("div").attr('id'+"-tip").hide();
});
});
To summarise: I need the jQuery modified to show the div based on the parent div's ID + the string "-tip"
Hopefully that isn't too confusing. Any help GREATLY appreciated :)

Not sure I understand completely what you want, but maybe try something a little more like this:
$(".menu-item").hover(
function() {
$(this).find(".tip").fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$(this).find(".tip").hide();
}
);
Edit: If the tip element is not a child of the menu item div, this could work:
$(".menu-item").hover(
function() {
$('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + this.id + '-tip').hide();
}
);

Instead of finding the name of the div in the PARENT of the thing you're hovered over, use jQuery to find the tooltip that is a CHILD of the thing you're hovered over...search down the DOM, instead of UP.
Use jQuery's $(this) operator...
$('.menu-item').hover(function(){
$(this).find('.tip).fadeIn();
},
function() {
$(this).find('.tip).fadeOut();
});

I'm not 100% clear on the goal here but you can get your div by ID as shown here:
$(".menu-item").hover(function()
{
$(this).find(".tip").fadeIn("fast").show();
});
Or in CSS:
.menu-item .tip
{
display: none;
}
.menu-item .tip:hover,
.menu-item:hover .tip
{
display: auto;
}