I have a series of expandable drop-down tabs using the ToggleList javascript function below. When the tab is closed I would like to display expand.png and when it's open I would like to display close.png. Right now Any help would be appreciated.
The code below expands\minimizes the dropdown tabs, but is not switching the png files.
Full javascript + html:
<script type="text/javascript">
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "expand.png" ? "minimize.png" : "expand.png";
}
function HideRange(sect,elTag,IDS) {
var ContentObj = document.getElementById(sect);
var AllContentDivs = ContentObj.getElementsByTagName(elTag);
}
</script>
<ul id="ulist">
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand0" class="divInfo">Text</div>
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand1" class="divInfo">Text</div>
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand3" class="divInfo">Text</div>
</ul>
Here's a simple way to implement that - comments in the code
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "img/expand.png" ? "img/collapse.png" : "img/expand.png";
}
Related
I have this two images that trigger the same function. What the function does is showing/hiding one of the images and then i added some extra code to show/hide a menu, that i haven´t included.
function menu() {
var b = document.getElementById("burger");
var c = document.getElementById("close");
if (b.style.display === "block") {
b.style.display = "none";
c.style.display = "block";
} else {
b.style.display = "block";
c.style.display = "none";
}
}
<img src="img/burger-white.png" id="burger" onclick="menu()" alt="img1">
<img src="img/close-white.png" id="close" onclick="menu()" alt="img2">
Everything works as intended, except for the first time i click on the image, when it does nothing.
It looks like the display for burger is not initially set to block. Try loading the page and inspect it with chrome. There you should see, when the page is loaded, if it initially have the expected css style.
A workaround, would be to add a function that will set the display of the element with id #burger to "block", if the window size is less that a 1100px.
function setDisplay() {
var width = window.innerWidth;
var b = document.getElementById("burger");
if(width <= 1100) {
b.style.display = "block";
}
}
So basically i have made a PHP program that takes pictures from a folder and puts it into the "slideshow" in Gallery. The PHP code gives the images id's starting from "1" and so on.
Now with JavaScript i want it to automatically switch picture every 2,5 second. It actually runs as i want it to in my Firebug Script, but nothing happens in the browser. I already posted my JavaScript link in the bottom of the HTML body, and it doesn't help.
Any help would be appreciated.
<div id="gallery" class="grey">
<h3>Gallery</h3>
<div id="slideshow">
<?php
$path = "./img/gallery";
$all_files = scandir($path);
$how_many = count($all_files);
for ($i=2; $i<$how_many;$i++) {
$kubi=$i - 1;
echo "<img src=\"./img/gallery/$all_files[$i]\" id= \"$kubi\"/>";
}
?>
</div>
</div>
JavaScript code:
var picture = document.getElementById("1");
var i = 0;
function rotateImages() {
while (i < document.getElementById("slideshow").childNodes.length) {
picture.style.display = "none";
picture = picture.nextSibling;
picture.style.display = "inline";
i++;
};
};
window.onload = function(){
document.getElementById("1").style.display = "inline";
setInterval(rotateImages(), 2500);
};
What happens is that always uses the same first element picture, hides it and then shows the second image, it does not actually iterate through all the pictures.
In your code, picture always is the first element, next is always the second.
Also, it should not be a while loop since the callback is called once to change a picture, so change it to if, and reset to the first picture when it passes number of total elements.
It should be: (Javascript)
var firstPicture = document.getElementById("1");
var picture = firstPicture ;
var i = 0;
function rotateImages() {
// hide current element
picture.style.display = "none";
// choose who is the next element
if (i >= document.getElementById("slideshow").childNodes.length) {
i = 0;
picture = firstPicture;
} else {
picture = picture.nextSibling;
}
// show the next element
picture.style.display = "inline";
i++;
};
window.onload = function(){
var curImg = document.getElementById("1").style.display = "inline";
setInterval(rotateImages, 2500);
};
The role of the script is to change image.jpg with newimage.gif and vice versa when clicked.
Now i want to add a spinner while the newimage.gif loads.
Something like 9gag.com/gif.
Can someone help me please?
This is the code:
html
<img src="/image.jpg" id="pic" onclick="change()"/>
<a id="first" href="/newimage.gif" style="display:none;"></a>
<a id="second" href="/image.jpg" style="display:none;"></a>
java
function change(){
var imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;
if(img == 'gif') {
document.getElementById('pic').src=imag2;
// here the newimage.gif changes to image.jpg
} else {
// here the image.jpg changes to newimage.gif
document.getElementById('pic').src=img1;
}
}
I found a kind of way, the only problem is that after the image.gif gets loaded the spinner still appears.
if(img == 'gif') {
document.getElementById('pic').src=imag2;
// here the newimage.gif changes back to image.jpg
document.getElementById("spinner").style.display = "none";
} else {
document.getElementById('pic').src=img1;
var image = new Image();
image.src = document.getElementById('second').href;
var x = image.complete;
if(x) {
document.getElementById("spinner").style.display = "none";
} else {
document.getElementById("spinner").style.display = "block";
}
}
}
This is here i use the script http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk
I have created a similar one and done it like this. May be it will help you as well
function load_bike(imgUrl){
old_url=$('#bike_img').attr('src');
$('#bike_img').load( function(){
$('.loading').css("display","none");
$('#bike_img').css("display","block");
}).attr('src', imgUrl);
$('.loading').css("display","block");
$('#bike_img').css("display","none");
}
You can show spinner, but to make it nice first you have to know the original file size or at least show it as bigger image. Without image your html element will have 0px heigh so even if you add a nice animation there you won't se it.
The best way to add and remove spinner is adding/removing a CSS class to element, for example :
var pic = document.getElementById('pic');
pic.onload = function() {
pic.className = '';
}
function change(){
imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;
var pic = document.getElementById('pic');
pic.className = 'loading';
if(img == 'gif') {
pic.src=imag2;
} else {
pic.src=img1;
}
}
This sample of code will set element class attribute "loading", and then when element is loaded it will remove the element class attribute.
Then you have to create your own css that can looke like that :
.loading {
background-image: url('URL_TO_IMAGE');
}
I have the following script on a page that has a button to Show/Hide some content. I'd like to have a link from another page that would go to this page and open/show the content of one of the items. Is this possible to do?
Here's the onpage script and markup i'm using to to the Show/Hide;
Note: The '{trailitem:count}' is just an ExpressionEngine tag to add a unique number to each div. ExpressionEngine loops through and creates the divs with an incremental number, but the concept is the same so just imagine a series of divs with a unique ID.
<script>
function ToggleTrail{trailitem:count}() {
var toggler = document.getElementById("trail_toggler{trailitem:count}");
var first = document.getElementById("trail_first{trailitem:count}");
var reveal = document.getElementById("trail_reveal{trailitem:count}");
if(reveal.style.display != "block" && toggler.style.display != null) {
toggler.style.display = "block";
toggler.innerHTML = '» Hide';
first.style.display = "block";
reveal.style.display = "block";
}else{
toggler.style.display = "block";
toggler.innerHTML = '» Reveal More';
first.style.display = "block";
reveal.style.display = "none";
}
return false;
}
</script>
<div class="trailbox">
<a id="trail_toggler{trailitem:count}" class="button blackbutton viewallbutton" href="#" onclick="return ToggleTrail{trailitem:count}();">» Reveal More</a>
<div id="trail_first{trailitem:count}">
First content
</div>
<div id="trail_reveal{trailitem:count}">
Content to be revealed
</div>
</div>
I'm trying to show or hide divs based on user settings in a Windows 8 app. I have 2 divs in my html file:
<div id="fillBlank"><p>Fill in the Blank area</p></div>
<div id="multipleChoice"><p>Multiple choice area</p></div>
In the JavaScript file I have:
var answerStyle = "mc";
function showArea() {
if (answerStyle == "mc") {
// Multiple choice
multipleChoice.visible = true;
fillBlank.visible = false;
} else if (answerStyle == "fb") {
// Fill in the blank
multipleChoice.visible = false;
fillBlank.visible = true;
}
}
This doesn't work. Any suggestions? Thanks in advance.
One way to do this in JavaScript is to use the style property:
var fillBlank = document.getElementById("fillBlank");
fillBlank.style.display = "none";
Setting style.display to "" will make it visible using what ever the display time the element currently has set.
You're very close!
var answerStyle = "mc";
function showArea() {
if (answerStyle == "mc") {
// Multiple choice
multipleChoice.style.visibility ='visible';
fillBlank.style.visibility = 'hidden';
} else if (answerStyle == "fb") {
// Fill in the blank
multipleChoice.style.visibility = 'hidden';
fillBlank.style.visibility = 'visible';
}
}