Help: All my styling is gone! I may have found the problem!

flyingdutchie

Instead of the inline-script and the in-line css, this is generated:

<script src="http://www.smugmug.com/include/js/user_flyingdutchie.js" type="text/javascript"></script>
<link href="http://flyingdutchie.smugmug.com/include/css/user_flyingdutchie.css" type="text/css" rel="stylesheet" />

E.g. i have <script> elements inside my 'JavaScript' cobranding. Same for CSS: I have <LINK> and @import elements there.
This will not work in *.js file and/or *.css files.

Smugmug, could you please not do that. Leave it as it was, putting inline javascript and inline css inside the HTML instead of moving it into external files. I would be very gratefull.
-- Anton.

flyingdutchie

Example:
The contents of my 'inline' javascript is this:

[font=Courier New]/* Begin inline script */
/* Stat Counter inline script */
var sc_project=999959; 
var sc_invisible=0; 
var sc_partition=7; 
var sc_security="20009ce68"; 
var sc_text=1; 
/* End */
[b][i]</script>[/b][/i]
[i][b]<script language="javascript" type="text/javascript" src="http://www.antonspaans.com/mysmugmug.js"[/i][/b][/font][font=Courier New][b][i]></script>[/b][/i]
[i][b]<!-- <script src="/include/js/keywordsuggest.js"></script> -->[/b][/i]
[i][b]<script language="javascript">[/i][/b]
/* End inline script */[/font]

The bold&italic elements won't work if they are moved inside a *.js file:
1. <script> and </script> is invalid javascript.
2. <!-- and --> is invalid as well.

Similar situation for my CSS.

-- Anton.

jfriend

Ahhh, the reported performance improvement for styles broke you

flyingdutchie wrote:

Instead of the inline-script and the in-line css, this is generated:

<script src="http://www.smugmug.com/include/js/user_flyingdutchie.js" type="text/javascript"></script>
<link href="http://flyingdutchie.smugmug.com/include/css/user_flyingdutchie.css" type="text/css" rel="stylesheet" />

E.g. i have <script> elements inside my 'JavaScript' cobranding. Same for CSS: I have <LINK> and @import elements there.
This will not work in *.js file and/or *.css files.

Smugmug, could you please not do that. Leave it as it was, putting inline javascript and inline css inside the HTML instead of moving it into external files. I would be very gratefull.
-- Anton.

OK, I see what's going on. This is related to the "performance improvements" for themes and styling. It looks like rather than putting all your styling inline on every page in your site, they've moved it to an included file so that browsers can cache it more effectively. That's a good thing, in general.

But...that does ruin some capabilities that used to be available (that's a bad thing).

Hmmm, I'll have to leave it to the experts to figure out whether there are work-arounds or whether smugmug should change something. I believe smugmug should be using included style sheets for user customizations so browsers can more efficiently cache this info and improve perceived site performance. But, I don't know what technical options there are available to let you continue to have the features you used to have while still gaining this efficiency.

flyingdutchie

jfriend wrote:

OK, I see what's going on. This is related to the "performance improvements" for themes and styling. It looks like rather than putting all your styling inline on every page in your site, they've moved it to an included file so that browsers can cache it more effectively. That's a good thing, in general.

But...that does ruin some capabilities that used to be available (that's a bad thing).

Hmmm, I'll have to leave it to the experts to figure out whether there are work-arounds or whether smugmug should change something. I believe smugmug should be using included style sheets for user customizations so browsers can more efficiently cache this info and improve perceived site performance. But, I don't know what technical options there are available to let you continue to have the features you used to have while still gaining this efficiency.

I put my CSS and JS files on a separate server for this efficiency.

I'd really like the old situation back! My CSS and JS is relying on it!
E.g my JS calls document.writeln("...") statements so that the browser loads browser-specific CSS. These are the contents of my co-branding CSS:

/* Begin inline style */
</style>
<link rel="SHORTCUT ICON" href="[url="http://www.antonspaans.com/vlag.ico"]http://www.antonspaans.com/vlag.ico[/url]" />
<LINK href="[url="http://www.antonspaans.com/jsdomenu/office_xp.css"]http://www.antonspaans.com/jsdomenu/office_xp.css[/url]" rel="stylesheet" type="text/css"/>
<LINK href="[url="http://www.antonspaans.com/mysmugmugWhite.css"]http://www.antonspaans.com/mysmugmugWhite.css[/url]" rel="stylesheet" type="text/css"/>
[b][i]<script language="javascript">[/i][/b]
[b][i]// must be called here to override mysmugmugWhite.css if necessary.[/i][/b]
[b][i]includeBrowserCSS();[/i][/b]
[b][i]</script>[/i][/b]
<style type="text/css">
#stylebar {
display: none;
}
/* For now... remove later! */
.smugmug .gallery_939815 #comment,
.smugmug_small .gallery_939815 #comment {
display: none;
}
/* End inline style */
 

Please, smugmug, change it back as it was before... I would be very gratefull.

{JT}

More than likely - we will not be going back to the old method. There are many reasons, but the biggest one is the time savings when people come to view your site. They will only have to load up js and css once, and that is it.

The other side benefit - is that your site will not have to rely on external js or css, which in some cases would slow down the site considerably or give security warnings in IE.

My suggestion: cut and paste your external source files. Your visitors will appreciate a faster site.

jfriend

Can you move it to the header area so it's still inline?

flyingdutchie wrote:

Example:
The contents of my 'inline' javascript is this:

 [font=Courier New]/* Begin inline script */
 /* Stat Counter inline script */
 var sc_project=953929; 
 var sc_invisible=0; 
 var sc_partition=7; 
 var sc_security="29ce6228"; 
 var sc_text=1; 
 /* End */
 [b][i]</script>[/i][/b]
 [i][b]<script language="javascript" type="text/javascript" src="http://www.antonspaans.com/mysmugmug.js"[/b][/i][/font][font=Courier New][b][i]></script>[/i][/b]
 [i][b]<!-- <script src="/include/js/keywordsuggest.js"></script> -->[/b][/i]
 [i][b]<script language="javascript">[/b][/i]
 /* End inline script */[/font]

The bold&italic elements won't work if they are moved inside a *.js file:
1. <script> and </script> is invalid javascript.
2. <!-- and --> is invalid as well.

Similar situation for my CSS.

-- Anton.

It looks like the header and footer contents are still inline in the page. Can you move this script stuff to the header area and out of your script area so smugmug will still inline it?

flyingdutchie

{JT} wrote:

More than likely - we will not be going back to the old method. There are many reasons, but the biggest one is the time savings when people come to view your site. They will only have to load up js and css once, and that is it.

The other side benefit - is that your site will not have to rely on external js or css, which in some cases would slow down the site considerably or give security warnings in IE.

My suggestion: cut and paste your external source files. Your visitors will appreciate a faster site.

Please, please, please,
I have to be able to call javascript inside my 'CSS' section (see my previous post)!
Please allow us users to host CSS and/or javascript files on other sites, if we want to. I'm not really willing to spend hours and hours to fix this.

{JT}

flyingdutchie wrote:

Please, smugmug, change it back as it was before... I would be very gratefull.

Again, this is probably not going to happen since it affects a SUPER small percentage of users.

You can try to use these techniques for including CSS and JS though:
http://www.thescripts.com/forum/thread149165.html
http://css-discuss.incutio.com/?page=ImportHack

rainforest1155

Ahhh, I'm also screwed! This broke my bilingual support! Now both languages show at the same time, which looks really bad. :uhoh

I don't know what to do. Can't you make these optimizations optional?!

Helplessly greetings,
Sebastian

flyingdutchie

{JT} wrote:

Again, this is probably not going to happen since it affects a SUPER small percentage of users.

You can try to use these techniques for including CSS and JS though:
http://www.thescripts.com/forum/thread149165.html
http://css-discuss.incutio.com/?page=ImportHack

I'll give that a try, but it'll cost me hours to fix this! I'm not happy with this!

But how would i call my 'includeBrowserCSS()' now... (see my previous post)? It has to be inside the <HEADER> tag!

I hoped i had the evening off ... guess not.

rainforest1155

flyingdutchie wrote:

I'll give that a try, but it'll cost me hours to fix this! I'm not happy with this!

But how would i call my 'includeBrowserCSS()' now... (see my previous post)? It has to be inside the <HEADER> tag!

I hoped i had the evening off ... guess not.

I wish you good luck in finding a solution for this. I guess this is the problem for me too. Please let me know if you come across a solution!

Thanks,
Sebastian

{JT}

Try adding this to your javascript:

onload = includeBrowserCSS;

flyingdutchie wrote:

I'll give that a try, but it'll cost me hours to fix this! I'm not happy with this!

But how would i call my 'includeBrowserCSS()' now... (see my previous post)? It has to be inside the <HEADER> tag!

I hoped i had the evening off ... guess not.

flyingdutchie

How to 'fix' my CSS code?
I moved my

<script language="javascript" type="text/javascript" src="http://www.antonspaans.com/mysmugmug.js"></script&gt;

to the 'Header' section... so this part is fixed.

But now, how can i fix my CSS issues?

This is my old code:

/* Begin inline style */
</style>
<link rel="SHORTCUT ICON" href="[url="http://www.antonspaans.com/vlag.ico"]http://www.antonspaans.com/vlag.ico[/url]" />
<LINK href="[url="http://www.antonspaans.com/jsdomenu/office_xp.css"]http://www.antonspaans.com/jsdomenu/office_xp.css[/url]" rel="stylesheet" type="text/css"/>
<LINK href="[url="http://www.antonspaans.com/mysmugmugWhite.css"]http://www.antonspaans.com/mysmugmugWhite.css[/url]" rel="stylesheet" type="text/css"/>
<script language="javascript">
includeBrowserCSS();
</script>
<style type="text/css">
#stylebar {
display: none;
}
/* For now... remove later! */
.smugmug .gallery_939815 #comment,
.smugmug_small .gallery_939815 #comment {
display: none;
}
/* End inline style */
 

the 'includeBrowserCSS()' calls document.writeln("....") to write out browser specific CSS (checks browser and writes CSS accordingly).
-Also, how would i specify the 'shortcut icon'?
-How would i make sure that all the CSS (either through <LINK> tags or through 'includeBrowserCSS()') is written out inside the <HEAD> tag?

-In general, how would my new CSS code look like to fix my issues? Thank you!
-- Anton.

flyingdutchie

{JT} wrote:

Try adding this to your javascript:

onload = includeBrowserCSS;

Hi JT,
the 'includeBrowserCSS()' must be called inside the <HEAD> tag, after the inclusion of smugmug's CSS-stylesheets.

It can not be called after or before the <HEAD> tag or after the document has been loaded.
-- Anton.

{JT}

Take good look at the links that I sent. One of them discusses how to add CSS and JS to the header on the fly using javascript - you can do the same to add ANYTHING to the header; eg:

var theme = document.createElement("link");
var head = document.getElementsByTagName("head")[0];
theme.setAttribute("type", "text/css");
theme.setAttribute("rel", "stylesheet");
theme.setAttribute("href", "http://www.antonspaans.com/jsdomenu/office_xp.css");
head.appendChild(theme);

so in order to do this with your favorite icon:

var favico = document.createElement("link");
var head = document.getElementsByTagName("head")[0];
favico.setAttribute("rel", "SHORTCUT ICON");
favico.setAttribute("href", "http://www.antonspaans.com/vlag.ico");
head.appendChild(favico);

So just add those lines to whatever function or onload that you need.

flyingdutchie

{JT} wrote:

Take good look at the links that I sent. One of them discusses how to add CSS and JS to the header on the fly using javascript - you can do the same to add ANYTHING to the header; eg:

var theme = document.createElement("link");
var head = document.getElementsByTagName("head")[0];
theme.setAttribute("type", "text/css");
theme.setAttribute("rel", "stylesheet");
theme.setAttribute("href", "http://www.antonspaans.com/jsdomenu/office_xp.css");
head.appendChild(theme);

so in order to do this with your favorite icon:

var favico = document.createElement("link");
var head = document.getElementsByTagName("head")[0];
favico.setAttribute("rel", "SHORTCUT ICON");
favico.setAttribute("href", "http://www.antonspaans.com/vlag.ico");
head.appendChild(favico);

So just add those lines to whatever function or onload that you need.

Change the style(s) AFTER the document has loaded...? I'd rather not. I tried that before and you get a nasty effect in your browser:

When the page has loaded, for a fraction of a second users see the page without any CSS styling. Then after that fraction they see the co-branding style being applied. This gives a nasty 'flicker' effect.

And some browsers don't like this at all:
The browser finished loading and laying out the document.
Then after the load, the CSS changes... some browser get mixed up and the layout is incorrect.
-- Anton.

{JT}

Do it inline then - I am just trying to help you out

flyingdutchie wrote:

Change the style(s) AFTER the document has loaded...? I'd rather not. I tried that before and you get a nasty effect in your browser:

When the page has loaded, for a fraction of a second users see the page without any CSS styling. Then after that fraction they see the co-branding style being applied. This gives a nasty 'flicker' effect.

And some browsers don't like this at all:
The browser finished loading and laying out the document.
Then after the load, the CSS changes... some browser get mixed up and the layout is incorrect.
-- Anton.

rainforest1155

{JT} wrote:

Take good look at the links that I sent. One of them discusses how to add CSS and JS to the header on the fly using javascript - you can do the same to add ANYTHING to the header; eg:

So just add those lines to whatever function or onload that you need.

JT, tried that, but as Anton stated this isn't acceptable as a solution. Looks really bad when first both languages are displayed and then one goes away.

Hope Anton finds a solution.

Sebastian

flyingdutchie

{JT} wrote:

Do it inline then - I am just trying to help you out

I know JT, I really appreciate your help!

But for browser compliance i should do it inline inside the <HEAD> tag:
<LINK> and <STYLE> elements should be inside the <HEAD> tag.

But it seems that at least FireFox and IE6.0 don't care about the exact spot of <LINK> and <STYLE> elements. Just now, i changed my co-branding to write-out these elements inside the <BODY> tag:
I moved the contents of the co-branding's 'CSS' field to the top of the 'header' field. IE6.0 and FireFox don't seem to mind, although it is invalid (X)HTML.

When i'm home i'll try if Opera and Netscape are happy with it too

Could someone try my site in Safari 1.2 (or higher)?

JT, Sebastian and everyone else, thanks for you help!
-- Anton.

rainforest1155

{JT} wrote:

Do it inline then - I am just trying to help you out

Now I got what you meant by that. Thanks for switching us back to inline style!
You're the man!


Sebastian

flyingdutchie

rainforest1155 wrote:

Now I got what you meant by that. Thanks for switching us back to inline style!
You're the man!


Sebastian

Aha.. now i understand your reply as well, JT.
Thanks!!!!

Although, it is a good idea to have the CSS and JS cacheable. Maybe (later) you can add a checkbox that let the smugmugger either use inline CSS/JS versus CSS/JS in a seperate cacheable file.

Thank again, JT!

{JT}

I did not switch you back to inline

What you are seeing is a work around for caching - it will only be inline for a little bit.

rainforest1155 wrote:

Now I got what you meant by that. Thanks for switching us back to inline style!
You're the man!


Sebastian

flyingdutchie

{JT} wrote:

I did not switch you back to inline

What you are seeing is a work around for caching - it will only be inline for a little bit.

OK, Thanks JT.
I will keep using my work-around as described earlier (put my CSS and JavaScript on the top of my cobrandig's 'Header').