Jquery problem

okay so i have 2 jquery effects on my events page on my website, one of the effects is the drop down main menu bar, and the other effect is when you hover over the image a caption shows up.
the drop down menu now appears to be happening on the images now which i dont want to happen, how do i sort this?
heres my html coding:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Events</title>
<link href="events.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="JS/jquery.js"></script>
  <script type="text/javascript" src="JS/jquery.easing.1.3.js">
</script>
  <script src="animated-menu.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
                    var thumbs = $("ul li img");
                    for (var i = 0, ii = thumbs.length; i < ii; i++){
                              if (thumbs[i].title && thumbs[i].title.length > 0)
                                        var imgtitle = thumbs[i].title;
                                        $(thumbs[i]).wrap('<div class="wrapper" />').
                                        after('<div class=\'caption\'>' + imgtitle + '</div>').
                                        removeAttr('title');
          $('.wrapper').hover(
                    function(){
                              $(this).find('img').animate({opacity: ".6"}, 300);
                              $(this).find('.caption').animate({top:"-85px"}, 300);
                    function(){
                              $(this).find('img').animate({opacity: "1.0"}, 300);
                              $(this).find('.caption').animate({top:"85px"}, 100);
</script>
</head>
<body>
<div class="cont">
<div class="logo"><img src="images/logo4.jpg" alt="logo"/>
      </div>
<div id="dropmenu">
    <div id="nav">
      <ul>
        <li class="green">
          <p><a href="#">Home</a></p>
          <p class="subtext">The front page</p>
        </li>
        <li class="yellow">
          <p><a href="events.html">Events</a></p>
          <p class="subtext">See what's on</p>
        </li>
        <li class="red">
          <p><a href="#">Nightclub</a></p>
          <p class="subtext">Fancy a drink?</p>
        </li>
        <li class="blue">
          <p><a href="#">About</a></p>
          <p class="subtext">Boring stuff</p>
        </li>
        <li class="purple">
          <p><a href="#">Contact</a></p>
          <p class="subtext">Get in touch!</p>
        </li>
      </ul>
    </div></div>
     <div class="search">
     </div>
<div class="search"><img src="images/search.jpg"/>
      </div>
          <div class="social">
          </div>
<div class="socialmedia"><img src="images/socialmedia.jpg"/>
      </div>
       <div class="perform">
         <ul>
        <li>
            <a>Performing This Month. . . </a>
          </li>
          </ul>
          </div>
<div id="caption">
<div class="bizzle">  
          <ul>
          <li><img src="images/bizzle.jpg" title="Lethal Bizzle" /></li>
          </ul></div>
          <div class="chipmunk">
          <ul> 
          <li><img src="images/chipmunk.jpg" title="Chipmunk" /></li></ul></div>
          <div class="skream">  
          <ul>
           <li><img src="images/skream.jpg" title="Skream" /></li></ul></div>
           <div class="jme">  
           <ul>
           <li><img src="images/jme.jpg" title="JME" /></li></ul></div>
           <div class="planb"> 
           <ul>
           <li><img src="images/planb.jpg" title="Plan B" /></li></ul></div>
           <div class="rizzle">  
           <ul>
           <li><img src="images/rizzle.jpg" title="Rizzle Kicks" /></li>
          </ul>
          </div>
          </div>
</div>
</body>
</html>

and here is the css for both effects:
div.wrapper{width:250px; height:169px; overflow:hidden; position:relative;  }
/*generic style for all div */
div.caption {
          font-family:Harabara;
font-size:34px;
letter-spacing:-2px;
position:relative;
text-align:center;
padding:25px 15px 15px 15px;
  background:url(images/caption.jpg) repeat-x;
  min-height:125px;
  color:#000;
   text-transform:capitalize;
   line-height:16px;
/*white fade*/
#caption ul li:nth-child(1) div.caption {
          font-family:Harabara;
          font-weight:bold;
          font-size:34px;
          letter-spacing:-2px;
          position:relative;
          text-align:center;
           padding:15px 15px 15px 15px;
           background:url(images/caption.jpg) repeat-x;
            min-height:115px;
             color:#000;
              text-transform:capitalize;
                    line-height:16px;
.bizzle{
          margin:110px 10px 10px -410px;
          float:left;
.chipmunk{
          margin:110px 10px 10px -140px;
          float:left;
.skream{
          margin:110px 10px 10px -25px;
          float:left;
.jme{
          margin:415px 10px 10px -850px;
          float:left;
.planb{
          margin:415px 10px 10px -583px;
          float:left;
.rizzle{
          margin:418px 10px 10px -300px;
          float:left;
#cont1 {
position:relative;
width:1000px;
margin: 0 auto;
#nav {
width:1100px;
height:40px;
position:absolute;
margin:-110px 10px 10px -100px;
z-index:2;
nav{ 
    margin:0; 
    padding:0; 
#dropmenu li{ 
    width:200px; 
    height:40px; 
    float:left; 
    color:#0CF;
          font-size:25px;
    text-align:center; 
    overflow:hidden; 
#dropmenu a{ 
    color:#FFF;
    text-decoration:none; 
#dropmenu p{ 
    padding:5px 15px; 
    .subtext{ 
        padding-top:20px; 
/*Menu Color Classes*/ 
.green{background:#000;} 
.yellow{background:#000;} 
.red{background:#000;} 
.purple{background:#000;} 
.blue{background:#000;}

Similar Messages

  • CSS or JQuery problem

    Hi, I am trying to get a nice little jquery menu effect that I have seen on to a site I'm building, along with the jquery coda-slider sliding panels.
    They both work fine in their own pages, but when I put the two on the same page, the nice menu effect breaks.
    Here's a link:
    http://www.matthewstuartdesign.co.uk/jqueryprob/index2.php
    Basically, I am assuming it to be a clash in jquery as one has jquery min 1.3.2 and the other has 1.4.1, but I have no idea of how to put it right... however, I am now wondering if it is actually a CSS issue because the menu is shifting which I think is breaking it's effect!!
    Please can you advise me? Have a look at the link and tell me if it's the fault of jquery or CSS. You see two links between the samples under where the coda-slider is meant to go.
    I have been doing this for two days now and I am seriously tired and just can't concentrate any more
    Anyway, i'd appreciate some advice, and thanks in advance.
    Mat

    I have tried it in a totally new page without any css other than that which relates to the menu and the slider, but I am still getting the same problem, so I assume it is a jquery problem...
    Anyway, I have just had a thought. Can I have more than one version of jquery.min.js on a page? Actually, I have one on the page and another on an server side include. One is version 1.3.2 and the other is 1.4.1. Are these clashing?

  • JQuery problems on my Mac Server 10.6.8.

    I just got involved with using JQuery within my HTML code and some works find, others give me a lot og -9951 ERRORS.  All the JQuery scripts are developed by the products I'm purchasing online, such as turn.js.  All the products developers are narrowing it down to a Server Problem as I can open any of my JQuery scfipted pages dirrectly on any browser but only have the problem on the web.  Also, when I place the pages on any other server it runs fine.  Does the Mac Server have to have some special settings enabled?

    Hi,
    The correct version of iCal for OSX 10.6.8 will be on your installer DVD of the operating system.
    See http://docs.info.apple.com/article.html?path=Mac/10.6/en/19535.html
    You should then run the OSX 10.6.8 Combi update.
    See http://support.apple.com/kb/DL1399
    Best wishes
    John M

  • Page is working ok in chrome and IE but not working in firefox. jquery problem i guess

    http://184.170.251.149/raschet-shkafa-kupe
    this page is working correctly in chrome and IE but not working in firefox, i cant click and of the dropdown menus(ДСП, доличество дверей). it was working perfectly prior firefox 18. can you please fix the compatibility problem ?

    I was referring to the second page in my above post.
    I disabled JavaScript as a test after loading the page with JavaScript enabled and that worked.<br />
    I also get the selects to open if I right-click instead of left-click the select.<br />
    That way the select get selected (shows a focus ring) and after that left-clicking works as well .
    This assumes that JavaScript is monitoring the left-click, but that script no longer works properly.
    A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.
    *http://forums.mozillazine.org/viewforum.php?f=25
    The helpers at that forum are more knowledgeable about web development issues.<br>
    You need to register at the MozillaZine forum site in order to post at that forum.

  • JQUERY PROBLEM causing big headache

    I have been unable to make a "simple" Jquery Cycle Slideshow work - despite numerous attempts.
    I'm using http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle as a tutorial but all I ever get are the images in a vertical column and not working as a slider or  just a single image showing.
    I'd be very grateful if someone could tell me what I'm doing wrong.
    The css & html is attached with the js available from the link.
    Thanks for any advice.
    Paul
    html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript" src="JQUERYjs/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="JQUERYjs/jquery.js"></script>
    <script type="text/javascript" src="JQUERYjs/scripts.js"></script>
    <link href="CSS/HARLEY.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="container">
        <div id="slideshow">
        <ul id="slides">
                <li><img src="11.jpg" alt="WEDDING" width="960" height="450" /></li>
                <li><img src="22A.jpg" alt="WEDDING" width="960" height="450" /></li>
                <li><img src="44.jpg" alt="WEDDING" width="960" height="450" /></li>
                <li><img src="77.jpg" alt="WEDDING" width="960" height="450" /></li>
                <li><img src="33A.jpg" alt="WEDDING" width="960" height="450" /></li>
          </ul>
        </div>
    </div>
    </div>
    </body>
    </html>
    css
    body, h1, ul, li {
        margin: 0; padding: 0; border: 0;
    body {
        background: #e8dbcb;
    #container {
    width:980px;
    height:auto;
    margin:25px auto;
        position: relative;
    h1 {
        width: 262px; height: 226px; margin: 0 auto; position: relative; top: 100px;
         text-indent: -9999px; z-index: 10;
    div#slideshow {
        width: 958px; height: 450px; padding: 15px 0 0 12px;
        background: url(images/border.png);
        overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
        position: relative; z-index: 5;
        div#slideshow ul#nav {
            display: none;
            list-style: none;
            position: relative; top: 210px; z-index: 15;
            div#slideshow ul#nav li#prev {
                float: left; margin: 0 0 0 40px;
            div#slideshow ul#nav li#next {
                float: right; margin: 0 50px 0 0;
            div#slideshow ul#nav li a {
                display: block; width: 80px; height: 80px; text-indent: -9999px;
                div#slideshow ul#nav li#prev a {
                    background: url(images/prev.png);
                div#slideshow ul#nav li#next a {
                    background: url(images/next.png);
        div#slideshow ul#slides {
            list-style: none;
            div#slideshow ul#slides li {
                margin: 0 0 20px 0;
    a {outline: none; }

    Many thanks for your spot on advice.
    I hope you can give further advice on the same subject.
    Everything was going great - Opera / FF / Chrome - but IE7 introduces a side scroll bar, unless I opt to allow scripts to run - where upon all images disappear.
    Again, any advice gratefully received !
    Paul

  • Flash and Jquery problem

    Hello,
    I have a website "http://www.checkoutthelatest.com/test/sebastian" which runs in iphone but the flash objects and jquery slide shows does not work when the site is loaded within the iphone.
    Could you please let me know if iphone supports jquery slide shows and embedded flash objects and youtube videos.
    I require the website to function properly within iphone 3G and 4.
    Please help.
    Regards,
    Sebas J

    However, the phone does support jQuery. I've used it in websites and seen it working just fine. Try different slideshow scripts to see if you can get it going. You won't be able to embed youtube video's in the slideshow unless you can work it out in HTML5 (which I can't help with)... as the other poster said - No flash.
    good luck.
    b

  • JQuery problem after ADF partial refresh

    Hi,
    I am using JDeveloper 10.1.3, and am trying to spice things up a little with some jQuery. However some of this code does not work as I expect after a partial refresh. In a simple page for testing purposes I have:
    bq. &lt;afh:script text=" \\     $(document).ready(function() { \\         oldBackgroundColor = $('#outputText').css( 'background-color' ); \\         $('#outputText').css( 'background-color', 'red' ); \\         newBackgroundColor = $('#outputText').css( 'background-color' ); \\         alert('background color was ' + oldBackgroundColor + ', now ' + newBackgroundColor); \\     }); \\ "/&gt;
    and
    bq. &lt;af:outputText partialTriggers="button" id="outputText" value="some text whose background color changes"/&gt; \\ &lt;af:commandButton partialSubmit="true" immediate="true" id="button" text="partial submit button"/&gt;
    When the page is initally loaded, the background color of the text is changed to red, and the alert is displayed saying something like 'background color was transparent, now red' (browser dependent).
    When the button is pushed, the background reverts to transparent (as expected as it is being loaded again). The alert is also displayed with the same message (indicating the color has been changed), but the background on the screen does not change.
    Is this what anyone would expect, and should it be possible? My javascript knowledge is pretty basic so I haven't got very far looking through the code trying to figure it out. Any ideas would be much appreciated.
    I am using version 1.2.6 of jQuery from [http://docs.jquery.com/Downloading_jQuery]
    The full source of the jspx is:
    &lt;?xml version='1.0' encoding='windows-1252'?&gt;
    &lt;jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:af="http://xmlns.oracle.com/adf/faces"
    xmlns:afh="http://xmlns.oracle.com/adf/faces/html"&gt;
    &lt;jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
    doctype-system="http://www.w3.org/TR/html4/loose.dtd"
    doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/&gt;
    &lt;jsp:directive.page contentType="text/html;charset=windows-1252"/&gt;
    &lt;f:view&gt;
    &lt;afh:html&gt;
    &lt;afh:head title="List"&gt;
    &lt;meta http-equiv="Content-Type"
    content="text/html; charset=windows-1252"/&gt;
    &lt;afh:script source="/javascript/jquery-1.2.6.js"/&gt;
    &lt;afh:script text="
    $(document).ready(function() {
    oldBackgroundColor = $('#outputText').css( 'background-color' );
    $('#outputText').css( 'background-color', 'red' );
    newBackgroundColor = $('#outputText').css( 'background-color' );
    alert('background color was ' + oldBackgroundColor + ', now ' + newBackgroundColor);
    "/&gt;
    &lt;/afh:head&gt;
    &lt;afh:body&gt;
    &lt;af:form&gt;
    &lt;af:outputText partialTriggers="button" id="outputText"
    value="some text whose background color changes"/&gt;
    &lt;af:commandButton partialSubmit="true" immediate="true" id="button"
    text="partial submit button"/&gt;
    &lt;/af:form&gt;
    &lt;/afh:body&gt;
    &lt;/afh:html&gt;
    &lt;/f:view&gt;
    &lt;/jsp:root&gt;

    I don't have 10g release in my computer right now.
    But I have tried the same in 11 + build of JDeveloper
    Done little changes and it worked
    below is the code
    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
    <af:document id="d1" title="My Test JQuery Page">
    <af:resource type="javascript" source="/js/jquery-1.4.4.min.js"/>
    <af:resource type="javascript">
    $(document).ready(function () {
    $("#outputText").css("background-color", "red");
    function changeColor() {
    $("#outputText").css("background-color", "yellow");
    </af:resource>
    <af:form id="f1">
    <af:outputLabel id="outputText"
    value="some text whose background color changes"/>
    <af:commandButton id="button" partialSubmit="true"
    clientComponent="true" text="partial submit button">
    <af:clientListener method="changeColor" type="action"/>
    </af:commandButton>
    </af:form>
    </af:document>
    </f:view>
    </jsp:root>

  • Jquery animation in Firefox

    Hi,
    I've made a simple animation with jquery - some images cycle a bit like a carousel. In every browser - including IE 6 - this runs very smoothly. However, in Firefox 4 it stutters and jerks.
    I have also observed this with other jquery carousels, and animations (fadeOut etc) made by other people. I have tested this on several computers - all seem to have the same problem.
    My first thought was that this might be a jquery problem - however, it works perfectly well in all other browsers, including Firefox 3.6

    Have you tested it with Firefox 4 hardware acceleration turned on and turned off ?
    * use Firefox button -> Options -> Advanced | General <br />| Browsing [X] Use Hardware acceleration ...

  • JQuery conflicting with spry

    Hi,
    I'm trying to use jquery with spry generated content. In the
    code below, I attempt to add a click event listener to fire an
    alert box. It seems as though the code does not work with the spry
    generated regions. Any ideas?
    Thanks
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script language="JavaScript" type="text/javascript"
    src="includes/xpath.js"></script>
    <script language="JavaScript" type="text/javascript"
    src="includes/SpryData.js"></script>
    <script language="javascript"
    src="js/jquery.js"></script>
    <script language="JavaScript" type="text/javascript">
    <!--
    var xmlStr = "<?xml version=\"1.0\"
    encoding=\"iso-8859-1\"?> \
    <employees xmlns=\"
    http://www.foo.com/employees\">
    <employee> \
    <id>55555</id> \
    <lastname>Smith</lastname> \
    <firstname>Edward</firstname> \
    <phone>(415) 333-0235 </phone> \
    <username>esmith</username> \
    </employee> \
    <employee> \
    <id>44444</id> \
    <lastname>Johnson</lastname> \
    <firstname>Neil</firstname> \
    <phone>(415) 333-9475 </phone> \
    <username>njohnson</username> \
    </employee> \
    <employee> \
    <id>33333</id> \
    <lastname>Williams</lastname> \
    <firstname>Steve</firstname> \
    <phone>(415) 333-4573 </phone> \
    <username>swilliams</username> \
    </employee> \
    <employee> \
    <id>22222</id> \
    <lastname>Jones</lastname> \
    <firstname>John</firstname> \
    <phone>(415) 333-9345 </phone> \
    <username>jjones</username> \
    </employee> \
    <employee> \
    <id>54125</id> \
    <lastname>Brown</lastname> \
    <firstname>Joe</firstname> \
    <phone>(415) 333-5938 </phone> \
    <username>jbrown</username> \
    </employee> \
    </employees>";
    var dsEmployees = new Spry.Data.XMLDataSet(null,
    "/employees/employee");
    var xmlDOMDocument = Spry.Utils.stringToXMLDoc(xmlStr);
    dsEmployees.setDataFromDoc(xmlDOMDocument);
    jQuery.noConflict();
    jQuery(document).ready(function(){
    jQuery(".elements").click(function() {
    alert("hello");
    //jQuery(this).addClass("selected");
    </script>
    <style type="text/css">
    .selected {
    border:1px solid;
    </style>
    </head>
    <body>
    <div class="elements">hello</div>
    <div id="container" spry:region="dsEmployees">
    <div class="elements"
    spry:repeat="dsEmployees">{firstname}</div>
    </div>
    </body>
    </html>

    Try puting the jquery in a seperated <script> tag.
    jquery and spry doesnt play nice together when they are in
    the same tag. (alteast thats how i fixed my jquery problem)
    If this doesnt help, try using a older version of jquery (as
    test ofcourse)
    I remember i had some problems with jquery and Spry when i
    updated jquery to its latest function.

  • I am having trouble with Treo 755p and Sync in my new Mercury car.

    I just got a Treo 755p.  I can connect and get the phone and Sync to communicate.  As soon as I make a call however, the sync system hangs up after one ring.  I had to replace my Treo 650p which worked well with this car.  Do I have a setting wrong in my phone.  Suggestions? 
    Post relates to: Treo 755p (Verizon)

    The jquery is there to animate the marquee, so even without the JS file the div container should still be showing up right? Part of the video tutorial said to switch to "live view" to make sure one of the div containers was positioning correctly, and when I do this nothing happens. It works for the guy on the tutorial so I am not sure what I am doing differently. Since it is not working at this point I have not added the jQuery, should I just assume it is a JQuery problem and continue on? I just don't understand why it is showing up in design view but just a blank white page in live view.

  • Previews not appearing in Web Module

    Veteran LR user here. Since updating, LR 5 consistently causes snags (for us) when creating web galleries. Here's the workflow: after editing raw files and applying settings, we have a nice folder of images cropped and ready to preview with client. 
    Now, when we go to the Web Module, the previews are grayed-back in the Filmstrip, and images won't appear in any of the web gallery templates (either custom ones we designed or the preset versions.) We've tried everything from flagging and staring images to get them to appear. Also save metadata to all the images in the folder.
    The only thing that seems to work is to close LR5--with backup and catalog optimization--then, we re-open LR5. That seems to "free up" the Web Module. Upon reopening LR5, our folder of images suddenly appears when we go to the Web Module.
    This is an unaceptable work around b/c closing and optimizing takes alot of time.  Making web proofing galleries used to be a snap in previous versions of LR, now we're stumped in LR5 trying to figure out what we're doing wrong. 
    Anyone's help would be very much appreciated! Thanks in advance.

    It isn't Lightroom itself, or everyone would be seeing it. I'm currently working on a new plugin myself and all is fine-useless to you, but it may reflect something in your setup, like corrupt preferences. There is also an occasional jQuery problem in Lightroom where the whole system needs a reboot to get Lightroom back in gear.
    I'd backup and remove preferences, then start Lightroom and see how it goes.
    http://www.lightroomforums.net/showthread.php?14226-Resetting-(or-Trashing-)-the-Lightroom -Preferences-file

  • Trouble with web browser

    I'm trying to use Safari on a Pc, but why is it that the main Apple page disappeared. and now it showss MSN home page?

    The jquery is there to animate the marquee, so even without the JS file the div container should still be showing up right? Part of the video tutorial said to switch to "live view" to make sure one of the div containers was positioning correctly, and when I do this nothing happens. It works for the guy on the tutorial so I am not sure what I am doing differently. Since it is not working at this point I have not added the jQuery, should I just assume it is a JQuery problem and continue on? I just don't understand why it is showing up in design view but just a blank white page in live view.

  • .flv movie quits when viewing in web browser

    I'm still having problems with my flash movies. I'm using the
    .flv playback component in flash and when I preview my movie (an
    .flv file) in flash it plays all the way through, but when I view
    through a web browser the movie quits after 25 seconds (it's 30
    seconds long). At 25 seconds in, the movie freezes (like when a DVD
    movie freezes/messes up and the jumbled up boxes appear) and then
    the movie quits even though it didn't have any problems loading.
    I've encoded using Adobe Media Encoder 5 different times and
    rerendered the movie from After Effects but am still having a
    problem. Anyone have any idea what the problem is?

    The jquery is there to animate the marquee, so even without the JS file the div container should still be showing up right? Part of the video tutorial said to switch to "live view" to make sure one of the div containers was positioning correctly, and when I do this nothing happens. It works for the guy on the tutorial so I am not sure what I am doing differently. Since it is not working at this point I have not added the jQuery, should I just assume it is a JQuery problem and continue on? I just don't understand why it is showing up in design view but just a blank white page in live view.

  • Why firefox sucks so bad

    I liked FF < 3.5 a lot. But not it's the worst experience I've ever had with browsers.
    After upgrading to 4.0 computer just slowed down. What happened? FF grows in memory from ~300MB to ~1.2GB for half number of opened tabs (). Growing in memory is now "default" behavior and I really love that feature in new FF.
    It crashes about twice a day now. Seems like second "great improvement". And sometimes after crash just cannot load the sessionstore.js the proper way so all open tabs are just lost.
    The funny thing - I wanted just give a bad feedback but the button on page redirected me to a "download a latest version" page (I'm running 5.0). Really, really funny: "... and remember John, just block the contact form to all these frustrated guys. And don't allow anybody to fill it until 8 hours after last crash. Because we RULE."

    Your Firefox profile may have become corrupted during your upgrade. In addition to the steps below, or when you upgrade again, you might need to migrate to a new profile.
    ''Here's the process to roll back now:''
    First, I recommend backing up your Firefox settings in case something goes wrong. See [https://support.mozilla.com/en-US/kb/Backing+up+your+information Backing up your information]. (You can copy your entire Firefox profile folder somewhere outside of the Mozilla folder.)
    Next, download and save Firefox 3.6 to your desktop for future installation. http://www.mozilla.com/firefox/all-older
    Close Firefox 5.
    You could install Firefox 3.6 over it (many have reported success) or you could uninstall Firefox first. If you uninstall, do not remove your personal data and settings, just the program.
    Unless you have installed an incompatible add-on, Firefox 3.6 should pick up where you left off. If there are serious issues, please post back with details.
    '''Regarding a new profile''', you can use the Profile Manager as described in this article: [https://support.mozilla.com/kb/Managing+profiles Managing profiles].
    To move key settings like bookmarks from your problem profile to the new profile, see: [https://support.mozilla.com/en-US/kb/Recovering+important+data+from+an+old+profile Recovering important data from an old profile].
    '''Regarding your jQuery problems''', that should be the subject of a different post, perhaps here: [http://forums.mozillazine.org/viewforum.php?f=25 mozillaZine Web Development board]. Separate forum, separate registration.

  • Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

    Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
    The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
    I realize the images are not ideally sized - I'll fix those once I get the pages to function.  Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
    The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
    I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
    I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
    Thanks in advance.
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Reardan Area Chamber of Commerce</title>
    <meta name="description" content="home page for Reardan Area Chamber of Commerce" />
    <meta name="keywords" content="Reardan WA, chamber of commerce" </>
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.js" type="text/javascript">  </script>
    <script type="text/xml">
    </script>
    <style type="text/css">
                                  #slideshow { 
                                      padding: 10px;
                                            margin:0; 
                                  #slideshow-caption{
                                            padding:0;
                                            margin:0;
                                  #slideshow img, #slideshow div { 
                                      padding: 10px;
                                      background-color: #EEE;
                                      margin: 0;
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              background: #004B8D;
              margin: 0;
              padding: 0;
              color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
              padding: 0;
              margin: 0;
    h1, h2, h3, h4, h5, h6, p {
              margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
               /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    .left
    position:absolute;
    left:0px;
    .center
    margin:auto;
    width:95%;
    .box
              position:relative;
              left:-90px;
              width:950px;
              height:350px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              z-index:1000;
    .slide{
        position:absolute;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
              border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
              color: #42413C;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #6E6C64;
              text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
              text-decoration: none;
    /* ~~this fixed width container surrounds the other divs~~ */
    .container {
              width: 960px;
              min-height:900px;
              padding:5px 0px 0px 0px;
              background: #E8F8FF;
              margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
              background: #E8F8FF;
              padding:10px 5px 0px 5px;
    .sidebar1 {
              float: left;
              width: 225px;
              margin: 60px;
              color: #FFFF0D;
              background: #595FFF;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
        z-index:-1;
    .sidebar2 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:2;
    .sidebar3 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:3;
    .content {
              padding: 0px 0px 0px 0px;
              width: 780px;
              float: left;
              background: #E8F8FF;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
              padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
              list-style: none; /* this removes the list marker */
              border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
              margin-bottom: 50px; /* this creates the space between the navigation on the content below */
              font: Arial Black, Verdana, , Helvetica, sans-serif;
              font-size:1.3em;
              font-weight:bold;
              z-index:2;
    ul.nav li {
              border-bottom: 0px solid #FFFF66; /* this creates the button separation */
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
              padding: 3px 0px 5px 0px;
              display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
              width: 185px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
              text-decoration: none;
              color: #FFFF0D;
              background: #595FFF;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
              background: #595FFF;
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
              color: #FFFFFF;
    /* ~~ The footer ~~ */
    .footer {
              padding: 10px 0;
              background:  #595FFF;
              color: #FFFF0D;
              position: relative;/* this gives IE6 hasLayout to properly clear */
              clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
              float: right;
              margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
              float: left;
              margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;
    -->
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header -->
      <a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
      <p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
      </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="about.html">About Us</a></li>
          <li><a href="history.html">Reardan History</a></li>
          <li><a href="activities.html">Activities</a></li>
          <li><a href="business.html">Business<br />
            Directory</a></li>
          <li><a href="about.html">Join the<br />
            Chamber</a></li>
           <li><a href="links.html">Links<br />
      <span style="font-size: 85%">Tourism</span><br />
          </a></li>
        </ul>
         <!-- end .sidebar1 --></div>
    <br />
    <br />
    <br />
    <br />
    <div class="box" +"slide">
      <script type="text/javascript">
    // BeginOAWidget_Instance_2559022: #slideshow
                               slideshowAddCaption=true;
    $(window).load(function() {
      $('#slideshow').cycle({
                        after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                        autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                        fx:                                        'blindX',// name of transition effect
                        pause:                              false,     // true to enable pause on hover
                        randomizeEffects:          true,  // valid when multiple effects are used; true to make the effect sequence random
                        speed:                              100,  // speed of the transition (any valid fx speed value)
                        sync:                              true,     // true if in/out transitions should occur simultaneously
                        timeout:                    5000,  // milliseconds between slide transitions (0 to disable auto advance)
                        fit:                              true,
                        height:                       '300px',
                        width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
    function slideshowOnCycleAfter() {
              if (slideshowAddCaption==true){
                                  $('#slideshow-caption').html(this.title);
    // EndOAWidget_Instance_2559022
      </script>
      <div id="slideshow">
        <!--All elements inside this will become slides-->
        <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
        <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
        <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
      <!--It is safe to delete this if captions are disabled-->
      <div id="slideshow-caption"></div></div>
    <div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
    Local News item
    <br />
    Another New item</p>
      <p align="center">lots of news this week<br />
        <br />
        <br />
        <br />
      </p>
    </div>
    <div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
      <div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
        <br />
        <br />
        <br />
        <br />
      </div>
    </div>
    <div class="content"><br />
    <br />
    </div>
    <div class="footer">
            <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
              <span style="font-size: x-small">[email protected]  - 509.796.2102</span><br />
            </p>
            <!-- end .footer -->
    </div></body>
    </html>

    If you DO want the slideshow overlaping the navigation try the below css:
    .sidebar1 {
        float: left;
        width: 225px;
        margin: 60px 0px 60px 60px;
        color: #FFFF0D;
        background: #595FFF;
        border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
    .box {
    float: left;
    margin-left:-60px;
    width:700px;
    height:350px;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;

Maybe you are looking for

  • Music - The requested URL was not found on this server

    Hi I have brought iphone 5 and most of all my songs are brought from itunes, I can not play my music application - everytime I click on a song to play I get an error message saying - "The requested URL was not found on this server" also all my music

  • Photoshop CC and RAW

    Yesterday I had the experience that opening files into RAW (after updating my Photoshop CC to version 14.....) and improving the content of my photos, I could not open these files directly into Photoshop CC version 14... I vave to save my photos in A

  • Stuck with grub problem (SOLVED)

    Today i tried to upgrade my Arch Linux, it downloaded everything that should be downloaded, it was installing upgrades but at the installing grub it stucks as like this "Copying /boot/grub/grub.cfg.pacsave to /boot/grub/grub.cfg" I've waited it for a

  • Can't find the tic-off for music in iTunes (only books and apps), Whats wrong?

    I run on PC with Vista

  • Canon 5D MII raw import problems in LR3

    My installation of LR3 will not import .CR2 raw files from the Canon 5D MII. My LR2 imports fine. What am I missing?