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

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

Similar Messages

Is anyone using iPhoto having a problem with the slide show using shatter where it does not let you put a title over photo?

Is anyone using iPhoto having a problem with the slide show using shatter where it does not let you put a title over photo? It use to work but it no longer lets you place a title over the opening photo.

Is your signature still current?(iPhoto '08, OS X Mountain Lion (10.8.4)) I can confirm this for iPhoto '11; Shatter will only show the text slide title between the slides. Ken Burns and Classic theme can still be set to overlay the caption and title directly over the slides.

How can I burn on a DVD a slide show created with iDvd ?

I try to burn a DVD with a slide Show I create using iDvd. If I whatc the slide show using my Mac all is OK.
When I burn that slide show on a DVD and I put the DVD in my DVD reader, conected to the television, the quality of the images become very poor.
What's appens ??
Thanks
Ezio

Hi
When I burn that slide show on a DVD and I put the DVD in my DVD reader, conected to the television, the quality of the images become very poor.
What's appens ??
As I see it - it falls back on that DVD is as STANDARD only Interlaced SD-Video at it's best (even commercial made ones)
The Quality You see on Your Mac is prior to this down-scaling process.
If You need higher quality (and this includes several problems)
• DVDs can not be used
• You can try Blu-Ray (short one on DVD disks) - BUT You also need a Blu-Ray Player as a PlayStation 3 (you also need a program that can author BD-Disks as Roxio Toast™)
• You can try to Export as HD and to an USB-Memory stick - if You have any device that can take this
• You can connect a Mac to a big sized flat-screen TV - and playback this way
End of ideas.
Yours Bengt W

Are .mov files usable in PE 13? If not, can PE 13 convert them to a usable format? Will the result be usable in a slide show created with Photoshop Elements 13?

Are .mov files usable in PE 13? If not, can PE 13 convert them to a usable format? Will the result be usable in a slide show created with Photoshop Elements 13?

jayarl
Please do not duplicate thread. It gets confusing for you as well as for those trying to respond to your question.
I have replied to your question in your other thread.
https://forums.adobe.com/thread/1662961
Please continue the discussions there.
A moderator will probably delete or close one of the duplicates as soon as seen.
Just a note...Photoshop Elements 13 and Premiere Elements 13 are standalone products. Each comes with the
Elements Organizer 13. When both are on the same computer, they share the same Elements Organizer 13.
ATR

Making Quicktime slide shows (videos) with Windows

Hello. With the Mac platform, I am able to use my photo program, iPhoto, export photos from it and make a Quicktime slide show (video, with accompanying music from my music program, iTunes. Is this also possible with Windows, ie: where would the 'Export' command be and how would music be integrated into it? Any other helpful comments would be appreciated. Thank you.

You can open many different audio and image formats with the Windows version of QuickTime Pro. To assemble a slide show of still images you could open a folder of liked sized, sequentially named images and add that new file "scaled" to the audio track.
You could also open the audio track and "add scaled to selection" your individual image files. This method would allow you set the duration of each slide to different values but would limit your show to 98 images (99 track limit).
This method could also use different image dimensions, different "offsets", transparency "blends" and mask layers. Depending on your intended distribution format you could make HD sized QuickTime movies with multiple images displaying simultaneously (Brady Bunch style).
One of my older QuickTime files made using still images:
http://homepage.mac.com//kkirkster/03war

Since updating to the new 3.6.14 Firefox, I cannot get pictures (i.e. pictures with recipes), slide shows (health), email links, etc. Frustrating!!! Please help!

Each time there is a new update on Firefox, I lose information, etc. that I had with the old version. Since updating to the new 3.6.14 Firefox, I cannot get pictures (i.e. pictures with recipes), slide shows (health) email links, etc. Frustrating!!!

See:
* http://kb.mozillazine.org/Images_or_animations_do_not_load
* You can see the permissions for the domain in the current tab in Tools > Page Info > Permissions
* You can check the exceptions in Tools > Options > Content: Load Images > Exceptions
* You can check the Tools > Page Info > Media tab for blocked images (scroll through all the images)
There are also extensions (Tools > Add-ons > Extensions) that can block images.

PLEASE HELP. URGENT- Creating a slide show presentation with music

Good day. I would like to create a slide show presentation with music attached to it. i tried it once with a few pistures and it worked. now, i have around 3 hundred pictures and would like to create a slide show but unfortunately the same music keeps on playing over and over again. once the 1st music is done and there are still pictures to be shown, can i use another music title? how do i do this? please help....

Place the individual music files into a new iTunes playlist. Choose it (not the individual files) by hitting the OK button.

Adding Bottom Margin Pixels for IE Conditional Comment - JQuery Slide Show

My JQuery slide shows looks great on all browsers except IE...the div below the slide show with written text is covered by the slide images when I go live with it in IE only. I realize the soluion is to add a conditional comment for IE by comanding 300px to the bottom margin of the div#. I've created a separate .css file (ie.css) and created a duplicate #div rule. In my source code, I've added:
 (yes, the new css file is located within a "css" folder on the root.)
Now, so that only IE takes the command off of my new "ie.css" file and not the other browsers, what should I have for the margin rule? I've tried the follwing and a billion other variations with no luck.

Where am I going wrong here?
BIG Thanks
site ref: www.thethinman1934.com/thethinman

Chris Wessling wrote:
 (yes, the new css file is located within a "css" folder on the root.)
I might be punchy, but I can't find
http://www.thethinman1934.com/css/ie.css
Nor can I find a link to it

HT3180 Anyone having trouble with Netflix not showing up in the internet menu? I am trying to do a reset, but it says it can't download latest updates try again later.

Anyone having trouble with Netflix not showing up on the Internet Menu? I have tried to do a reset and then restore, but it says that "the latest update download cannot be done at this time, try again later"

If your problem persists get yourself a micro USB cable (sold separately), you can restore your Apple TV from iTunes:
Remove ALL cables from Apple TV. (if you don't you will not see Apple TV in the iTunes Source list)
Connect the micro USB cable to the Apple TV and to your computer.
Open iTunes.
Select your Apple TV in the Source list, and then click Restore.

V3 slide show loses it's navigation

I'm finding that the full screen slide show loses it's navigation, and skips to different pictures at random. This worked rock solid in V2.
Do I need to re-install?

Maybe I am doing something wrong...
I am viewing the album by "folder location".
The thumbnails show up, sorted by file name.
So far, so good.
When I select a sequence of pictures and hit F11,
I get a slideshow sorted differently than the
thumbnail sequence (oldest to newest, I think..)
Not what I was looking for.
In V2, this seemed to work better.
How do I "sort by name"?

Trouble with making slide show VCD or copying photos to CD

I have saved approximately 200 photos and made a copy of the photos on a cd. The problem is that some of the photos copied horizontally instead of in vertical format.....the photos where all properly showing on the PSE7 organizer...but about 13 copied in the wrong format??? Then I tried making a slide show with music....works fine in the PSE7 program, but when I went to output to VCD, nothing copied....except some files that don't contain the photos?
Russ

1. Reduce the image size 1000 x 750 if you are using high resolution images.
2. Use windows supported codec background music for slide show.
3. Update the latest audio/video drivers.

Music with a slide show

In I tunes, I croped some song to start at a particular location. This works fine in Itunes. However, when I use this music for a slide show in Iphoto, it plays the entire song insted of starting at the cropped point. Why?, and how do I fix it?

Alan:
Welcome to the Apple Discussions. The iTunes edits work only for iTunes. To trim a track in any way you'll need to do it with another application. You can do it in Garageband. I use the 3rd party editor Amadeus Pro. There are some freeware editors like Audacity. With Amadeus I can open a track select that portion I want to use and copy to a new file and then save. I do that for iDVD slideshows when I want to set the music for a specific total time for the number of slides that I've selected. Works very nicely. IMO Garageband is overkill for simple editing and I don't have it installed.
Another way to achieve what you want is to export the slideshow without music and edit it in iMovie. There you can add the audio tracks, trim, overlap,etc. and then save the composite movie file.
Do you Twango?
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've written an Automator workflow application (requires Tiger), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.

What is the best export option for a slide show made with Premiere Pro?

I have just made a slide show, 3 minutes, some music and 3 slides.
I exported it for youtube with 10fps.
The file ended up with 35 Mb.
Isnt there an export option that allows less fps resulting in a much smaller file size?

What frame size are you exporting to?
There is likely a way to get it a little smaller. I will play around with it and see what I can come up with.
Post a screen shot of your export settings. We might be able to spot a problem.
Edit: Well, at 1920X1080 a 3 minute slide show starts to fall apart at less than 30MB or so. The bitrate drops to the point where the images are not clear. Anything under about 1Mbps is just too noisy. I used H.264. There might be a better choice for slideshows.

Dreamweaver website with flash slide showing showing graphics poorly

Hello,
I put this problem up in Dreamweaver and Flash and got some questions from couple people but no answer yet. Adobe tech support is only available mon though fri so thhey are not available, so I thought I would try here.
I have a flash slide show I built for a dreamweaver website that contains vecctor images that are losing quality when I run my domain site. I have tested the flash file in flash looks great. I have previewed in live view in dreamweaver graphics look smooth but when I load up my files to ftp to my host account and test from there the quality of the edges of the vectors is not smooth. I see lots of jagged edges and not sure why.
I test everything on my 24 inch monitor so the graphics are probably enlarged but even when I test the flash file in flash and the html file of my hard drive to a browser like firefox my graphics are smooth, so not sure if its resolution problem. also tested my website on my laptop which is a smaller screen 15 inch and the graphics look bad on the website from there too. Soi f it were a resolution problem I think the 15 inch screen would be showing the graphics smoothly not jagged. ?????
Does anyone have any ideas or could assist me with this problem? I
Johanna
http://johannabresnahan.com
please keep in mind when tested in flash, dreamweaver (live view and firefox browser from my hardrive html files the graphics all appear smooth and good quality. its when I transferred them by ftp to host server files and preview there and enter in my website url that the quality of the graphics and text in the graphics is jagged in many areas.
I spoke with the domain tech support too but did not get the answer but some thoughful input.

The key answer to this problem was to import the files in the original native form ai not jpeg for the
vector illustrations which kept the quality of the text that was converted
with create outlines tool in illustrator to make each character its own independent graphic
to be independently scalable to maintain its quality. Since most of the problems I was having were related to the text inside each artwork was rendered poorly in the finished slideshow on my live website url. The digital photography images were never a problem. The commentary and feedback in the dreamweaver forum helped me to figure out how to resolve the issues I was having.
I just thought I would post here in case anyone was wondering.

Slide show works with Safari but not Firefox!

I'm baffled: I was swapping out some new .jpgs for my site's looping photo slide show on the top of every page, everything was working fine 2 days ago and then... nada. I didn't change anything to cause it AND it displays fine with Safari. I'm pretty sure I have all my plug-ins up to date etc., so WTF?!?!?! Thank you.

Perhaps "slideshow" isn't the best description (I am NOT a programmer). There are six images inside the wood-looking frame on the top of EVERY page, which used to cycle through on a loop. I can still see them with Safari, but although I didn't change anything when swapping out the jpgs a couple of days ago (and they worked fine until yesterday)... they're no longer viewable on Firefox. Again... WTF?!?!?

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

Similar Messages

Maybe you are looking for