Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome
problem jquery slide show conflict vertical navigation menu in firefox & chrome. works in ie. first time trying post question - please kind. not code , finding css real challenge after learning design based on tables. i'm using cs5.
the "test" page slide show is: http://www.reardanwa.com/index-slides.html same page without slide show http://www.reardanwa.com/
i realize images not ideally sized - i'll fix once pages function. maybe need different slide show? prefer widget can modify required size & postition. again - i'm not @ building code scratch.
the problem naviagation links directly next slide show not work in firefox of chrome. work in ie.
i've read using jquery.noconflict(); code can't figure out correct way use in case or whether that's part of solution. know code not organized have cobbled various sources in attempt format page way client wants it. also, fyi, try make page work in surreal cms.
i've spent sevaral days on last several weeks trying solve sth slide show/navigation conflict - specific light can shed 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 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 variations between browsers, it's best practices 0 padding , margin on lists. consistency, can either specify amounts want here, or on list items (li, dt, dd) contain. remember here cascade .nav list unless write more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing top margin gets around issue margins can escape containing div. remaining bottom margin hold away elements follow. */
/* adding padding sides of elements within divs, instead of divs themselves, gets rid of box model math. nested div side padding can used 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 { /* selector removes default blue border displayed in browsers around image when surrounded link */
border: none;
}
/* ~~ styling site's links must remain in order - including group of selectors create hover effect. ~~ */
a:link {
color: #42413c;
text-decoration: underline; /* unless style links extremely unique, it's best provide underlines quick visual identification */
}
a:visited {
color: #6e6c64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* group of selectors give keyboard navigator same hover experience person using mouse. */
text-decoration: none;
}
/* ~~this fixed width container surrounds other divs~~ */
.container {
width: 960px;
min-height:900px;
padding:5px 0px 0px 0px;
background: #e8f8ff;
margin: 0 auto; /* auto value on sides, coupled width, centers layout */
}
/* ~~ header not given width. extend full width of layout. contains image placeholder should replaced 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;
}
/* ~~ grouped selector gives lists in .content area space ~~ */
.content ul, .content ol {
padding: 0px 15px 5px 10px; /* padding mirrors right padding in headings , paragraph rule above. padding placed on bottom space between other elements on lists , on left create indention. these may adjusted wish. */
}
/* ~~ navigation list styles (can removed if choose use premade flyout menu spry) ~~ */
ul.nav {
list-style: none; /* removes list marker */
border-top: 0px solid #ffff66; /* creates top border links - others placed using bottom border on li */
margin-bottom: 50px; /* creates space between navigation on 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; /* creates button separation */
font: 120%/1.4 arial black, verdana, , helvetica, sans-serif;
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure links retain button after being visited */
padding: 3px 0px 5px 0px;
display: block; /* gives link block properties causing fill whole li containing it. causes entire area react mouse click. */
width: 185px; /*this width makes entire button clickable ie6. if don't need support ie6, can removed. calculate proper width subtracting padding on link width of sidebar container. */
text-decoration: none;
color: #ffff0d;
background: #595fff;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* changes background , text color both mouse , keyboard navigators */
background: #595fff;
font: 120%/1.4 arial black, verdana, , helvetica, sans-serif;
color: #ffffff;
}
/* ~~ footer ~~ */
.footer {
padding: 10px 0;
background: #595fff;
color: #ffff0d;
position: relative;/* gives ie6 haslayout clear */
clear: both; /* clear property forces .container understand columns end , contain them */
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* class can used float element right in page. floated element must precede element should next on page. */
float: right;
margin-left: 8px;
}
.fltlft { /* class can used float element left in page. floated element must precede element should next on page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* class can placed on <br /> or empty div final element following last floated div (within #container) if #footer removed or taken out of #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 preserving , enhancing area businesses" /><p></p>
<p style="color: #f00">this site under construction! please pardon our dust 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 triggered after each transition
autostop: false, // true end slideshow after x transitions (where x == slide count)
fx: 'blindx',// name of transition effect
pause: false, // true enable pause on hover
randomizeeffects: true, // valid when multiple effects used; true make effect sequence random
speed: 100, // speed of transition (any valid fx speed value)
sync: true, // true if in/out transitions should occur simultaneously
timeout: 5000, // milliseconds between slide transitions (0 disable auto advance)
fit: true,
height: '300px',
width: '525px' // container width (if 'fit' option true, slides set width well)
});
});
function slideshowoncycleafter() {
if (slideshowaddcaption==true){
$('#slideshow-caption').html(this.title);
}
}
// endoawidget_instance_2559022
</script>
<div id="slideshow">
<!--all elements inside become slides-->
<img src="images/100_1537.jpeg" width="600" height="450" title="caption image1" /> <img src="images/parade-2011-2.jpg" width="300" height="225" title="caption image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption image3" />
<div title="sample title"> images slide show need re-sized fit box avoid distortion</div>
<img src="images/beach4.jpg" width="200" height="200" title="caption image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption image5" /> </div>
<!--it safe delete if captions 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 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">info@reardanwa.com - 509.796.2102</span><br />
</p>
<!-- end .footer -->
</div></body>
</html>
try removing position: relative; below css selector:
.box
{
position: relative;
left:-90px;
width:950px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
z-index:1000;
}
however means slideshow box won't overlap navigation don't know layout you're trying achieve.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment