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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Issues with the Hide/Show Function

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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Fast look and it seems you have placed a javascript
    Code:
    <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    inside your main js. Does it need to be here?

    You need to add }); to close the $(document).ready(function(){

    Removed line 10. Ran program and got nothing.


  •  

    Posting Permissions

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