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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trouble getting slider code to work with HTML and CSS on Website

    Hello folks,

    Totally new to this, and trying to make something entirely new work. I have been working on code from menucool for a rotating banner. I have it working on a dummy page, but when I move the code to the destination page, it no longer works. I have tried to find the issue but have reached the point where I do not know what to do next. Hoping you all can help.

    The code is made up of three different components, one HTML, one CSS, and one JavaScript. I am posting each to this forum as I currently have them...please be kind, this is a first for me!

    jquery code:

    Code:
     
    <SCRIPT LANGUAGE="JavaScript" SRC="js-image-slider.js"> 
    var sliderOptions=
    {
    	sliderId: "slider",
    	effect: "13",
    	effectRandom: false,
    	pauseTime: 2800,
    	transitionTime: 1200,
    	slices: 12,
    	boxes: 8,
    	hoverPause: true,
    	autoAdvance: true,
    	captionOpacity: 0.3,
    	captionEffect: "fade",
    	thumbnailsWrapperId: "thumbs",
    	m: false,
    	license: "mylicense"
    };
    
    var imageSlider=new mcImgSlider(sliderOptions);
    
    /* Menucool Javascript Image Slider v2012.11.22. Copyright www.menucool.com */
    function mcImgSlider(j){var K=function(a){return document.getElementById(a)},d="length",M=function(e){var a=e.childNodes,c=[];if(a)for(var b=0,f=a[d];b<f;b++)a[b].nodeType==1&&c.push(a[b]);return c},
    CSS Code:

    Code:
    /* http://www.menucool.com */
    
    #sliderFrame {position:relative;width:960px;margin: 0 auto;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/
            
    #slider {
        width:960px;height:300px;/* Make it the same size as your images */
    	background:#fff url(../image-files/loading.gif) no-repeat 50% 50%;
    	position:relative;
    	margin :0px 0 50px 0;/*make the image slider center-aligned */
        box-shadow: 0px 1px 5px #999999;
    }
    #slider img {
    	position:relative;  0px
    	1px 0px border:none;
    	display:none;
    }
    
    /* the link style (if an image is wrapped in a link) */
    #slider a.imgLink {
    	z-index:2;
    	display:none;position:absolute;
    	top:0px;left:0 px;border:0;padding:0;margin:0;
    	width:100%;height:100%;
    }
    
    /* Caption styles */
    div.mc-caption-bg, div.mc-caption-bg2 {
    	position:absolute;
    	width:100%;
    	height:auto;
    	padding:0;
    	left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    	bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
    	z-index:3;
    	overflow:hidden;
    	font-size: 0;
    }
    div.mc-caption-bg {
    	background-color:black;
    }
    div.mc-caption {
    	font: bold 14px/20px Arial;
    	color:#EEE;
    	z-index:4;
    	padding:10px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
    	text-align:center;
    }
    div.mc-caption a {
    	color:#FB0;
    }
    div.mc-caption a:hover {
    	color:#DA0;
    }
    
    
    /* ------ built-in navigation bullets wrapper ------*/
    div.navBulletsWrapper  {
    	top:314px; left:400px; /* Its position is relative to the #slider */
    	width:200px;
    	background:none;
    	padding-left:20px;
    	position:relative;
    	z-index:5;
    	cursor:pointer;
    }
    
    /* each bullet */
    div.navBulletsWrapper div 
    {
        width:11px; height:11px;
        background:transparent url(../image-files/bullet.png) no-repeat 0 0;
        float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
        margin-right:11px;/* distance between each bullet*/
        _position:relative;/*IE6 hack*/
    }
    
    div.navBulletsWrapper div.active {background-position:0 -11px;}
    
    
    /* --------- Others ------- */
    #slider 
    {
    	transform: translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
    }
    HTML Code:

    Code:
    <div id="slider">
            	<a href="http://www.gardendesignexposed.com/index.html"><img src="images/Final_Red_Chair_1_reduced.jpg"/></a>
    	<a href="http://www.gardendesignexposed.com/index.html"><img src="images/Final_Banner_dreams_free_3_reduced.jpg"/></a>
    	<a href="http://www.gardendesignexposed.com/index.html"><img src="images/Final_Banner_dreams_free_1a_reduced.jpg"/></a>
    	<a href="http://www.gardendesignexposed.com/index.html"><img src="images/Final_Banner_Clematis_7_reduced.jpg"/></a> 
    	</div>
    You can see the working code at: http://www.gardendesignexposed.com/1a.html

    I am trying to put the code on my home page. When I place it there, instead of rotating 4 images through, it displays all four images stacked. Home page is at http://www.gardendesignexposed.com...it currently does NOT have the code placed on it.

    Thanks in advance to anyone who may be able to help me with this.

    Can anyone help me figure out what may be going on?

  • #2
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    68
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Have you got a live working example we can see? First thing I'd look at is the "Console" tab in your browser inspector (F12 on chrome or IE) if your using Firefox then install "Firebug" - this is a useful way of seeing if there are any JS errors when you view the page.

    I'd check the source and ensure your Javascript file is linked in the <head> correctly so the code can execute.

    Let me know and I'll give you a hand.
    Working for Edge Three Sixty doing Drupal Development

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello there edge! Thanks for dropping in to help!

    You should have been able to see a working example on the page I left in the post...www.gardendesignexposed.com/1a.html At least it is working for me. Were you unable to access the page?

    The page I am trying to add the code to that does not work is at www.gardendesignexposed/index.html.

    Here is what I see when I do the Console Tab on the 1a page above.

    HTML1512: Unmatched end tag.
    index.html, line 244 character 15
    SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
    index.html

    That is on the working page.

    On the index page that I hoped to place the code in, here is what I have without the code placed into the page on the Console Tag.

    HTML1512: Unmatched end tag.
    www.gardendesignexposed.com, line 244 character 15
    SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
    www.gardendesignexposed.com


    Here is what I ended up with on the published page (index) that does not work.

    HTML1524: Invalid DOCTYPE. The shortest valid doctype is "<!DOCTYPE html>".
    index.html, line 1 character 1
    HTML1509: Unmatched end tag.
    index.html, line 108 character 447
    HTML1422: Malformed start tag. A self closing slash should be followed by a U+003E GREATER-THAN SIGN (>).
    index.html, line 251 character 17
    HTML1421: Malformed end tag. End tags should not contain attributes.
    index.html, line 251 character 17
    HTML1512: Unmatched end tag.
    index.html, line 251 character 15
    SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
    index.html

    I have corrected the code (removed it) from my index page as I do not want it on the website unworking.

    Hopefully you can access the page and see it for yourself. Just what you have already shown me tells me where the problem lies, but I would not know how to fix it...so I am glad you are along for the ride!

  • #4
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    68
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Having just looked at index.html - the HTML code is not actually in the source for the javascript slider. When I viewed the source for the header it's a background image on the .Liner div and I see no record of "slider" being in the HTML - which is the div you've targeted as the slider.
    Working for Edge Three Sixty doing Drupal Development

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello edge,

    Yes, the current index page does not have the code, as I mentioned in my last post. I put it up just long enough to generate the error messages you see in that post.

    I also use a service called SBI to generate much of the html code. I am venturing beyond that as I become a bit more confident with html, which is why I ended up here!

    The jquery file and the css code are in a separate location.

    Let me know what you need, and I will try to provide it.

    Thanks.

    Doug

  • #6
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    68
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hello,

    If you can try and put the code on the homepage then I can snoop around and see exactly why it's not working - makes a bit easier if I see the not working product live on a site that I can debug without guessing what may be causing the errors.

    Cheers
    Working for Edge Three Sixty doing Drupal Development

  • #7
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure!

    I can do that. I will have to wait until after work today though...I have a day job! Darn it.


    I come home around 3:30 to 4 Pacific Time..not sure what that translates to where you are...about a 9 hour difference I think. If I put the code up right after I come home today, would that be a time that would work for you to duck in and see what is going on?

    If not, please let me know what is a good time. The nature of the failure is such that I do not want the non-working code out on the site for a long period of time.

    Thanks again edge! Your time is much appreciated.

    Doug

  • #8
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Edge,

    I am placing my code on the home page for today only. I do not want to leave it that way for long.

    Hopefully, sometime today, you or someone else can take a look and help me discover the issue.

    Thanks.

    Doug


  •  

    Posting Permissions

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