Jump to content

IE problem

DeanWhitehouse

By DeanWhitehouse
in Javascript Help

 Share

Recommended Posts

DeanWhitehouse Advanced Member

DeanWhitehouse

Posted
Posted

I have made a JS function to change the style sheet of my page.

<link rel="alternate stylesheet" media="screen" href="classic.css">
<link rel="alternate stylesheet" media="screen" href="original.css">
<link rel="alternate stylesheet" media="screen" href="dark.css">
<link rel="alternate stylesheet" media="screen" href="light.css">
<link rel="alternate stylesheet" media="screen" href="modern.css">
<!--
function preview()
{
var theme =document.reg.theme.value;
document.getElementById("style").href = theme;
}
-->
<link rel="stylesheet" id="style" media="screen" href="original.css">

But in internet explorer it only changes part of the page until i either open a new window or tab.

Is this to do with my js code

Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

I have made a JS function to change the style sheet of my page.

<link rel="alternate stylesheet" media="screen" href="classic.css">
<link rel="alternate stylesheet" media="screen" href="original.css">
<link rel="alternate stylesheet" media="screen" href="dark.css">
<link rel="alternate stylesheet" media="screen" href="light.css">
<link rel="alternate stylesheet" media="screen" href="modern.css">
<!--
function preview()
{
var theme =document.reg.theme.value;
document.getElementById("style").href = theme;
}
-->
<link rel="stylesheet" id="style" media="screen" href="original.css">

But in internet explorer it only changes part of the page until i either open a new window or tab.

Is this to do with my js code

 

What is "document.reg.theme", and where is it defined?  How is preview() being called?  It's possibly a matter of just waiting for the DOM to load, but it's hard to tell just by this vague snippet of code. 

 

Also, JavaScript is supposed to be inserted as so:

<script type="text/javascript">
   //JS CODE
</script>

 

Using HTML comments isn't necessary, unless you're intentionally scripting for older browsers.  All modern browsers understand JavaScript.

Link to comment
Share on other sites
DeanWhitehouse Advanced Member

DeanWhitehouse

Posted
  • Author
Posted

Sorry the code posted are just snippets, the js is in the script tag's and there is a form that calls the function on change.

 

It works fine in safari and ff , the theme changes instantly, but in IE it only changes a part of the page, this part has div tags around it, until i open a new tab then the rest of the page is changed.

Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

It works fine in safari and ff , the theme changes instantly, but in IE it only changes a part of the page, this part has div tags around it, until i open a new tab then the rest of the page is changed.

 

Mind showing the relevant code?  It's impossible to suggest a fix based on one function definition and a host of link tags.

Link to comment
Share on other sites
DeanWhitehouse Advanced Member

DeanWhitehouse

Posted
  • Author
Posted

Ok, this is the whole code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="alternate stylesheet" media="screen" href="classic.css">
<link rel="alternate stylesheet" media="screen" href="original.css">
<link rel="alternate stylesheet" media="screen" href="dark.css">
<link rel="alternate stylesheet" media="screen" href="light.css">
<link rel="alternate stylesheet" media="screen" href="modern.css">
<script type="text/javascript">
<!--
function preview()
{
var browser=navigator.appName;
if(browser =="Microsoft Internet Explorer")
{
} 
else
{
var theme =document.reg.theme.value;
document.getElementById("style").href = theme;
}
}
-->
</script>
<link rel="stylesheet" id="style" media="screen" href="original.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="expires" content="0">
<title>Mail App - Registration</title>

</head>
<body>
<div id="main">
<h1 align="center">Registration</h1>
<p id="title">Register Here With Your Email address, then you can send emails to multiple addresses from this site.</p>
<form id="reg" name="reg" action="" method="post">
Name:<input id="name" type="text" name="name" size="40"><br>
Username:<input id="uname" type="text" name="username" size="40"><br>
Password: <input id="pword" type="password" name="password" size="40"><br>
Confirm<br> Password: <input id="cpword" type="password" name="confirmp" size="40"><br>

Email: <input id="email" type="text" name="email" size="40"><br>
Confirm Email: <input id="cemail" type="text" name="confirme" size="40"><br>
Theme: 
<select id="theme" name="theme" onChange="preview()">
<option value="original.css">Original</option>
<option value="classic.css">Classic</option>
<option value="dark.css">Dark</option>
<option value="light.css">Light</option>
<option value="modern.css">Modern</option>
</select><br>

<p id="tc">To register you need to agree to our <a href="javascript:void(0)" onClick="tc()">terms and conditions</a>:<input id="tc" type="checkbox" name="agree" size="40"></p><br>
<input id="sub" type="submit" value="Submit" name="reg">
</form>
</div>
</body>
</html>

 

I added the browser detection, just to disable it looking wrong in IE.

Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

I ran into a strange DOM-loading issue with my tests. I had the following code:

<html>
<head>
  <title>CSS Selector Test</title>
  <script type="text/javascript">
     window.onload = function()
     {
        var mySwitch = document.forms["myForm"].elements["mySwitch"];
        mySwitch.onchange = function()
        {
           var styles = document.getElementById("styles");
           styles.href = mySwitch.value;
        }
     }
  </script>
  <link id="styles" rel="stylesheet" href="original.css">
</head>
<body>

<div>This is the thing we're going to change, among others</div>

<form name="myform" action="#" method="post">
  <select name="mySwitch">
     <option value="original.css">Original</option>
     <option value="black.css">Black</option>
     <option value="bold.css">Bold</option>
  </select>
</form>

</body>
</html>

 

But it kept telling me that document.forms["myForm"].elements["mySwitch"] was undefined, despite using window.onload to wait for the DOM to load.

 

I did get it to work using jQuery:

<html>
<head>
  <title>CSS Selector Test</title>
  <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  <script type="text/javascript">
     $(document).ready(function()
     {
        $("#mySwitch").change(function()
        {
           $("#styles").attr("href", $(this).attr("value"));
        });
     });
  </script>
  <link id="styles" rel="stylesheet" href="original.css">
</head>
<body>

<div>This is the thing we're going to change, among others</div>

<form name="myform" action="#" method="post">
  <select name="mySwitch" id="mySwitch">
     <option value="original.css">Original</option>
     <option value="black.css">Black</option>
     <option value="bold.css">Bold</option>
  </select>
</form>

</body>
</html>

 

But since it's not pure JavaScript, it may not be the solution you're looking for. Hopefully someone like Aaron (rhodesa) or Fenway will chime in, to both give you the solution to your problem, and to tell me why my window.onload attempt didn't work.

 

EDIT: Just to be clear, the jQuery solution returns an almost-instantaneous css change in IE7 (as well as FF2).

Link to comment
Share on other sites
DeanWhitehouse Advanced Member

DeanWhitehouse

Posted
  • Author
Posted

tried this code , works ok in firefox, but not at all in IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<link rel="alternate stylesheet" media="screen" href="classic.css">
<link rel="alternate stylesheet" media="screen" href="original.css">
<link rel="alternate stylesheet" media="screen" href="dark.css">
<link rel="alternate stylesheet" media="screen" href="light.css">
<link rel="alternate stylesheet" media="screen" href="modern.css">
<script type="text/javascript">
function preview()
      {
         var mySwitch = document.forms["reg"].elements["theme"];
         mySwitch.onchange = function()
         {
            var styles = document.getElementById("styles");
            styles.href = mySwitch.value;
         }
      }
</script>
<link rel="stylesheet" id="styles" media="screen" href="original.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="expires" content="0">
<title>Mail App - Registration</title>
</head>

<body>
<div id="main">
<h1 align="center">Registration</h1>
<p id="title">Register Here With Your Email address, then you can send emails to multiple addresses from this site.</p>
<form id="reg" name="reg" action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
Name:<input id="name" type="text" name="name" size="40"><br>
Username:<input id="uname" type="text" name="username" size="40"><br>
Password: <input id="pword" type="password" name="password" size="40"><br>
Confirm<br> Password: <input id="cpword" type="password" name="confirmp" size="40"><br>
Email: <input id="email" type="text" name="email" size="40"><br>
Confirm Email: <input id="cemail" type="text" name="confirme" size="40"><br>
Theme: 
<select id="theme" name="theme" onChange="preview()">
<option value="original.css">Original</option>
<option value="classic.css">Classic</option>
<option value="dark.css">Dark</option>
<option value="light.css">Light</option>
<option value="modern.css">Modern</option>
</select><br>
<p id="tc">To register you need to agree to our <a href="javascript:void(0)" onClick="tc()">terms and conditions</a>:<input id="tc" type="checkbox" name="agree" size="40"></p><br>
<input id="sub" type="submit" value="Submit" name="reg">
</form>
</div>
</body>
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.