i am working on a mock up site with some functionality. i am working with html css and js. i am using the cycle plugin to cycle through some tabs that i have made up. ill post my code then explain what i am trying to do:
my html:
<div id="content">
<div id="image_selector" class="image_selector">
<div class ="image">
<ul>
<li><a id="Mpowered" href="">Mpowered</a></li>
<li><a id="Technology" href="">Technology</a></li>
<li><a id="Consulting" href="">Consulting</a></li>
<li><a id="Outsourcing" href="">Outsourcing</a></li>
</ul>
</div>
</div>
<div class="cell">
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic"/>
<h2>Who are we?</h2>
<p> a consulting company... ect</p>
</div>
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/tech1.jpg" alt="tech"/>
<h2>We have the tech!</h2>
<p> lots of tech!!.... ect</p>
</div>
... there are two more description sections one for each of the "a" tags i have now made as tabs.
the css looks like this:
.image_selector {
border: 1px dotted green;
height: 130px;
}
.image li {
float: left;
border: 1px solid white;
height: 100px;
width: 103px;
margin-left: 86px;
overflow: hidden;
text-align: center;
}
.image li a {
padding: 74px 0px 0px 0px;
color: white;
text-shadow: 0 0 0.6em #0197E8;
font-size: 17px;
letter-spacing: 1px;
text-decoration: none;
display: block;
height: 80px;
background-repeat: no-repeat;
}
.image li a:hover {
text-shadow: 0 0 0.6em #0197E8, 0 0 0.4em #0197E8, 0 0 0.6em #0197E8;
}
.image li #Mpowered {
background-image: url('/home/ruberto/HTML/launch_pad/images/mpower.png');
background-position: center top;
}
.image li #Technology {
background-image: url('/home/ruberto/HTML/launch_pad/images/tech.png');
background-position: center top;
}
.image li #Consulting {
background-image: url('/home/ruberto/HTML/launch_pad/images/consulting.png');
background-position: center top;
}
.image li #Outsourcing {
background-image: url('/home/ruberto/HTML/launch_pad/images/outsourcing.png');
background-position: center top;
}
.cell {
border: 1px dashed green;
height: 318px;
width: 715px;
float: left;
}
#demoimg {
float: left;
position: static;
margin: 16px 8px 0px 0px;
height: 200px;
width: 200px;
}
and the javascript iam using:
$('.cell')
.before('<div class="image">')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '.image'
});
so i have read up on line and now understand that the pager option will now create its own navigational section just above the div that has the content that i want to rotate through. i was wondering is there a way i can just reference the "image" tag i have set up as my "tabs" for the navigational function for the cell class??
if there is no way can anyone recommend something that could work in its place?
Assuming you want to reference or even map those li's to other functionality or even build another referencable pager, which what it sounds like you might need to do, you're probably going to need .index to provide a reference for those pair connections.
To start a duplicate pager, clone those elements somewhere else, then maybe simply use css to not display the original, BUT leave it in place so that cycle can use it for paging
// create secondary menu
$('#pager').find('li').clone().appendTo('#navpage ul');
Then if you want to pair your two pagers start with this functionality
http://jsfiddle.net/moneylotion/KhL3W/
Related
LINK 1 - here is a visual of what I want
LINK2 - here is the link for my sample blog. the elements are on Related Posts under the sample image post
is the result of the code snippet below. You can see in the LINK 2 I provided the thumbnails are not in the same height.
is what i want ti look like. it crops the thumbnail to fit 1:1 size.
i dont want it to stretch like this
sorry about my english and for a very long code snippet.
Also, I am no very familiar with Javascript yet.
Can you help me understand how to do it ?
Thank you.
div#related-posts {font-size: 16px;display: inline-block;width: 100%;}
div#related-posts h5 {font-size: 16px;text-transform: uppercase;margin: 0 0 25px;padding-bottom:15px;font-weight: 900;letter-spacing: 1px;text-align:center;position:relative;}
div#related-posts h5:after {content: "";position: absolute;width: 4px;height: 4px;background: #222;border-radius: 50%;bottom: 0;left: 47%;box-shadow: 1em 0px 0px 0px #222,2em 0px 0px 0px #222;}
div#related-posts ul {padding: 0;margin: 0;}
div#related-posts ul li {
list-style: none;
display: block;
float: left;
width: 10%;
padding: 0;
margin: 1px;
text-align: center;
position: relative;}
div#related-posts img {
padding: 0;
width:100%;
height:auto;
}
a.related-thumbs {position: relative;display: block;}
a.related-thumbs:before{opacity:1;}
a.related-title {
font-weight: 400;
font-size: 13px;
line-height: 1.7;
display: none;
padding-top: 0;
letter-spacing: 1px;
margin: 0;
color: #333;
position: absolute;
top: 4.5%;
left: 5%;
width: 90%;
height: 90%;
background: rgba(255, 255, 255, 0.8);
}
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry="<h5>Related Posts</h5>";rn="<h5>No related post available</h5>";rcomment="comments";rdisable="disable comments";commentYN="no";var dw="";titles=new Array;titlesNum=0;urls=new Array;timeR=new Array;thumb=new Array;commentsNum=new Array;comments=new Array;
function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if("thr$total"in d)commentsNum[titlesNum]=d.thr$total.$t+" "+rcomment;else commentsNum[titlesNum]=rdisable;if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if("media$thumbnail"in d)thumb[titlesNum]=d.media$thumbnail.url;else thumb[titlesNum]="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++)if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}
function contains(b,d){for(var c=0;c<b.length;c++)if(b[c]==d)return true;return false}
function printRelatedLabels(a){var y=a.indexOf("?m=0");if(y!=-1)a=a.replace(/\?m=0/g,"");for(var b=0;b<urls.length;b++)if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0)dw+=rn;else{dw+=ry;dw+="<ul>";while(b<titles.length&&b<20&&b<maxresults){if(y!=-1)urls[c]=urls[c]+"?m=0";if(commentYN=="yes")comments[c]=" - "+commentsNum[c];else comments[c]="";dw+='<li class="related_gallery"><a href="'+
urls[c]+'" title="'+titles[c]+'" rel="nofollow" class="related-thumbs"><img alt="'+titles[c]+'" src="'+thumb[c].replace(/\/s72\-c/,"/s"+size+"")+'"/></a><a class="related-title" href="'+urls[c]+'">'+titles[c]+"</a></li></div>";if(c<titles.length-1)c++;else c=0;b++}dw+="</ul>"}urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById("related-posts").innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=10;
var size = 250;
removeRelatedDuplicates();
printRelatedLabels('<data:post.url/>');</script>
</div>
You can try background-image property of CSS instead of using the <img> in HTML.
You can see all the images have different resolutions but using background-image property we've cropped all of them into 1:1 ratio
Have a look at the example snippet below to have a better understanding:
.div-holder {
margin: 10px;
border: 1px solid #000;
}
h3 {
margin: 10px 0 5px;
padding: 0 10px;
}
.img-holder {
display: flex;
flex-wrap: wrap;
}
.img-holder img {
margin: 10px;
align-self: center;
}
.img-holder .image {
width: 150px;
height: 150px;
margin: 10px;
background-size: cover;
background-position: center;
}
body {
margin: 0;
}
<div class="div-holder">
<h3>Actual Image Sizes</h3>
<div class="img-holder">
<img src="http://lorempixel.com/200/120/sports/1">
<img src="http://lorempixel.com/200/150/sports/2">
<img src="http://lorempixel.com/200/180/sports/3">
</div>
</div>
<div class="div-holder">
<h3>Cropped Image Sizes (1:1)</h3>
<div class="img-holder">
<div class="image" style="background-image: url('http://lorempixel.com/200/120/sports/1')"></div>
<div class="image" style="background-image: url('http://lorempixel.com/200/150/sports/2')"></div>
<div class="image" style="background-image: url('http://lorempixel.com/200/180/sports/3')"></div>
</div>
</div>
Hope this helps!
I've added an Opentable javascript reservation widget to my home page. The module has 3 dropdowns, a calendar, date selector and a time selector. The 2nd 2 dropdowns aren't responsive, even when I use z-index to move them forward to make visible.
I'm thinking I'm doing something wrong with css but can't seem to solve. Or maybe there is a conflict with js? Not sure. Any suggestions? Thanks -- The site is here on a dev server, http://aac.myftpupload.com/
screenshot of dropdown issue
I'm actually not even sure what code to put up here to share... the script it provided by opentable below, and it comes with a ton of css, which maybe conflicts with my site but I'm not sure:
</div><div class="wpb_column vc_column_container vc_col-sm-9"><div class="vc_column-inner wpex-clr"><div class="wpb_wrapper wpex-vc-column-wrapper wpex-clr " style="min-height:40px;">
<div class="wpb_raw_code wpb_raw_js">
<div class="wpb_wrapper">
<script src="https://secure.opentable.com/frontdoor/default.aspx?rid=82057&restref=6543&bgcolor=F6F6F3&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=https://secure.opentable.com/frontdoor/img/ot_btn_red.png&otlink=FFFFFF&icon=dark&mode=wide&hover=1" type="text/javascript"></script>
</div>
Some of the the css for the dropwown is:
element.style {
display: block;
}
#OT_timeList, #OT_partyList {
width: 108px;
max-height: 200px;
overflow: auto;
border-left: 2px solid #b8b4ac;
border-right: 2px solid #b8b4ac;
border-bottom: 2px solid #b8b4ac;
position: absolute;
top: 34px;
left: 39px;
display: none;
}
.entry ul, .entry ol {
margin: 0 0 10px 10px;
}
.entry ul {
list-style: disc;
}
.entry ul, .entry ol {
margin: 0 0 20px 30px;
}
.OT_navList {
list-style: none;
padding: 0;
margin: 0;
float: left;
width: 142px;
position: absolute;
background-color: #fff;
z-index: 200;
top: 35px;
left: 0;
}
In the div "rev_slider_6_1_wrapper" I set position: relative; z-index: -1;. This allowed the drop downs to be visible in front of the image and text.
So the div will look like this:
<div id="rev_slider_6_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin: 0px auto; padding: 0px; max-width: 1000px; height: 400px; overflow: visible; position: relative; z-index: -1;">
I'm not sure if this will negatively affect any of your onload effects, but if nothing else it should get you started in the right direction.
There was some strange code that I guess my template was inserting which caused the dropdowns to fall behind the slider and not function, once I removed this, it worked.
css_animation="appear"
It's me again :) today am trying to develop a sliding divs with text navigation, i mean that i can edit the nav not only generated bullets. say that we have three divs containing images and text and i need to center a navigation menu of three different links.. also if you can help me in that, if the current slider is number 3 and I clicked on nav item number 1 I want it to jump to 1 without seeing 2 during the scrolling
here is the original code i need to learn how to develop it http://www.alfaromeo.co.uk/models/giulietta#dynamism
links to a similar article or any help in general would be very appreciated
.item--mobile .slider-item__wrap{height:300px;overflow:hidden}
.row-slide,.row-wrap{*zoom:1;clear:both;position:relative}
.row-slide:before,.row-slide:after,.row-wrap:before,.row-wrap:after{content:" ";display:table}
.row-slide:after,.row-wrap:after{clear:both}
.row-slide .content__text .animated-line,.row-wrap .content__text .animated-line{top:12px}
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current">
images and text goes here 1
</div>
<div class="slide">
images and text goes here 2
</div>
<div class="slide">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a></li>
<li><a>link to slide 2</a></li>
<li><a>link to slide 3</a></li>
</ul>
</div>
</div>
It looks like you want to develop a carousel.
There are several javascript and jQuery carousels, for example Slick and
jCarousel
It will be much easier to use a plugin or somebody else's solution for this. Download one of the examples and follow the site's instructions for how to integrate it into your own site.
Otherwise, use your browser's Developer Tools or script debugging feature to study the script for that site you pointed to. You can also study the code of jCarousel and Slick, for example, or any library.
Here is a very simple example of a custom carousel I threw together that you can study. It uses progressive enhancement and takes advantage of scrolling so that even without javascript users still get a decent experience and can flip through content. (Though you could easily tailor it to hide the scrollbar by swapping images instead, for example).
The main parts are: 1) styling so that only one content panel shows at a time, and 2) the logic to animate the sliding of the panels when user navigates.
$(".slider-menu a").on("click", function() {
var $current = $(".slide.current");
var $li = $(this).closest("li");
var idx = $li.index();
if (idx !== $current.index()) {
$(".slider-menu li.current").removeClass("current");
$li.addClass("current");
var $next = $(".slide").eq(idx);
$current.removeClass("current");
$next.addClass("current");
var $carousel = $(".slider-item-wrap");
var left = $carousel[0].scrollLeft + $next.position().left;
$carousel.animate({
scrollLeft: left
}, 500);
}
});
html,
body,
.row-slide,
.slider-item-wrap {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0;
color: #fff;
overflow: hidden;
}
.row-slide {} .slider-item-wrap {
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
.slide {
width: 100%;
height: 100%;
font-size: 24px;
display: inline-block;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.slider-menu {
position: absolute;
margin: 0 auto;
width: 100%;
margin: 0;
border: 0;
padding: 0;
bottom: 20px;
}
.slider-menu ul {
list-style: none;
overflow: auto;
margin: 0 auto;
border: 0;
padding: 20px;
text-align: center;
}
.slider-menu li {
padding: 4px 20px;
display: inline-block;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.slider-menu li:hover {
background-color: rgba(255, 255, 255, 0.7);
color: #222;
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.slider-menu li.current,
.slider-menu li.current:hover {
background-color: rgba(0, 0, 0, .2);
color: #333;
box-shadow: 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current red">
images and text goes here 1
</div>
<div class="slide blue">
images and text goes here 2
</div>
<div class="slide green">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a>
</li>
<li><a>link to slide 2</a>
</li>
<li><a>link to slide 3</a>
</li>
</ul>
</div>
</div>
I am trying to get the left side bar to have a height of 100% and fill the page no matter how big the "main" div is made.
At the moment it stops at normal page height and doesn't increase height.
Is there any way I can achieve this?
JFiddle: https://jsfiddle.net/hjnheonk/
HTML:
<div class="container">
<div class="navbar-left">
<div id="top">
<h2><b>Admin</b>Panel</h2>
</div>
<div id="navigation">
<ul>
<li class="nav-header">Main Pages: </li>
<li>
Home
etc ...
</ul>
</div>
</div>
<div id="navbar-top">
<div id="user">
<?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
</div>
<div id="icon">
<span>
<hr><hr><hr>
</span>
</div>
<div class="main">
</div>
</div>
</div>
**CSS: **
html,body {
height: 100%;
}
.container {
margin-left: 230px;
height: 100%;
position:relative;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
width: 230px;
margin-left: -230px;
height: 100%;
float:left;
}
.navbar-left #top {
background-color:#367fa9;
min-height: 50px;
text-align: center;
}
.navbar-left #top h2 {
font-size: 20px;
padding: 15px 0px;
}
#navbar-top {
float:right;
width: 100%;
position:relative;
background-color:#3c8dbc;
width: 100% !important;
margin:0 auto;
border: none;
min-height: 51px;
}
#navbar-top #icon {
width: 20px;
padding: 18px 10px !important;
}
#navbar-top #icon hr {
margin:0 auto;
padding: 0px;
border: 1px solid white;
border-radius: 5px;
}
#navbar-top #icon hr:not(:first-child) {
margin-top: 5px;
}
#navbar-top > div:hover:not(#userDropdown) {
background-color:#47a0d3;
cursor: pointer;
}
#brand {
float:left;
}
#navigation .nav-header {
background-color: #272f33;
padding: 12px 30px;
text-align: left;
margin-top: 40px;
margin-bottom: 25px;
}
#navigation ul li a:hover {
background-color: #273136;
}
#navigation ul li a {
width: 100%;
display: block;
padding: 12px 0px;
background-color: #1a2226;
text-align: center;
color:white;
text-decoration: none;
}
.main {
float:left;
width: 100%;
background-color:pink;
height: 1000px; /*Used as an example to show */
}
There's no way to do this by pure CSS, they way you coded-sliced it. If you want it to make work with the current layout - calculate the height via JS, based on the contents and height of the right column.
Basically in your case there different ways to proceed:
calculate the height via JS, based on the contents and height of the right column.
to nest DIVs. So one div will stretch it's parent. Then it will be possible to use purely CSS solution. Read more here one of the possible solutions.
to "override" the standard behavior of divs with "display:table-cell;" (table, table-row, etc), or even to use modern features of CSS alike flexboxes
Which way to go, is up to you.
Does the container need to be defined as percentage? If not then you could do something like this:
$('.navbar-left').css('height', $('.container').height()+'px');
Using Farside's method and updating a little bit here is my code:
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
});
Here is a Pure CSS way to acheive the same.
JS Filddle: https://jsfiddle.net/cx6nu8sw/
Following are the classes from your code which are changed
#navbar-top {
width: 100%;
position:relative;
background-color:#3c8dbc;
margin:0 auto;
border: none;
min-height: 51px;
display:table-cell;
vertical-align:top;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
display:table-cell;
vertical-align:top;
}
//newly addition
#navigation{
width:230px;
}
As mentioned by #Farside in his 3rd point, I have used "display:table-cell;" on your Div's. Its same as creating table, where the height of row is decided by the longest content in the entire row.
But, be aware that width & height of elements with "display:table-cell;" cannot be forced, it will adjust according to the content inside them. So you can set width and height of elements inside them it will automatically take the same height and width.
Hi i am currently making a demo site from just pure html/css/javascript usually i would be using ruby and just rendering partials to solve this issue but to get some practice with javascript i though this might be an interesting challenge, and it has been! so what i have made is a block of code that has an image that is word wrapped with text. and i have positioned buttons either side of the block of content. my objective is to have those buttons hide until mouse over and onclick the content with the image will rotate to a a different image and description. and those blocks of collections will be grouped into tabs. for for instance on the home tab there will be four collections of content i could rotate through them, then the next tab would be products and if i clicked on that tab there would be three collections of content one for each product, and each would contain an image and a description..
cool so what i have so far is this here is my html:
<div class='content'>
<div class='box'>
<ul id="navigation">
<li class="two">Home</li>
<li class="three selected">Products</li>
<li class="four">Technology</li>
<li class="five">Cosulting</li>
<li class="six">Contact</li>
</ul>
<div id="sub_content">
<div class='title'>
<h3> Home </h3>
</div>
<div class="clear"></div>
<div class="arrow">
<a id="left" href=""><img src="/home/***/HTML/launch_pad/images/lefta.png">/a>
<a id="right" href=""><img src="/home/***/HTML/launch_pad/images/righta.png"></a>
</div>
<div class="clear"></div>
<div id="wall">
<div class="hide">
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic">
<h2>Who are we?</h2>
<p>a super hero organization fighting evil all day long!! .</p>
</div>
#the description class is then repeated each with a unique image and new info in the <h2> tags and the <p> tags..
i have found several things that i have found online that have been helpful but i have conflicting javascript lib errors. so i am using the so that i can use the easing 1.3 library and for the twitter widdget i am using.
my css looks like this:
.content {
margin-left: 5%;
margin-right: 5%;
width: 1400px;
}
.box {
float: left;
width: 950px;
margin-left: 20px;
position: relative;
}
#sub_content {
background-color: white;
width: 720px;
max-height: 462px;
min-width:600px;
margin: 0px 0px 0px 40px;
padding: 15px;
border: solid 1px black;
border-radius: 8px 8px 8px 8px;
overflow-y: auto;
}
.title {
text-align: right;
text-transform: uppercase;
border: 1px solid yellow;
margin: 0px 25px 5px 25px;
padding: 5px;
}
#wall {
min-width: 300px;
margin:0px 0px 15px 15px;
width:655px;
border: 1px solid red;
float: left;
padding: 5px;
}
.description {
margin: 0px 0px 10px 10px;
padding: 5px;
width: 630px;
border:1px solid green;
float: left;
}
#decription p {
word-wrap: break-word;
}
#demoimg {
float: left;
margin: 16px 8px 0px 0px;
height: 200px;
width: 200px;
}
EDIT:
this is the javaScript i was trying:
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'description',
duration: 1500,
buttons: {next:'right',prev:'left'},
transition: Fx.Transitions.Quint.easeOut
}
var scroller = new QScroller('content',opt);
scroller.load();
});
//-->
</script>
but this doesnt seem to work i have a file with all my javascript in my directory that i link to..
the one that has come really close is at http://www.latenight-coding.com/mootools/classes/qscroller.html under Horizontal scroller with text and images. but it doesnt work!! which makes me pull out my hair. is there another way to just loop through the description and hide the ones that arnt selected??
any help or a better reference's would be much appreciated :D
You might consider using Jquery Cycle. It is an OUTSTANDING plugin that uses easing, and will allow you to have both a description of your content and prev/next buttons or links. You can also have multiple slideshows on one page, and it is probably not a hair-puller to have a link to one slideshow open up several, as this seems to be what you are looking for.
It works pretty easily out of the box and is highly customizable. The website has a ton of examples with code.