I am using Javascript within an HTML file to expand and collapse elements of the file.
This is the script:
function toggleBlock(pstrID){
var myDiv = document.getElementById('d' + pstrID);
if (myDiv){
if (myDiv.style.display == 'none'){
showBlock(pstrID);
} else{
hideBlock(pstrID);
}
}
}
function showBlock(pstrID){
var myDiv = document.getElementById('d' + pstrID);
if (myDiv){
myDiv.style.display = 'block';
var myImage = document.getElementById('i' + pstrID);
if (myImage){
myImage.src = 'arrowdown.gif';
myImage.alt = 'Hide';
}
if (document.location.href.indexOf('mk:#') == 0)
myDiv.innerHTML = myDiv.innerHTML;
}
}
function hideBlock(pstrID){
var myDiv = document.getElementById('d' + pstrID);
if (myDiv){
myDiv.style.display = 'none';
var myImage = document.getElementById('i' + pstrID);
if (myImage){
myImage.src = 'arrowright.gif';
myImage.alt = 'Show';
}
if (document.location.href.indexOf('mk:#') == 0)
myDiv.innerHTML = myDiv.innerHTML;
}
}
When I call the script, I use the following:
<a id="h7217" class="expandingblocktemplate" title="" href="javascript:toggleBlock('7217')">
In Chrome everything works fine.
In IE, clicking the link leads to a different window (address shown is javascript:toggleBlock('7217') obviously, the number depends on the link that's clicked) and the error "Internet Explorer cannot display the webpage".
In Firefox, a new tab appears and the Error Console says:
Error: toggleBlock is not defined
Source File: javascript:toggleBlock('7217')
Line: 1
just add
return false ;
after the toggleBlock call.
Additionally to Furqan's solution:
You should never trigger JavaScript in the href attribute. It's a non-standard method that easily leads to errors, especially if you don't know what you are doing. Use onclick instead and put a valid URL in the href attribute for non-script users, or use href="#" if you don't don't care about non-script users.
<a id="h7217" class="expandingblocktemplate" title="" onclick="toggleBlock('7217');" href="noscript.html">
Try this:
HTML:
<a href="#" onclick="toggleBlock('7217')">
JavaScript:
function toggleBlock(pstrID) {
var block = document.getElementById('d' + pstrID),
img = document.getElementById('i' + pstrID);
if ( block && img ) {
if ( block.style.display === 'none' ) {
block.style.display = 'block';
img.src ='arrowdown.gif';
img.alt = 'Hide';
} else {
block.style.display = 'none';
img.src = 'arrowright.gif';
img.alt = 'Show';
}
if ( document.location.href.indexOf('mk:#') === 0 ) {
block.innerHTML = block.innerHTML;
}
}
return false;
}
Related
I want a back and forth changing image button with an ID tag just so my html5 can identify where the JavaScript should be redirected.
I need something of this sort.
function changeImage() { if
(document.getElementById
("imgClickAndChange").src == "
storage/emulated/0/
Documents/Mp3Player/html/
images/Pause.jpg") {
document.getElementById
("imgClickAndChange").src = "/
storage/emulated/0/
Documents/Mp3Player/html/
images/play.jpg "; } else {
document.getElementById
("imgClickAndChange").src = "
storage/emulated/0/
Documents/Mp3Player/html/
images/Pause.jpg "; } }
But it needs to be able to change an image back and forth like this.
var newsrc = "Play.jpg";
function changeImage() {
if ( newsrc == "Play.jpg" ) {
document.images["pic"].src = "/
storage/emulated/0/
Documents/Mp3Player/html5/
images/Pause.jpg";
document.images["pic"].alt =
"Play";
newsrc = "Pause.jpg";
}
else {
document.images["pic"].src = "/
storage/emulated/0/
Documents/Mp3Player/html5/
images/Play.jpg";
document.images["pic"].alt =
"Pause";
newsrc = "Play.jpg";
}
}
Not sure if this is what you are looking for:
var element = document.getElementById("imgClickAndChange")
var playPath = getPath('Play')
var pausePath = getPath('Pause')
function toggleImage() {
if (element.src === playPath) element.src = pausePath
else element.src = playPath
}
function getPath(type) {
return '/storage/emulated/0/Documents/Mp3Player/html5/images/' + type + '.jpg'
}
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/
I've been trying to combine two javascript codes, one that makes other divs close when a new one is opened and one that uses cookies to remember whether a div was opened by a viewer.
As it is now it succeeds in remembering which div was open, but when I click to open the other div, it doesn't close the first div. If I click again to reopen the first div, it closes the second just like it's supposed to, and after that, if I click to open the second div it closes the first div like it's supposed to. And then it works perfectly fine after that. But I can't figure out why it won't close the first div on the initial click.
I'm very new to javascript, so I don't know much about how to manipulate it.
<body>
<script language="javascript">
function setCookie (name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie (name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset);
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
if (setStr == 'false') {
setStr = false;
}
if (setStr == 'true') {
setStr = true;
}
if (setStr == 'null') {
setStr = null;
}
return(setStr);
}
function MyFunction2(divName){
setCookie('bookmark_state', false);
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
function MyFunction3(divName){
setCookie('bookmark_state', null);
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
function checkBookmark() {
if (getCookie('bookmark_state') == null) {
document.getElementById('bookmark').style.display = 'block';
}
if (getCookie('bookmark_state') == false) {
document.getElementById('bookmark2').style.display = 'block';
}
}
</script>
<input id="tempDivName" type="hidden"/>
<div id="bookmark" style="display:none"><a style="color:black" href="#" OnClick="MyFunction2('bookmark2'); return false;">*</a></div>
<div id="bookmark2" style="display:none"><a style="color:red" href="#" OnClick="MyFunction3('bookmark');">*</a></div>
<script>
checkBookmark();
</script>
</body>
Also, is there a way to use a single cookie to remember which of several divs is open (instead of just two divs)?
Yes, simply store the states of your open divs in an object and serialize it via JSON, e.g.
var states = {
"div1": true, // open
"div2": false // closed
}
setCookie("div_states", JSON.stringify(states));
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>
I was trying to add a text popup box on my page, and this code helped me but I need to add a close icon (which is an image in my code)..
but it doesn't work :/
here is my code:
function show_hide_box(an, width, height, borderStyle) {
if (navigator.userAgent.indexOf("MSIE") != -1) {
var browserIsIE = true;
} else { browserIsIE = false; }
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#FFF';
var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'Close');
inClosebox.style.position = 'absolute';
if (browserIsIE) {
inClosebox.style.left = '-1px';
inClosebox.style.top = '0px';
} else {
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
}
inClosebox.style.visibility = 'hidden';
var inImage2 = document.createElement("img");
inImage2.onclick = function () { this.document.close(); };
inImage2.setAttribute('src', '../../Images/closebox.png');
inImage2.setAttribute('width', '30');
inImage2.setAttribute('height', '30');
inImage2.setAttribute('border', '0');
inImage2.style.cursor = 'pointer';
inClosebox.appendChild(inImage2);
var contents = document.createElement('iframe');
contents.scrolling = 'yes';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
boxdiv.appendChild(inClosebox);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
return false;
}
can any help me please?
That should mean that the path of src is wrong. ie, ../../Images/closebox.png
Add this to your code and see whether this works
inImage2.setAttribute('alt', 'Close');
Even if this doesn't work, it shows you that something else is wrong with the code.
Its a very good practice to add alt attribute to img tag always.
Update:
I just saw this inClosebox.style.visibility = 'hidden';
You are appending img to that and so how are you gonna possibly make it visible when the parent is hidden?
Beats me. Or do you have extra code? If no, please remove that line and try.