I have a javascript toggle function:
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
}
</script>
What this does is:
I have a few links on page and on click of these links it shows / hides the respective DIV section associated with it..
In the following two links it opens and closes div section named stusearch & facsearch
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
This works well except that, i would like to hide the previous shown toggle when a new toggle link is clicked, at the moment the previous one remains open, and the new one opens up below it.
I tweaked your code a bit here. I ended up adding a variable to store the divs you want to show/hide in case you want to add more divs to toggle:
var divs = [ "stusearch", "facsearch" ];
function toggle(layer) {
var d
for(var i = 0; i < divs.length; i += 1) {
d = document.getElementById(divs[i]);
d.style.display = 'none';
}
d = document.getElementById(layer);
d.style.display = '';
}
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.visibility = (d.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>
In pure javascript, the easiest way is going to be to just 'remember' the last element you modified - aka:
var lastElement = null;
function toggle(elementId)
{
if(lastElement != null)
lastElement.style.display = 'none';
var newElement = document.getElementById(elementId);
newElement.style.display = (newElement.style.display == 'none') ? 'visible' : 'none';
if(newElement != lastElement)
lastElement = newElement;
}
You hide the last reference, then get the new one and show it.
You could keep a local var to it,
<script type="text/javascript">
function(){
var shown;
window.toggle = function(layer) {
if(shown)
shown.style.display = '';
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
shown = d;
}
}
</script>
Alternatively, you could control the visibility with a css class and do a blanket removel of the class from all elements before setting it.
Here is a jQuery solution in case you ever decide to implement a library:
the JavaScript:
function toggle(layer) {
$('.toggleableSearch').hide();
$(layer).show();
}
the html:
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
<div id="stusearch" class="toggleableSearch"></div>
<div id="facsearch" class="toggleableSearch"></div>
Related
Ok i'll try very hard to explain exactly what I'm trying to accomplish.
I know that if I want a div to stay at the bottom of a page I can simply do this..
<div id="foo" style="position: fixed; bottom: 0: width: 100%">
blah text
</div>
But I don't want this to always be at the bottom of the page..
I have code like this..
<html>
<head>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';"
else
e.style.display = 'block';
}
</script>
</head>
<body>
<div id="firstDiv" style="display: block;">
......
</div>
<div id="secondDiv" style="display: none;">
......
</div>
<div id="thirdDiv" style="display: none;">
......
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
..repeated 20 times or w/e..
</body>
</html>
I want to do something like http://www.snyderplace.com/demos/collapsible.html
BUT i really don't want to use someone elses library if at all possible... I'm open to using jQuery etc, just don't want to use someone elses library if all possible unless its very bare bones and not a FULL library.
I only know how to hide and show the current ones HTML. I know i would prolly have to do something like..
if (e.id = "firstDiv") {
secondDiv.style.display = 'none';
thirdDiv.style.display = 'none';
} elseif { ....
....
}
Ok so what I want to be able to do is if i have a TON of data inside the [firstDiv] and its so much data that the page has a scroll bar and the [secondDiv] and [thirdDiv] would normally pushed all the way down the page... I want [secondDiv] and [thirdDiv] to stack ontop of eachother and always at the bottom of the page...
But then if I click on [secondDiv] then the [firstDiv] contents will obviously disappear, but I want [firstDiv] to stay at top of page no matter what, then [secondDiv] to be right under neath it which will then show its HTML while [thirdDiv] will still stay static at the bottom of the page....
Then if I was to click on [thirdDiv] then it would just then be [firstDiv] [secondDiv] and [thirdDiv] stacked in order at the very top while now of course showing the HTML of the [thirdDiv]...
LOOOONG explaination later i'm wanting to do a Collapseable system that hides the other divs content while keeping them in order HOWEVER the twist is that the divs below the [firstDiv] always still show up at the bottom of the page no matter what.
Hopefully this makes sense!
I ended up solving and having to do this myself. My answer is TERRIBLY UGLY, but it does work... I would love if anyone could help re-write it so its not so ugly I would greatly appreciate it...
I ended up having to create a Header to act as the (Accordion Header) then a div below it that acted as the div that held the results of the HTML/Content..
Then each Accordion Header I just set onclick="toggle_visibility('firstDivHeader');" or whatever the header that was clicked and then it did the following..
http://jsfiddle.net/t8Le7qqv/ - I wanted to add finished result incase anyone wanted to know how to do this.
<script type="text/javascript">
function toggle_visibility(id) {
if (id == 'firstDivHeader')
{
document.getElementById('firstDivResults').style.display = 'block';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '';
document.getElementById('secondDivHeader').style.bottom = '82px';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '';
document.getElementById('thirdDivHeader').style.bottom = '41px';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'secondDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'block';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '';
document.getElementById('thirdDivHeader').style.bottom = '41px';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'thirdDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.bottom = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'block';
document.getElementById('thirdDivHeader').style.top = '82px';
document.getElementById('thirdDivHeader').style.bottom = '0';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'forthDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.bottom = '';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '82px';
document.getElementById('thirdDivHeader').style.bottom = '';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'block';
document.getElementById('forthDivHeader').style.top = '123px';
document.getElementById('forthDivHeader').style.bottom = '';
document.getElementById('forthDivHeader').style.position = 'fixed';
}
}
</script>
Thanks for the design pattern. It really helped me when I was looking to build something similar to what you had done. Here's my version as per your re-write request :) Things to note: I'm using jQuery selectors rather the the javascript ones you used, my divs are named differently and my row height is different, but you'll get the idea.
function toggle_visibility(id) {
// Setup the accordion divs
var sectionHeaderIds = ["#sectionOneHeader", "#sectionTwoHeader", "#sectionThreeHeader",
"#sectionFourHeader", "#sectionFiveHeader", "#sectionSixHeader"];
var sectionDetails = ["#sectionOneDetail", "#sectionTwoDetail", "#sectionThreeDetail",
"#sectionFourDetail", "#sectionFiveDetail", "#sectionSixDetail"];
var rowHeight = 30;
var chosenSectionId = 0;
var numSections = sectionHeaderIds.length;
// Get the index of the selected section
for (var i = 0; i < numSections; i++) {
if (sectionDetails[i] == id) {
chosenSectionId = i;
}
}
// Loop through the divs
for (var i = 0; i < numSections; i++) {
var sectionHeader = $(sectionHeaderIds[i]);
var sectionDetail = $(sectionDetails[i]);
sectionHeader.css('position','fixed');
if (sectionDetails[i] == id) {
sectionDetail.css('display', 'block');
} else {
sectionDetail.css('display', 'none');
}
sectionHeader.css('top',(i <= chosenSectionId) ? i * rowHeight : '');
sectionHeader.css('bottom',(i > chosenSectionId) ? (numSections - i - 1) * rowHeight : '');
}
}
http://jsfiddle.net/Zgxv9/
As you can see in my fiddle, my divs go to their natural positions when clicking through them. I need whichever div was clicked last to always appear on top. My current code:
function displayOne() {
document.getElementById("fluid1").style.display = 'block';
}
function displayTwo() {
document.getElementById("fluid2").style.display = 'block';
}
function displayThree() {
document.getElementById("fluid3").style.display = 'block';
}
I would prefer to avoid jQuery for this if possible. Thank you!
I would try something like this.
Move them into a container on click, that way they keep their order, depending on the order in which they were moved into the container.
http://jsfiddle.net/Zgxv9/1/
var target = document.getElementById( "container");
function displayOne() {
target.appendChild(document.getElementById("fluid1"));
}
function displayTwo() {
target.appendChild(document.getElementById("fluid2"));;
}
function displayThree() {
target.appendChild(document.getElementById("fluid3"));
}
If you want them to be added to the top you can use insertBefore. It will work like this: http://jsfiddle.net/Zgxv9/7/
var target = document.getElementById( "container");
function displayOne() {
target.insertBefore(document.getElementById("fluid1"), target.firstChild);
}
function displayTwo() {
target.insertBefore(document.getElementById("fluid2"), target.firstChild);;
}
function displayThree() {
target.insertBefore(document.getElementById("fluid3"), target.firstChild);
}
DEMO — http://jsfiddle.net/Zgxv9/6/
var container = document.getElementById('container');
function displayOne() {
var div = document.getElementById("fluid1");
div.style.display = 'block';
container.insertBefore(div, container.firstChild);
}
You can use insertBefore method. Working demo.
function display(ev) {
ev.preventDefault();
var id = this.href.split('#')[1],
div = document.getElementById('fluid' + id),
divs = document.getElementsByClassName('container-fluid');
//if current div is not first insert it before the first one
div !== divs[0] && div.parentNode.insertBefore(div, divs[0]);
div.style.display = 'block'; //and show
}
[].forEach.call(document.getElementsByClassName('toggle'), function(link){
link.addEventListener('click', display);
});
The function could be more modular : http://jsfiddle.net/t76BX/58/
function displayDiv(elem_id) {
var elem = document.getElementById(elem_id);
elem.style.display = 'block';
var elemCloned = elem.cloneNode(true);
// console.log(elemCloned);
var theparentnode = elem.parentNode;
// console.log(theparentnode);
var divList = document.getElementsByClassName("container-fluid");
var first_element = divList[0];
theparentnode.insertBefore(elemCloned, first_element);
theparentnode.removeChild(elem);
}
I'm trying to connect previous and fwd buttons to a gallery and I want the previous button to be hidden on first image of the gallery but javascript doesn't seem to be working at all.
Javascript
var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function next() {
imgCount++ ;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}
function previous() {
imgCount--;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}
if(document.getElementById("gallery").getAttribute("src") == "1.png")
{
document.getElementById("previous").style.visibility = 'hidden';
}
else
{
document.getElementById("previous").style.visibility = 'visible';
}
HTML
<div id="img">
<img id="gallery" src="1.png" style="height:420px; width:744px" >
<div id="imgNav">
<a id="previous" href onclick="previous(); return false;">previous</a>
<span style="color:#666; font-size:0.9em"> | </Span>
<a id="next" href onclick="next(); return false;">next</a>
</div>
</div>
Actually the logic is if 'src' attribute of id 'gallery' is '1.png' then 'visibility' of element with id 'previous' is 'hidden' else not but doesn't seem to be working. Can anyone help figuring it out.
You're probably trying to check on an image that's not totally loaded yet. Did you remember to place your code to run just when the page is fully loaded (in case it's placed in the page headers - you didn't mention whether it is or not)?
UPDATED
var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function checkNav() {
var previousLnk = document.getElementById("previous");
var nextLnk = document.getElementById("next");
previousLnk.style.visibility = imgCount == 0 ? 'hidden' : 'visible';
nextLnk.style.visibility = imgCount >= (imageGallery.length - 1) ? 'hidden' : 'visible';
}
function setImg() {
var gallery = document.getElementById("gallery");
gallery.src = imageGallery[imgCount];
}
function next() {
imgCount++;
setImg();
checkNav();
}
function previous() {
imgCount--;
setImg();
checkNav();
}
window.onload = function () {
checkNav();
}
Demo: http://jsfiddle.net/N7V9E/
When I click my link the div changes to active and ajax is loaded.
But how can I then say if the link is clicked again that it should become deactive?
favourite.onclick = function() {
loadXMLDoc('indexFavourite');
favourite.className = 'statusOptionActive';
}
favourite.onclick = function() {
loadXMLDoc('indexFavourite');
var linkclass = favourite.className;
if(linkclass == 'statusOptionDeactive')
favourite.className = 'statusOptionActive';
else
favourite.className = 'statusOptionDeactive';
}
Try this.
favourite.className = (favourite.className == 'statusOptionActive') ? 'statusOptionDeactive' : 'statusOptionActive';
The above checks if the current className is statusOptionActive. If yes, it changes the className to statusOptionDeactive. If no, it sets it as statusOptionActive.
Fiddle
You can have a global variable like:
var isDivActive = false;
Which is false by default.
favourite.onclick = function() {
loadXMLDoc('indexFavourite');
if (isDivActive) {
favourite.className = 'statusOptionActive';
}
else {
favourite.className = '';
}
isDivActive = !isDivActive;
}
I want to change a picture in my site every 5 second and I have used this code!but it does'n work!
where is the problem!
<script type="text/javascript"src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
var interval = setInterval(time, 5000);
}); // ending ')' was missing
</script>
<script type="text/javascript">
function time() {
var m11 = document.getElementById("m1");
var m22 = document.getElementById("m2");
var m33 = document.getElementById("m3");
var name= mm11.style.display.toString();
if ( name=="block") {
m11.style.display = "none";
m22.style.display = "block";
}
if(m22.style.display.toString() ="block") {
m22.style.display = "none";
m11.style.display = "block";
}
}
</script>
Change
if(m22.style.display.toString() ="block")
with
if(m22.style.display.toString() == "block")
Also, you don't need the "toString()", because display is already a string.
Here is a shorter code:
function time() {
var m11 = document.getElementById("m1");
var m22 = document.getElementById("m2");
var m33 = document.getElementById("m3");
if (m11.style.display == "block") {
m11.style.display = "none";
m22.style.display = "block";
}
if(m22.style.display == "block") {
m22.style.display = "none";
m11.style.display = "block";
}
}
Since you're already using jquery It seems to me that you can simply use
function time() {
$('#m1').toggle();
$('#m2').toggle();
}
You can directly use. Note that it should be == when comparing in If statement
document.getElementById('m1').style.display = 'none';
On the second if block, you miss-typed the comaprsion operator.
if(m22.style.display.toString() ="block")
Should be
if(m22.style.display.toString() =="block")
Better way is as follows:
HTML:
<div id="m1" style="display:block">Hello1</div>
<div id="m2" style="display:none">Hello2</div>
JS:
setInterval(time, 5000);
function time() {
$("#m1, #m2").toggle();
}
Refer LIVE DEMO
UPDATED:
As per #Sarah sh comment, you need to show images one by one.
Here is your functionality.
HTML:
<div class="img">Hello1</div>
<div class="img">Hello2</div>
<div class="img">Hello3</div>
<div class="img">Hello4</div>
JS:
var currObj = $(".img").first();
$(currObj).show();
$(".img").not(currObj).hide();
setInterval(rotateImage, 2000);
function rotateImage() {
var tempObj = currObj;
if ($(tempObj).is(":last"))
currObj = $(".img").first();
else
currObj = $(currObj).next();
$(tempObj).hide();
$(currObj).show();
}
Refer LIVE DEMO