Random Change CSS file

[visual]

Hi !

I try to write a random changing css file script !
But i can't get it done ! Where is the mistake ?

___________________________________________________________

var files = new Array('../../CSS/00.css','../../CSS/01.css','../../CSS/02.css','../../CSS/03.css');

var choosefile = files[Math.floor(Math.random() * files.length)];

document.write('<'+'link rel=stylesheet type="text/css" href="'+choosefile+'">');

function load()
{
location.reload();
}
aktiv = window.setInterval("load()", 1000);

[agent002]

I don't see why the CSS doesn't load, unless you've got the path wrong. But you shouldn't use location.reload() to update the stylesheet, instead, consider something like this:
<link id="mss" rel="stylesheet" href="" type="text/css">
<script type="text/javascript">
//<![CDATA[

var files = [
'../../CSS/00.css',
'../../CSS/01.css',
'../../CSS/02.css',
'../../CSS/03.css'
];

function setStyleSheet(){
var choosefile = files[Math.floor(Math.random() * files.length)];
document.getElementById('mss').setAttribute('href', choosefile);
}

setStyleSheet();
window.onload = function(){
setInterval('setStyleSheet()', 10000);
}

//]]>
</script>

[¥åßßå]

Hi Agent002,

Is there an event that I can trap to see if the CSS is loaded (using your method) as I do something similar on a website that I'm coding and I need to trigger a js function on style changes ?

Sorry Visual, not hijacking your thread.

[agent002]

Hi ¥åßßå,
you could try using an onload event on the link tag - I'm not sure if it works though:
<link id="mss" rel="stylesheet" href="" type="text/css">
<script type="text/javascript">
//<![CDATA[

var files = [
'../../CSS/00.css',
'../../CSS/01.css',
'../../CSS/02.css',
'../../CSS/03.css'
];

function setStyleSheet(){
var choosefile = files[Math.floor(Math.random() * files.length)];
document.getElementById('mss').onload = function(){
setTimeout('setStyleSheet()', 10000);
}
document.getElementById('mss').setAttribute('href', choosefile);
}

window.onload = function(){
setStyleSheet();
}

//]]>
</script>

[¥åßßå]

Hi Agent002,

Sorry, I explained myself badly, my website has several themes, but, it requires a javascript function to be run every time the theme changes.

The only way that I have been able to achieve this so far is to replace & reload the page (the same as visual is doing).

However, if I could detect when the new style sheet is loaded (by using your method) then I could kickstart this function and could reduce my bandwidth by removing the need to reload the whole page.

Would it be better if I started a new thread for this ?

[visual]

Hi Jere !

Ahh ! The Script doesn't run !

I use it as you wrote it !
All paths are right !

The CSS file doesn't change !

I do get the massage:
"'document.get.ElementById[...)' is zero or no objekt"

//<![CDATA[

var files = [
'../../CSS/00.css',
'../../CSS/01.css',
'../../CSS/02.css',
'../../CSS/03.css'
];

function setStyleSheet(){
var choosefile = files[Math.floor(Math.random() * files.length)];
document.getElementById('mss').setAttribute('href', choosefile);
}

setStyleSheet();
window.onload = function(){
setInterval('setStyleSheet()', 100);
}

//]]>

[¥åßßå]

You need to change your style sheet link to :-
<link id="mss" rel="stylesheet" href="" type="text/css">

as well, otherwise the script can't find it

[visual]

Hi !

I add this to the HTML code !

<link id="mss" rel="stylesheet" href="" type="text/css">

But it doesn't run !

[¥åßßå]

When you say "it doesn't run", do you mean you still get an error (in which case is it the same error)

Sorry Agent002, I actually missed your amendment to the code :dunce2:, mainly this :-document.getElementById('mss').onload = function(){
setTimeout('setStyleSheet()', 10000);

I'll give it a try and let you know.



*edit*

Nope, it didn't work.

So much for the easy way!

[visual]

Hi !

I do get the Massage :

"'document.get.ElementById[...)' is zero or no objekt"

But i think Jere better give me an answer !
He was the one who wrote the script, ok !
Thank you very much !
________________________________________________________

Hi Jere !

The script doesn't run !
Can you take a look on the script please ?

Where is the mistake ?

[ElectricSheep]

Check your code. The error is telling you you have put an extra dot in by mistake.
It should be getElementById() not get.ElementById(). Also looking at the error message you seem to have used a square bracket not a round one.

HTH

[visual]

Hi !

This is the code, which Jere wrote:
_______________________________________________________

//<![CDATA[

var files = [
'../../CSS/00.css',
'../../CSS/01.css',
'../../CSS/02.css',
'../../CSS/03.css'
];

function setStyleSheet(){
var choosefile = files[Math.floor(Math.random() * files.length)];
document.getElementById('MSS').setAttribute('href','choosefile');
}

setStyleSheet();
window.onload = function(){
setInterval('setStyleSheet()',1000);
}

//]]>

_______________________________________________________

But nothing happend, i also use this in my HTML file:
<link id="CSS" rel=stylesheet type="text/css" href="../../CSS/00.css">

_______________________________________________________

So, i don't know why it doesn't run, Jere is a very good programer, he is a Guru.

[ElectricSheep]

Hi.
Your id value for the <link> is different to the value being referenced by getElementById().
One says CSS the other MSS. They need to be the same.

HTH

[visual]

Hi !

Yes i know, but it is just here in this forum like that.

I do make a little change to the script and now it runs.

But after i've uploaded it to my server, the script doesn't run ! On my computer it runs but not on my homepage ! Why ?

Can you that a look on it ?
www.visualvibes.net

I use the script in my gallery, look in the menu to your rightside and click on gallery, the 2nd page and the other following pages.
__________________________________________________________

Here is the script i've used:

var files = new Array (
'../../CSS/50.css',
'../../CSS/51.css',
'../../CSS/52.css',
'../../CSS/53.css'
);

function setStyleSheet(choosefile){
var choosefile = files[Math.floor(Math.random() * files.length)];
document.getElementById('CSS').href=choosefile;
}


window.onload = setInterval('setStyleSheet()', 500);
__________________________________________________________
HTML code:

<link id="CSS" rel=stylesheet type="text/css" href="../../CSS/50.css">
________________________________________________________

Here is a example for the CSS file:
body {

scrollbar-DarkShadow-Color:999900;
scrollbar-Track-Color:C52C8E;
scrollbar-Face-Color:white;
scrollbar-Shadow-Color:gold;
scrollbar-Highlight-Color:white;
scrollbar-3dLight-Color:gold;
scrollbar-Arrow-Color:gold;

background-image:url(../JPG/gallery- index03bgd.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#CCCCCC;
}

#IMG01 {

position: absolute;
top: 63px;
left: 25px;
width: 74px;
height: 56px;

z-index:5;
}

#BOX01 {

position: absolute;
top: 57px;
left: 20px;
width: 84px;
height: 66px;

border:solid 1px #FFFFFF;
background: invisible;

visibility: visible;
/* hidden; visible; */

z-index: 20;
}

[visual]

Hi Jere !

Can you take a look on this !

[visual]

Hi Jere !

Can you please take a look a it ?

I do make a little change to the script and now it runs.

But after i've uploaded it to the server, the script doesn't run ! On my computer it runs but not on my homepage ! Why ?

I think i do need a delay function for that, so first all images have do be load. After that, the script should start.

How must a delay function look like ?
Is it posible, to let the script start after a few seconds ?

www.visualvibes.net

I use the script in my gallery, look in the menu to your rightside and click on gallery, the 2nd page and the other following pages.
__________________________________________________________

Here is the script i've used:

var files = new Array (
'../../CSS/50.css',
'../../CSS/51.css',
'../../CSS/52.css',
'../../CSS/53.css'
);

function setStyleSheet(choosefile){
var choosefile = files[Math.floor(Math.random() * files.length)];
document.getElementById('CSS').href=choosefile;
}

setInterval('setStyleSheet()', 500);
__________________________________________________________
HTML code:

<link id="CSS" rel=stylesheet type="text/css" href="../../CSS/50.css">
________________________________________________________

Here is a example for the CSS file:
body {

scrollbar-DarkShadow-Color:999900;
scrollbar-Track-Color:C52C8E;
scrollbar-Face-Color:white;
scrollbar-Shadow-Color:gold;
scrollbar-Highlight-Color:white;
scrollbar-3dLight-Color:gold;
scrollbar-Arrow-Color:gold;

background-image:url(../JPG/gallery- index03bgd.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#CCCCCC;
}

#IMG01 {

position: absolute;
top: 63px;
left: 25px;
width: 74px;
height: 56px;

z-index:5;
}

#BOX01 {

position: absolute;
top: 57px;
left: 20px;
width: 84px;
height: 66px;

border:solid 1px #FFFFFF;
background: invisible;

visibility: visible;
/* hidden; visible; */

z-index: 20;
}

[agent002]

Hi Visual, sorry about the delay, I was in northern Karelia for almost a week. Well, there are some issues with your site. First off, I can't get there with Opera - the popup link (the image saying "here") is not clickable. And when I'm on your site, in IE, I need to view it in a popup window which may seem cool to you but frustrates me because there is no toolbar, which makes it very hard to navigate. There are no mouse gestures in IE either so I can't use them. The main page in the popup was very confusing, I had no idea what to do because there was no text anywhere. I finally figured out to click the thing in the right frame which gave me two links... I clicked the gallery link and I got a page with no content in it. There were no links on that page (unless I am supposed to find a 1x1 transparent image that I need to click). So, the navigation is very poor, and I am not able to find the page with the problems. Because I can't find it, I can't see the problem myself and I can only make guesses. Are both the JavaScript and the <link> element in the header? And is the JavaScript *after* the <link> element? I need to ask because you tend to post code without mentioning that you have altered it, you had previously changed "mss" to "MSS" but IDs are case sensitive.

[visual]

Hi Jere !

The JavaScript runs !

Problem to view my Site ?
I use IE, and don't have a problem to view this Page !

Northern Karelia ? Where is it ?

[agent002]

So are you saying that the script works now, also when you've uploaded it to the server? Or is there still a problem? I was saying that while your site looks cool, it's functionality is very poor. That is only my opinion of course, but maybe you should ask for a review in the Website Review forum.

Northern Karelia is in the Eastern part of Finland, there's also a Russian part that used to belong to Finland... link (http://www.kolumbus.fi/rastas/engcarel.html)

[visual]

Hi Jere !

Ahh ! Now i know Northern Karelia !
But there are no pictures from Karelia !

The functionality of the page is poor ?
Tell me why ? You have wrote a script
( you "have" or you "did" wrote ? )

To your right side, you see the menu and serveral menu points to select. It's not a Site to view just in a min.,
it's my online Gallery .
__________________________________________________________

The reason, why i use IE, is that i got some text in my home page, which is from a file.

And i think, that you told me, that it is a IE spezific.
So, i don't know a other solution, which allows a Opera user to read the text from a file. Do you know what i mean ?

But at this point, i wanna say thank you one more time, for you feedback. Thank you very much.

visual
__________________________________________________________

<object id="TEXT" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="txt/info-EN.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value="²">
<param name="TextQualifier" value="~">
</object>

<form style="position:absolute; top:735px; left:45px; zindex:2">
<table id="SHOW_TEXT" datasrc="#TEXT" datapagesize=2 width=480px>
<colgroup>
<col width=50>
<col>
<tr>

</tr><tr>
<td id="TEXT01" valign=top><b></b></td>

<td id="TEXT01" valign=top align=justify>
<font face="Arial,Avantgarde,Helvetica,Geneva,Swiss,SunSans-Regular" size="2pt">
<span id="theForm" datafld="TEXT"></span></font></td>
</tr></table>
</form>

[agent002]

Because you ask... "you wrote" (past tense, "schrieb" in German), or "you have written" (perfect tense, "geschrieben haben").

Yes, that object is IE specific. I realize now that I probably saw the quite so empty page because I have ActiveX disabled. Your site seems to be hosted an an own domain so your webhost probably supports Perl, PHP, and/or maybe other server side languages, if you use one of those to read a file and display the data, it would be very cross browser compatible - I would recommend that...

[visual]

Hi Jere !

You speak german ?

I don't like Netscape really, in that way, cause you can't change the colour of the scrollbars.

And the scrollbars do have a other width.

The most CSS commands are not suported.

[agent002]

Nur ein bißchen...

I don't like Netscape really, in that way, cause you can't change the colour of the scrollbars.
Scrollbar color changing is IE only code (that is nowadays also supported by Opera if it is enabled in the preferences), the W3C has never defined that code, it's not valid, and has never been. I don't like sites that change the scrollbar color; the scrollbar belongs to me, not the site!

And the scrollbars do have a other width.
It depends on a lot of factors. The browser (or actually the skin that it uses), the OS, and its configuration - you can change the scrollbar width in Windows's control panel.

The most CSS commands are not suported.
Not true. Rather the opposite. If there's something in your CSS that only works in IE, there's either something wrong with the code, or it is non-standard code (such as "filter" or "behavior").

[visual]

Hi Jere !

________________________________________________________

I don't like sites that change the scrollbar color; the scrollbar belongs to me, not the site!
________________________________________________________

So, you don't like my Site ! The style of my Site would be riped, if i can't take controll to the style of the sacrollbars.

I've treid to use some CSS 2.0 style sheet commands, but they don't run ! I'm using IE 6, they must run, right ?

How can i get CSS 2.0 support, for my browser ?
ANd how can i be sure, that the users Browser can understand CSS 2.0 ?

[agent002]

Well, no, colored scrollbars are really just a partial reason for me not to like a site... and there you see, you've tried some CSS2, and it doesn't work - in IE. That's what stresses many web designers that want to stick to standards; IE is retarded and doesn't support properties like min-width, max-width, the :before and :after pseudo classes, the :hover pseudo class on anything other than anchors, child selectors, adjacent selectors, attribute selectors, some display properties, and much more. It also has lots of bugs.