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 11 of 11
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Simple onclick BG switcher script glitching

    Hey,

    I have this setup:

    Code:
    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:
    Code:
    <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?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Code:
    if(whatLink == p1)
    Code:
    if(whatLink == "p1") //etc
    The error console would have pointed to this.

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You had a typo:
    Code:
    bdy = document.getElementsById("pageBody");
    You're comparing to a string and not a variable, so add highlighted:
    Code:
     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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey,

    Thanks - sorry about the messy code before:

    here's what it looks like now:
    Code:
    <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?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by canadianjameson View Post
    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.

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #8
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by canadianjameson View Post
    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
    I think the fundamental problem is that you're trying to change the current page immediately before abandoning it.

    Try the links like this:
    Code:
    onclick="return bg_swap(this)"
    And the function
    Code:
    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:
    Code:
    bdy = document.getElementById("pageBody");
    is in open code within the <head>, move it to inside the bg_swap function.

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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?
    Last edited by canadianjameson; 09-29-2008 at 08:10 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by canadianjameson View Post
    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:
    Code:
    <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>

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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