Simian Design

August 28, 2004

How I built the Pattern Chooser

I just recently transferred the background changer into PHP. Here is the code I used. Not the greatest write-up, but it'll do for a first pass.

The basic outline of the function is that I want the user to change the background pattern on the site. I want this to have a memory, so I set the pattern in a cookie. If a new pattern is chosen, that overwrites the old. this can take place throughout the site, without disrupting the flow of the user.

Pattern Menu

The pattern menu is a list. A simple unordered list, part of a greater menu list. I've taken out some of the extra fluff to show you the important parts.

<li><a  href="javascript:showHide('bgMenu')">Choose Background</a>
    <ul id="bgMenu" class="menu">
        <li><a href="<? $_SERVER["PHP_SELF"] ?>?background=bg-1">...</a></li>

These two elements show/hide the menu, and pass the correct path with the correct QueryString to the page. The show/hide JavaScript just goes through, finds the DOM element passed in (in this case, the sub UL) and changes the display on it.

Passing the Pattern

The <? $_SERVER["PHP_SELF"] ?> just allows for the menu to always reference the page the user is on, but with the proper QueryString to change the pattern.

Since each page has the functions in the header to change the pattern, by re-referencing the page, we can change the pattern without breaking flow.

Storing and Writing the Pattern

// This gets the parts of the passed URL.
$urlParts = explode("?", $http_referer); 
// The query string is the stufff after the ?
$queryString = urldecode($urlparts[1]);  
// This breaks down the other parts of the QueryString
$qsParts = explode("&", $querystring);   
extract($qsParts);

This above part deeals with taking in the URL, and splitting out any QueryString variables. This is how I am passing the new background image.

Next, I'll check for two things. I'll check for the cookie, then I'll check for the background element passed in as a QueryString. The QueryString Element will override any pre-existing Cookie set previously.

if (isset($sdbgCookie)){            // Is the Cookie Set?
    $bgImage = $sdbgCookie;         // ...set bgImage as CookieValue
} else {                            // otherwise
    $bgImage = "bg-1";              // ...default bgImage
}

if (isset($background)){            // Does background (URL) exist?
    $bgImage = $background;         // ...make it the bgImage, 
}                                   //    overriding the cookie
setcookie ("sdbgCookie", $bgImage); // Set the new cookie.

These two chunks of PHP code live in an include file I include above the head elements. Any PHP cookie stuff has to be done before the headers are passed. I probably should be doing this more elegantly, but I'm not. Probably should read this directory, and formulate the list based on the background-images I have in there on a timed basis. Something to put on the "to-do" list.

Writing out the Pattern

I'm not terribly proud of this. I'm just adding in a PHP variable to a single instance of a CSS rule, after the prime @import. This just seems awful to me, but I don't want to have my CSS file be a .php file, and I need that php value. So until I think of something more elegant, this is what we get.

Things I'd like to do with this.

I would like to do this as JavaScript, and thus avoiding the reloading of the page. But as far as I know, you can't change the background-image of an element via JavaScript. Maybe you can. I'd rather it be done that way, so I wouldn't have to force a reload of the page.

Post Info

Tagged As Coding

Comments are Open (4)

Posted at 02:21 PM

Comments

daniel

using javascript, you can actually do what you want. just grab a reference to the element you want to change

var ref = document.getElementById('page_body');

then you can change the background-image

ref.style.backgroundImage = "url(image/is/here.gif)";

you could do this really simply by attaching a onmouseup event handler to the background image sample

document.getElementById('id_of_sample_image').onmouseup = function() {

     document.getElementById('page_body').style.backgroundImage = "url("+this.src+")";

} 

anyway, hope that helps a bit.

Posted by: daniel | September 1, 2004 06:42 PM

Tony

Now that's the LazyWeb working for you.

I had believe I had tried the body.style.backgroundImage reference. maybe it was calling the 'page_body' wrong, or I was hyphenating background-image.

But I will try this tomorrow. Thanks a lot Daniel. You just might have solved an issue I had put on the back burner.

Posted by: Tony | September 1, 2004 09:01 PM

daniel

i should clarify that 'page_body' is a space filler for the what you would want to replace with the id of the body tag. you could also get an object identifier like this

 var ref = document.getElementsByTagName('body')[0];

that would spare you from requiring an id attribute in every page.

Posted by: daniel | September 2, 2004 12:23 AM

Tony

Oh, I understand what you were talking about with the space filler for the body ID tag. That's the part I think I messed up previously.

I hope to try this out today.

Posted by: Tony | September 2, 2004 07:28 AM