css AND jquery failure within header.php

  • Resolved theblacksheep

    (@theblacksheep)


    14 years, 3 months ago

    hello all,

    firstly i am grateful to you all for taking the time to read through this.

    i am in the process of developing a simple theme and i want to implement a rollover effect main menu, with which i have had no problem creating elsewhere on sites not using wordpress, using an image file, through a well known process using css and jquery; a similar effect can be seen here dragoninteractive.com.

    the problem is that no part of the menu is displaying when i view the index page of the site, though if you move the cursor to where the menu should be, it will change to a hand pointer and you can click on the (invisible) ‘link’.

    i am testing the site on my mamp server before i upload it. in dreamweaver’s live view i can see the menu images but the rollover effect is only using the static images, as does a regular hover/no hover link, without fade in/out.

    here is the entire header.php file:

    <?php

?>
<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php
function my_init_method() {
    wp_enqueue_script('jQuery');
}    

add_action('init', my_init_method);
?> 

<?php wp_head(); ?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

jQuery(document).ready(function ($) {

   $(function () {
        if ($.browser.msie && $.browser.version < 7) return;

        $('#navigation li')
            .removeClass('highlight')
            .find('a')
            .append('<span class="hover" />').each(function () {
                    var $span = $('> span.hover', this).css('opacity', 0);
                    $(this).hover(function () {
                        // on hover
                        $span.stop().fadeTo(500, 1);
                    }, function () {
                        // off hover
                        $span.stop().fadeTo(1000, 0);
                    });
                });

    });

</script>

</head>
<body <?php body_class(); ?>>

<style type="text/css" media="screen">

#navigation {
  		list-style: none;
}

#navigation li {
	float:left;
	padding: 0 0 0 60px;
}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
  height: 212px;
  width: 400px;
        position: relative;
		display: block;
		background: url('images/mainmenu.png') 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.about {
  background-position: 0 0;
  height: 53px;
}

#navigation .highlight a.about:hover,
#navigation a.about .hover {
  background-position: -400px 0;
  height: 53px;
  }

#navigation a.contact {
  background-position: 0 -53px;
  height: 53px;
  }

#navigation .highlight a.contact:hover,
#navigation a.contact .hover {
  background-position: -400px -53px;
height:53px;
}

</style>

<div id="page">

<div id="header" role="banner" onclick="location.href='#';" style="cursor: pointer;">
	<div id="headerimg">

		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>

    <div id ="menu">

          <ul id="navigation">
            <li class="highlight"><a href="#" class="about"><span>About</span></a></li>
            <li class="highlight"><a href="contact.html" class="contact"><span>Contact</span></a></li>

          </ul>
      </div>
</div>
</div>

<style type="text/css" media="screen">

#menu {
	position:absolute;
	margin-left: 400px;
}
</style>
</body>

    i have played around with the calling of the jquery, positioning the menu elsewhere on the page, copying the css into the stylesheet, all without success.

    the index.php file contains only the get header tag, and the header image i can see.

    any help with this is much appreciated.

    s..

Viewing 2 replies - 1 through 2 (of 2 total)
  • Brandon Allen

    (@cnorris23)

    14 years, 2 months ago

    First of all, the css needs to go inside the <head></head> tags, or inside a css file. Second, you’re calling two versions of jQuery, and two different version at that. You’re calling WP’s version (1.3.2) and the one from Google (1.4). You either need to remove

    <?php
function my_init_method() {
    wp_enqueue_script('jQuery');
}

    or
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js" charset="utf-8"></script>
    Can’t guarantee that’s your problem, but you’re almost certainly getting conflicts.

    Thread Starter theblacksheep

    (@theblacksheep)

    14 years, 2 months ago

    ok, thanks cnorris, that wasn’t the problem but i figured it out for now, so far so good. i got rid of the “function init method” line and just stuck to <?php wp_enqueue_script(‘jquery’); ?>, and changed every $ to jQuery. i know that may cause conflicts later. the link that might help anyone else, wordpress support jquery question. any plugins, etc, might cause havoc, but we’ll see when we get there.

    grazie all.

    s..

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘css AND jquery failure within header.php’ is closed to new replies.