...

View Full Version : Simple onclick BG switcher script glitching



canadianjameson
09-28-2008, 11:51 PM
Hey,

I have this setup:


body {
margin: 0px;
padding: 0px;
background-image: url('wallpapers/a.jpg');
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-x: hidden;
overflow-y: visible;
background-color: black;

}

<script type="text/javascript">
bdy = document.getElementsById("pageBody");

function bg_swap(whatLink) {
if(whatLink == p1)// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/a.jpg)';
}
if(whatLink == p2)// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/b.jpg)';
}
if(nav.id == p3)// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/c.jpg)';
}
if(nav.id == p4)// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/d.jpg)';
}
if(nav.id == p5)// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/e.jpg)';
}
if(nav.id == p6)// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/f.jpg)';
}
}
</script>

and this:

<body id="pageBody" ...>
....
<a id="p1" href="http://www.gryphondor.com/weekly-menu/" onclick="bg_swap(this.id);">Weekly Menu</a>
<a id="p2" href="http://www.gryphondor.com/afternoon-tea/" onclick="bg_swap(this.id);">Afternoon Tea</a>
<a id="p3" href="http://www.gryphondor.com/bakery-goods/" onclick="bg_swap(this.id);">Bakery Goods</a>
<a id="p4" href="http://www.gryphondor.com/catering/" onclick="bg_swap(this.id);">Catering</a>
<a id="p5" href="http://www.gryphondor.com/special-events/" onclick="bg_swap(this.id);">Special Events</a>
<a id="p6" href="http://www.gryphondor.com/contact-us/" onclick="bg_swap(this.id);">Contact Us</a>
</div>

but the switch isn't occurring.

What have I done wrong?

Arty Effem
09-29-2008, 03:58 AM
if(whatLink == p1)


if(whatLink == "p1") //etcThe error console would have pointed to this.

canadianjameson
09-29-2008, 04:06 AM
I upgraded to the new FF and the current Firebug is not compatible so I'm flying blind :\

Alas though, it didn't work.

Any other suggestions?

www.gryphondor.com

rangana
09-29-2008, 04:57 AM
You had a typo:


bdy = document.getElementsById("pageBody");


You're comparing to a string and not a variable, so add highlighted:


if(whatLink == 'p1')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/a.jpg)';
}
if(whatLink == 'p2')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/b.jpg)';
}



Also, what's nav.id? It does'nt exist in your code, as far as the snippet is concerned.

You might also find it useful to add return false; at the end of your function. (to avoid the page going to the link)

Hope that helps.

canadianjameson
09-29-2008, 05:32 AM
Hey,

Thanks - sorry about the messy code before:

here's what it looks like now:

<script type="text/javascript">
bdy = document.getElementById("pageBody");

function bg_swap(whatLink) {
if(whatLink == 'p1')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/a.jpg)';
}
if(whatLink == 'p2')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/b.jpg)';
}
if(whatLink == 'p3')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/c.jpg)';
}
if(whatLink == 'p4')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/d.jpg)';
}
if(whatLink == 'p5')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/e.jpg)';
}
if(whatLink == 'p6')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/f.jpg)';
}
}
</script>

I have applied the suggestions but to no avail :\ it's really weird. Is it possible that the changes are being trumped by the present CSS for the body tag? Should I change the CSS and just add the background info to the #pageBody ID instead of the body tag?

Arty Effem
09-29-2008, 02:17 PM
I upgraded to the new FF and the current Firebug is not compatible so I'm flying blind :\

Alas though, it didn't work.

Any other suggestions?

Firefox has a native error console under 'Tools'. If you're running this code in the <head> then it's addressing the element prematurely, which will also generate a console error.

canadianjameson
09-29-2008, 05:09 PM
Heh, sorry I haven't made a webpage in a while so I'm rusty

alright I think we're almost there :)

Right now the script changes the background IF I add the "return false"... however then the corresponding link doesn't open. I figure that because this used Wordpress it wasn't actually reloading the entire page every time, but rather changing to appropriate content within given placeholders...

How can we make it so that the changed background is maintained without the "return false"?

basically I'm guessing we need to pass the variable across pages, but i'm not sure how

Arty Effem
09-29-2008, 06:39 PM
Right now the script changes the background IF I add the "return false"... however then the corresponding link doesn't open. I figure that because this used Wordpress it wasn't actually reloading the entire page every time, but rather changing to appropriate content within given placeholders...

How can we make it so that the changed background is maintained without the "return false"?

basically I'm guessing we need to pass the variable across pages, but i'm not sure howI think the fundamental problem is that you're trying to change the current page immediately before abandoning it.

Try the links like this:
onclick="return bg_swap(this)"And the function

function bg_swap(whatLink) { // This function should use a lookup table

if(whatLink.id == 'p1')
{
bdy.style.backgroundImage = 'url(wallpapers/a.jpg)';
}

// After other if statements

setTimeout('location.href="' +whatLink.href+ '"', 1000);

return false;
}If this:
bdy = document.getElementById("pageBody"); is in open code within the <head>, move it to inside the bg_swap function.

canadianjameson
09-29-2008, 07:08 PM
Hey,

Thanks, it seems we've nailed the original problem... the issue is that now, while the appropriate backgrounds are being displayed for a second, it displays the "page not found" error and shows the URL as "http://www.gryphondor.com/undefined"

is there any possible way around this? Is it possible that we need to have a title wherein it has the (for ex: http://www.gryphondor.com/bakery-goods?p2/

hmmm, alternatively I might have an idea! I can rename the variables so if the location.href goes from www.gryphondor.com (main page) to www.gryphondor.com/bakery-goods/ (currently denote by 'p2'), the script catches the '/bakery-goods/' and uses that part of the URL to define the background image! sort of like an 'onload, parse through the URL and determine what comes after .com/ -> if 'bakery-goods/, apply X background, else etc'

is that possible?

Arty Effem
09-29-2008, 07:38 PM
Hey,

Thanks, it seems we've nailed the original problem... the issue is that now, while the appropriate backgrounds are being displayed for a second, it displays the "page not found" error and shows the URL as "http://www.gryphondor.com/undefined"

This is what I suggested and it works:
<html>

<body id='pageBody'>

<script type="text/javascript">

function bg_swap(whatLink) {

var bdy=document.getElementById('pageBody');

if(whatLink.id == 'p1')
{
bdy.style.backgroundImage = 'url(wallpapers/a.jpg)';
}

// After other if statements

setTimeout('location.href="' +whatLink.href+ '"', 1000);

return false;
}
</script>

<a href = "http://www.gryphondor.com/weekly-menu/" id='p1' onclick='return bg_swap(this)'>GO</a>

</body>
</html>

canadianjameson
09-29-2008, 08:37 PM
Hey

It seems that I had implemented it wrong, but now that I have seemingly done it exactly as suggested, I'm getting the old error of it flashing the new BG for a second then going back to the default one.

As I said - I think I have now implemented it according to your specifications. The only thing that may be off is the placement of the actual script, which I have moved into the <body> of the page. Perhaps it should be lower down where that tag is closed. if so let me know.

I am pasting, and highlighting in red, the parts of the page that are relevant. perhaps I'm just missing something but I'm getting no errors.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title><?php
if( function_exists( 'is_tag' ) && is_tag() ) {
UTW_ShowCurrentTagSet('tagsettextonly');
echo ' ' . __('@', VL_DOMAIN) . ' ';
bloginfo('name');
}
else if( is_category() || is_month() || is_day() || is_year() || is_author() ) {
wp_title('',true);
echo ' ' . __('@', VL_DOMAIN) . ' ';
bloginfo('name');
}
else if (is_search()) {
echo( htmlspecialchars( stripslashes( $_GET['s'] ) ) );
echo ' ' . __('@', VL_DOMAIN) . ' ';
bloginfo('name');
}
else if ( is_page() ) {
$id = 0;
$parent;
for( $parent = &get_post($id); $parent->post_parent != 0; $parent = &get_post($parent->post_parent) ) {
echo $parent->post_title . ' &laquo; ';
}
echo $parent->post_title;
echo ' ' . __('@', VL_DOMAIN) . ' ';
bloginfo('name');
}
else if (is_single() || is_page() || is_archive()) {
wp_title('',true);
echo ' ' . __('@', VL_DOMAIN) . ' ';
bloginfo('name');
}
else if (is_404()) {
_e('Page not found', VL_DOMAIN );
echo ' ' . __('@', VL_DOMAIN) . ' ';
bloginfo('name');
}
else if( is_home() ) {
bloginfo('name'); echo(' &raquo; '); bloginfo('description');
}
else {
if( function_exists('g2_init')) {
if (!defined('G2INIT')) {
g2_init();
}
$g2data = GalleryEmbed::handleRequest();
if( !empty( $g2data[ 'themeData' ]) ) {
echo $g2data[ 'themeData' ][ 'item' ][ 'title' ];
for( $i = count( $g2data[ 'themeData' ][ 'parents' ] ); $i > 0; --$i ) {
if( $g2data[ 'themeData' ][ 'item' ][ 'id' ] != $g2data[ 'themeData' ][ 'parents' ][ $i-1 ][ 'id'] ) {
?> &laquo; <?php
echo $g2data[ 'themeData' ][ 'parents' ][$i- 1 ][ 'title' ];
}
}
echo ' ' . __('@', VL_DOMAIN) . ' ';
bloginfo('name');
}
GalleryEmbed::done();
}
else {
bloginfo('name'); echo(' &raquo; '); bloginfo('description');
}
}
?></title><?php
?><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /><?php
vl_bloglogostyle();
if( !function_exists( 'blogskinstyles' ) ) {
$url = get_stylesheet_directory_uri() . '/skins/default/style.css.php';
$ieurl = get_stylesheet_directory_uri() . '/skins/default/style-ie.css.php?skin=default';
if( function_exists( 'add_presentationtoolkit_skin_query' ) ) {
$url = add_presentationtoolkit_skin_query( 'Default', $url );
$ieurl = add_presentationtoolkit_skin_query( 'Default', $ieurl );
}
?>
<link rel="stylesheet" href="<?php echo $url; ?>" type="text/css" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php echo $ieurl; ?>" type="text/css" media="screen" />
<![endif]-->


<?php
}

if( menu_position_stylesheet_url() ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); print menu_position_stylesheet_url(); ?>" type="text/css" media="screen" />
<?php } ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/wallpaper.css.php" type="text/css" media="screen" />
<?php
if( function_exists('g2_init') ) {
?><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/wpg2.css" type="text/css" media="screen" /><?php
?><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/siriux.css" type="text/css" media="screen" /><?php
}?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php
$theme = get_current_theme();
$ct = get_theme($theme);
?>
<meta name="generator" content="WordPress <?php echo $wp_version; ?>" />
<meta name="generator-version" content="<?php echo $wp_version; ?>" />
<meta name="theme" content="<?php echo $ct[ 'Title' ]; ?>" />
<meta name="theme-version" content="<?php echo $ct[ 'Version' ]; ?>" />
<?php
if( !function_exists('get_theme_option') || get_theme_option('headcredits') != 'remove' ) {
?><link rel='theme' title='Vistered Little Theme' href='http://windyroad.org/software/wordpress/vistered-little-theme' /><?php
}
?>

<?php
wp_get_archives('type=monthly&format=link');
wp_head();
?>

</head>
<body id="pageBody" class="<?php
if( !function_exists( 'get_theme_option' )
|| get_theme_option('headerposition') != "normal" )
{
echo " headerfixed";
}
if( function_exists( 'get_theme_option' )
&& ( get_theme_option( 'thumbpos' ) == "sidebar"
|| get_theme_option( 'thumbpos' ) == "none" )
&& ( vl_get_bloglogodir() == null ) ) {
echo " plainheader";
}
if( function_exists('get_theme_option') && get_theme_option('quadpossidebar') == 'quad' ) {
echo " quadbar";
}
?>" style='font-family: <?php
echo vl_get_theme_option('font-family', '"verdana", sans-serif' );
?>; font-size: <?php
echo vl_get_theme_option('font-size', '14px');
?>'><?php
?><div id="header"><?php
?><div class="header_content"><?php
if( !function_exists('get_theme_option')
|| get_theme_option( 'headersearch' ) != "hide" )
{
?>
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<p class="right" id="search">
<input type="text" value="<?php echo __('Search', VL_DOMAIN) . '...'; ?>" name="s" id="s" alt="Search"/><br />

<?php
if( function_exists( 'mfg_search_inputs' ) )
mfg_search_inputs();
?>
</p>
</form>
<?php
}
if( is_single() || is_page() ) {
?><div class="blogtitle" <?php
}
else {
?><h1 <?php
}
?>style='font-family: <?php
echo vl_get_theme_option('title-font-family', '"Trebuchet MS", sans-serif' );
?>; font-size: <?php
echo vl_get_theme_option('font-size', '20px');
?>'><?php
?><a href="<?php bloginfo('url'); ?>" title="<?php _e( 'View recent news', VL_DOMAIN); ?>"><?php bloginfo('title'); ?></a><br />
<?php
if( is_single() || is_page() ) {
echo '</div>';
}
else {
echo '</h1>';
}

if( headerThumbs() ) ?>
<div id="shortbreadLink">Also Visit <a href="http://www.shortbreadbygryphon.com">shortbreadbygryphon.com</a></div>

<div id="gryphonLinks">
<a id="p1" href="http://www.gryphondor.com/weekly-menu/" onclick="return bg_swap(this);">Weekly Menu</a>
<a id="p2" href="http://www.gryphondor.com/afternoon-tea/" onclick="return bg_swap(this);">Afternoon Tea</a>
<a id="p3" href="http://www.gryphondor.com/bakery-goods/" onclick="return bg_swap(this);">Bakery Goods</a>
<a id="p4" href="http://www.gryphondor.com/catering/" onclick="return bg_swap(this);">Catering</a>
<a id="p5" href="http://www.gryphondor.com/special-events/" onclick="return bg_swap(this);">Special Events</a>
<a id="p6" href="http://www.gryphondor.com/contact-us/" onclick="return bg_swap(this);">Contact Us</a>
</div>
<div style="clear: both;"></div>
</div>
<div class="header_bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div id="bodyowner">

<?php
if( function_exists('dynamic_sidebar') ) {
if ( vl_widget_count(__('Banner', VL_DOMAIN)) > 0 ) {
?><div class="banner">
<div class="blogbefore">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div><?php
dynamic_sidebar(__('Banner', VL_DOMAIN));
?><div class="blogafter">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</div><?php
}
}
?>

<script type="text/javascript">


function bg_swap(whatLink) {

var bdy=document.getElementById('pageBody');

if(whatLink.id == 'p1')// <--?
{
bdy.style.backgroundImage = 'url(http://www.gryphondor.com/wp-content/themes/vistered-little/wallpapers/a.jpg)';
}
if(whatLink.id == 'p2')// <--?
{
bdy.style.backgroundImage = 'url(http://www.gryphondor.com/wp-content/themes/vistered-little/wallpapers/b.jpg)';
}
if(whatLink.id == 'p3')// <--?
{
bdy.style.backgroundImage = 'url(http://www.gryphondor.com/wp-content/themes/vistered-little/wallpapers/c.jpg)';
}
if(whatLink.id == 'p4')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/d.jpg)';
}
if(whatLink.id == 'p5')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/e.jpg)';
}
if(whatLink.id == 'p6')// <--?
{
bdy.style.backgroundImage = 'url(wallpapers/f.jpg)';
}

setTimeout('location.href="' +whatLink.href+ '"', 1000);

return false;

}
</script>


and you can see the effect by clicking the 2nd or 3rd link here: www.gryphondor.com



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum