Hi, I hope someone here can help me figure out a fix for a problem with coin-slider.js in a website template that causes images to stack one after another when a visitor has javascript disabled. I don't know if I'm allowed to post a link to the website template or not so I'll just post the code I think you need to see... Here is the coin-slider.js: /** * Coin Slider - Unique jQuery Image Slider * @version: 1.0 - (2010/04/04) * @requires jQuery v1.2.2 or later * @author Ivan Lazarevic * Examples and documentation at: http://workshop.rs/projects/coin-slider/ * Licensed under MIT licence: * http://www.opensource.org/licenses/mit-license.php **/ (function($){var params=new Array;var order=new Array;var images=new Array;var links=new Array;var linksTarget=new Array;var titles=new Array;var interval=new Array;var imagePos=new Array;var appInterval=new Array;var squarePos=new Array;var reverse=new Array;$.fn.coinslider=$.fn.CoinSlider=function(options){init=function(el){order[el.id]=new Array();images[el.id]=new Array();links[el.id]=new Array();linksTarget[el.id]=new Array();titles[el.id]=new Array();imagePos[el.id]=0;squarePos[el.id]=0;reverse[el.id]=1;params[el.id]=$.extend({},$.fn.coinslider.defaults,options);$.each($('#'+el.id+' img'),function(i,item){images[el.id][i]=$(item).attr('src');links[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('href'):'';linksTarget[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('target'):'';titles[el.id][i]=$(item).next().is('span')?$(item).next().html():'';$(item).hide();$(item).next().hide();});$(el).css({'background-image':'url('+images[el.id][0]+')','width':params[el.id].width,'height':params[el.id].height,'position':'relative','background-position':'top left'}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");$.setFields(el);if(params[el.id].navigation) $.setNavigation(el);$.transition(el,0);$.transitionCall(el);} $.setFields=function(el){tWidth=sWidth=parseInt(params[el.id].width/params[el.id].spw);tHeight=sHeight=parseInt(params[el.id].height/params[el.id].sph);counter=sLeft=sTop=0;tgapx=gapx=params[el.id].width-params[el.id].spw*sWidth;tgapy=gapy=params[el.id].height-params[el.id].sph*sHeight;for(i=1;i<=params[el.id].sph;i++){gapx=tgapx;if(gapy>0){gapy--;sHeight=tHeight+1;}else{sHeight=tHeight;} for(j=1;j<=params[el.id].spw;j++){if(gapx>0){gapx--;sWidth=tWidth+1;}else{sWidth=tWidth;} order[el.id][counter]=i+''+j;counter++;if(params[el.id].links) $('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");else $('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");$("#cs-"+el.id+i+j).css({'background-position':-sLeft+'px '+(-sTop+'px'),'left':sLeft,'top':sTop});sLeft+=sWidth;} sTop+=sHeight;sLeft=0;} $('.cs-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('.cs-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});$('#cs-title-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('#cs-title-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});if(params[el.id].hoverPause){$('.cs-'+el.id).mouseover(function(){params[el.id].pause=true;});$('.cs-'+el.id).mouseout(function(){params[el.id].pause=false;});$('#cs-title-'+el.id).mouseover(function(){params[el.id].pause=true;});$('#cs-title-'+el.id).mouseout(function(){params[el.id].pause=false;});}};$.transitionCall=function(el){clearInterval(interval[el.id]);delay=params[el.id].delay+params[el.id].spw*params[el.id].sph*params[el.id].sDelay;interval[el.id]=setInterval(function(){$.transition(el)},delay);} $.transition=function(el,direction){if(params[el.id].pause==true)return;$.effect(el);squarePos[el.id]=0;appInterval[el.id]=setInterval(function(){$.appereance(el,order[el.id][squarePos[el.id]])},params[el.id].sDelay);$(el).css({'background-image':'url('+images[el.id][imagePos[el.id]]+')'});if(typeof(direction)=="undefined") imagePos[el.id]++;else if(direction=='prev') imagePos[el.id]--;else imagePos[el.id]=direction;if(imagePos[el.id]==images[el.id].length){imagePos[el.id]=0;} if(imagePos[el.id]==-1){imagePos[el.id]=images[el.id].length-1;} $('.cs-button-'+el.id).removeClass('cs-active');$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');if(titles[el.id][imagePos[el.id]]){$('#cs-title-'+el.id).css({'opacity':0}).animate({'opacity':params[el.id].opacity},params[el.id].titleSpeed);$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);}else{$('#cs-title-'+el.id).css('opacity',0);}};$.appereance=function(el,sid){$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);if(squarePos[el.id]==params[el.id].spw*params[el.id].sph){clearInterval(appInterval[el.id]);return;} $('#cs-'+el.id+sid).css({opacity:0,'background-image':'url('+images[el.id][imagePos[el.id]]+')'});$('#cs-'+el.id+sid).animate({opacity:1},300);squarePos[el.id]++;};$.setNavigation=function(el){$(el).append("<div id='cs-navigation-"+el.id+"'></div>");$('#cs-navigation-'+el.id).hide();$('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");$('#cs-prev-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'left':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el,'prev');$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$('#cs-next-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'right':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el);$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));for(k=1;k<images[el.id].length+1;k++){$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");} $.each($('.cs-button-'+el.id),function(i,item){$(item).click(function(e){$('.cs-button-'+el.id).removeClass('cs-active');$(this).addClass('cs-active');e.preventDefault();$.transition(el,i);$.transitionCall(el);})});$('#cs-navigation-'+el.id+' a').mouseout(function(){$('#cs-navigation-'+el.id).hide();params[el.id].pause=false;});$("#cs-buttons-"+el.id).css({'left':'50%','margin-left':-images[el.id].length*15/2-5,'position':'relative'});} $.effect=function(el){effA=['random','swirl','rain','straight'];if(params[el.id].effect=='') eff=effA[Math.floor(Math.random()*(effA.length))];else eff=params[el.id].effect;order[el.id]=new Array();if(eff=='random'){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}} $.random(order[el.id]);} if(eff=='rain'){$.rain(el);} if(eff=='swirl') $.swirl(el);if(eff=='straight') $.straight(el);reverse[el.id]*=-1;if(reverse[el.id]>0){order[el.id].reverse();}} $.random=function(arr){var i=arr.length;if(i==0)return false;while(--i){var j=Math.floor(Math.random()*(i+1));var tempi=arr[i];var tempj=arr[j];arr[i]=tempj;arr[j]=tempi;}} $.swirl=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var x=1;var y=1;var going=0;var num=0;var c=0;var dowhile=true;while(dowhile){num=(going==0||going==2)?m:n;for(i=1;i<=num;i++){order[el.id][c]=x+''+y;c++;if(i!=num){switch(going){case 0:y++;break;case 1:x++;break;case 2:y--;break;case 3:x--;break;}}} going=(going+1)%4;switch(going){case 0:m--;y++;break;case 1:n--;x++;break;case 2:m--;y--;break;case 3:n--;x--;break;} check=$.max(n,m)-$.min(n,m);if(m<=check&&n<=check) dowhile=false;}} $.rain=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var c=0;var to=to2=from=1;var dowhile=true;while(dowhile){for(i=from;i<=to;i++){order[el.id][c]=i+''+parseInt(to2-i+1);c++;} to2++;if(to<n&&to2<m&&n<m){to++;} if(to<n&&n>=m){to++;} if(to2>m){from++;} if(from>to)dowhile=false;}} $.straight=function(el){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}} $.min=function(n,m){if(n>m)return m;else return n;} $.max=function(n,m){if(n<m)return m;else return n;} this.each(function(){init(this);});};$.fn.coinslider.defaults={width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,links:true,hoverPause:true};})(jQuery); Code (markup): Another script.js code: // <![CDATA[ $(function() { // Slider $('#coin-slider').coinslider({width:940,height:310,opacity:1}); // Radius Box $('.menu_nav ul li a').css({"border-radius":"6px", "-moz-border-radius":"6px", "-webkit-border-radius":"6px"}); //$('.article a.com').css({"border-top-right-radius":"10px", "border-bottom-right-radius":"10px", "-moz-border-radius-topright":"10px", "-moz-border-radius-bottomright":"10px", "-webkit-border-top-right-radius":"10px", "-webkit-border-bottom-right-radius":"10px"}); //$('.content p.pages span, .content p.pages a').css({"border-radius":"16px", "-moz-border-radius":"16px", "-webkit-border-radius":"16px"}); //$('.menu_nav').css({"border-bottom-left-radius":"16px", "border-bottom-right-radius":"16px", "-moz-border-radius-bottomleft":"16px", "-moz-border-radius-bottomright":"16px", "-webkit-border-bottom-left-radius":"16px", "-webkit-border-bottom-right-radius":"16px"}); }); // Cufon Cufon.replace('h1, h2, h3, h4, h5, h6, .menu_nav ul li a', { hover: true }); //Cufon.replace('h1', { color: '-linear-gradient(#fff, #ffaf02)'}); //Cufon.replace('h1 small', { color: '#8a98a5'}); // ]]> Code (markup): There is also: jquery-1.4.2.min.js cufon-yui.js droid_sans_400-droid_sans_700.font.js I don't think you need the above script code, but if you do let me know. css: coin-slider.css /* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { padding:0; overflow:hidden; zoom:1; position:relative; float:right; } .coin-slider a { text-decoration:none; outline:none; border:none; } /* buttons for switching */ .cs-buttons { margin:8px 0 0; padding:0; font-size:0; float:left; } .cs-buttons a { margin:0 2px; width:20px; height:20px; float:left; color:#fff; text-indent:-10000px; background:url(../images/slide_p.png) no-repeat center center; } .cs-buttons a.cs-active { color:#fff; background-image:url(../images/slide_a.png); } /* text in slider */ .cs-title { display:none; padding:16px 60px 16px 24px; width:876px; color:#fff; font-size:15px; line-height:1.5em; background:url(../images/overlay.png) repeat left top; } .cs-title big { font-size:20px; } /* buttons Next and Prew */ .cs-prev, .cs-next { background:url(../images/overlay.png) repeat left top; color:#fff; padding:0px 10px; } Code (markup): style.css /* Design by http://www.dreamtemplate.com */ @charset "utf-8"; body { margin:0; padding:0; width:100%; color:#585757; font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif; background:#fdfdfd; } html, .main { padding:0; margin:0; } .main { background:url(../images/header_bg.gif) repeat-x left 102px; } .clr { clear:both; padding:0; margin:0; width:100%; font-size:0; line-height:0; } h2 { margin:8px 0; padding:8px 0; font-size:26px; font-weight:normal; line-height:1.2em; color:#585757; text-transform:none; } p { margin:8px 0; padding:0 0 8px 0; } a { color:#dfc988; text-decoration:underline; } .header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar { margin:0; padding:0; } .header { background:url(../images/hbg_bg.jpg) no-repeat center 102px; } .header_resize { margin:0 auto; padding:0 0 24px; width:960px; } .logo { padding:0; float:none; float:left; width:auto; height:125px; } h1 { margin:0; padding:32px 0 0 20px; font-size:32px; font-weight:bold; line-height:1.2em; text-transform:none; letter-spacing:2px; } h1 a, h1 a:hover { color:#dcc174; text-decoration:none; } h1 span { } h1 small { font-size:14px; line-height:1.2em; letter-spacing:normal; text-transform:none; color:#dcc174; } .slider { margin:0; padding:10px 10px 28px; background:url(../images/slider_bg.jpg) no-repeat center top; } .rss { padding:18px 20px 0 0; float:right; width:auto; } .rss p { margin:0; padding:0; float:right; width:auto; color:#fff; font-size:13px; line-height:1.5em; font-weight:bold; } .rss a { color:#fff; text-decoration:none; } .rss a:hover { text-decoration:underline; } .rss img { margin:-3px 0 -3px 6px; border:none; } .menu_nav { margin:0; padding:40px 0 0; height:56px; float:right; } .menu_nav ul { list-style:none; padding:0 0 0 2px; height:56px; float:left; } .menu_nav ul li { margin:0; padding:0 2px 0 0; float:left; background:no-repeat right center; } .menu_nav ul li a { display:block; margin:0; padding:5px 12px 0; height:24px; font-size:15px; line-height:20px; font-weight:bold; color:#585757; text-decoration:none; text-transform:none; text-align:center; background:none; } .menu_nav ul li.active a, .menu_nav ul li a:hover { text-decoration:none; color:#fff; background:url(../images/menu_a.gif) repeat-x left top; } .content { padding:0; background:repeat-x left bottom; } .content_resize { margin:0 auto; padding:24px 0 40px; width:960px; } .content .mainbar { margin:0; padding:0; float:right; width:680px; } .content .mainbar h2 { margin-bottom:0; padding-left:44px; } .content .mainbar div.img { padding:12px 0; float:left; } .content .mainbar img { } .content .mainbar img.fl { margin:0; border:none; } .content .mainbar .article { margin:0 0 8px; padding:6px 20px; background:url(../images/article_bg.jpg) no-repeat left top; border-bottom:1px solid #dfc988; } .content .mainbar .post_content { } .content .mainbar .post_content strong { color:#585757; } .content .sidebar { padding:0; float:left; width:260px; } .content .sidebar .gadget { margin:0 0 12px; padding:6px 20px 24px; } .content .sidebar h2 { } ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595; } ul.sb_menu li, ul.ex_menu li { margin:0; } ul.sb_menu li, ul.ex_menu li { padding:8px 0; width:220px; background:repeat-x left bottom; } ul.sb_menu li a { color:#585757; text-decoration:none; margin-left:0; padding:4px 8px 4px 0; background:no-repeat left center; } ul.ex_menu li a { font-weight:bold; color:#585757; text-decoration:none; background:no-repeat left center; } ul.sb_menu li a:hover, ul.ex_menu li a:hover { padding-left:22px; color:#dfc988; font-weight:bold; text-decoration:none; background:url(../images/li_a.gif) no-repeat left center; } p.spec { padding:0 0 16px; } p.infopost { margin:0; padding:6px 0; text-transform:none; } p.infopost a { padding:0 2px; text-decoration:none; font-weight:normal; color:#dfc988; } p.infopost a:hover { text-decoration:underline; } p.infopost span.date { } .article a.com { margin:0; padding:0; font-weight:normal; text-decoration:none; text-align:center; } .article a.com:hover { text-decoration:none; } .article a.com span { font-weight:bold; } .post_content a.rm { display:block; float:left; margin:0 0 16px; padding:0 0 0 22px; font-size:13px; line-height:18px; font-weight:bold; text-transform:none; color:#dfc988; text-decoration:none; text-align:center; background:url(../images/li_a.gif) no-repeat left center; } .content p.pages { margin:0; padding:24px 20px; font-size:11px; line-height:16px; color:#959595; text-align:left; } .content p.pages span, .content p.pages a { display:block; float:left; margin:0; padding:10px 0; width:36px; text-decoration:none; text-align:center; } .content p.pages span, .content p.pages a:hover { color:#fff; background:#212121; background:url(../images/page_a.jpg) no-repeat center center; } .content p.pages a { color:#343537; border:none; } .content p.pages small { font-size:12px; float:right; } .content .mainbar .comment { margin:0; padding:16px 0 0 0; } .content .mainbar .comment img.userpic { border:1px solid #dedede; margin:10px 16px 0 0; padding:0; float:left; } .fbg { border-top:1px solid #dfc988; border-bottom:1px solid #dfc988; } .fbg_resize { margin:0 auto; width:920px; padding:16px 20px; } .fbg h2 { margin-bottom:24px; padding-bottom:8px; } .fbg img.gal { margin:0 8px 8px 0; padding:0; border:4px solid #dfc988; } .fbg .col { margin:0; float:left; } .fbg .c1 { padding:0 16px 0 0; width:280px; } .fbg .c2 { padding:0 36px 0 16px; width:280px; } .fbg .c3 { padding:0 0 0 16px; width:274px; } .fbg .fbg_ul { margin:0; padding:0; list-style:none; } .fbg .fbg_ul li { margin:0; padding:0; list-style:none; } .fbg .fbg_ul li a { display:block; margin:0; padding:2px 0 2px 12px; color:#585757; text-decoration:none; background:url(../images/li.gif) no-repeat left center; } .fbg .fbg_ul li a:hover { color:#dfc988; text-decoration:none; font-weight:bold; } .fbg p.contact_info { line-height:1.8em; } .fbg p.contact_info a { color:#dfc988; text-decoration:underline; font-weight:normal; } .fbg p.contact_info span { display:block; float:left; width:74px; font-weight:bold; } ol { list-style:none; } ol li { display:block; clear:both; } ol li label { display:block; margin:0; padding:16px 0 0 0; } ol li input.text { width:480px; border:1px solid #c0c0c0; margin:0; padding:5px 2px; height:16px; background-color:#fff; } ol li textarea { width:480px; border:1px solid #c0c0c0; margin:0; padding:2px; background-color:#fff; } ol li .send { margin:16px 0 0 0; } .searchform { padding:12px 0 24px 20px; float:left; } #formsearch { margin:0; padding:0; width:auto; height:30px; } #formsearch span { display:block; margin:0; padding:0; float:left; background:url(../images/search_bg.gif) no-repeat left top; } #formsearch input.editbox_search { margin:0; padding:7px 10px; float:left; width:168px; font-size:12px; line-height:17px; color:#a9a9a9; background:none; outline:none; border:none; } #formsearch input.button_search { margin:0; padding:0; border:none; float:left; } .footer { background:repeat-x left top; } .footer_resize { margin:0 auto; padding:0; width:920px; line-height:1.5em; color:#585757; } .footer_resize p { margin:32px 0; padding:0; line-height:normal; white-space:nowrap; text-indent:inherit; } .footer_resize a { color:#dfc988; font-weight:normal; margin:0; padding:0; border:none; text-decoration:underline; background-color:transparent; } .footer_resize a:hover { color:#dfc988; background-color:transparent; text-decoration:none; } .footer_resize .lf { float:left; } .footer_resize .rf { float:right; } a { outline:none; } Code (markup): html code up to the coin-slider <!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> <title>SunshineAtoms</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/coin-slider.css" /> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/droid_sans_400-droid_sans_700.font.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/coin-slider.min.js"></script> </head> <body> <div class="main"> <div class="header"> <div class="header_resize"> <div class="menu_nav"> <ul> <li class="active"><a href="index.html"><span>Home Page</span></a></li> <li><a href="support.html"><span>Support</span></a></li> <li><a href="about.html"><span>About Us</span></a></li> <li><a href="blog.html"><span>Blog</span></a></li> <li><a href="contact.html"><span>Contact Us</span></a></li> </ul> </div> <div class="logo"> <h1><a href="index.html">Sunshine<span>Atoms</span> <small>Company Slogan Here</small></a></h1> </div> <div class="clr"></div> <div class="slider"> <div id="coin-slider"> <a href="#"><img src="images/slide1.jpg" width="940" height="310" alt="" /> </a> <a href="#"><img src="images/slide2.jpg" width="940" height="310" alt="" /> </a> <a href="#"><img src="images/slide3.jpg" width="940" height="310" alt="" /> </a> </div> <div class="clr"></div> </div> <div class="clr"></div> </div> </div> Code (markup): If you need any other info let me know. I am very experienced in editing html, xhtml, css, and I am just learning javascript. Thanks for your help!
this is NOT a javascript question. graceful degradation when a user has javascript disabled is somewhat complex and can't be handled with a simple answer here.
Hi dimitar, Thanks for your reply. Can you possibly point me in the right direction? Should I be looking more at the css/xhtml side of things and maybe should have posted this in that forum?
well. you need to consider your javascript as a progressive enhancement in order to have graceful degradation. what that means is a totally different design approach to this. basically you start by making the page work w/o using any javascript. in the case of a slide show, this would mean (and this is not taking into account your plugin, it may be done in a way that won't work here): - outputting the list of items in anchors that are with display: none via css. - outputting the default one as visible. - making each one an anchor link to the next one. - making - via CSS - each one via say, a:active with display: block so they can be called externally a click on an anchor will automatically remove active pseudo on it and set the active to the new anchor. etc etc. this should give you some ideas on how you can deal with things w/o javascript. slider is more complicated than say, a gallery where you can send them to a new page on every click you THEN code your plugin to read the data from the DOM and incorporate all the elements into it and animate/activate it so if js is available, it will look slick. this is where a lot of stock plugins fail in their approach as they try to force upon you a data source format that is not always semantic dom elements your case won't be too bad: <div id="coin-slider"> <a href="#"><img src="images/slide1.jpg" width="940" height="310" alt="" /> </a> <a href="#"><img src="images/slide2.jpg" width="940" height="310" alt="" /> </a> <a href="#"><img src="images/slide3.jpg" width="940" height="310" alt="" /> </a> </div> Code (markup): you can target #coin-slider a { display: none; } #coin-slider a:active { display: inline-block; } #coint-slider a:first-child { display: inline-block } Code (css): etc etc. but you will need to assign ids to all elements and each anchor target will be the next one. good luck, hope this gives you some ideas.
THANK YOU DIMITAR!!!!!!! I think you just pushed me in the right direction. I am trying this and it looks like it works so far... <div id="coin-slider" style="display: none"> <a href="#"><img src="images/slide1.jpg" width="940" height="310" alt="" /> </a> <a href="#"><img src="images/slide2.jpg" width="940" height="310" alt="" /> </a> <a href="#"><img src="images/slide3.jpg" width="940" height="310" alt="" /> </a> </div> <div id="noscript"> <a href="#"><img src="images/slide1.jpg" width="940" height="310" alt="" /> </a> </div> <script type="text/javascript"> document.getElementById('coin-slider').style.display = 'block'; document.getElementById('noscript').style.display = 'none'; </script> Code (markup): Do you see any problems with me doing it this way? or as long as it looks good I should be alright? THANKS SO MUCH AGAIN FOR HELPING ME! I was pulling my hair out with this template and coin-slider.
no need - there's a defacto tag <noscript> </noscript> which only gets rendered if js is off and yes, thats a good way to handle degradation, thumbs up. I, on the other hand, am often a believer in a thing I like to call minimum requirements. if you want to experience something, you need to meet the criteria to do so. you can't get into a trendy nightclub with your trainers and ripped jeans, you need to smarten up. same here, javascript or bye the exceptions are: e-commerce and others where cost per acquisition of customers is high. btw, check facebook with js disabled, you'd be surprised! have fun.