I'm trying to select a single sibling further up in the DOM after clicking a button. I only want to find the closest sibling upwards (in production there's a lot more HTML between the buttons, so it's more necessary to split it up this way). I'm using a prevAll(selector:first) to do this, and when I use a very simple version (here), it seems to work ok. But when I do it in a way that's more similar to my actual environment, prevAll() can't seem to find the sibling element div.googleMapsContainer:
Here is my HTML:
<div style="display: none;" class="googleMapsContainer" id="gm1">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
<div style="display: none;" class="googleMapsContainer" id="gm2">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<br>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
And here is my JavaScript:
$(document).on('click', '.gmapInit', function() {
console.log("here is this: ");
console.log($(this));
var closeThing = $(this).prevAll("div.googleMapsContainer:first");
console.log("here is the closest: ");
console.log(closeThing);
closeThing.attr("style", "");
});
The console shows that the closeThing is nothing, as the prevAll was not successful. Here's a JsFiddle for demonstration: https://jsfiddle.net/NateH06/twk9mtjg/
This one is working for me, I just modified your Fiddle.
I selected the parent div that was in the same scope and then used your prevAll() call to precise my selection. What happens when you try this in your actual Project?
Have a look:
$(document).on('click', '.gmapInit', function() {
var closeThing = $(this).parents("div.tableProcessingToolBarContainer").prevAll("div.googleMapsContainer:first");
closeThing.attr("style", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none;" class="googleMapsContainer" id="gm1">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
<div style="display: none;" class="googleMapsContainer" id="gm2">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<br>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
Related
I am trying to do a feed in HTML like facebook or twitter that contains the content of database.
I am using an generic div and using javascript to clone that generic div but I cant edit the content of each element after cloning it.
Is that the best way to do a feed in HTML?
JavaScript
for(i=0 ; i < 5 ; i++){0
var item = $("#template2 div.item").clone();
item.getElementById("title").text("aaaa"); //4 testing
$("#main1").append(item);
}
HTML
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12"><hr></div>
</div>
</div>
</div>
clone() returns object that you can manipulate using jQuery.
$('#addFeed').click(function() {
addFeed();
})
function addFeed() {
var item = $("#template2 div.item").clone();
$(item).find("h3").html("New Feed");
$("#main1").append(item);
}
.feed {
border: 1px solid black;
width: 150px;
}
.item {
background-color: lightgreen;
}
.item:nth-child(odd) {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12">
<hr>
</div>
</div>
</div>
</div>
<div id="main1" class="feed">
</div>
<button id="addFeed">Add Feed</button>
I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.
This is my JavaScript
$("#view").click(function(){
$('.hidden-content').slideToggle(500).toggleClass("active");
});
You cannot have duplicate id attributes within a single document. When you do only the first element with the given id is recognised; hence the issue you've seen.
Instead change the view elements to use a class, then use the this reference within the click event handler to traverse the DOM to find the related .hidden-content element and toggle it. Try this:
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
It is a bad practice to use same id for more than one elements.
You can try the following
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
and your jquery will look like the following
$(".view").click(function(){
$(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});
You should replace the id to class. And for accordion, you can use like below.
HTML,
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
Js,
<script>
$(document).ready(function(){
$(".hidden-content").hide();
$(".view").on('click', function(){
$(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");
if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
$(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
$(this).parents().parents().siblings().find(".hidden-content").hide();
}
});
});
</script>
You can change your click event as follows to make it work.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
Note: You shouldn't have the same id for multiple elements, id attribute value should be unique why because the id attribute is used to identify an element uniquely in the DOM. You can have the same class name for different elements.
Please refer this answer it provides more information on how things work when multiple elements have the same id attribute value.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
#view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(200).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
I have the same problem that is described here: same problem (fiddle: original fiddle) but I dont understand JS yet, I am learning as I code, so when my html code is little bit different as it is now, I dont know, how to apply the solution onto it. Could You help me please with that? When I see, how it should look, I can learn it then.
My code:
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%;">
<div id="101" style="display:none;"><!-- Content here --></div>
<div id="102" style="display:none;"><!-- Content here --></div>
<div id="103" style="display:none;"><!-- Content here --></div>
<div id="104" style="display:none;"><!-- Content here --></div>
<div id="105" style="display:none;"><!-- Content here --></div>
<div id="106" style="display:none;"><!-- Content here --></div>
<div id="107" style="display:none;"><!-- Content here --></div>
<div id="108" style="display:none;"><!-- Content here --></div>
<div id="109" style="display:none;"><!-- Content here --></div>
<div id="110" style="display:none;"><!-- Content here --></div>
<div id="111" style="display:none;"><!-- Content here --></div>
<div id="112" style="display:none;"><!-- Content here --></div>
<div id="113" style="display:none;"><!-- Content here --></div>
</div>
</div>
<script type="text/javascript">
$("#1").on('click', function() {
$("#101").fadeToggle();
$("#102,#103,#104,#105,#106,#107,#108,#109,#110,#111,#112,#113").fadeOut();
});
$("#2").on('click', function() {
$("#102").fadeToggle();
$("#101,#103,#104,#105,#106,#107,#108,#109,#110,#111,#112,#113").fadeOut();
});
// and so on, until #13
</script>
Solution:
$('#indexNav').click(function() {
$('#aboutContent').fadeOut('fast',function(){
$('#indexContent').fadeIn('fast');
});
return false;
});
$('#aboutNav').click(function() {
$('#indexContent').fadeOut('fast',function(){
$('#aboutContent').fadeIn('fast');
});
return false;
});
Wow, thats a lot of code to review. I'm not positive this is going to solve your problem. You don't have any hover events on this, so I assume flicker may be CSS related.
// better selector - you don't have markup for #1, #2, #3, etc.
// can you rework this to be $('.container div') or something based on real markup
$('div').on('click', function() {
// get this element's id
var id = $(this).attr('id');
// find the corresponding div ID, which seems to be 100 greater than original ID
$('#1'+id).fadeToggle()
// find all siblings and hide them
.siblings().fadeOut();
});
I've added a snippet so you can test it.
$(function() { // equivalent to onDomReady
$('button').on('click', function() {
// get this element's id
var id = $(this).attr('id');
// find the corresponding div ID, which seems to be 100 greater than original ID
$('#1' + id).fadeToggle()
// find all siblings and hide them
.siblings().fadeOut();
});
});
div div div {
border: 1px solid black;
margin: 3px;
background: red;
}
<button id="01">01</button>
<button id="02">02</button>
<button id="03">03</button>
<button id="04">04</button>
<button id="05">05</button>
<button id="06">06</button>
<button id="07">07</button>
<button id="08">08</button>
<button id="09">09</button>
<button id="10">10</button>
<button id="11">11</button>
<button id="12">12</button>
<button id="13">13</button>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%;">
<div id="101" style="display: none;">101</div>
<div id="102" style="display: none;">102</div>
<div id="103" style="display: none;">103</div>
<div id="104" style="display: none;">104</div>
<div id="105" style="display: none;">105</div>
<div id="106" style="display: none;">106</div>
<div id="107" style="display: none;">107</div>
<div id="108" style="display: none;">108</div>
<div id="109" style="display: none;">109</div>
<div id="110" style="display: none;">110</div>
<div id="111" style="display: none;">111</div>
<div id="112" style="display: none;">112</div>
<div id="113" style="display: none;">113</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Update
What you're suffering from is the moment of time when both divs (one fading out, and one fading in) are being toggled. You'll need to position those divs absolutely to get around this. Then they're overlapping each other and you don't need to worry about the flicker. That can have big impacts on layout. Then you get into calculating heights of those child divs and all sorts of stuff:
https://jsfiddle.net/SbKQ3/29/
How about that? I used promises to fadeToggle only when all elements were hidden, which prevented the flickering effect.
$(function() { // equivalent to onDomReady
$('button').on('click', function() {
// get this element's id
var id = $(this).attr('id');
// find the corresponding div ID, which seems to be 100 greater than original ID
$.when($('#1' + id).siblings().fadeOut()).done(function() {
$('#1' + id).fadeToggle();
});
});
});
div div div {
border: 1px solid black;
margin: 3px;
background: red;
}
<button id="01">01</button>
<button id="02">02</button>
<button id="03">03</button>
<button id="04">04</button>
<button id="05">05</button>
<button id="06">06</button>
<button id="07">07</button>
<button id="08">08</button>
<button id="09">09</button>
<button id="10">10</button>
<button id="11">11</button>
<button id="12">12</button>
<button id="13">13</button>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%;">
<div id="101" style="display: none;">101</div>
<div id="102" style="display: none;">102</div>
<div id="103" style="display: none;">103</div>
<div id="104" style="display: none;">104</div>
<div id="105" style="display: none;">105</div>
<div id="106" style="display: none;">106</div>
<div id="107" style="display: none;">107</div>
<div id="108" style="display: none;">108</div>
<div id="109" style="display: none;">109</div>
<div id="110" style="display: none;">110</div>
<div id="111" style="display: none;">111</div>
<div id="112" style="display: none;">112</div>
<div id="113" style="display: none;">113</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a link to my div mySkills, and when I access my page I have the bars loaded, but I just want to load my progress bars when i click in my href to this div mySkills.
How can we do that?
<nav id="menu">
<ul>
<li >About</li>
<li>Skills</li>
<li >Contact</li>
</ul>
</nav>
<div class="mySkills">
<h1>John <span>Skills</span></h1>
<div class="skill">
<h6>HTML</h6>
<div class="progress_bar orange">
<div style="width: 75%;"></div>
</div>
</div>
<div class="skill">
<h6>CSS</h6>
<div class="progress_bar teal">
<div style="width: 67%;"></div>
</div>
</div>
<div class="skill">
<h6>Photoshop</h6>
<div class="progress_bar blue">
<div style="width: 80%;"></div>
</div>
</div>
<div class="skill">
<h6>PHP</h6>
<div class="progress_bar green">
<div style="width: 55%;"></div>
</div>
</div>
<div class="skill">
<h6>Javascript</h6>
<div class="progress_bar yellow">
<div style="width: 55%;"></div>
</div>
</div>
</div>
Here is a possible approach to your request:
http://jsfiddle.net/pHyz9/
HTML added:
<button id="update">Update Values</button>
CSS:
.skill {
display: none;
}
.progress_bar div {
transition: width 1s;
}
Javascript (jQuery):
$("#update").on("click", function(){
$(".skill").fadeIn(800);
$(".orange div").css("width", "75%");
$(".teal div").css("width", "67%");
$(".blue div").css("width", "80%");
$(".green div").css("width", "55%");
$(".yellow div").css("width", "55%");
});
It uses CSS3, it is a bit incomplete, and the code could be prettier, but this is only an example to show what can be done with such a simple code.
So you should take following steps in order to achieve your goal.
Steps:
1. Make your <div class="mySkills"> hidden using css.
div.mySkills
{
display:none;
}
2. And on Skills
$('a[href="#mySkills"]').click(function(e){
e.preventDefault;
e.stopPropagation;
$('div.mySkills').toggle();
});
More about .toggle() you can read from here.
P.S.: If I understand correctly your question and answer in properly replay with comments. I will correct it.
If you want to see working example open following link.
In my code i'm using bootstrap (navs) like this in my html :
{{extend 'layout.html'}}
<div class="row" id="container_R_economics">
<div class="span12">
<div class="dropdown ">
<select class=" btn-Action" id="groupe" >
<option value="">Awaiting data...</option>
</select>
</div>
</div>
<div class="span3" id="reportingContainer"></div>
<div class="span7 offset1" id="dashboard">
<div id="combochart"></div>
<div id="control" style='height:50px'></div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs"></ul>
<div class="tab-content" id="graphTabsContent"></div>
</div>
<div class="row" id="container_R_physics">
<div class="span4 offset4" id="dashboard_div">
<div id="chart_div" style='width: 600px; height: 300px;'></div>
<div id="filter_div" style='width: 600px; height: 80px;'></div>
</div>
when i use bootstrap (navs) in my page web in (<div class="row" id="container_R_economics">) and (<div class="row" id="container_R_physics">) i have a scrolling, how i cant deactivate it?
have you tried setting the overflow to hidden:
.yourclass-name{
overflow:hidden;
}