A fixed div (fixed_div) stays at the top to display a Google map inside it. Then a big div (big_div) stays beneath it. The big div has inside it many small divs with class small_div. Each small div has an id small_div_n where n=0,1,2,3.. consecutively. The big div is scrolled beneath the fixed div.
HTML:
<div class="fixed_div" >
</div><!-- end of class fixed_div -->
<div class="big_div">
<div class="small_div" id="small_div_0">
</div><!--end of class small_div -->
<div class="small_div" id="small_div_1">
</div><!--end of class small_div -->
<div class="small_div" id="small_div_2">
</div><!--end of class small_div -->
</div><!--end of class big_div -->
css:
.fixed_div {
position:fixed;
height:100px;
}
.big_div {
padding-top:100px;
}
.small_div {
min-height:80px;
}
Small divs have a variable height property.
If I am able to know that a new small_div has reached the lower part of the fixed div , I can find the corresponding id of the small div and can understand which google map is to be shown in the fixed div through an ajax call.
How to sense that a new small_div has reached the lower part of the fixed div?
EDIT: the big div has a min-height property.
<script>
(function() {
var fixed = $('div.fixed_div');
$(window).on('scroll',function() {
var currentFixedDivPosition = fixed.position().top + fixed.height() + $(window).scrollTop();
var temp, whichOne;
$('div.small_div').each(function(i,s) {
var diff = Math.abs($(s).position().top - currentFixedDivPosition);
if(temp) {
if(diff < temp) {
temp = diff;
whichOne = s;
}
}else {
temp = diff;
whichOne = s;
}
});
console.log(temp, $(whichOne).attr('id') + ' was closest');
});
})();
</script>
Here is a fiddle : http://jsfiddle.net/s3JKk/ , I'm not sure I understood correctly what you wanted, but I hope this will at least give you some start. :) Good Luck!
Hope that following code fulfills the purpose,
I have added a code to dynamically append a small DIV element to a big_div element
Then I added an event listener which detects any new entries to big_div
// the system will append a new DIV when the button is clicked
document.getElementById("add").addEventListener("click", function(){
addDiv();
});
// an event listener which listenes to any new added element to big_div
$('#big_div').on('DOMNodeInserted', function(e) {
// here I am getting the id of the last added element
var newdivid = document.getElementById("big_div").lastChild.id;
document.getElementById("div_status").innerHTML = "new small div added, id: " + newdivid;
});
function addDiv() {
var smalldiv = document.createElement("div");
// here I am setting the id of the newly created DIV to any random string
smalldiv.setAttribute("id", Math.random().toString(36).slice(-5));
smalldiv.appendChild(document.createTextNode("small div"));
document.getElementById("big_div").appendChild(smalldiv);
}
.fixed_div {
position:fixed;
height:100px;
}
.big_div {
padding-top:100px;
}
.small_div {
min-height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed_div" >
fixed div
<p id="div_status">No Status</p>
</div><!-- end of class fixed_div -->
<div class="big_div" id="big_div">
<div class="small_div" id="small_div_0">
div 0
</div><!--end of class small_div -->
</div><!--end of class big_div -->
<button type="button" id="add">Add Small DIV</button>
Related
I am creating a collapsible div, which has another collapsible div nested inside:
<button class="collapsible">Expand First Panel</button>
<div class="firstPanel">
<div class="fistPanelContent"> ••• </div>
<button>Expand Second Panel</button>
<div class="secondPanel">
Content of the second panel
</div>
</div>
On click of the first button, the firstPanel div should expand, and upon clicking the nested second button, the secondPanel div should expand.
I've managed to achieve a single expanding div by using overflow: hidden; and a script to change the div's max height:
<script>
var allCollapsibles = document.getElementsByClassName("collapsible");
// Iterate through the collapsibles
var index;
for (index = 0; index < allCollapsibles.length; index++) {
// Add expansion toggle
allCollapsibles[index].addEventListener("click", function() {
// Set max height for collapsible element
var expandableContent = this.nextElementSibling;
if (expandableContent.style.maxHeight) {
expandableContent.style.maxHeight = null;
} else {
expandableContent.style.maxHeight = expandableContent.scrollHeight + "px";
}
});
}
</script>
... but this won't work for the second expanding div, because I've set the first div's max height
How could I get the second div to expand, whilst it's inside the first div?
This is a solution for your markup. It is much simpler to just add and remove a class like show instead of going down the road and doing height calculations. You can then add or remove the class show depending if the item already has the class or not. With css you can hide or show the item.
var allCollapsibles = document.querySelectorAll('.collapsible');
allCollapsibles.forEach( item => {
item.addEventListener("click", function() {
if(this.nextElementSibling.classList.contains('show')) {
this.nextElementSibling.classList.remove('show')
} else {
this.nextElementSibling.classList.add('show')
}
});
});
.firstPanel,
.secondPanel {
display: none;
}
.firstPanel.show,
.secondPanel.show {
display: block;
}
<button class="collapsible">Expand First Panel</button>
<div class="firstPanel">
<div class="fistPanelContent"> ••• </div>
<button class="collapsible">Expand Second Panel</button>
<div class="secondPanel">
Content of the second panel
</div>
</div>
I have an IosSlider that works great however I would like to add opacity to all the images except the selected image. This will highlight the selected image more and allow users to focus on just one image at a time. Here is my javascript for the IosSlider and the Image Indicators:
<script>
$(window).load(function() {
$('.iosSlider').iosSlider({
desktopClickDrag: true,
onSlideChange: slideChange,
navNextSelector: $('.nextButton'),
navPrevSelector: $('.prevButton'),
infiniteSlider:true,
snapSlideCenter: true
});
});
function slideChange(args) {
try {
console.log('changed: ' + (args.currentSlideNumber - 1));
} catch(err) {
}
$('.indicators .item').removeClass('selected');
$('.indicators .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
}
</script>
Here is my html code:
<section id="slider" >
<div class="container-fluid">
<div class = 'responsiveHeight'>
<div class = 'inner'>
<div class = 'iosSlider'>
<div class = 'slider'>
<img class="item" src="../images/Project/Education-Municipal/grandcayman/01 0614-23.1491.1503.jpg"/>
<img class="item" src="../images/Project/Education-Municipal/grandcayman/02 0614-23_1350.jpg"/>
<img class="item" src="../images/Project/Education-Municipal/grandcayman/03 0614-23_DSC2008.jpg"/>
<img class="item" src="../images/Project/Education-Municipal/grandcayman/04 0614-23_DSC2130.jpg"/>
<img class="item" src="../images/Project/Education-Municipal/grandcayman/05 0614-23_G3A1975crop2.jpg"/>
</div>
</div>
</div>
<div class = 'prevButton'></div>
<div class = 'nextButton'></div>
</div>
</div> <!-- end container -->
<div class = 'indicators'>
<div class = 'item selected'></div>
<div class = 'item'></div>
<div class = 'item'></div>
<div class = 'item'></div>
<div class = 'item'></div>
</div>
I'm trying to set all my slider images to Opacity 0.3 except the image currently selected using CSS:
img {
opacity: .3;
}
img .item .selected{
opacity: 1;
}
I'm not very proficient in Javascript but I was wondering if there is a simple way to do this either using CSS or Javascript. Thanks. Please see the example image to explain further what I'm trying to accomplish:
Desired slider result
Almost there! In CSS, the space character is a child operator, so your current selector img .item .selected targets elements with class of selected that are children of an item of class item, that is itself a child of an img element.
In your case, I believe you mean to target an image that has both classes selected and item. If so, just remove the spaces:
img.item.selected {
//...
}
Thanks for the help! I needed a little nudge that I was heading in the right direction. I changed by CSS to:
.item.selected{
opacity: 1;
}
But then I still needed to add some javascript to get it to work so I added these two lines just below the other "indicator" javascript:
$('img.item').removeClass('selected');
$('img.item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
Can you help me to make the first div show on page load?
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
.tabContent {
display:none;
}
<div tabindex="1" class="tabs"><div id="tabs1" onclick="showStuff(this)">CARATTERISTICHE</div><div class="triangle-down-tab"></div></div>
<div id="tabs2" onclick="showStuff(this)">DESTINATARI</div><div class="triangle-down-tab"></div></div>
<div tabindex="3" class="tabs"><div id="tabs3" onclick="showStuff(this)"><i class="fa fa-calendar" style="color:#000000;"></i> CALENDARIO</div><div class="triangle-down-tab"></div></div>
<a name="contenuto"><hr></a>
<div id="tabs-1" class="tabContent">
<p>tab 1</p>
</div>
<div id="tabs-2" class="tabContent">
<p>tab 2 tab 2 </p>
</div>
<div id="tabs-3" class="tabContent">
<p>tab 3 tab 3 tab 3</p>
</div>
This is my actual code. jsFiddle
Thanks!
You could try running a function when the document is ready.
$(document).ready(function () {
showTab("tabs-1");
function showTab(divId) {
//Get the element
var divElement= document.getElementbyId(divId);
//Set the css property "display" from "none" to be "block";
divElement..style.display = "block";
}
}):
The function should run once the page has fully loaded.
Let me know how it goes.
I sure can. When you do this kind of stuff best use css. That way when the dom loads the css will kick in and your desired effect will show.
Further more its easier to understand and easier to code up.
.tabContent {
display:none;
}
.tabContent.active {
display:block;
}
Then in the HTML
<div id="tabs-1" class="tabContent active">
So when the page loads tab one is active
Then in your JS
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className="tabContent";
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).className="tabContent active";
}
Updated fiddle!
https://jsfiddle.net/rb5c5095/3/
We could improve things since we know all the tabs will be made invisible at boot up and tab 1 will show. So when a tab is clicked we could just search the tab who has .active class and remove it, then apply the .active class to the new tab. This would have the benefit that any extra css you add in your html markup would not be removed by the JS code, but i reckon you can work that out and if you can't get back to me i can show you :-)
Here I am invoking the function (upon page load) that tweaks the css of the desired block;
Same can be achieved by $(document).ready;
I took this approach to avoid jquery;
window.onload = showDivOne();
function showDivOne() {
document.getElementById("tabs-1").style.display = "block";
}
I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.
Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>
I am having a lot of trouble figuring out how to write the appropriate javascript or jquery to show a specific div when my clickable div is clicked, meanwhile hiding all other divs within the same class that were previously clicked.
HTML
<img src="images/Current system & actors.jpg" alt="" usemap="#Map" style="left:275px; position:absolute; top:247px; width:100%; z-index:1; " usermap="#mymap" >
<div id="items" >
<div class="sqtrigger" id="xcrudeoil" style="position:absolute; left:200px; top:200px; " onclick="MM_showHideLayers('crudeoil','','show')" ></div>
<div class="sqtrigger" id="xNP" style="position:absolute; left:300px; top:200px; " onclick="MM_showHideLayers('NP','','show')" ></div>
</div>
<div id="info" >
<div id="crudeoil" class="textbox" >Crude oil description </div>
<div id="NP" class="textbox" >NP description</div>
</div>
JAVASCRIPT
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) {
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) {
v=args[i+2];
if (obj.style) {
obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility=v;
}
}
}
I've found information on doing this with <area> tag however I'd like to avoid rewriting my clickable divs to areas within my map because I have over 100 clickable divs and need a work around solution for now...
Example --> http://jsfiddle.net/berqK/4/
var links = document.getElementById('oshastatemap');
for (var i = 0; i < links.children.length; i++) {
links.children[i].onclick = function(ev) {
target_id = this.id.replace('x', '');
s = document.getElementById(target_id);
states = document.getElementsByClassName('show');
for (var j = 0; j < states.length; j++) {
states[j].className = '';
}
s.className = 'show';
};
}
So, how can I adjust this code I've found for showing a div when a link is clicked, to showing a div when a div is clicked while still hiding the others?
In reference to my divs ...
How can I make id="xcrudeoil" show id="crudeoil" (and xNP show NP) while at the same time hiding all child divs of div id=info (or within class="textbox")?
Here is an sample of what I have working so far. (note: in my browser the divs appear but I can't see them in fsfiddle): http://jsfiddle.net/ZCantrall/Ru82F/6/
Thanks a lot in advance! I'd really appreciate ANY advice that you can offer.
*EDIT // Second attempt with the CSS from /jsfiddle.net/Ru82F/7/ and the following HTML & JS
<html><head>
<title>IES</title>
<link href="IES.css" rel="stylesheet" media="screen" type="text/css" >
</head>
<body>
<div id="items" >
<div class="sqtrigger" id="xcrudeoil" >Oil</div>
<div class="sqtrigger" id="xNP" >NP</div>
</div>
<div id="info" >
<div id="crudeoil" class="textbox" >Crude oil description </div>
<div id="NP" class="textbox" >NP description</div>
</div>
<script> src="jquery-1.9.1.js" </script>
<script> src="jquery-migrate-1.1.0.js" </script>
<script>
$('.sqtrigger').on('click', function(e) {
var targetId = this.id.replace('x', '');
$('#info .textbox').hide();
$('#' + targetId).show();
});
</script>
</body></html>
This small jQuery script will show the relevant div and hide the others when you click the triggers (there might be issues with the css, I removed it for this test):
$(document).ready(function() {
$('.sqtrigger').on('click', function(e) {
var targetId = this.id.replace('x', '');
$('#info .textbox').hide();
$('#' + targetId).show();
});
});
http://jsfiddle.net/Ru82F/7/
Could you please try this... http://jsfiddle.net/berqK/22/
JQuery Code...
var links = document.getElementById('oshastatemap');
for (var i = 0; i < links.children.length; i++) {
links.children[i].onclick = function(ev) {
target_id = this.id.replace('State', 'Layer');
$("div[Id^='Layer']").css('display','none');
$('#'+target_id).show();
};
}
This small jQuery script will show the relevant div and hide the others
$("target_div").nextAll().hide()
$("target_div").prevAll().hide()