I am currently working with the toggle div function. I am using images to be the triggering point for toggling. For example when a div is close an image with a "plus" signs appears to indicate the user to expand and vice versa for compressing the div. The only issue is that I am using two sets of images for expanding and compressing divs but I can only get a set to work but not both. The is example I have doesn't work well in jsfiddle but if you like to look at it there here is the link: http://jsfiddle.net/sQnd9/4/
Here is my example:
<script type="text/javascript">
function toggle1(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="images/Plus_Circle.png"/>';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="images/Minus_Circle.png"/>';
}
}
</script>
<script type="text/javascript">
function toggle2(showHideDiv2, switchImgTag2) {
var ele = document.getElementById(showHideDiv2);
var imageEle = document.getElementById(switchImgTag2);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src=images/arrow_open.png/>';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src=images/arrow_close.png/>';
}
}
</script>
<div><a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');"><img src="images/Plus_Circle.png";/></a>Example</div>
<br />
<div id="contentDivImg" style="display:none;">
Example1-Content
</div>
<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>
<br />
<div id="contentDivImg2" style="display:none;">
Example2-Content
</div>
The problem isn't your code (other than the mistakes that #appclay pointed out). The problem is jsfiddle. Just look at the source code it produces. When you put anything in the "javascript" section it's puts it in it's own namespace, preventing access to those function names outside of that block (so your call to toggle1 for example was throwing an undefined function error).
You can see this in action by defining these functions directly as window. properties. Then your code works as expected. See http://jsfiddle.net/sQnd9/7/
In your own code, you presumably would not encapsulate these function names into their own scope, and it would work as expected (but note again that you should make the changes #appclay pointed out).
Also, you probably shouldn't be doing it this way anyway. You should attach the event handlers in the javascript block.
You're missing the quotes on the img src attribute in the second one
You're also referencing the first function in both examples, so the second function never gets called... Try changing:
<div><a id="imageDivLink2" href="javascript:toggle1('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>
to
<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/arrow_open.png" /></a>Example2</div>
Also, I don't know why you have semicolons in your img tags, they shouldn't be there.
Related
resultTable is initially hidden. When play button is clicked, the game will run and it will display the finalscore inside the hidden content. I need a function to display the finalscore. Currently the showResult function I have is not working (obviously)
I deleted unnecessary contents because the whole thing is a little big and messy. Hope the code still makes sense.
<body onload="loadGame()">
<div>
<button onclick="playButton()" id="play">Play</button>
</div>
<div id="resultTable" >
<span id="result"></p>
</div>
<script>
function loadGame(){
var hideResult = document.getElementById("resultTable");
hideResult.style.display = "none";
}
function playButton(){
playGame();
showResult();
}
function playGame(){
/*Some code here*/
document.getElementbyId("result").innerHTML = "finalscore";
}
function showResult(){
var show = document.getElementById("resultTable"); //fixed.
show.style.display = "block";
}
</script>
</body>
Change the way you are finding the element to set its display as block or none. You are using the "getElementsByClassName" method, but there is no element with such classname in the DOM.
Moreover, the "getElementsByClassName" will return you an array of all the elements, if found, in the DOM and you have to loop through the array to access it.
function showResult(){
document.getElementById("resultTable").style.display = "block";
}
EDIT #1
Thanks to the 2 users who responded, their solutions worked great! Something I forgot to mention in the original post was, Is there any way to adjust the user's view so that when the expanded section is collapses by the user, their "view" (or the actual web page) can adjust up to an anchored spot?
ORIGINAL POST
I've got a section of a website that I want to first be collapsed and not able to be viewed by the user. Then, when they hit an arrow on the screen, the hidden content will then display AND the image needs to change from a "down" arrow to an "up" arrow.
I'm able to do this with the below code right now but I have to have two arrows. Can anyone help so that I only have one arrow on screen and it changes based on when the user clicks on it? I'd also like this to be able to be done an infinite amount of times by the user (ie if the user clicks the "down" arrow, the section expands and the arrow changes to an "up" arrow but then when the user hits that "up" arrow the section collapses and the arrow changes back to a "down" arrow. Possible?
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl(h) {
var tbl = document.getElementById('tbl');
tbl.style.display = h;
}
// -->
</script>
<br>
<img src="up_arrow.png">
<img src="down_arrow.png">
Thanks for any help!
I have added your code and created a jsfiddle for you...
changed code:-
function sizeTbl(h) {
var tbl = document.getElementById('container');
tbl.style.display = h;
if (h == "block") {
document.getElementById('down').style.display = 'none';
document.getElementById('up').style.display = 'block';
} else {
document.getElementById('up').style.display = 'none';
document.getElementById('down').style.display = 'block';
}
}
working example:-
click to see example:-http://jsfiddle.net/XUjAH/1089/
thanks
I've taken out the parameter from your sizeTbl method
Then I'm getting the src property of the image (note I've given it an ID). Depending on the src we can show/hide the table and change the image property
Here's a jsFiddle
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.src === 'down_arrow.png'){
tbl.style.display = 'block';
icon.src = 'up_arrow.png';
}
else {
tbl.style.display = 'none';
icon.src = 'down_arrow.png';
}
}
// -->
</script>
<br>
<img src="down_arrow.png" id="toggle-table">
You've added some extra requirements to your question. You've tagged jQuery and this is the easiest solution for this scenario.
Remove the javascript:sizeTbl() from your <anchor> tag. This is known as inline JS and isn't recommended because it means you are mixing your presentation code with your business logic.
You make the <anchor> tag act like a normal anchor tag and attach a click event in the document's ready event.
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.innerText === 'show') {
tbl.style.display = 'block';
icon.innerText = 'hide';
} else {
tbl.style.display = 'none';
icon.innerText = 'show';
}
}
$(document).ready(function(){
$('#sizeTbl').on('click', sizeTbl);
});
I've created a new jsFiddle that demonstrates this.
Notes:
You need to be using jQuery for this to work
Note that I've given the <anchor> tag an ID. This is so that I can locate it in code
If you have any other comments, the etiquette on SO is to ask new questions. The answers get too long and complicated otherwise
I'm working on a personal website and I'm trying to have a show/hide on click of an image, but I'm not really sure where the problem is.
HTML
<div id="menuopen">
<a href="#" onclick="toggle('menu');">
<img src="assets/Images/menu.gif" alt="Menu">
</a>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
JS
<script type="text/javascript">
<!--
function toggle(id) {
var item = document.getElementById(id);
if(item.style.display == 'block')
item.style.display = 'none';
else
item.style.display = 'block'; }
//-->
As a side note, this script also did not work using plain text rather than the image, so I don't think that my problem lies there.
Sometimes the style properties are empty/meaningless until they have been set in JavaScript. You can either set the value in JS first or you can have your JS assume the starting state.
Solution 1 - Set state from JS:
var s = document.getElementById('menu').style;
s.display = 'block';
function toggle() {
if(s.display == 'block') { s.display = 'none'; }
else { s.display = 'block'; }
}
Solution 2 - Assume unset means it's visible
function toggle(id) {
var s = document.getElementById('menu').style;
s.display = (s.display!=='block' ? 'block' : 'none');
}
Check this one. Just a short explanation, your function is checking if the element has a block value attached to it's display property which is wrong - by default this property is empty. So, rather ask for none or an empty (default) value.
function toggle(o) {
var e = document.getElementById(o);
e.style.display = (e.style.display != 'none' ? 'none' : '' );
}
I don't have a lot of time to analyze, but I'd recommend using an in-body function with a click trigger instead of pre-defining the function. Something like what's in the fiddle here :
fiddle
Hope this helps, let me know if you want some clarification and I'll do what I can.
I need help collapsing a collapsible div on page load.
I'm using this JavaScript code:
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
document.getElementById('aboutme').style.display = 'none';
</script>
to collapse HTML div id="aboutme" when the <a ...>about me</a> is clicked:
<div class="container">
about me
<div id="aboutme">
sample text to be expanded and collapsed
</div>
</div>
I can't get the page to close my div#aboutme on page load.
I want this page to load with my div collapsed.
I thought that the JS line
document.getElementById('aboutme').style.display = 'none';
should do the trick but it doesn't. What am I doing wrong?
Thanks for your help.
If you want your div to load collapsed, simply write the following
<div id="aboutme" style="display:none">
sample text to be expanded and collapsed
</div>
This should resolve the problem.
However, if you are still interested in the JavaScript solution keep reading.
As you said I can't get the page to close my div#aboutme on page load - the problem is that you are not using "onload" event.
Simply put the line document.getElementById('aboutme').style.display = 'none'; in your body's onload attribute..
something like this
<body onload="document.getElementById('aboutme').style.display = 'none';">
...
</body>
and you should see the results with JavaScript. I recommend you use "style" method instead. much better.
Exactly how do you make that JS run on window load? It may simply run before the page is rendered
Does clicking on the link work? if it does, that would prove that the issue is simply the loading sequence
The easiest solution would be to place your code at the very end of your HTML file, just before the closing </body> tag. The code below is more generic, and can be placed anywhere. Note that to toggle the link back on I set the display to 'inline' (or block, i.e. whatever it was before - you may want to save that to a variable to be sure)
<script type="text/javascript">
function switchMenu(id) {
var el = document.getElementById(id);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = 'inline'; //or block - i.e. whatever it is rendered by
}
}
//add to the window onload event
if( window.addEventListener ){
window.addEventListener( 'load', function(){ switchMenu('aboutme')}, false);
} else if (window.attachEvent) {
window.attachEvent("onload", function(){ switchMenu('aboutme') } );
}
</script>
I want to change the style:display property (none or block) of my div (displaydiv) according to the value of a global variable (disp). I want to check the value of this variable on page load and set the styel: display according to the value disp.
i set the value of disp as "none" in javascript.
i want to change the value within HTML TAG
But this div is always visible.
Please help me
<script>
function hidemydiv() {
if(disp == 'none') document.getElementById('displaydiv').style.display = 'none';
}
</script>
<body onload="hidemydiv()">
<div id="displaydiv">
Lorem ipsum dolor sith amet
</div>
</body>
I just wonder what kind of global variable disp is. Is it in javascript? PHP? Where/when/how do you set it?
We can't tell without code but it sounds very much like you're executing your change-style JS inline before the target DIV has loaded.
Does your browser report errors on the page?
Is your JS code bound to the onload event somehow?
Is the style actually applied but overidden (check with firebug)?
Attach a function to the window onload event.
window.onload = function () {
var elem = document.getElementById(divId);
if (disp === "none") {
elem.style.display = "none";
}
else {
elem.style.display = "block";
}
};