By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.
You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.
Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});
Related
For some reason my jQuery function is not working on a dynamic value.
I'm trying to show/hide content ("item-content") when the user clicks on the span "Click here".
If I use not nested HTML, everything works fine, but for some reason, my function breaks when I use nested HTML.
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next('.main .child span.item-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
.next looks for the next sibling, so in your code you don't need to specify the class of what you're looking for as you're just getting the span sibling, which is .item-content.
Working example:
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
The selector you are toggling is incorrect, as it is looking for a span called 'item-content'. It should be:
$(this).next('.main .child div.item-content').toggle();
First of all make sure that the jQuery cdn library is initiated before the custom script on your page.
There are two ways to hide components by css and jquery both. I'm posting the css script too and it's better to hide using css.
Also there is no need for specifying the classes from top inside the click event for toggle, the next() function basically lookup for the next html component.
$('.item-content').hide(); // if using css to hide than this line is not required
$(document).on('click', '.item-title', function(){
$(this).next().toggle();
});
.item-content {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
I want to make something like the amazon help page :
https://www.amazon.fr/gp/help/customer/display.html/ref=nav_cs_help?ie=UTF8&nodeId=508510#nav-top
When the mouse is in one category we can see the concern content on the right
My code works almost, however, when my mouse comes out of the link the right div is no longer active
There is my code :
Html :
<div class="activity--js margin-card activity-card card card-body">
<div class="row">
<div class="col-3 help__titles-part">
<% #helps.each do |help|%>
<p class="help__title" data-id='<%=help.id %>'><%=help.title%></p>
<%end%>
</div>
<div class="col-9 help__contents-part" >
<div class="row">
<% #helps.each do |help|%>
<div class="col-12 help__content-<%=help.id %>" style="display:none">
<p><%=help.content%></p>
</div>
<%end%>
</div>
</div>
</div>
</div>
JS:
$('.help__title').hover(
function () {
$(this).toggleClass('help__title-active');
Id = $(this).data("id");
console.log(Id);
$('.help__content-' + Id).toggleClass('help__content-active');
});
You asked it to be like the amazon example, which uses a mouseenter event, not click and definitely not hover.
jQuery(document).ready(function($){
$('.help__title').mouseenter(function(){
$('.help__title-active').removeClass('help__title-active');
$('.help__content-active').removeClass('help__content-active');
$(this).addClass('help__title-active');
Id = $(this).attr("data-id");
$('.help__content-' + Id).addClass('help__content-active');
});
});
.help__title-active{font-weight:bold; color:red}
.help__content-active{display:block !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="activity--js margin-card activity-card card card-body">
<div class="row">
<div class="col-3 help__titles-part">
<p class="help__title" data-id='1'>Title 1</p>
<p class="help__title" data-id='2'>Title 2</p>
<p class="help__title" data-id='3'>Title 3</p>
<p class="help__title" data-id='4'>Title 4</p>
</div>
======================================================================
<div class="col-9 help__contents-part" >
<div class="row">
<div class="col-12 help__content-1" style="display:none">
<p>Help 1</p>
</div>
<div class="col-12 help__content-2" style="display:none">
<p>Help 2</p>
</div>
<div class="col-12 help__content-3" style="display:none">
<p>Help 3</p>
</div>
<div class="col-12 help__content-4" style="display:none">
<p>Help 4</p>
</div>
</div>
</div>
</div>
You can use the following jQuery to achieve the above mentioned result:
var list = $("ul");
list.find("li").mouseenter(function(){
if($(this).hasClass("active")){
list.removeClass("active");
}else{
$(this).addClass("active");
$(this).siblings().removeClass("active");
}
});
I have used this dummy HTML:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
I have used this as the CSS to make the code more understandable:
.active{
background-color:orange!important;
}
li{
background-color:blue;
color:white;
width:20%;
cursor:pointer;
}
li:not(:last-child){
margin-bottom:5px;
}
Here is a jsfiddle supporting this.
But this will easily be reset once the page is refreshed as this changes the layout dynamically, its not fixed.
I hope this was helpful.
Is there any option/s needed so the icons inside nested grid will be clickable?
I have an icon on the parent grid and it's working fine, but when it comes to the icons inside nested grid, nothing happens.
<div class="grid-stack parent-grid">
<div class="grid-stack-item wid-item" data-gs-x="0" data-gs-y="0" data-gs-no-move="true">
<div class="grid-stack-item-content wid-item-content">
<div class="widget-container">
<div class="widget-title">
<span id="wid-title">WIDGET TITLE</span>
<span class="widget-icon icon-enlarge"></span>
<span class="widget-icon icon-bin"></span>
</div>
<div class="widget-body">
<div class="grid-stack widget-component">
<div class='grid-stack-item wid-component-item'>
<div class='grid-stack-item-content'>
<div class='widget-title'>
<span class='widget-icon icon-bin'></span>
</div>
<div class='widget-body'>
<label>Widget 1</label> <br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".icon-bin").click(function (e) {
alert("ASD");
});
</script>
I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.
Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}