3 replies [Last post]
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Hi all,

I know this is a CSS forum and not a jquery one but I thought I'd try my luck before signing up to another forum.

The site in question is http://kpgfs.com

Please excuse the shocking js, I pieced it together before I learnt jQuery properly.

My problem is with recreating the index page using jQuery 1.5.

I cannot for the life of me get the same animation working using 1.5 and proper markup - that is, without two columns.

I'll post my current attempts as soon as I can but in the meantime does anybody have any pointers?

Verschwindende wrote:
  • CSS doesn't make pies

Tags:
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

A tricky bit of scripting

A tricky bit of scripting there. Haven't a clue why updating the JQ library would have issues. Is there not a changelog for versions that might clue one in to any fundamental changes, or, and I note that JQ is now at 1.6, can you not incrementally try older versions older verions

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Thanks for taking pity on

Thanks for taking pity on me!

Tried upgrading to 1.6 and jQuery UI 1.8.13 (from 1.8.11), still not working properly. Had a look through changelog, can't see anything obvious.

jQuery for section:

    // index page link clicks
    $("#index li a").click(function() {
      var target = $(this).attr('href'); // get clicked link target
      $('li#nav-contact a, li#nav-services a').animate({"width": "138px", backgroundPosition: "100% 0", marginLeft: '138px'}, 200);
      $('li#nav-contact a, li#nav-services a').delay(150).animate ({marginTop: '-103px'}, function() {document.location=target;});
      return false; // remove standard link
    });

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <title>KPG Financial Services</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
  </head>
 
<body id="index">
  <h1> <a href="#">KPG Financial Services</a></h1>
 
  <ul id="links">
    <li id="nav-about"><a href="about/" title="About Us">About Us</a></li>
    <li id="nav-planning"><a href="planning/" title="Financial Planning">Financial Planning</a></li>
    <li id="nav-services"><a href="services/" title="Services">Services</a></li>
    <li id="nav-contact"><a href="contact/" title="Contact">Contact</a></li>
  </ul>
 
<?php include_once('copyright.html'); ?>
 
</body>
</html>

CSS for links:

/* index.html navigation links */
 
ul#links, ul#links li {
  background: #fff;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}
 
ul#links {overflow: auto; position: relative;}
ul#links li {float: left; position: relative; width: 276px;}
 
ul#links li a{
  outline: 0;
  height: 100px;
  display: block;
  text-indent: -999em;
  background-repeat: no-repeat;
  background-position: top right;
}
 
li#nav-about a:hover, li#nav-planning a:hover {background-position: 0 0; border-right: 85px solid #fff;}
li#nav-services a:hover, li#nav-contact a:hover {background-position: -85px 0; border-left: 85px solid #fff;}
 
li#nav-about a {background: url(images/nav-about.jpg);}
li#nav-planning a {background: url(images/nav-planning.jpg);}
li#nav-services a {background: url(images/nav-services.jpg);}
li#nav-contact a {background: url(images/nav-contacts.jpg);}
 
#index li#nav-services {clear: both;}

I've still got the old version on my HDD, I'll see if upgrading to 1.6 breaks that too!

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Grasping at straws, and it

Grasping at straws, and it shouldn't matter but you might as well close the space on: animtate ({

I also seem to recall skimming through docs recently that methods and syntax of passing parameters to those functions can change so probably worth checking that those all hold true.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me