[RESOLVED] Javascript Hide/Show Function Issue

**Darkmessiah** · 02-06-2013 06:24 AM

Afternoon ladies and gents, iv been working on my wordpress site recently and iv ran into an issue with my navbar, the rollovers have stopped working somewhere along the way from uploading it to now. the coding isnt actually mine, its from Psd2cssonline, iv been through the original code and compared it to what iv got now and I cant see anythin different with the rollovers

My site is www.theweekendworkshop.com

here is a template from the site

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">

<?php

	/* Template Name: Upcoming Workshops
	*/

?>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- This file was originally generated at http://psd2cssonline.com on December 3, 2012, 7:44 pm -->
<!-- psd2css Online version 1.95 -->

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

<!-- Some META tags to help with Search Engine Optimization.  Please 
note however that META tags are NOT a magic bullet to get your web page
to the top of search engine rankings.  They are just part of that effort.  You 
can get more information by googling SEO or visiting the psd2css Online forums. -->
<meta name="description" content="Put the description of this page here" />
<meta name="keywords" content="Put keywords for this page here separated by commas" />
<meta name="generator" content="psd2css Online - Dynamic Web Pages from your Photoshop Design in seconds" />

<!-- We use the jquery javascript library for DOM manipulation and
some javascript tricks.  We serve the script from Google because it's
faster than most ISPs.  Get more information and documentation
at http://jquery.com -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- From the classic WordPress theme example -->
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
<!-- The CSS Reset from Eric Meyers -->
<!-- <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/cssreset.css" media="screen" /> -->

<!-- The Primary External CSS style sheet. -->
<style type="text/css" media="screen">
@import url( <?php bloginfo('template_url'); ?>/psd2css.css );
</style>

<!-- This is Drew Diller's PNG fix script that fixes the PNG
transparency problem with IE6.  It's available from here:
http://www.dillerdesign.com/experiment/DD_belatedPNG -->
<!--[if lt IE 7 ]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/DD_belatedPNG_0.0.8a-min.js"></script>
<![endif]-->

<!-- All the javascript generated for your design is in this file -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/psd2css.js"></script>

</head>
<body>

  <!-- This is '_empty_center' -->
  <div id="Layer-1" class=" empty center"  >

    <!-- This is '_link' -->
    <div id="Layer-6" class=" link"  >
      <a href="http://theweekendworkshop.com/"><img src="<?php bloginfo('template_url'); ?>/Layer-6.png" width="258" height="406" alt="_link" class="pngimg" border="0" /></a></div>

    <!-- This is 'Shape 2' -->
    <div id="Layer-5" class="Shape 2"  >
      <img src="<?php bloginfo('template_url'); ?>/Layer-5.png" width="969" height="139" alt="Shape 2" class="pngimg" />
      <!-- This is 'Get Involved_linkover' -->
      <div id="Layer-16" class="Get Involved linkover"  >
        <a href="http://theweekendworkshop.com/?page_id=4"><img src="<?php bloginfo('template_url'); ?>/Layer-16.png" width="161" height="72" alt="Get Involved" class="pngimg" border="0" /></a></div>

      <!-- This is 'Get Involved_link' -->
      <div id="Layer-15" class="Get Involved link"  >
        <a href="http://theweekendworkshop.com/?page_id=4"><img src="<?php bloginfo('template_url'); ?>/Layer-15.png" width="148" height="67" alt="Get Involved" class="pngimg" border="0" /></a></div>

      <!-- This is 'Previous Workshops_linkover' -->
      <div id="Layer-14" class="Previous Workshops linkover"  >
        <a href="http://theweekendworkshop.com/?page_id=10"><img src="<?php bloginfo('template_url'); ?>/Layer-14.png" width="199" height="72" alt="Previous Workshops" class="pngimg" border="0" /></a></div>

      <!-- This is 'Previous Workshops_link' -->
      <div id="Layer-13" class="Previous Workshops link"  >
        <a href="http://theweekendworkshop.com/?page_id=10"><img src="<?php bloginfo('template_url'); ?>/Layer-13.png" width="182" height="67" alt="Previous Workshops" class="pngimg" border="0" /></a></div>

      <!-- This is 'Upcoming Workshops_linkover' -->
      <div id="Layer-12" class="Upcoming Workshops linkover"  >
        <a href="http://theweekendworkshop.com/?page_id=14"><img src="<?php bloginfo('template_url'); ?>/Layer-12.png" width="199" height="72" alt="Upcoming Workshops" class="pngimg" border="0" /></a></div>

      <!-- This is 'Upcoming Workshops_link' -->
      <div id="Layer-11" class="Upcoming Workshops link"  >
        <a href="http://theweekendworkshop.com/?page_id=14"><img src="<?php bloginfo('template_url'); ?>/Layer-11.png" width="182" height="67" alt="Upcoming Workshops" class="pngimg" border="0" /></a></div>

      <!-- This is 'About Us_linkover' -->
      <div id="Layer-10" class="About Us linkover"  >
        <a href="http://theweekendworkshop.com/?page_id=16"><img src="<?php bloginfo('template_url'); ?>/Layer-10.png" width="117" height="72" alt="About Us" class="pngimg" border="0" /></a></div>

      <!-- This is 'About Us_link' -->
      <div id="Layer-9" class="About Us link"  >
        <a href="http://theweekendworkshop.com/?page_id=16"><img src="<?php bloginfo('template_url'); ?>/Layer-9.png" width="107" height="66" alt="About Us" class="pngimg" border="0" /></a></div>

      <!-- This is 'fb_linkover' -->
      <div id="Layer-8" class="fb linkover"  >
        <a href="https://www.facebook.com/TheWeekendWorkshop"><img src="<?php bloginfo('template_url'); ?>/Layer-8.png" width="54" height="54" alt="fb" class="pngimg" border="0" /></a></div>

      <!-- This is 'fb_link' -->
      <div id="Layer-7" class="fb link"  >
        <a href="https://www.facebook.com/TheWeekendWorkshop"><img src="<?php bloginfo('template_url'); ?>/Layer-7.png" width="36" height="36" alt="fb" class="pngimg" border="0" /></a></div>

    </div>

    <!-- This is '_frame' -->
    <div id="Layer-2" class=" frame"  >

      <!-- This is 'Frame_Top_1000' -->
      <div class="Layer-1000 Frame Top 1000 pngimg" >

      </div>

      <!-- This is 'Frame_Middle_1001' -->
      <div class="Layer-1001 Frame Middle 1001 pngimg" >

        <!-- This is 'content_wordpress' -->
        <div class="Layer-3 content wordpress editable" >
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      
          
      
          <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
             <h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
             
      
             <div class="storycontent">
                 <?php the_content(__('(more...)')); ?>
             </div>
      
             
      
          </div>
      
          
      
          <?php endwhile; else: ?>
             <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
          <?php endif; ?>
      
          <?php posts_nav_link(' — ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
      
          <?php wp_footer(); ?>
      
        </div>

      </div>

      <!-- This is 'Frame_Bottom_1002' -->
      <div class="Layer-1002 Frame Bottom 1002 pngimg" >

      </div>

    </div>

  </div>

<!-- This is the p2cedit Text Stylizer dialog and tools.  It will not exist
in the code for your final page. -->
<div id="p2c-edit" style="display: none;"></div>
<script>$('#p2c-edit').load('/app/p2cedit/p2cedit.html');</script>


</body>
</html>

**Darkmessiah** · 02-06-2013 06:25 AM

and here is the javascript

Code:

//
// psd2css.js
//
//   This is where all the javascript required by your design is written.
//
//   Originally generated at http://psd2cssonline.com 
//   December 3, 2012, 7:44 pm with psd2css Online version 1.95

$(document).ready(function(){

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

  // This is required for the PNG fix to work.
  if (window.DD_belatedPNG)
    DD_belatedPNG.fix('.pngimg');
	
  // This is some javascript to stop IE from displaying the img alt attributes
  // when you mouse over imagess.  If you would like IE to display the alt attributes,
  // just comment out the following 4 lines.  Don't worry, if you leave this in 
  // place, your ALT attributes are still readable by the search engines.
  var tmpalt;
  $("img").hover( 
    function(){ tmpalt = $(this).attr( "alt" ); $(this).attr( "alt", "" ); },
    function(){ $(this).attr( "alt", tmpalt ); });

  // This is code to handle all of the _linkover events.  It works by
  // creating a special Wrap class, adding it to the link and linkover
  // divs of each link and linkover pair, and assigning a hover event to
  // that.
  $("#Layer-8").addClass("Wrap-7-8").hide();
  $("#Layer-7").addClass("Wrap-7-8");
  $(".Wrap-7-8").hover(
    function(){ $("#Layer-8").show(); $("#Layer-7").hide(); },
    function(){ $("#Layer-7").show(); $("#Layer-8").hide(); });
  $("#Layer-10").addClass("Wrap-9-10").hide();
  $("#Layer-9").addClass("Wrap-9-10");
  $(".Wrap-9-10").hover(
    function(){ $("#Layer-10").show(); $("#Layer-9").hide(); },
    function(){ $("#Layer-9").show(); $("#Layer-10").hide(); });
  $("#Layer-12").addClass("Wrap-11-12").hide();
  $("#Layer-11").addClass("Wrap-11-12");
  $(".Wrap-11-12").hover(
    function(){ $("#Layer-12").show(); $("#Layer-11").hide(); },
    function(){ $("#Layer-11").show(); $("#Layer-12").hide(); });
  $("#Layer-14").addClass("Wrap-13-14").hide();
  $("#Layer-13").addClass("Wrap-13-14");
  $(".Wrap-13-14").hover(
    function(){ $("#Layer-14").show(); $("#Layer-13").hide(); },
    function(){ $("#Layer-13").show(); $("#Layer-14").hide(); });
  $("#Layer-16").addClass("Wrap-15-16").hide();
  $("#Layer-15").addClass("Wrap-15-16");
  $(".Wrap-15-16").hover(
    function(){ $("#Layer-16").show(); $("#Layer-15").hide(); },
    function(){ $("#Layer-15").show(); $("#Layer-16").hide(); });

iv spent a few hours messing about already so any help you can give me would be really appreciated!

John

Thread: [RESOLVED] Javascript Hide/Show Function Issue

Thread Tools

Display

[RESOLVED] Javascript Hide/Show Function Issue

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions