JavaScript - Stylesheet Switcher In Webkit 534
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. Similar TutorialsIn the development of our website, we are experiencing issues with a few images when the browser is not at 100% zoom (shake, odd spacing, irregular) on webkit browsers. These images are animated using jquery. We have heard this could be due to the functionalities of webkit browsers. I was curious if anyone else has experienced a similar problem, and if so, identified any work around solutions.
So I've been making a game using html canvas. Here is a link to the game. (Move around with wasd, rotate turret with left and right arrows) http://db.tt/ei3LlR The problem is that the shadow flickers when it is rotated. This does not happen in firefox. The shadow is not an image, but another canvas element, generated dynamically from the image of the tank. So the problem seems to be with webkit drawing rotated canvas elements inside another. Could this possibly be the reason behind this, or is it more likely to be a problem on my end? 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); 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 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.
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> I have been using some javascript to select stylesheets (dependent upon window sizes) without problems, until IE8. I have stripped the code down to the following which seems to be where it fails in IE8. Code: <link rel="stylesheet" type="text/css" href="../../css-home.css" title="default" /> <link rel="stylesheet" type="text/css" href="../../css-thin.css" title="thin" /> <link rel="stylesheet" type="text/css" href="../../css-medium.css" title="medium" /> <link rel="stylesheet" type="text/css" href="../../css-large.css" title="large" /> <link rel="stylesheet" type="text/css" href="../../css-home.css" title="normal" /> Code: <script type="text/javascript"> <!-- function changeStylesheet(description){ var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++){ if(a.getAttribute("title") == description){a.disabled = false;} // if the title of the css file is the same as the description, don't disable it else if(a.getAttribute("title") != "default"){a.disabled = true;} // otherwise if the title of the css file is not default, disable it } } function selectLarge(){ changeStylesheet("large"); } selectLarge(); // --> </script> The “normal” stylesheet is the same as “default”. Without this older versions of IE go straight to “large” (without javascript). For these settings, all browsers display the default (or normal?) stylesheet without the script. When the script is run Firefox, Opera and older versions of IE will use the “default” stylesheet combined with the “large” stylesheet. IE8 uses only the “default” and ignores “large”. It doesn’t appear to matter where in the page the script is run. Any suggestions appreciated (it has never worked in Safari, Chrome and older versions of Opera if that helps!). I have the following script on my page: <![if !IE]> <div id='logowrapper'> <span class='siteLogo'><img src='logo2.png' align=abstop /></span> <span class='findUs'><img src='fLogo.png' border=0 title='Follow us on Facebook' align=abstop /><span class='topdvr'><img src='top_nav_dvr.png' alt=' - ' /></span><a href='www.twitter.com/' rel="nofollow" target='_blank'><img border=0 title='Follow us on Twitter' src='tLogo.png' align=abstop /></a></span> </div> <![endif]> <!--[if IE]> ***** APPLY SAME DIV SO IE RECOGNIZES SAME WAY AS OTHER BROWSER <![endif]--> And i use the following CSS to style the NOT IE browser above: #logowrapper{ margin:15px auto; padding:0px 22px 0px 75px; width:1049px; } .siteLogo { width:45%; } .findUs { padding: 0px 0px 0px 400px; width:45%; } +++++++++++++++++++++++++++ Now my question is how do I achieve the same effect when the user in Internet Explorer browser, either thru DIV or TABLE style? Thank you I have two user agent strings: Code: Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5 The first targets iOS5 and the second targets iOS4. Is it possible to load a custom stylesheet for the first user agent string, then a different one for the later user agent string? |