|
JavaScript - Style Switcher Script Help
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);
Similar TutorialsIs 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 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. 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. 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.
Hi , I have a an application which works fine on XP IE6, but the same application throws error " Java Script Error Style is null or not an object" on XP IE8 and Windows 7 . Please help me to resolve this issue. Please Tahnks in advance 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>
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 Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance I have a script that works in seamonkey(my html editor) but when I use it in IE8 it says errors happen. Here's the code (the first line is on line 7 of the html file): Code: <script type="text/javascript">
function enlarge(imageNum)
{
var numToString = "";
if(parseInt(imageNum) < 10){
numToString = "0" + imageNum;
}
else
{
numToString = imageNum + "";
}
window.open("images/LgScreenshot"+numToString+".jpg","Screenshot "+imageNum,"status=0,height=675,width=900,resizable=0");
}
</script>
And the errors: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB0.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.3; .NET CLR 3.0.30729) Timestamp: Wed, 10 Feb 2010 14:58:16 UTC Message: Object expected Line: 150 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html Message: Invalid argument. Line: 18 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html does any expert know how to pass parameters in the <script ..> tag? for instance; Code: <script type="text/javascript" src="script.js ?param1=val1¶m2=val2&etc "> in the javascript script.js, how would we read the params after the question mark? for example, google this; google shopping cart /v2_2/cart.js 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> 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>
I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani 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 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 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 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. Hey, I'm a beginner in javascript and I have a problem setting up a tag. I want to change the background color ONLY if it is #d0d0d0, so I made up these scripts: Code: <b class="nav1" id="nav1" onclick="highlightnav1()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 1</b>
<b class="nav2" id="nav2" onclick="highlightnav2()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 2</b>
<b class="nav3" id="nav3" onclick="highlightnav3()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 3</b>
<b class="nav4" id="nav4" onclick="highlightnav4()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 4</b>
<b class="nav5" id="nav5" onclick="highlightnav5()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 5</b>
Code: function overnavigation(obj){
if (obj.style.backgroundColor='#d0d0d0'){
obj.style.backgroundColor='#e0e0e0';
}
}
function outnavigation(obj){
if (obj.style.backgroundColor='#e0e0e0'){
obj.style.backgroundColor='#d0d0d0';
}
}
This doesn't work, and because I don't have mush experience I don't know how to fix it. Could anybody help me? ------------ Sorry for my bad english, I'm Dutch Hey, I am needing some help trying to remember what is the name of this type of javascript content expand script. It looks like this: It doesnt have to look like that but the same general example of expanding and contracting tabs with the arrow that switches when its open and closed. Thanks alot! Some links would be nice. Hi, on my site, I have added Style 1 and Style 2 in my menu at the top right http://www.thisisworthing.com/default.php# when I click on Theme 2, it doesn't work?! please help! I have this working on my other site: http://www.mypubspace.com what am i doing wrong?! |
|||||||