Learn VBA & Macros in 1 Week!

JavaScript - Style Sheet Switcher With One Link

Full Excel VBA Course - Beginner to Expert

Style Sheet Switcher With One Link	View Content

Is it possible to do something like this:
On a site there is a link that says "Darken Page". Upon clicking the link, the background color turns black. The link then changes to "Brighten things up"

So just a style sheet switcher, but with one link and changes
Thanks for any imput on this

Full Excel VBA Course - Beginner to Expert

Style Switcher Script Help

Similar Tutorials

View Content

Hi,

I've tried everything I can think of and can't get this script sorted out. So here I am :-)

I have this script attached on my website now. I am working on a beta version and I need to have this script so that it doesn't affect the cookie for the live version.

I've renamed everything I can see that can be and they each still affect each other.

Any ideas?

Thanks in advance.

Kind regards,

jo

Code:

function setActiveStyleSheet2(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet2() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet2() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie2(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie2(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie2("style");
  var title = cookie ? cookie : getPreferredStyleSheet2();
  setActiveStyleSheet2(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet2();
  createCookie2("style", title, 365);
}

var cookie = readCookie2("style");
var title = cookie ? cookie : getPreferredStyleSheet2();
setActiveStyleSheet2(title);

Applying A Style Sheet To An Xml Document

Similar Tutorials

View Content

Could you please help.

I came up with javascript functions that would apply a style sheet to an xml document during the runtime but i get the following error:

Automation server cannot create object.

Below is the code (javascript):

<html>
<head>
<title>SORT</title>
<head>
<body bgcolor="#FFFFFF">
<form name="VIEW" method="post" action>
<p>
<input type="text">
</p>
<p>
<input type="radio" name="optAscending" value="radiobutton" onClick="javascript:displayAscending();">Ascending
</p>
<p>
<input type="radio" name="optDescending" value="radiobutton" onClick="javascript:displayDescending();">Descending
<p>
<input type="radio" name="optReset" value="radiobutton" onClick="javascript:displayReset();">Reset
</p>
</form>
</body>

<script language="javascript">

function displayAscending()
{
document.VIEW.optDescending.checked=false;
document.VIEW.optReset.checked=false;
var xsltobj = new ActiveXObject("Msxml2.XSLTemplate.4.0");
var xsldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");
var xslprocobj;
xsldocobj.async = false;
xsldocobj.load("EMP.xsl");
xsltobj.stylesheet = xsldocobj;
var xmldocobj = new ActiveXObject("Msxml2.FreeThreadDOMDocument.4.0");
xmldocobj.async = false;
xmldocobj.load("EMP.xml");
xslprocobj = xslt.createProcessor();
xslprocobj.input = xmldocobj;
xslprocobj.Transform();
//arlet(xslProc.output);
parent.FIRST.document.write(xslProc.output);
}

function displayDescending()
{
document.VIEW.optAscending.checked=false;
document.VIEW.optReset.checked=false;
var xsltobj = new ActiveXObject("Msxml2.XSLTemplate.4.0");
var xsldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");
var xslprocobj;
xsldocobj.async = false;
xsldocobj.load("EMP.xsl");
var xmldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");
xmldocobj.async = true;
xmldocobj.load("EMP.xml");
xsltobj.stylesheet = xsldocobj;
xslprocobj = xslt.createProcessor();
xslprocobj.input = xmldocobj;
xslprocobj.Transform();
//arlet(xslProc.output);
parent.FIRST.document.write(xslProc.output);
}

function displayReset()
{
parent.First.document.location="first.htm";
document.VIEW.optAscending.checked=false;
document.VIEW.optDescending.checked=false;
}
</script>
</html>

And a style sheet that would be applied to an xml document

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="blue">
<tr>
<th>ID</th>
<th>NAME</th>
<th>DESIGNATION</th>
<th>ADDRESS</th>
<th>DOB</th>
<th>DEPARTMENTS</th>
</tr>
<xsl:for-each select="EMPDETAILS/EMPLOYEE">
<tr>
<td><xsl:value-of select="ID"/></td>
<td><xsl:value-of select="NAME"/></td>
<td><xsl:value-of select="DESIGNATION"/></td>
<td>
<xsl:value-of select="ADDRESS/Street"/>
<xsl:value-of select="ADDRESS/Apartment"/>
<xsl:value-of select="ADDRESS/City"/>
<xsl:value-of select="ADDRESS/State"/>
<xsl:value-of select="ADDRESS/Zipcode"/>
</td>
<td><xsl:value-of select="DOB"/></td>
<td><xsl:value-of select="DEPARTMENT"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

How To Link (input'range') To Css Style

Similar Tutorials

View Content

Hi,

I am trying to link the <input type="range" min="450" max="800" value="500" /> to a CSS style for an AP box so when you move the slider
it then changes the Css style (top:--px). allowing the Ap box to move with the slider.

(important to work in Chrome)

Here is the code:
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>

<div id="apDiv1"><p>have an image in here. Need to make this box move up and down with the slider.</p></div>
<input type="range" min="450" max="800" value="500" />

</body>
</html>
[CODE]

I have tried a number of way but can't get it, I am sure it is simple.

Stylesheet Switcher In Webkit 534

Similar Tutorials

View Content

I have a stylesheet switcher which works fine in all mainstream browsers until Safari 5.1 and possibly a past version of Chrome. The source of the problem appears to be in WebKit version 534. Other designers have experienced similar problems:
https://discussions.apple.com/thread...art=0&tstart=0

This version of WebKit appears not to action:
Code:

 a.disabled  = false

in the following script.

Code:

function changeLayout(description){
   var i, a;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
	   if(a.getAttribute("title") == description){a.disabled = false;}
	   else if(a.getAttribute("title") != "default"){a.disabled = true;}
   }
}

(or perhaps it may be the case that it will only allow one active stylesheet, the default?)

I have alternative code I can deliver to switch the stylesheet but it is more onerous and I only want to run it if the usual method would fail.

Is there a way I could test if the browser is respecting "a.disabled = false" (or "true" for that matter)
and then deliver the alternative code if not?

OR is there a reliable way to test for WebKit version 534?

Thanks in advance.

Simple Image Switcher - I Broke It!

Similar Tutorials

View Content

I have a WP theme that before I started tweaking it had an image switcher on the home page. When you click any of the 4 thumbnails under the main header, the image on the right switches to the hi-res version of the thumbnail but now it's broken.

I've re-uploaded Wordpress core, and re-uploaded the theme and verified all files exist.

Can anyone PLEASE look at http://cbclivehelp.com and tell me where I'm goofing up. I know it's an easy fix, but I'm not seeing it and I've been at it for 3 hours.

Image Slider And Category Switcher On One Page?

Similar Tutorials

View Content

Does anyone know the code/script that is used for the image slider and the category switcher (where it says Our Games) as seen on http://en.popmog.com/games? I have no idea how to create something similar on my own site.

Video Switcher Elementbyid "null Or Not An Object"?

Similar Tutorials

View Content

Below are the full Javascript and HTML to detect a browser and either display HTML5 or Flash video. However, the script is returning an error, 'document.getElementById(...)' is null or not an object. Any suggestions?

Code:

var deviceAgent = navigator.userAgent.toLowerCase();
$brwzr = deviceAgent.match(/(chrome|firefox|safari|msie 9.0)/);


if ($brwzr) {
	document.getElementById("video_5").setAttribute("class", "on");
} 
else {
	document.getElementById("video_F").setAttribute("class", "on");
}

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
		<title>Video Switch</title>
<script language="JavaScript" src="index/js/detect.js"></script>

<style>
<!--
.off {
	display: none;	
}

.on {
	display: inline;	
}
-->
</style>

</head>
<body>

<div id="video_5" class="off">HTML5!</div>
<div id="video_F" class="off">Flash!</div>

</body>
</html>

Getting Element Style Outside The Style Attribute

Similar Tutorials

View Content

if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them?
eg
Code:

<html>
<head>
	<title>expandable text area</title>
	<style type="text/css">
		#expandable{
			height: 100px;
		}
	</style>
	
</head>
<body>
<form>
	<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
	document.getElementById('expandable').addEventListener('click',function(){
		
		if(!this.style.height){
			this.style.height = this.scrollHeight+'px';
		}
		alert(this.style.height);
	}, true);
</script>
</html>

In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element

Creating A Result Sheet Using Javascript

Similar Tutorials

View Content

I run a website for a skittle league and am looking to create a form to allow teams to sumbit results on line.

I'm not an expert on Javascript, the code I've created so far allows the user to enter the player name and score for one team and calcutate the total. However, I'm having problems duplicating this for a second team, and would like to remove the Get Total button (i.e. Auto Calculate total).

Can anyone advise how I can do this.

The Code I have so far is

<html>
<head>
<script type="text/javascript" language="javascript">
function getTotalH1(oForm)
{
var field, i = 0, total = 0, els = oForm.elements;
var fieldnames = ['PSH1' , 'PSH2' , 'PSH3' , 'PSH4' , 'PSH5'];
for (i; i < fieldnames.length; ++i)
{
field = els[fieldnames[i]];
if (field.value != '' && isNaN(field.value))
{
alert('Please enter a valid number here.')
field.focus();
field.select();
return '';
}
else total += Number(field.value);
}
return ' ' + total;
}
</script>
</head>
<body>
<form>
<div align="center"><table border="0" cellpadding="2" cellspacing="0" width="305">
<col width="250" align="left">
<col width="42" align="center">
<tr>
<td><input type="text" name="PNH1" size="35"> </td>
<td><input id="PSH1" type="text" name="PSH1" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH2" size="35"></td>
<td><input id="PSH2" type="text" name="PSH2" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH3" size="35"></td>
<td><input id="PSH3" type="text" name="PSH3" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH4" size="35"></td>
<td><input id="PSH4" type="text" name="PSH4" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH5" size="35"></td>
<td><input id="PSH5" type="text" name="PSH5" value="" size="4"></td>
</tr>
<tr>
<td><input type="button" value="Get Total" onclick="total.value=getTotalH1(this.form)" />
<input type="reset" /></td>
<td><input id="total" type="text" name="totalh1" value="" readonly="readonly" size="4"></td>
</tr>
</table></div>
<br><br>
</form>
</body>
</html>

thanks

Creating Math Sheet Generator

Similar Tutorials

View Content

I have been asked by a friend to create a math sheet generator for their child, however i don't have a clue where to start with javascript.

Similar to this..
http://cemc2.math.uwaterloo.ca/mathf...sheetgen.shtml

It doesn't need to be advanced as that as all i'm looking for is how to create the sums.

If someone could help either by informing me where to start or even an online tutorial i would be extremely greatful!

Many thanks,
James

Simple Go Back External Js Sheet Not Working

Similar Tutorials

View Content

I'm new to JavaScript, I just finished some basic things, like getAttribute, setAttribute, getElementByID etc.

I understand that inline javascript isn't the best way to go, and all the JavaScript should go on an external JS file.

I also know that you should be able to downgrade gracefully, allowing people whose browser do not/blocked javascript to still use the site.

So I just want to do a simple go back function in an external javascript, however it's not exactly working.

This is my JS code:
Code:

window.load = preparePage();
function preparePage(){
	if (!document.getElementById()) return false;
	if (!document.getElementByTagName()) return false;
	var backDiv = document.getElementByID("back");
	links.onclick = function(){
		history.go(-1);
		return false;
	}
}

Here is my HTML code
Code:

		<div class="back">
			<a href="http://forum.thekks.net">Back</a>
		</div>

Replace Link Text And Change Link Behaviour

Similar Tutorials

View Content

I Cant Link Out Of Link Inside Rotating Tabs

Similar Tutorials

View Content

Embed A Return Link In A Link?

Similar Tutorials

View Content

I'm working on a technical document that has a glossary section. When I use a technical term, I link to its definition in the glossary then provide a return link to return the user to whence they came. But if I use that same term again, and if I want to link it to the glossary, I need to duplicate the glossary entry in order to provide a return link that returns them to the right place. Is there some way I could link them to the glossary and embed a unique return link in the link to the glossary?

How To Style The Last To <li>?

Similar Tutorials

View Content

Hi,

I am trying to remove the padding-bottom from the last 2 <li> in my page using JQuery, here is the code I have written so far:

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("#content .photos li").eq(-2).css("padding-bottom", "0px");
</script>

Dom In Style

Similar Tutorials

View Content

hi internet!
I got a problem here, there are three 'onmouseover' event, in the first, I put the style in the inline,it works; but the others don't work when use css. how to get it work without inline style ?
Quote:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div{width: 100px; height: 30px;margin-bottom: 20px;}
.blue{background:blue;}
.green{background:green;}

</style>
</head>
<script type="text/javascript" >
function tdcc(tdcolor){
document.getElementById("x").style.color=tdcolor.style.backgroundColor;

}
</script>
</head>

<body>
<div style="background:red;" onmouseover="tdcc(this)"></div>
<div class="blue" onmouseover="tdcc(this)"></div>
<div class="green" onmouseover="tdcc(this)"></div>
<br /><br />
<textarea id="x">sdfsdgsdfsdfsdsdfdsfsdfsdf</textarea>

</body>
</html>

Alert With Style ?

Similar Tutorials

View Content

May I put some style to an alert box ? for example .

<html>
<head>

<style>
#box { font-style: strong
}
</style>

<script lenguaje="javascript">

var age;

age = prompt("Type age : ", "");

if (edad<18) { <div id=box alert("Underage, get out !")>

</div>

} else { alert("You are Welcome, surf it it");

}

</script>
</head>
</html>

Thanks

Does Anyone Know What Style Of Jquery This Is?

Similar Tutorials

View Content

Hi all,

On this page http://piximory.com/templates/locus/dark/bg2.html if you click the portfolio link in main nav you are presented with the various thumbnail images for the projects, if you select a category the thumbnails organise themselves using jquery, does anyone know what type of jquery style this is?

Thanks in advance!

Kyle

If Src Changes The Style Must Change To

Similar Tutorials

View Content

Hi im a newbie to java so please don't laugh. And apologies in advance for my English.

When i open my page the src of the iframe is home.html. Home.html is empty and its in the way of the interface of my .swf file. My swf triggers the iframe to change into 50 different URL. So at the beginning the iframe should be gone. But whenever the src changes it should come back. I tried it by changing the height of the iframe. But nothing changes.

here is a preview http://boyswithbeards.net/xrc/pres/

I have something like this.

<iframe name="MoinkOriginal" id="MoinkOriginal" src="home.html" frameborder="0" scrolling="auto"></iframe>

<script type = "text/javascript">
var iframe = document.getElementById('MoinkOriginal');

if (src='home.html') {

var iframeElement = parent.document.getElementById('MoinkOriginal');
iframeElement.style.height = "0px"; // or use px
iframeElement.style.width = "500px"; // or use px
iframeElement.style.marginHeight = "-563px"; // or use px
iframeElement.style.marginLeft = "750px"; // or use px

}

else {

var iframeElement = parent.document.getElementById('MoinkOriginal');
iframeElement.style.height = "300px";
iframeElement.style.width = "500px";
iframeElement.style.marginHeight = "-563px"; // or use px
iframeElement.style.marginLeft = "750px"; // or use px
}

</script>

Thank you for helping me. Im stuck on this for days.

Javascript With Style

Similar Tutorials

View Content

hello,

I need some help. I created a table that has some drop down boxes and based on the user selection it will show the text on the bottom,

the plain drop down box has (nomal/bold/italic/bold-italic)
the large drop down box has (large/medium/small)

can someone please guide me or provide me a little demo on how to get this working?>

thanks