...

View Full Version : Jquery Content slider issue



conphill
12-07-2010, 05:01 AM
I am having an issue getting my content slider to work on my site after I uploaded it to a host. I don't think anything has changed since the upload but the contents are all over the mainpage. I use googles javascript code online.

HTML


<!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>CampusTaps.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://sites.google.com/site/tipsotrickscom/jquery/jquery.flow.1.2.auto.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "610px",
height: "235px",
duration: 400,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</script>



<!--CONTENT SLIDER-->



</head>
<body>
<!--CONTAINER STARTS-->
<div id="container">
<!--HEADER/NAVIGATION STARTS-->
<div id="top">
<!--WEBSITE TITLE STARTS-->
<div id="title">
<h1><a href="index.html" title="CampusTaps.com">CampusTaps.com</a></h1>
</div>
<!--WEBSITE TITLE ENDS-->
<!--NAVIGATION STARTS-->
<div id="nav">
<ul class="nav-links">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="LiP.html" title="L P">LP</a></li>
<li><a href="CB.html" title="CBar">C B</a></li>
<li class="borderx2"><a href="Contact.html" title="Contact">Contact</a></li>
</ul>
</div>
<!--NAVIGATION ENDS-->
</div>
<!--HEADER/NAVIGATION ENDS-->
<center> <div class="separator">&nbsp;
</div></center>


<div class="jflow-content-slider">
<div id="slides">

<!-- Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://campustapscom.ipage.com/Images/EventsBlankBox.jpg"/>
</div>
<div class="slide-details">
<h1><u> <a style="color: #030">BAR</a></u> </h1>
<div class="description">
<h1><u> <a style="color: #030">DATE, Specials</a></u> </h1>
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->
<!-- Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://campustapscom.ipage.com/Images/EventsBlankBox.jpg"/>
</div>
<div class="slide-details">
<h1><u> <a style="color: #030">BAR</a></u> </h1><div class="description">
<h1><u> <a style="color: #030">DATE, Specials</a></u> </h1>
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->
<!-- Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="http://campustapscom.ipage.com/Images/EventsBlankBox.jpg"/>
</div>
<div class="slide-details">
<h1><u> <a style="color: #030">BAR</a></u> </h1>

<div class="description">
<h1><u> <a style="color: #030">DATE, Specials</a></u> </h1>

</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->
.
.
.
.
<!-- You can add as many slides as you want above this line -->
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>




<!--SEPARATOR STARTS-->
<div class="separator">&nbsp;
</div>

<!--SEPARATOR ENDS-->
<!--Content Area-->



<!--SIDEBAR STARTS-->
<div id="sidebar">
<h2>Updates</h2>
<ul class="sidebar-list">
<li>Site Launched</li>
<li>Picture Gallery Added</li>
<li>Bar Page Added</li>
</ul>
</div>
<!--SIDEBAR ENDS-->
<!--CONTENT STARTS-->
<div id="content">
<h2>Pictures from Events</h2>

<ul class="hoverbox">
<li>
<a href="#"><img src="http://campustapscom.ipage.com/Images/TEST1.jpg" alt="description" /><img src="http://campustapscom.ipage.com/Images/TEST1.jpg" alt="description" class="preview" /></a>
<br />
<p><b>Epic Fridays</b></p>
</li>
<li>
<a href="#"><img src="http://campustapscom.ipage.com/Images/TEST1.jpg" alt="description" /><img src="http://campustapscom.ipage.com/Images/TEST1.jpg" alt="description" class="preview" /></a>
<p><b>Green Turtle</b></p>
</li>
<li>
<a href="#"><img src="http://campustapscom.ipage.com/Images/TEST2.jpg" alt="description" /><img src="http://campustapscom.ipage.com/Images/TEST2.jpg" alt="description" class="preview" /></a>
<p><b>Craig's</b></p>
</li>
<li>
<a href="#"><img src="http://campustapscom.ipage.com/Images/TEST3.jpg" alt="description" /><img src="http://campustapscom.ipage.com/Images/TEST3.jpg" alt="description" class="preview" /></a>
<p><b>Lil Dickie's</b></p>
</li>
</ul>


</div>
<!--CONTENT ENDS-->
<!--FOOTER STARTS-->
<div id="footer">
<p>Copyright &copy; 2010 <strong>CampusTaps Media Group</strong></p>
</div>
<!--FOOTER ENDS-->
</div>

<!--CONTAINER ENDS-->
</body>
</html>


CSS


* {
margin: 0px;
padding: 0px;
border: none;
}


body {
background-image: url(images/Body-bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #c8c8c8;
}
#container {
margin: auto;
width: 850px;
}
#top {
float: left;
width: 850px;
height: 119px;
}
#title {
float: left;
width: 278px;
height: 74px;
padding-top: 45px;
}
#title h1 {
display: block;
float: left;
width: 278px;
height: 74px;
text-indent: -9999px;
}
#title h1 a {
display: block;
width: 100%;
height: 100%;
background-image: url(images/campustapslogosmall.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navigation { float: right; }
.nav-links li {
display: block;
float: left;
list-style-type: none;
}
.nav-links li a {
float: left;
width: 120px;
height: 68px;
text-decoration: none;
text-transform: capitalize;
color: #666666;
font-size: 12px;
text-align: center;
padding-top: 51px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cecece;
}
.nav-links li a:hover {
color: #ffffff;
background-position: center bottom;
}
li.borderx2 {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cecece;
}


.separator {
background-image: url(images/separator.jpg);
background-repeat: no-repeat;
float: left;
height: 6px;
width: 960px;
margin-top: 20px;
margin-bottom: 20px;
}

.bx-pager a {
text-indent: -999999px;
}

h2 {
text-transform: uppercase;
color: #ffffff;
font-size: 16px;
margin-bottom: 15px;
}

.separator {
background-image: url(images/divider.jpg);
background-repeat: no-repeat;
float: left;
height: 6px;
width: 960px;
margin-top: 20px;
margin-bottom: 20px;
}
#sidebar {
float: left;
height: 209px;
width: 219px;
background-image: url(images/Updatesbox.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
}
h3 {
text-transform: uppercase;
color: #ffffff;
text-align: center;
margin-bottom: 20px;
font-size: 12px;
}
.sidebar-list li {
list-style-type: none;
color: #2C5923;
margin-top: 10px;
padding-bottom: 10px;
background-image: url(images/divider.png);
background-repeat: repeat-x;
background-position: bottom;
}
#content {
float: right;
width: 560px;
height: 300px;
color:#2C5923;
background-image:url(images/Picscontent2.jpg);
background-repeat: no-repeat;
padding-top:20px;
padding-left:20px;


}
#content p {
margin-bottom: 15px;
text-align: center;
}
#footer {
float: left;
width: 800px;
height: 50px;
margin-top: 10px;
padding-top: 25px;
text-align: center;
color: #fffffff;

}





#jFlowSlide{ background:#ffffff; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#333333; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {
max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

div#album1 {
text-align:center;
float:left;
margin:auto;
}

div#footer {
padding: 5px;
margin: 0px;
background-image:url(images/Body-bg.jpg);
background-repeat:repeat-x;
color:#CCC;
}





div#footer {
padding: 10px;
margin: 0px;
background-image:url(images/Body-bg.jpg);
repeat-x;
}



/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 100px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

SB65
12-07-2010, 09:54 AM
Are you not just missing a link to jFlow?

Ignore that...

You're loading jQuery twice:


<!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>CampusTaps.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://sites.google.com/site/tipsotrickscom/jquery/jquery.flow.1.2.auto.js"></script>
<script type="text/javascript">


..and, your link to jflow seems to be doing odd things. I'd suggest hosting this locally as it appears to try and redirect when loaded from a page.

conphill
12-07-2010, 04:06 PM
Are you not just missing a link to jFlow?

Ignore that...

You're loading jQuery twice:


<!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>CampusTaps.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://sites.google.com/site/tipsotrickscom/jquery/jquery.flow.1.2.auto.js"></script>
<script type="text/javascript">


..and, your link to jflow seems to be doing odd things. I'd suggest hosting this locally as it appears to try and redirect when loaded from a page.

Thanks for the help. That cleared up part of it, now the issue I run into is the content is located in the header, while the slider is located in the right spot.

Here is what it looks like:
http://campustapscom.ipage.com/IndexTest.html

SB65
12-07-2010, 05:09 PM
Looks like you need a clear:left on the css for .jflow-content-slider

conphill
12-07-2010, 07:12 PM
Where should I place that in the code?

I tried putting it in the .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; clear:left; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

SB65
12-07-2010, 07:31 PM
Anywhere in your css file.

conphill
12-07-2010, 08:13 PM
Anywhere in your css file.

The clear didn't work. The actual sliding images appear in the header, but the actual slider is in the center

SB65
12-07-2010, 09:44 PM
Adding that clear:left works fine in Firebug. I don't see it in your css now?

conphill
12-07-2010, 11:57 PM
I added it to css, but i'm not sure how to put clear:left.

Should I use { Clear:left;}


http://campustapscom.ipage.com/index2.html

SB65
12-08-2010, 07:48 AM
No.


.jflow-content-slider{clear:left}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum