I know the title is confusing but I wasn't sure how to phrase it.
fiddle: https://jsfiddle.net/jzhang172/xnem879m/1/
What I'm trying to accomplish:
When I click on the h3 element in each container, it turns into an "x" and lengthens the container and when I click on it again, it reverts back to its text and height.
However, my problem is if you click on another container after the initial one, it will grab that h3 element and apply it to the rest of the containers.
To reciprocate this problem, do this:
1.) Click on the first container
2.) Click on the second container
3.) Now click on the first container which will revert to its original height but now it has the second container's h3 element.
I see that my problem is that my first function is grabbing the h3 element but I'm really not sure how to fix this issue.
$("h3").one("click", function(){
window.h3title=$(this).text(); //Make global variable so next function has access to it.
console.log(h3title);
});
$("h3").click(function(){
if( $(this).parents(".work").height()<200){
$(this).stop().parents(".work").animate({height: '300px'}, {duration:500, complete:function(){
$(this).find('h3').text('X');
}
});
}//IF
else{
$(this).stop().parents(".work").animate({height: '100px'}, {duration:500, complete:function(){
$(this).find('h3').text(h3title);
}
});
}
});
.work{
background:blue;
height:100px;
width:100%;
}
h3{
color:red;
text-shadow:1px 1px 1px black;
cursor:pointer;
}
span{
color:white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
<h3>1 Click me</h3>
<span>I will Change</span>
</div>
<div class="work">
<h3>2 Click me</h3>
<span>I will Change</span>
</div>
<div class="work">
<h3>3 Click me</h3>
<span>I will Change</span>
</div>
<div class="work">
<h3>4 Click me</h3>
<span>I will Change</span>
</div>
<div class="work">
<h3>5 Click me</h3>
<span>I will Change</span>
</div>
The problem is that the global variable you're declaring (and it doesn't have to be global. All it has to do is be declared in a scope that's a parent to both function scopes.) is getting overwritten on every call, and every element that has access to it will use the last value it was set to.
E.g.
Store '1 Click me' in variable
Store '2 Click me' in variable
Restore text to first h3, which is now '2 Click me'.
The solution is to store the data in a context specific place. Since it's consistent, you can assign a data-index (or whatever you want to name it) to the element.
$("h3").click(function() {
if ($(this).parents(".work").height() < 200) {
$(this).stop().parents(".work").animate({
height: '300px'
}, {
duration: 500,
complete: function() {
$(this).find('h3').text('X');
}
});
} //IF
else {
$(this).stop().parents(".work").animate({
height: '100px'
}, {
duration: 500,
complete: function() {
var $h3 = $(this).find('h3');
$h3.text($h3.attr('data-index') + ' Click me');
}
});
}
});
.work {
background: blue;
height: 100px;
width: 100%;
}
h3 {
color: white;
text-shadow: 1px 1px 1px black;
cursor: pointer;
}
span {
color: white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
<h3 data-index="1">1 Click me</h3>
<span>I will Change</span>
</div>
<div class="work">
<h3 data-index="2">2 Click me</h3>
<span>I will Change</span>
</div>
<div class="work">
<h3 data-index="3">3 Click me</h3>
<span>I will Change</span>
</div>
<div class="work">
<h3 data-index="4">4 Click me</h3>
<span>I will Change</span>
</div>
<div class="work">
<h3 data-index="5">5 Click me</h3>
<span>I will Change</span>
</div>
Related
First of all - I'm a noob. Sorry if this question is basic enough.
Second - I tried to search and as I can see I applied the solution as instructed in other posts.
With that being said...
I have three sets of DIVs. Each set consists on 2 Divs(one inside another). On the OUTER div there's a function that is saying to make a border if it's clicked.
To see the error:
Click on the word OUTER.
Click on the word INNER.
The code is suppose to make a border only in the outer.
HTML
<html>
<head>
<title>Event Propagation</title>
<meta charset="UTF-8" />
</head>
<body onload="onLoad()">
<!--Squares 1-->
<div style="display:inline-block">
<div class="outer" style="height: 100px; width: 100px;">
Outer
<div class="inner" style="height: 50px; width: 50px;margin:20px">
Inner
</div>
</div>
</div>
<!--Squares 2-->
<div style="display:inline-block">
<div class="outer" style="height: 100px; width: 100px;">
Outer
<div class="inner" style="height: 50px; width: 50px;margin:20px">
Inner
</div>
</div>
</div>
<!--Squares 3-->
<div style="display:inline-block">
<div class="outer" style="height: 100px; width: 100px;">
Outer
<div class="inner" style="height: 50px; width: 50px;margin:20px">
Inner
</div>
</div>
</div>
</body>
</html>
The JS
<script>
function onLoad(){
const elOuter = document.querySelectorAll(".outer")
elOuter.forEach(element=>{
element.addEventListener('click', fnChangeColor,false)
})
}
function fnChangeColor(e){
e.target.style.border="1px solid black"
if (e.stopPropagation) {
e.stopPropagation()
} else {
e.cancelBubble = true
}
}
</script>
FYI - I solved the question creating events to the children attributing the e.stopPropagation on them. That worked. But I know that's not the best approach. If I have a div with 100 divs inside, that'll be a hell on earth.
this is because when you click on "Inner" e.target element is "Inner", not "Outer".
What you do seem to me to a try of understanding event delegation,
do it this way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xxx</title>
<style>
body > div { display:inline-block; }
.outer { height: 100px; width: 100px; background: lightgrey; }
.inner { height: 50px; width: 50px;margin:20px; background: lightblue; }
.bordering { border: 1px solid black; }
</style>
</head>
<body>
<div> <div class="outer"> Outer <div class="inner"> Inner </div> </div> </div>
<div> <div class="outer"> Outer <div class="inner"> Inner </div> </div> </div>
<div> <div class="outer"> Outer <div class="inner"> Inner </div> </div> </div>
<script>
document.body.onclick= e => {
if (!e.target.matches('.outer')) return // ignore other click events
e.target.classList.toggle('bordering')
}
</script>
</body>
</html>
or this way
document.querySelectorAll('.outer').forEach(el=>{
el.onclick=e=>{
// console.log(e.target.className)
if (!e.target.matches('.outer')) return // ignore other click events
e.target.classList.toggle('bordering')
}
})
In your code, there is only one event used and no way for any propagation.
when the user click on a .inner the event append on the .inner element an never on the .outer.
it's like a bubble following it's a bottom up way, not the reverse.
when the bubble finds a target code (an avent listener), there is no more propagation and the bubble burst.
If you want to see an event propagation you have to set 2 event listeners ( an that mean 2 bubles).
You can see that by adding a console.log(e.target.className) like here:
document.querySelectorAll(".outer, .inner") // => 6 event listeners
.forEach(el=>{ el.addEventListener('click', getClick , false) })
var counter = 0
function getClick(e)
{
console.log( `${++counter} - event listener is on : ${e.currentTarget.className}
clicked element is : ${e.target.className} `)
}
cClear.onclick=_=>{ counter = 0; console.clear() }
body > div { display:inline-block; }
.outer { height: 100px; width: 100px; background: lightgrey; }
.inner { height: 50px; width: 50px;margin:20px; background: lightblue; }
<div> <div class="outer"> Outer <div class="inner"> Inner </div> </div> </div>
<div> <div class="outer"> Outer <div class="inner"> Inner </div> </div> </div>
<div> <div class="outer"> Outer <div class="inner"> Inner </div> </div> </div>
<button id="cClear">clear console</button>
In this case we have one outer div - the parent, and the inner div - the children.
So - the issue to understand here is:
target: Who triggered the event.
currentTarget: the element that has the function set in.
When clicking the inner div, you are clicking the children - but the element that has the function is the parent. So - the function should change the currentTarget (the outer div), not the target (that's the inner div that was clicked).
Just had to change
e.target.style.border="1px solid black"
with
e.currentTarget.style.border="1px solid black"
first time posting, i'm trying to build a responsive website, where user/s can add / upload images to the website, but i don't want the page to fill up with images, i just want the page to have one row of every group of pictures the user added, and if the user click the see more button then it expands to show more of the images in that group.
Example:
Lets say i have parent div and 5 child divs of images with same class name.
<div class="parent">
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
</div>
Now the website page can only contain 5 images per row, but if the user added more images, it goes to the next row. also if the page width is smaller, then the page will contain less than 5 images, depends on the available space.
I tried:
To check inside a loop of all the child divs, to see if they have overflown the parent, then move them to a hidden class, but with no luck, i cant figure it out how to check which children overflown the parent's div.
All i want is:
Figure it out how to check which children overflown the parent's div.
I don't know if this needs javascript or only html css... i'm only learning.
Thanks.
Edit
The code i did:
// clicking see more to show the rest of images
folderSeeMore.onclick = function() {
if (folderSeeMore.innerHTML == "See more") {
$(centerViewMid).css("overflow", "visible");
$(centerViewMid).css("height", "auto");
folderSeeMore.innerHTML = "See less";
wait = 1;
} else {
$(centerViewMid).css("overflow", "hidden");
$(centerViewMid).css("height", "150");
folderSeeMore.innerHTML = "See more";
}
}
.center_view_middle {
border-radius: 10px;
height: 150px;
margin-bottom: 15px;
overflow: hidden;
}
.center_view_middle_box {
display: inline-block;
position: relative;
margin-right: 15px;
width: 130px;
height: 150px;
border-radius: 10px;
text-align: center;
}
<h6 class="folder_seeMore"><u>See more</u></h6>
<div class="center_view_middle">
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
</div>
how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture
add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link
The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle
What I am trying to achieve is the following
There are two DIVS with dropdown. I need to close one while opening the other on click function.
I am also trying to mouseout once the event is out of the dropdown box.
I would like to close the DIV once the click even happens outside the dropdown box.
Following is the HTML
<div class="first-div" style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
<div class="first-div-dropdown">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<h6>REGISTER</h6>
<div class="second-div-dropdown">
<p>Drop down test from second DIV</p>
</div>
</div>
CSS is following
.first-div-dropdown, .second-div-dropdown{
background-color:#555;
color:white;
height:100px;
width:200px;
}
JS is following
$(document).ready(function(){
$('.first-div-dropdown').hide();
$('.second-div-dropdown').hide();
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').slideDown(300);
});
$('.second-div-link').on('click', function (event){
$('.second-div-dropdown').slideDown(300);
});
});
Is there any way to use this as a function to control multiple DOMs in the HTML? If so could someone assist me with the current example ?
Thanks
The path to follow here is use a common class on your items, you don't need to create new classnames if all will have the same styles and will perform the same action. Check this:
$(document).ready(function() {
$('.cont-div').on('click', 'a', function(e) {
e.preventDefault();
$('.div-dropdown').slideUp(300);
$(this).next('.div-dropdown').stop().slideToggle(300);
});
//To close if you click outside the container divs
$('body').on('click', function(e) {
if (!$(e.target).parents('.cont-div').length) {
$('.div-dropdown').slideUp(300);
}
})
});
body {
height: 600px;
background: #e1e1e1;
}
.cont-div {
display: inline-block;
vertical-align: top;
width: 50%;
}
.div-dropdown {
background-color: #555;
color: white;
height: 100px;
width: 200px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont-div">
<h6>REGION</h6>
<div class="div-dropdown">
<p>Drop down test from first DIV</p>
</div>
</div><!--
--><div class="cont-div">
<h6>REGISTER</h6>
<div class="div-dropdown">
<p>Drop down test from second DIV</p>
</div>
</div>
If you want to get more specific, you could assign a similar class to both menus, in the case below, I added 'dropdown-div' to the class for both menus and then simply added a trigger whenever you click on something that is not a link, it will hide the menus by calling $('.dropdown-div').hide();
$(document).ready(function(){
$('.first-div-dropdown').hide();
$('.second-div-dropdown').hide();
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').slideDown(300);
});
$('.second-div-link').on('click', function (event){
$('.second-div-dropdown').slideDown(300);
});
});
$(document).on('click', function(event) {
if (!$(event.target).closest('a').length) {
$(".dropdown-div").hide();
}
});
.first-div-dropdown, .second-div-dropdown{
background-color:#555;
color:white;
height:100px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="first-div " style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
<div class="first-div-dropdown dropdown-div">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<h6>REGISTER</h6>
<div class="second-div-dropdown dropdown-div">
<p>Drop down test from second DIV</p>
</div>
</div>
You're dealing with state management within a collection. You have 2 dropdowns, but 3 states: dropdown one's state, dropdown two's state, and the collection of dropdowns' state.
Using jQuery, the most common way of handling this I've seen is to start by "resetting" the collection's state each time, by hiding all dropdowns on click.
Then, open the dropdown that is being targeted by the client. This can also be a bit easier if you use a single class to target the collection which also lends itself to be reusable across an infinite number of dropdowns.
<div class="first-div" style="display:inline-block">
<a class="dropdown-trigger"><h6>REGION</h6></a>
<div class="dropdown-menu">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<a class="dropdown-trigger"><h6>REGION</h6></a>
<div class="dropdown-menu">
<p>Drop down test from second DIV</p>
</div>
</div>
JS:
$('.dropdown-trigger').click(function (event) {
event.stopPropagation();
var $menu = $(this).siblings('.dropdown-menu');
$('.dropdown-menu').not($menu).slideUp(300);
$menu.slideToggle(300);
});
$(document).click(closeDropdowns);
function closeDropdowns () {
$('.dropdown-menu').slideUp(300);
}
Working codepen: http://codepen.io/amishstripclub/pen/wzbEVo
You could try using toggle like this:
$(document).ready(function(){
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').toggle();
$('.second-div-dropdown').toggle();
});
$('.second-div-link').on('click', function (event){
$('.first-div-dropdown').toggle();
$('.second-div-dropdown').toggle();
});
});
I have multiple rows with 3 divs per row. Each div consists of two rows; in the first row a picture is displayed, in the second row a description is shown. HTML is like this:
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
Some CSS:
#block1, #block2, #block3
{
width: 25%;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
border: 1px solid #154494;
}
#block1-bottom, #block2-bottom, #block3-bottom
{
color:#FFFFFF;
}
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div. So for example when hovering over block1, I want the text color of block1-bottom to change into #FEB90D. I found a script which does this for me:
$(function() {
$('#block1').hover(function() {
$('#block1-bottom').css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$('#block1-bottom').css('color', '#FFFFFF');
});
});
However, this only works for the first block of the first row. I think this is because the id's of the 1st, 2nd and 3rd blocks have the same name and the script cannot figure out on which block to apply the script.
Does anyone have any thoughts on how to fix this, without changing all the divs id's? I have 11 rows in total so using separate names for each div is not really an option in my opinion. So basically, the scripts needs to change the color of the second child of the hovered div.
You shouldn't be using id for more than one element. Change those ids for classes and it will work.
It's better to do this with CSS
.block1 > .block1-bottom {
color: #FFFFFF;
}
.block1:hover > .block1-bottom {
color: #FEB90D;
}
<div class='block1'>
<p class='block1-top'>This is paragraph 1</p>
<p class='block1-bottom'>This is paragraph 2</p>
</div>
IDs should be unique anyways. If you do it in jQuery, it should look like this.
$(function() {
$('.block1').on("mouseover", function() {
$('.block1-bottom').css('color', '#FEB90D');
}).on("mouseout", function() {
$('.block1-bottom').css('color', '#FFFFFF');
});
});
Ids should be unique. So add necessary classes and use class selector. So code is similar to below
$('.row .box').hover(function() {
$(this).find(".boxbottom").css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$(this).find(".boxbottom").css('color', '#FFFFFF');
});
Here is the demo https://jsfiddle.net/afnhjdjy/
After you clean up your duplicate IDs problem, you can do this without javascript at all:
<div class="row">
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
</div>
CSS:
.block:hover .block-bottom {color: #FEB90D}
According to this situation:
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div
You may simply use:
.block:hover .block-bottom{
color: #FEB90D;
}