We Keep Coding

expanding and collapsing folders

I need to get more than one element to toggle open and closed. Right now the function is just selecting the ID, but I'd like to know how to get it to select a class. I thought I could change the document.getElementById to document.getElementByClass but that didn't work.
I picked this bit of code during my search:
#ToggleTarget {display:hidden;}
<script type="text/javascript">
function Toggle() {
var el = document.getElementById("ToggleTarget");
if (el.style.display == "block") {
el.style.display = "none";
}
else {
el.style.display = "block";
}
}
</script>

var getElementsByClassName = function(node, classname) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(classname);
}
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var Toggle = function(){
var tp = getElementsByClassName(document.documentElement,'toggle');
for(var i = 0; i < tp.length; i++){
if(tp[i].style.display=='none')
tp[i].style.display='block'
else
tp[i].style.display='none'
}
}
Use getElementsByClassName and then loop through them.
EDIT
Just make sure they have the class toggle as used in my code above.
UPDATE
Added function for IE support (adopted from https://stackoverflow.com/a/7410966/600101).

Javascript for showing a div using the div's class name

I have a div in my page like that,
<div class="errormsg" style="display: none;">Username is empty</div>
i am having an input field like this,
<input type=textbox id="userid" />
Now i need a javascript for showing the error message div if input field was empty. I need to use the div class rather than id. Please help.
P.S : I don't want Jquery as my page has some restriction to use library files.

Try this, assuming only one errormsg div -
Update
I've added a fiddle here. Plus, there was a typo - corrected
<div class="errormsg" style="display: none;">Username is empty</div>
<input type=textbox id="userid" onchange="validate()" />
function validate(){
var userId = document.getElementById('userId'),
errorMsg = document.getElementsByClassName('errormsg').item();
if (userId.value === ''){
errorMsg.style.display = 'block'
} else {
errorMsg.style.display = 'none';
}
}

<div class="errormsg">Username is empty</div>
<input type='textbox' id="userid" onkeyup="javascript:call(this);" />
function getElementsByClassName(className) {
// For IE
if (document.all) {
var allElements = document.all;
} else {
var allElements = document.getElementsByTagName("*");
}
var foundElements = [];
for (var i = 0, ii = allElements.length; i < ii; i++) {
if (allElements[i].className == className) {
foundElements[foundElements.length] = allElements[i];
}
}
return foundElements;
}
function call(control)
{
var userid=document.getElementById('userid');
var errorMsg = getElementsByClassName('errormsg')[0];
if(userid.value == '')
{
errorMsg.style.display = "block";
}
else
{
errorMsg.style.display = "none";
}
}

Removed the JQuery and added the Javascript code as below:
<div class="errormsg">Username is empty</div>
<input type='textbox' id="userid" onkeyup="javascript:call(this);" />
function getElementsByClassName(className) {
// For IE
if (document.all) {
var allElements = document.all;
} else {
var allElements = document.getElementsByTagName("*");
}
var foundElements = [];
for (var i = 0, ii = allElements.length; i < ii; i++) {
if (allElements[i].className == className) {
foundElements[foundElements.length] = allElements[i];
}
}
return foundElements;
}
function call(control)
{
var userid=document.getElementById('userid');
var errorMsg = getElementsByClassName('errormsg')[0];
if(userid.value == '')
{
errorMsg.style.display = "block";
}
else
{
errorMsg.style.display = "none";
}
}

Javascript in DotNetNuke 6.1.3

I am building a website in DNN, and I want to include Javascript in one of its HTML Modules.
I added the Javascript in footer/header (Settings > Advance Settings) but it didn't work. Then I tried adding the content by switching to basic editor and selecting RAW mode, but it's still not working.
Here is my Javascript. It is for tab browsing, to test whether Javascript is working or not I wrote a simple script in another HTML module, and it worked fine, but this script isn't running:
<script type="text/javascript">
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
var tabListItems = document.getElementById('tabs').childNodes;
for (var i = 0; i < tabListItems.length; i++) {
if (tabListItems[i].nodeName == "LI") {
var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
var id = getHash(tabLink.getAttribute('href'));
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById(id);
}
}
var i = 0;
for (var id in tabLinks) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() {
this.blur()
};
if (i == 0) tabLinks[id].className = 'selected';
i++;
}
var i = 0;
for (var id in contentDivs) {
if (i != 0) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash(this.getAttribute('href'));
for (var id in contentDivs) {
if (id == selectedId) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
return false;
}
function getFirstChildWithTagName(element, tagName) {
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
}
}
function getHash(url) {
var hashPos = url.lastIndexOf('#');
return url.substring(hashPos + 1);
}​
</script>

There shouldn't be any problem with adding JavaScript to the header/footer. When you say it didn't work, did you check the source of the page, or did the behavior just not work? Did you check for JavaScript errors in your browser's console?
So far as adding JavaScript via the Basic/Raw view of the rich text editor, DNN strips JavaScript from the text editor by default. You can turn that off via the HTML Editor Manager (under Host).

Show div based on if statement

I'm trying to use this code to hide or show a div based on the url param "direction" I can't get this to work and wonder if there is a better way. Sample url = http://domain.com?direction=south&season=summer - Thanks
<head>
<script type="text/javascript">
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
}else {
document.getElementById('south').style.display = 'none';
}
</script>
</head>
<body>
<div id="north">Some text</div>
<div id="south">Some text</div>
</body>

You're missing a $(document).ready (if you're using jQuery) or window.onload block -
$(document).ready(function() {
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
}else {
document.getElementById('south').style.display = 'none';
}
});
or without jQuery -
window.onload = function() {
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
}else {
document.getElementById('south').style.display = 'none';
}
}
It's possible that your code isn't working as the divs haven't been loaded in to the DOM when you're trying to show/hide them.
Example : http://jsfiddle.net/manseuk/RTrgN/1/

Maybe in the if/else statement you need to show and hide the other div so that the correct one is shown and the correct one is hidden in each condition?
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
document.getElementById('south').style.display = 'none';
}else {
document.getElementById('north').style.display = 'none';
document.getElementById('south').style.display = 'block';
}

For a pure javascript method you need to add change the window.onload even to run your code - this ensures the DOM elements are present to run your code :
http://jsfiddle.net/manseuk/RTrgN/2/
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function runMe() {
var myVal = getUrlVars()["direction"];
if (myVal == "north") {
document.getElementById('north').style.display = 'block';
} else {
document.getElementById('south').style.display = 'none';
};
}
window.onload = runMe; // run the code once the DOM is loaded

create a function, and assign it to the body's onload event. Also fix the styles from the if a bit.
<head>
<script type="text/javascript">
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function myOnLoad()
{
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
document.getElementById('south').style.display = 'none';
}else {
document.getElementById('north').style.display = 'none';
document.getElementById('south').style.display = 'block';
}
}
</script>
</head>
<body onload="myOnLoad()">
<div id="north">Some text</div>
<div id="south">Some text</div>
</body>

changing content of p element using innerHTML

I have the following script:
var before = document.getElementById('before');
if (switchElement.value == 'single'){
for (var i=0; i < before.length; i++) {
if (before[i].id == "before_label") {
before[i].innerHTML = 'Image';
break;
}
}
after.style.display = 'none';
}
and the HTML looks like:
<div id="before">
<p id="before_label"> Before Image: </p>
<input type="file" name="before" size="40">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000">
</div>
Was wondering why it didn't work and change the inner html to change?

To access the innerHTML of before_label, just access it directly:
document.getElementById('before_label').innerHTML = 'Image';

getElementById only returns one element. You need to acces the child objects via childNodes.
Try this:
var before = document.getElementById('before').childNodes;
if (switchElement.value == 'single'){
for (var i=0; i < before.length; i++) {
if (before[i].id == "before_label") {
before[i].innerHTML = 'Image';
break;
}
}
after.style.display = 'none';
}

Why the for loop? Just get the element by its id:
var before_label = document.getElementById('before_label');
if (switchElement.value == 'single') {
before_label.innerHTML = 'Image';
after.style.display = 'none';
}