Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member LDAsh's Avatar
    Join Date
    Oct 2015
    Posts
    12
    Member #
    52294
    Liked
    1 times

    Colour-scheme style, set by cookie, not consistent

    Hi, it's me again, back with a new issue...

    I have some styles setup to "skin" my website with different colour schemes, using a cookie, and it works alright except one quirk, which is whenever I use a style that isn't the default, the default is displayed briefly (or while the page is loading, I think) before the custom style will "kick in" and it looks very distracting and annoying, especially when using the "white" colour scheme, because the default is dark blue. Other sites I know of that have custom styles for colour schemes (or skins) like this don't seem to suffer from this issue. Ideally I'd like it to either be consistent the force the style even if the page hasn't finished loading, or not display the page (hence my attempt at adding some "preloading code") until everything is done and ready to display with the custom style.

    So I'm wondering what the issue could be or if anyone can help me, it would be very much appreciated!

    Here is the code that is used for (preloading images, and) colour-scheme styles set by a cookie:-
    Code:
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">if (document.images) { 
    img1 = new Image();img1.src = "bghead.jpg";
    img2 = new Image();img2.src = "bgheadbit1.jpg";
    img3 = new Image();img3.src = "bgmain.jpg";
    img4 = new Image();img4.src = "bgmenu.jpg";</script>
    <script type="text/javascript">preload('bghead.jpg,bgheadbit1.jpg,bgmain.jpg,bgmenu.jpg');</script>
    <script><!--function checkKey(e){ switch (e.keyCode) {
    case 37: return false; break; case 39: return false; break; default: return true; } 
    } if ($.browser.mozilla) { $(document).keypress (checkKey); } else { $(document).keydown (checkKey); }--></script>
    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" type="text/css" title="vestyle" href="css/style.css">
    <link rel="stylesheet" type="text/css" title="vestyle2" href="css/style2.css">
    <link rel="stylesheet" type="text/css" title="vestyle3" href="css/style3.css">
    <link rel="stylesheet" type="text/css" title="vestyle4" href="css/style4.css">
    <link rel="stylesheet" type="text/css" title="vestyle5" href="css/style5.css">
    <link rel="stylesheet" type="text/css" title="vestyle6" href="css/style6.css">
    <link rel="stylesheet" type="text/css" title="vestyle7" href="css/style7.css">
    <script>var style_cookie_name = "vestyle" ;var style_cookie_duration = 30 ;function switch_style ( css_title )
     { var i, link_tag ;for (i = 0, link_tag = document.getElementsByTagName("link") ;i < link_tag.length ; i++ ) 
    {if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title) 
    { link_tag[i].disabled = true ; if (link_tag[i].title == css_title) 
    { link_tag[i].disabled = false ; } } set_cookie( style_cookie_name, css_title, style_cookie_duration ); }
    } function set_style_from_cookie() 
    { var css_title = get_cookie( style_cookie_name ); if (css_title.length) { switch_style( css_title ); }
    } function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain ) 
    { var domain_string = valid_domain ? ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name + "=" + encodeURIComponent( cookie_value ) + ";
    max-age=" + 60 * 60 * 24 * lifespan_in_days + "; path=/" + domain_string ; 
    } function get_cookie ( cookie_name ) { var cookie_string = document.cookie ; if (cookie_string.length != 0) 
    { var cookie_value = cookie_string.match ( '(^|;)[\s]*' + cookie_name + '=([^;]*)' ); return decodeURIComponent ( cookie_value[2] ) ; } return '' ; }</script></head>
    <body onload="set_style_from_cookie()">
    (note: I've broken some lines here to make it more readable and not stretch out the post, in the actual HTML some of these are all in 1 line and extremely wide)
    Last edited by LDAsh; Oct 24th, 2015 at 11:16 AM.

  2.  

  3. #2
    Junior Member LDAsh's Avatar
    Join Date
    Oct 2015
    Posts
    12
    Member #
    52294
    Liked
    1 times
    Maybe this should have been posted in the Javascript section...?

    Can a moderator please move this thread there for me???

  4. #3
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    They style is applied by js if a cookie is present. This will never render the 'skin' on load because it is being applied via js, try using php to apply the skin. This is the exact reason I recommend against js based responsive design. The script has to render before applying the style to the page.

    Blocking out the page until it is done rendering is not hard at all, i'd use css opacity animated with jquery. Set it initially to 0, then animate it to 1 after the cookie skin is rendered. I'd recommend doing it with php, that way you can avoid this whole blocking mess.
    Last edited by brandMatt; Oct 28th, 2015 at 02:18 PM.

  5. #4
    Junior Member LDAsh's Avatar
    Join Date
    Oct 2015
    Posts
    12
    Member #
    52294
    Liked
    1 times
    That might be a good idea, if I knew anything about PHP and if I had some actual practical advice about, but my assumption is making every page a PHP file and with over 80 of them, it's not something I want to experiment with...

    I think the main issue is the preloading stuff is completely busted, and the line <body onload="set_style_from_cookie()"> isn't correct, because the theme/style doesn't actually kick in until EVERY image on the webpage is loaded, even the big screenshots. This line is right after the <body> tag, it can't possibly be seated any earlier. I've tried looking into some other solutions to prevent the page from displaying until the correct graphics are loaded, but so far nothing has worked correctly for me. The files (I'm trying to preload) add up to roughly 200KB, some of which should already be cached from the default style, so it's not like it should be a huge time for most surfers to wait unless they are still on 56k dialup.
    Last edited by LDAsh; Oct 29th, 2015 at 04:25 AM.

  6. #5
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times

    Colour-scheme style, set by cookie, not consistent

    Set an opacity of 0 to the body in css. Then animate it to 1 at the end of the set_style_from_cookie() function. Animate with jquery, be sure to include jquery in the head.
    Last edited by brandMatt; Nov 01st, 2015 at 08:48 PM.

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  7. #6
    Junior Member LDAsh's Avatar
    Join Date
    Oct 2015
    Posts
    12
    Member #
    52294
    Liked
    1 times
    Quote Originally Posted by brandMatt View Post
    Set an opacity of 0 to the body in css. Then animate it to 1 at the end of the set_style_from_cookie() function. Animate with jquery, be sure to include jquery in the head.
    Are you saying this will be compatible with the preloading stuff I already have in there? It doesn't seem to work.
    Because I'm only interested in preloading/hiding the "site graphics", not the "content images".

  8. #7
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times

    Colour-scheme style, set by cookie, not consistent

    Then apply the opacity/animation to only the parts you want it to be applied to, jquery has a excellent targeting system.

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  9. #8
    Junior Member LDAsh's Avatar
    Join Date
    Oct 2015
    Posts
    12
    Member #
    52294
    Liked
    1 times
    Quote Originally Posted by brandMatt View Post
    Then apply the opacity/animation to only the parts you want it to be applied to, jquery has a excellent targeting system.
    I've been looking into this stuff again, and it really seems like a lot of hacks and workarounds for something that should be a lot more simple, and other sites have been doing correctly for quite a number of years already. I don't like the idea of trying to "hide" the site issues under some full-screen layer. Something is clearly wrong with the code I posted before. The preloading isn't working and the theme should be applied first, then the content images should be loaded after. There must be a way to do this, because I've seen it done for years now.

    I'm almost considering just making a unique set of HTMLs for each different colour theme, that way it will definitely work immediately, no need for cookies, themed URLs can be linked to directly (without needing PHP) and it won't cause any storage issues. It will be a bit more work to update content but if I just can't get this simple thing fixed, it might be my only remaining simplistic option...

  10. #9
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    You're right, this doesn't have to be difficult, but you should consider the CMS' capabilities while you are developing your theme switcher plugin. Your main issue is that you are trying to do it with a client side script. You are dealing with a theme set by server side software. Other sites have been doing what you are requiring for years, I can only assume the other sites that you speak of are doing it, are utilizing the website's foundation.

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:04 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com