Create Custom List Item HTML, Row With Spacing - javascript

I am currently working on a project and I want to display something similar to Apple's stocks app, how a single row has a name followed by a current number and then a +- indicator of how much the stock either went up or down from before. I really like this row design against a black background and think its easily readable, so that's why I want to do it. At the moment I am trying to create a single row of HTML combined with CSS that will give me this kind of look and feel, a custom list item if you will.
I have the positive\negative indicators made but cannot figure out how to space and include text to the left of this element within the same list item row. Ideally, the layout should be something like this:
STOCKNAME PREVTOTAL STOCKPOSORNEG
All of these fields should be in the same list item row. Since I've had some trouble with this approaching using the un-ordered list I could also explore a table option but wanted to see if there was a way it could possibly be done that way first. Below is what I was experimenting with via the TryIt Editor:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 7px;
background: #80ff80;
padding: 20px;
width: 90px;
height: 10px;
color: #FFF;
}
#makeLeft {
float: left;
}
#makeRight {
float: right;
}
#listitem {
list-style: none;
background-color: black;
border: .5px solid #efeff5;
padding: 1px;
}
</style>
</head>
<body>
<ul id="mylist">
<li id="listitem">
<p id="rcorners1">
<span id="makeLeft"><strong>+</strong></span>
<span id="makeRight"><strong>1234.00</strong></span>
</p>
</li>
</ul>
</body>
</html>

How does this work out for you?
I tried to get it as close to the original stocks app as possible. Some of the font sizes might be a bit off, but this is probably as good as you're going to get.
span{
font-family: arial;
font-size: 24px;
color: #fff;
}
.container{
width: 400px;
height: 200px;
background: #040404;
}
.row{
position: relative;
width: calc(100% - 20px);
height: 29px;
padding: 13px 10px 13px;
}
.row.highlighted{
background: #383838;
}
.name{
float: left;
}
.price{
display: inline-block;
margin-right: 3px;
}
.pn{
padding-right: 5px;
}
.pn-con{
position: absolute;
top: 10px;
right: 10px;
}
.main-pn{
display: inline-block;
height: 29px;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
background: #FD3C2F;
}
<div class="container">
<div class="row">
<span class="name">DOW J</span>
<div class="pn-con">
<span class="price">18,109.80</span>
<div class="main-pn">
<span class="pn">-</span>
<span class="val">53.19</span>
</div>
</div>
</div>
<div class="row highlighted">
<span class="name">MSFT</span>
<div class="pn-con">
<span class="price">47.58</span>
<div class="main-pn">
<span class="pn">-</span>
<span class="val">0.04</span>
</div>
</div>
</div>
</div>
Here's a working JsFiddle for it!
It's pretty customizable, all you need to do is copy & paste the rows, and alter the values within the spans!
Here's an image of the actual stocks app for reference!
Hope it helps! :-)

Related

How do I reuse an HTML element on the same page using jQuery?

I created a div element called main-middle-column-container in my HTML and styled it with CSS. Basically, main-middle-column-container will create a twitter-like message box that will have a name, date/time, and the message.
I want to reuse main-middle-column-container and all the code inside of it with jQuery so that when new data comes in, it will use a fresh main-middle-column-container as a template to add in the new values (like how twitter would work). When new data comes in, #username, date/time, and This is a random message. #random will be replaced with the incoming data or leave the elements empty and have the new data fill it in.
I thought about using $('.main-middle-column-container').clone().appendTo('.main-middle-column-wrapper'); but that will keep double cloning it (1 box -> 2 box -> 4 box -> 8 box...) instead of cloning it once. I also have an issue of getting rid of main-middle-column-container before I receive any data because I don't want an empty box on the website I am trying to create. I want main-middle-column-container to be created right when I get some kind of data/message.
CSS and HTML (message box)
.main-middle-column-wrapper{
display: flex;
flex-direction: column;
width: 49%;
}
.main-middle-column-container{
width: 100%;
}
.main-middle-column{
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
height: auto;
width: 100%;
background-color: white;
padding: 9px 12px;
z-index: -2;
box-shadow: 0 0 2px 0 lightgray;
position: relative;
}
.main-middle-column:hover{
background-color: hsl(200, 23%, 96%);
}
.tweet-pic-wrapper{
position: absolute;
top: 5px;
}
.tweet-pic-container{
position: relative;
height: 48px;
width: 48px;
border: 3px solid transparent;
border-radius: 100%;
overflow: hidden;
z-index: 1;
display: inline-block;
}
.tweet-pic{
position: absolute;
margin: 0 auto;
height: 100%;
left: -6px;
width: auto;
}
.title-account-time{
margin-left: 55px;
}
.msg-title{
font-weight: bold;
}
.msg-acc-name{
color: #657786;
}
.msg-acc-name:hover{
cursor: pointer;
}
.msg-date{
color: #657786;
margin-top: 1px;
}
.tweet-msg{
margin-left: 55px;
margin-top: 5px;
}
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">My Twitter</span>
<span class="msg-acc-name">#username</span>
<div class="msg-date">date/time</div>
</div>
<div class="tweet-msg">
This is a random message. #random
</div>
</div>
</div>
</div>
I think i have a solution for you, you can create a 'template' and retrieve that template with jquery.
If you put this in your main html file
<script id="hidden-template" type="text/x-custom-template">
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">My Twitter</span>
<span class="msg-acc-name">#username</span>
<div class="msg-date">date/time</div>
</div>
<div class="tweet-msg">
this is a story all about how my life got flipped turned upside down and id like to take a minute and just sit right there id like to tell you how i became a prince in a town called belair.
</div>
</div>
</div>
</div>
</script>
You can get the content with jquery like this
var template = $('#hidden-template').html();
Now you have your html 'template' in your javascipt, now your can create more than one of these elements.
$('#target').append(template);
Or you can use a better/simpler method with plain javascript
const card = ({ img_alt, img_src, title, username, date, msg }) => `
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="${img_src}" class="tweet-pic" alt="${img_alt}">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">${title}</span>
<span class="msg-acc-name">#${username}</span>
<div class="msg-date">${date}</div>
</div>
<div class="tweet-msg">${msg}</div>
</div>
</div>
</div>
`;
You can use this as a function to create your elements dynamically with all kinds of data.
Create a function that returns a Template Literal with the desired HTML markup structure. Map your tweets and insert them into a target parent:
const tweets = [
{
_id: 321,
pic: "https://placehold.it/80x80/0bf",
title: "My Twitter",
name: "#username",
date: "2020-01-18",
msg: "this is a story"
},
{
_id: 231,
pic: "https://placehold.it/80x80/f0b",
title: "My alter Twitter",
name: "#user",
date: "2020-01-19",
msg: "Again, another story"
}
];
const newTweet = tweet => `<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="${tweet.pic}" class="tweet-pic" alt="${tweet.title}">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">${tweet.title}</span>
<span class="msg-acc-name">${tweet.name}</span>
<div class="msg-date">${tweet.date}</div>
</div>
<div class="tweet-msg">${tweet.msg}</div>
</div>`;
const populateNewTweets = (tweets, parent) => {
if (!tweets.length) return;
$('<div>', {
class: 'main-middle-column-container',
appendTo: parent,
append: tweets.map(newTweet)
});
};
populateNewTweets(tweets, '.main-middle-column-wrapper');
.main-middle-column-wrapper{
display: flex;
flex-direction: column;
width: 49%;
}
.main-middle-column-container{
width: 100%;
}
.main-middle-column{
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
height: auto;
width: 100%;
background-color: white;
padding: 9px 12px;
z-index: -2;
box-shadow: 0 0 2px 0 lightgray;
position: relative;
}
.main-middle-column:hover{
background-color: hsl(200, 23%, 96%);
}
.tweet-pic-wrapper{
position: absolute;
top: 5px;
}
.tweet-pic-container{
position: relative;
height: 48px;
width: 48px;
border: 3px solid transparent;
border-radius: 100%;
overflow: hidden;
z-index: 1;
display: inline-block;
}
.tweet-pic{
position: absolute;
margin: 0 auto;
height: 100%;
left: -6px;
width: auto;
}
.title-account-time{
margin-left: 55px;
}
.msg-title{
font-weight: bold;
}
.msg-acc-name{
color: #657786;
}
.msg-acc-name:hover{
cursor: pointer;
}
.msg-date{
color: #657786;
margin-top: 1px;
}
.tweet-msg{
margin-left: 55px;
margin-top: 5px;
}
<div class="main-middle-column-wrapper"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
The best solution to this would be to use some kind of templating engine, for example Mustache. If that however is out of the question, the solution to your problem would be something like this:
jQuery(document).ready(function() {
/* this should store the container templates clone in a variable */
mainMiddleContainerTemplate = jQuery(".main-middle-column-container").get(0).clone();
/* this should remove every main middle container from the view, in case
you have multiple containers that are not templates, consider adding
an additional class to your template container */
jQuery(".main-middle-column-container").remove();
});
function addNewContainer(containerData) {
var newContainer = mainMiddleContainerTemplate.clone();
/** add and replace all the data needed on the newContainer **/
newContainer.find('.message-title').html(containerData.title);
newContainer.find('.msg-acc-name').html(containerData.accountName);
....
jQuery(".main-middle-container-wrapper").append(newContainer);
}
But still, I would advice you, to use a templating engine for these kinds of stuff.
$('.main-middle-column-container').first().clone().appendTo('.main-middle-column-wrapper');
The key is to select only one element to be cloned. First is as good as any other.

Linking to more than one Page via User Input

So, with my code, Im trying to make this bar go to multiple urls based on what I put in. Like, "Take me to cats" will send me to "cats.com". Im trying to go to multiple html pages based on various words from the user. How do I do this? If you could do this it would help alot.
Here is the code:
/**
* Step 2: In your JavaScript, attach an event listener to the input element.
*/
document.getElementById('url-bar')
.addEventListener('keypress', function(event) {
// The keyCode for the "Enter" key is 13.
if (event.keyCode === 13) {
let urlValue = event.target.value
window.location ='Store.html';
}
});
body {
font-family: Arial
}
* {
box-sizing: border-box;
}
/* The browser window */
.container {
border: 3px solid #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Container for columns and the top "toolbar" */
.row {
padding: 10px;
background: #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
}
.left {
width: 15%;
}
.right {
width: 10%;
}
.middle {
width: 75%;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Three dots */
.dot {
margin-top: 4px;
height: 12px;
width: 12px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
/* Style the input field */
input[type=text] {
width: 100%;
border-radius: 3px;
border: none;
background-color: white;
margin-top: -8px;
height: 25px;
color: #666;
padding: 5px;
}
/* Three bars (hamburger menu) */
.bar {
width: 17px;
height: 3px;
background-color: #aaa;
margin: 3px 0;
display: block;
}
/* Page content */
.content {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="column left">
<span class="dot" style="background:#ED594A;"></span>
<span class="dot" style="background:#FDD800;"></span>
<span class="dot" style="background:#5AC05A;"></span>
</div>
<div class="column middle">
<input id="url-bar" type="text" value="/Home">
</div>
<div class="column right">
<div style="float:right">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="content">
<h3>The Poke Browser</h3>
<p>Surf for Things in the Poke World</p>
</div>
</div>
</body>
</html>
Thats the code. I was able to only get it to take me to 1 page based on ANY input instead of a specific input.
youhave to seperate the search value which is entered by user using some kind of seperator such as space or , in your search text field. Then you can make use of split function of javascript to create a array of search url and iterate through it to open it seperately using forEach loop. Sharing with you the codepen link -
https://codepen.io/hims89/pen/WPVjLX
you can make use of IFFY for registering events
(function(){
var seperator=" ";
var searchref=document.getElementById("search");
searchref.addEventListener("keypress",function(ev){
if(ev.keyCode===13)
{
var urlarr=searchref.value.split(seperator);
urlarr.forEach(function(rec){
window.open(rec,"_blank");
});
}
});
})();

Drag & Drop Text-Elements on PDF-Documents and save new PDF with dropped Elements

I am working currently on a project and i haven't found a solution how to realize it yet. I am not asking for the solution. I would be very thankful if someone could give me some hints or tell me in which direction i could go to reach my goal.
Currently i am thinking about trying to solve it by programming an web-application. But i am not sure if a windows forms application would even be better. I am also open for other solutions.
My goal is following:
I have some (real world) documents which are being scanned and afterwards scanned with an OCR-Scanner, which generates some PDF-Documents.
Next i want to open one of these generated PDF-Files in a User Interface which shows me the PDF. The user should be able to select some (one after another) text-blocks, which are downloaded from a database, and drag them over the pdf and drop it at some position.
Now i want to save or print the pdf with the text-blocks, just as the user sees it. Kind of making a screenshot of the pdf but resulting in a pdf file with the same dimensions as before.
Currently i have no idea how to "merge" these two.
Which technologies should i use. What would you recommend me. Would a web-application or something native be better suitable for that purpose.
I have written some kind of mockup to show what i mean. Please put some pdf named "testpdf.pdf" to the same folder if you want to test it.
It works on Chrome ... not sure about the others.
Thanks a lot
Kerem
var movabelelements=document.getElementsByClassName("moveableElement");
Array.from(movabelelements).forEach(element => {
dragElement(element);
});
function dragElement(elem){
var pos1=0,pos2=0,pos3=0,pos4=0;
elem.onmousedown=dragMouseDown;
function dragMouseDown(e){
e=e||window.event;
e.preventDefault();
pos3=e.clientX;
pos4=e.clientY;
document.onmouseup=closeDragElement;
document.onmousemove=elementDrag;
}
function elementDrag(e){
e=e||window.event;
e.preventDefault();
pos1=pos3-e.clientX;
pos2=pos4-e.clientY;
pos3=e.clientX;
pos4=e.clientY;
elem.style.top=(elem.offsetTop -pos2)+"px";
elem.style.left=(elem.offsetLeft-pos1)+"px";
}
function closeDragElement(){
document.omouseup=null;
document.onmousemove=null;
}
}
function printPDF(){
alert('Der Bericht sollte jetzt gedruckt werden');
}
function highLightAllValues(){
Array.from(movabelelements).forEach(element => {
element.classList.add("highlighted");
});
setTimeout(function(){
Array.from(movabelelements).forEach(element => {
element.classList.remove("highlighted");
});
}, 1500);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,h2{
text-align:center
}
.pdffile{
height: 100%;
width: 100%;
}
body,html{
height: 100%;
width: 100%;
}
#values_list_values{
padding: 15px;
}
#values_list{
text-align: center;
}
#values_list_values div{
margin: 15px;
border-bottom: solid;
border-width: 1px;
}
#values_list_values div:hover{
color: red;
}
#values_list_values div span{
margin: 10px;
}
.moveableElement{
border-style: solid;
border-color: transparent;
position: absolute;
z-index: 20;
padding: 20px;
}
.moveableElement:hover{
border-style: solid;
border-color: red;
cursor: move;
}
#values_list{
position: relative;
width: 20%;
display: inline-block;
padding: 10px;
padding-bottom: 50px;
}
#pdfFileWrapper{
width: 80%;
float: left;
height: 100%;
}
#highLightAllValuesButton{
width: 90%;
display: inline-block;
padding: 20px;
margin: 10px;
}
.highlighted{
border-style: solid;
border-color: red;
border-width: 2px;
}
#printButtonArea{
position: fixed;
bottom: 10px;
right: 10px;
width: 20%;
height: 50px;
line-height: 50px;
}
#printButtonArea button{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Vorschau</title>
<link rel="stylesheet" href="vorschau.css">
</head>
<body>
<h1>Druckvorschau PDF</h1>
<div id="pdfFileWrapper">
<object class="pdffile" data="testpdf.pdf" type="application/pdf">
alt : PDF-Vorschau Fehlgeschlagen - Bitte anderen Browser Probieren
</object>
</div>
<div id="values_list">
<div id="printButtonArea">
<button onclick="printPDF()">Print</button>
</div>
<h2>Werte aus der Datenbank</h2>
<button id="highLightAllValuesButton" onclick="highLightAllValues()">Show all text blocks</button>
<div id="values_list_values">
<div>
<h3>One</h3>
<span>xy</span>
</div>
<div>
<h3>Material ID</h3>
<span>12</span>
</div>
<div>
<h3>Some Other ID</h3>
<span>some other id</span>
</div>
<div>
<h3>Identifikation</h3>
<span>lastvalue</span>
</div>
</div>
</div>
<div id="1" style="top:200px;left:100px" class="moveableElement">
Example value
</div>
<div id="2" style="top:250px;left:150px"class="moveableElement">
Car One
</div>
<div id="3" style="top:300px;left:200px" class="moveableElement">
<span>whatever</span>
</div>
<div id="4" style="top:350px;left:250px" class="moveableElement">number 12
</div>
</body>
<script src="vorschau.js"></script>
</html>

Jquery & CSS - Overlapping divs

I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.

JavaScript rotating through html/css content

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.

Categories