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>
Related
I am developing a chrome extension that can copy the urls of all tabs in a browser. The problem is i can only trim one url in all the array. Is there a way i can output all the root domain in the popup?thanks in advance
example of the tabs url
youtube.com/asdwea/asdsa
google.com/asdwew
facebook.com/qwea/asd
the result for the popup should be
youtube.com
google.com
facebook.com
popup.html
<html>
<script src="popup.js"></script>
<body>
<div id="result"></div>
<div id="count"> all</div>
</body>
</html>
popup.js
chrome.windows.getAll({populate:true}, getAllOpenWindows);
function getAllOpenWindows(winData) {
var tabs = [];
for (var i in winData) {
if (winData[i].focused === true) {
var winTabs = winData[i].tabs;
var totTabs = winTabs.length;
for (var j=0; j<totTabs;j++) {
tabs.push(winTabs[j].url+ "</br>");
}
var domain = tabs[1].replace('http://','').replace('https://','').split(/[/?#]/)[0];
}
}
document.getElementById('count').innerHTML = tabs.length;
document.getElementById('result').innerHTML = domain;
}
function getAllOpenWindows(winData) {
var tabs = [];
for (var i in winData) {
if (winData[i].focused === true) {
var domainStr = "";
var winTabs = winData[i].tabs;
var totTabs = winTabs.length;
for (var j=0; j<totTabs;j++) {
var str = winTabs[j].url+ "</br>";
tabs.push(str);
domainStr += str;
}
domainStr = domainStr.replace('http://','').replace('https://','').split(/[/?#]/)[0];
}
}
document.getElementById('count').innerHTML = tabs.length;
document.getElementById('result').innerHTML = domainStr;
}
I think what you need is concat all strings, which is domainStr here.
As your question is not related to split function, I did not check whether .replace('http://','').replace('https://','').split(/[/?#]/)[0]; works.
I need to call different iframe once i click on one or more checkbox.
The idea is about getting different charts into one graph.
I tried this into my html file :
function control(){
var checkedValue = null;
var inputElements = document.getElementsByName('check_list[]');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue = inputElements[i].value;
break;
}
return checkedValue;
}
if checkedValue == 'TotalVoiceTrafficBH2'
{ <iframe src="http://localhost/xampp/www/interactive_php_mysql_charts/chart_trans2.html" width="700" height="500"/> }
}
if checkedValue == 'TotalVoiceTrafficBH1'
{ <iframe src="http://localhost/xampp/www/interactive_php_mysql_charts/chart_trans1.html" width="700" height="500"/> }
}
any help please ?
I need to superpose these iframes whilst my user click on 2 or more checkoboxes !
Bellow an example
function checkValue() {
var checkedValue = null;
var inputElements = document.getElementsByName('check_list[]');
for (var i = 0; inputElements[i]; ++i) {
if (inputElements[i].checked) {
checkedValue = inputElements[i].value;
break;
}
return checkedValue;
}
}
var iframe = document.createElement('iframe');
switch(checkValue()) {
case 'TotalVoiceTrafficBH2':
iframe.src = 'http://localhost/xampp/www/interactive_php_mysql_charts/chart_trans2.html';
break;
case 'TotalVoiceTrafficBH1':
default:
iframe.src = 'http://localhost/xampp/www/interactive_php_mysql_charts/chart_trans1.html';
break;
}
document.body.appendChild(iframe);
I use such function to load data to WebView after loading page. Console tells what value of innerHTML is update but on WebView change don't show. In browser console everything is fine.
<script language="javascript" type="text/javascript">
function init_order() {
var elems = document.getElementById("body-id").getElementsByClassName("order_data");
if(arguments.length == elems.length){
console.log("Number of arguments is correct.");
}
else{
console.log("Incorrect number of arguments.");
console.log("Class Tag: "+elems.length);
console.log("Arguments: "+arguments.length);
}
for(i = 0; i < elems.length ; ++i){
var tag = elems[i];
var tagValue = elems[i].innerHTML;
if(tagValue.search("%#") != -1){
var replacedStr = tagValue.replace("%#",arguments[i]);
elems[i].innerHTML = replacedStr;
//console.log(arguments[i]);
console.log("value: "+elems[i].innerHTML);
}
}
// window.location.reload()
}
</script>
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).
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).