Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Jquery Content slider issue

    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

    Code:
    <!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

    Code:
    * {
      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;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Are you not just missing a link to jFlow?

    Ignore that...

    You're loading jQuery twice:

    Code:
    <!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.
    Last edited by SB65; 12-07-2010 at 10:00 AM.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Are you not just missing a link to jFlow?

    Ignore that...

    You're loading jQuery twice:

    Code:
    <!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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Looks like you need a clear:left on the css for .jflow-content-slider

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Where should I place that in the code?

    I tried putting it in the .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursorointer; clear:left; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
    .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
    Last edited by conphill; 12-07-2010 at 07:37 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Anywhere in your css file.

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Adding that clear:left works fine in Firebug. I don't see it in your css now?

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    No.

    Code:
    .jflow-content-slider{clear:left}

  • Users who have thanked SB65 for this post:

    conphill (12-08-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •