Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Smile getting an on click changing background to stay

    Hi, I used this on-click changeable background code for my website:

    Change Background image (Blogger/Blogspot)

    And now I have the same question as the original poster: is there any way to get it so that the chosen background stays put even if the page is refreshed or navigated away from? Or is it not possible because all my pages are separate files?

    website is: http://mintymix.com/

    I hope it's ok to post here, the other thread is from 2008.

    Thanks for reading =)

    *edit*
    Ah, I'm kind of figuring that javascript doesn't work like that. If it won't work, is there any other type of coding I may use to achieve this?
    Last edited by cottontail; 11-20-2010 at 12:13 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    This is almost funny!

    I just 30 minutes ago stumbled across some code I wrote in 2009 for nearly this same thing.

    Look here:
    http://www.clearviewarts.com/cookiebgi2.html

    And after you choose a background, look here:
    http://www.clearviewarts.com/bgtest.html

    Close your browser!! Completely.

    Bring it up again. Hit either of those pages. Presto.

    The cookie is saved for one year (that can easily be changed).

    Naturally, to see the code for the two pages, just use VIEW==>>SOURCE (or Page Source) in your browser.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cottontail (11-20-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ah! thank you so much I really appreciate it!
    I'm going to try and implement your code into my site, I'll let you know how it comes out =) thanks again!

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ah ok I got it working, but I'm not sure how to switch from a form to image buttons. I tried to manipulate the form but I can't get it right, would it be ok to ask you for the code for image buttons?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cottontail (11-20-2010)

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    yes, kind of like that =) But, is there a way to use a totally different image instead of the thumbnails?

    Thanks again so much for all your help!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    ??? Those aren't thumbnails. The background "image" is actually made up of lots of those "tiles" side by side, top to bottom.

    But I get what you mean.

    Anyway, never ask "is there a way..." There almost always is. <grin/>

    Give me an example of what you are after. How can an image button be anything *but* a small representation of the actual background? In other words, one way or the other you need a thumbnail.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ah thank you =)

    ohh, I think I misused the word thumbnail. What I'd like to have is a set up like how it is on my website at the moment:

    http://mintymix.com/

    At the top right, the 6 colored tabs are the click-able images that change the background. (example image: http://cha-lualovers.com/whops/bgs/orange.gif ) But the code I'm using now doesn't have cookies like yours, and I prefer your code better. Just need to figure out how to change your click-able images to be individual, unique src images different from the background that it will display (I hope I'm wording this right, ah I'm sorry if its confusing).
    Last edited by cottontail; 11-20-2010 at 03:35 AM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Your HTML on that page is illegal. Maybe you should run it by an HTML verifier and fix it????

    For example, you start off with
    Code:
    <body>
    <div align="center"> 
    <td height="50" align="center">
    You can't have a <td> *except* inside a <tr> which is inside a <table>.

    And then you have this:
    Code:
           <tr> 
              <p><P>
              <td height="50" align="center"><font color="000000">
    No, you can't have ANYTHING except a <td> or <th> directly inside of a <tr>.

    *********

    Anyway, here:
    Code:
    <html><head>
    <title>MintyMix.com</title>
    <link href="http://mintymix.com/enc/stylecss.php" rel="stylesheet" 
    
    type="text/css"></head>
    
    <body background="http://mintymix.com/images/table.jpg">
    
    <script type="text/javascript">
    var backImage = new Array(); 
    backImage[0] = "http://cha-lualovers.com/whops/bgs/wafflebg.jpg";
    backImage[1] = "http://mintymix.com/images/behbefuhstrawb.gif";
    backImage[2] = "http://i50.tinypic.com/2yy6pus.gif";
    backImage[3] = "http://mintymix.com/images/table2.jpg";
    backImage[4] = "http://mintymix.com/images/waffline.jpg";
    backImage[5] = "http://mintymix.com/images/table.jpg"; 
    
    var expDays = 365; // how long before cookie expires, by default
    var exp = new Date(); 
    var favImage = "";
    exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
    
    function changeBGImage(which)
    {
        SetCookie('image', backImage[which], exp);
        getBodyBG( );
    }
    
    function GetCookie(name) 
    {  
        var cookies = document.cookie.split(/; /g);
        var arg = name + "=";  
        for ( var c = 0; c < cookies.length; ++c )
        {
            var ck = cookies[c];
            if ( ck.indexOf(arg) == 0 )
            {
                var temp = ck.split(/=/);
                return unescape(temp[1]);
            }
        }
        return "";
    }
    
    function SetCookie (name, value) 
    {  
        var argv = SetCookie.arguments;  
        var argc = SetCookie.arguments.length;  
        var expires = (argc > 2) ? argv[2] : null;  
        var path = (argc > 3) ? argv[3] : null;  
        var domain = (argc > 4) ? argv[4] : null;  
        var secure = (argc > 5) ? argv[5] : false;  
    
        document.cookie = name + "=" + escape (value) + 
                ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
                ((path == null) ? "" : ("; path=" + path)) +  
                ((domain == null) ? "" : ("; domain=" + domain)) +    
                ((secure == true) ? "; secure" : "");
    }
    
    function getBodyBG()
    {
        var bgi = GetCookie("image");
        if ( bgi == null || bgi == "" ) bgi = backImage[0];
        document.body.style.backgroundImage="url('" + bgi + "')";
    }
    </script>
    
    <style>
    body { background-repeat: repeat-all; }
    
    td#buttons {
        width: 100%;
        text-align: right;
        height: 10px; 
    }
    td#buttons input {
        border: none;
        margin-left: 5px;
    }
    </style>
    
    </head>
    <body onload="getBodyBG();">
    <table width="980" height="387" border="0" align="center" cellpadding="0" cellspacing="0" 
             background="http://cha-lualovers.com/whops/toppie2.gif"> 
    <tr> 
        <td><div align="left"><img src="http://cha-lualovers.com/whops/logo.png"></td> 
        <td>
            <BR>
            <table width="653" height="100" border="0" cellpadding="0" cellspacing="0"> 
            <tr> 
                <td height="10" align="right" id="buttons">
                     <input type="image" src="http://cha-lualovers.com/whops/bgs/wafbg.gif"  onclick="changeBGImage(0)">
                     <input type="image" src="http://cha-lualovers.com/whops/bgs/orange.gif" onclick="changeBGImage(1)">
                     <input type="image" src="http://cha-lualovers.com/whops/bgs/yellow.gif" onclick="changeBGImage(2)">
                     <input type="image" src="http://cha-lualovers.com/whops/bgs/green.gif"  onclick="changeBGImage(3)">
                     <input type="image" src="http://cha-lualovers.com/whops/bgs/blue.gif"   onclick="changeBGImage(4)">
                     <input type="image" src="http://cha-lualovers.com/whops/bgs/tablbg.gif" onclick="changeBGImage(5)">
                </td>      
           </tr> 
           </table>
        </td> 
        <td width="45"></td> 
    </tr> 
    </table> 
    </body></html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cottontail (11-20-2010)

  • #10
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    eek, thank you so much!

    I used a template and tried to alter it for my layout without much knowledge of tables so it's very messy.. I will definitely use an HTML verifier to fix it, thank you for referring me to that! I didn't even know they existed.

    Also one more thing, with your code am I able to start off with a background image, or does it have to be white at the beginning?

    Thanks again for all your help! I hope I wasn't an annoyance with my limited coding knowledge.

    *edit* ah wait I think now the new code has the background starting off with the first image, correct? that is perfect =)
    Last edited by cottontail; 11-20-2010 at 07:29 AM.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Ummm...that code checks for a lack of cookie, and if it's not there, chooses background 0 as the default.

    Hmmm... At least it should do that.

    Let me check.

    Yeah, it did it. Only thing wrong is that it starts to show another background first. Not sure where that is coming from.

    Oh, I see it! There are two <body> tags in there! More illegal HTML.

    This one:
    <body background="http://mintymix.com/images/table.jpg">
    is bogus.

    If you WANT that to be the default image, keep this *RIGHT* <body> tag:
    Code:
    <body onload="getBodyBG();">
    And change the style from
    Code:
    body { background-repeat: repeat-all; }
    to
    Code:
    body { 
        background-repeat: repeat-all;
        background-image: url('http://mintymix.com/images/table.jpg');
    }
    and then change this line:
    Code:
        if ( bgi == null || bgi == "" ) bgi = backImage[0];
    to this:
    Code:
        if ( bgi == null || bgi == "" ) bgi = backImage[5];
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cottontail (11-20-2010)

  • #12
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    got it =)

    When I changed this, it started to flicker the default though, so I just kept it as the original and it's working fine:
    Code:
    body { 
        background-repeat: repeat-all;
        background-image: url('http://mintymix.com/images/table.jpg');
    }
    Sometimes the backgrounds are getting stuck though, if you poke around you might be able to see what I mean.
    http://mintymix.com

    And ah, I used the verifier and it looks like I have a lot to work on in the morning, lol.

    thanks for all your help
    if you want me to credit you in the code or on my site, let me know =)

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Fix up the HTML then we'll take another look at the flickering etc.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •