INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

(OP)
I'm currently using the Photo Lounge 1.0 theme on a wordpress site. The drop down menu works great in Firefox, however other browsers such as IE and Chrome, it does not work at all.

I was having an issue with a "jquery not defined" error but was able to resolve that, however the menu still does not work properly.

Does anyone know off the top of their head things I could check for this? If any information is needed, let me know.

The website is www.starvalleylandscape.com

Enkrypted
A+
 

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

if you look at the source being output you see the following

CODE

<script type="text/javascript" src="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/jquery-1.2.1.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/tango/skin.css" />
<script type="text/javascript" src="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/captify.tiny.js"></script>

so you should see that jquery is being loaded twice and jcarousel is being loaded twice.

change the plugins or your header.php file so that you have only this

CODE

<link rel="stylesheet" type="text/css" href="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/tango/skin.css" />
<script type="text/javascript" src="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="http://www.starvalleylandscape.com/wp-content/themes/photolounge/js/captify.tiny.js"></script>
 

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

(OP)
I modified it and it still doesn't appear to be working properly

Enkrypted
A+
 

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

(OP)
Here is the code for the header.php file

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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<?php include (TEMPLATEPATH.'/get-theme-options.php'); ?>
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>


<!--jcarousel http://www.onextrapixel.com/2009/04/28/jquery-jcarousel-lite-with-pretty-image-captions-that-appear-on-rollover/-->

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/captify.tiny.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/js/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/js/tango/skin.css" />

<!--end-->

<!--://www.onextrapixel.com/2009/04/28/jquery-jcarousel-lite-with-pretty-image-captions-that-appear-on-rollover/-->

<script type="text/javascript">
    //jCarouselLite
    $(function() {
        $(".slider").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        auto:2000,
        speed:1000,
        visible: 6
    });
});

//Captify
$(document).ready(function(){
    $('img.captify').captify({
    // all of these options are... optional
    // speed of the mouseover effect
    speedOver: 'fast',
    // speed of the mouseout effect
    speedOut: 'normal',
    // how long to delay the hiding of the caption after mouseout (ms)
    hideDelay: 500,
    // 'fade', 'slide', 'always-on'
    animation: 'slide',
    // text/html to be placed at the beginning of every caption
    prefix: '',
    // opacity of the caption on mouse over
    opacity: '0.7',
    // the name of the CSS class to apply to the caption box
    className: 'caption-bottom',
    // position of the caption (top or bottom)
    position: 'bottom',
    // caption span % of the image
    spanWidth: '100%'
    });
});
</script>

<!-- End Featured Posts -->

<meta name="description" content="<?php echo $slr_keywords; ?>"/>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style type="text/css" media="screen">
</style>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

<!--[if IE 7]>
<style type="text/css">
#header_bottom_right p {margin-top:20px;}
#menu ul {    padding:0;    margin:18px 0 0 -80px;}
.slider{margin-top:-4px;width:100%;}    
widgettitle h2 {margin-left:-20px;}
.slider {border-right:2px solid <?php echo $slr_menu_bg; ?>;border-left:2px solid <?php echo $slr_menu_bg; ?>;}
.slider ul li img {     height:109px;     width:163px; }
</style>
<![endif]-->



<style type="text/css">
.slider {border-top:3px solid <?php echo $slr_menu_bg; ?>;border-bottom:3px solid <?php echo $slr_menu_bg; ?>;}
.slider ul li {     border-right:3px solid <?php echo $slr_menu_bg; ?>;}
#menu li a {color:<?php echo $slr_menu_font; ?>; }
#menu li a:hover  {color:<?php echo $slr_menu_fonthover; ?> ;}
#menu ul li a:hover {color:<?php echo $slr_menu_fonthover; ?>;}
a {color:<?php echo $slr_link_color; ?>;}
#page_line {background-color:<?php echo $slr_menu_bg; ?>;}
body {    color:<?php echo $slr_fontcolor; ?>;}
h2, h2 a, h2 a:visited, h3 {color:<?php echo $slr_headercolor; ?>;    }    
.grid_4 h2 {color:<?php echo $slr_headercolor; ?>;}        
.grid_4 a {    color:<?php echo $slr_fontcolor; ?>;}    
.footer ul.blogroll li a{color:<?php echo $slr_fontcolor; ?>;}
.grid_4 li{color:<?php echo $slr_fontcolor; ?>;}

</style>

</head>

<!-- Insert Your Google Analytics Code Here -->

  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-9901045-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<!--End Google analytics code -->


<body <?php body_class(); ?> style="background:url('<?php echo $slr_bg_image; ?>') <?php echo $slr_main_bg; ?> repeat top center;">


<div id="pageborders">
<div id="page">
<div id="header">    
    <div id="logoimg" style="background-color:<?php echo $slr_logo_bg; ?>; padding:15px 0;">
        <a href="<?php echo get_option('home'); ?>"><img src="<?php echo $slr_logo; ?>" alt ="<?php bloginfo('name'); ?>"/></a>


        
   
    </div>

    <ul id="menu" style="background-color:<?php echo $slr_menu_bg; ?>;">
    <div id="menu_left">
             <li>
                <a href="<?php echo get_option('home'); ?>/">HOME</a>
               </li>
           
             <li>
                     <a href="<?php echo $slr_itemlink; ?>" target="_blank"><?php echo $slr_itemtext; ?></a>
            </li>
            
            <?php if($slr_include){
             wp_list_pages('title_li=&include='.get_option("slr_include"));
            }else{
             wp_list_pages('title_li=');  }?>
             
              <?php if($slr_archives == "false") {  ?>

            <li><a href="#">ARCHIVES</a>
                <ul style="background-color:<?php echo $slr_menu_bg; ?>;">
                <?php wp_get_archives('monthly&limit=12');?>
                </ul>
            </li>        
<?php } ?>

<?php if ($slr_categories == "false") { ?>

            <li><a href="#">CATEGORIES</a>
                <ul style="background-color:<?php echo $slr_menu_bg; ?>;">
                <?php wp_list_categories('show_count=&title_li=0'); ?>
                </ul>
            </li>    
<?php } ?>
             
             
      </div>
      <div id="menu_right">       
            


         
           <div id="search1">
                        <form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
                            <input type="text" class="field" name="s" id="s"  value="<?php _e('Enter keywords...') ?>" onfocus="if (this.value == '<?php _e('Enter keywords...') ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Enter keywords...') ?>';}" />
                            <input class="submit btn" type="image" src="<?php bloginfo('template_directory'); ?>/images/ico-search.png" value="Go" />
                        </form>
          </div>
                      
          <div id="rss">
          <a href="<?php bloginfo('rss_url'); ?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/rss.png" title="RSS" height="30px" width="30px" /></a>
          </div>
          </div>
                         
</ul>

    
    
    
</div>


    <?php include (ABSPATH.'wp-content/flashfader/flashfaderhtml.txt'); ?>      
    
<div id="header_bottom">

    <div id="header_bottom_left">
      <div class="profile_vert"><img style="border:5px solid <?php echo $slr_menu_bg; ?>;" src="<?php echo $slr_profile; ?>" title="<?php echo $slr_profile_text; ?>" class="captify" alt="<?php echo $slr_profile_text; ?>"/></div>
    </div>
     
    <div id="header_bottom_right">
        <p>About <?php echo $slr_studio; ?></p>
        <p><?php echo $slr_about; ?></p>
    </div>
    <div id="page_line">
    </div>
</div>

Enkrypted
A+
 

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

then I would guess that there is something wrong with the menu.

you have not, by the way, explained in what way the menu is not working.  

regrets but I do not have IE installed so can suggest nothing beyond cleaning up your javascript as posted.

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

(OP)
The menu is just not providing the drop down lists like it should when hovered over. It appears that only FF works because it doesn't work in IE or Chrome.

Enkrypted
A+
 

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

it appears to work for me in chrome safari and firefox.

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

(OP)
Not sure how you managed to see it as working. I tried IE, Opera, Safari and Chrome on 3 different computers and none are working for me. (Opera comes closest as it looks like the drop down items appear, but it seems like the list drops behind the photos under the menu so they are out of sight)

Enkrypted
A+
 

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

http://dl.dropbox.com/u/194358/Screen%20shot%202010-09-10%20at%2010.33.35%20PM.png" border="0">

works fine for me.

try setting the z-index on the menu very high if it is not working in some browsers for you

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

(OP)
Yeah I tried setting the z-index to a high number and still didn't see any results. I am beginning to think there are serious issues with this theme. I am going to have them choose another theme and see if the problem is resolved.

Enkrypted
A+
 

RE: Drop Down Menu Not Working in IE - Photo Lounge 1.0 Theme

i wonder why my images did not display

here they are



Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close