JavaScript - Javascript Grid And Scroll.to
Hi,
This is my plan. I want to create a 3x3 grid on the page. Each square needs to be the height and width of the page. I will then use jquery scroll.to to move the grid, dispalying a different square to the user. Am I right in thinking that I wont be able use 100% width and 100% height in my CSS for the single box, since there are actually going to 8 squares that are off the page? I am guessing therefore that I should use javascript to take the window width and height, and then use this value to create each of the gridbox's. Is this the right way of doing it? Similar TutorialsHi, I need s JavaScript component that will allow the user to edit small amounts of data (<20 rows and Cols) in a grid format. Any suggestions on what to use? Thanks Bob I am using the JavaScript Image Scroll found on http://net.tutsplus.com/tutorials/ja...mage-scroller/. I would like to make it so that the images loop with no gap, it has a view demo on the site which you can see here; http://net.tutsplus.com/tutorials/ja...mage-scroller/ Many Thanks, Tim Hello, I have an image scroll on my site that uses JavaScript. Each individual image/slide can be linked to a url. My problem is that it opens a new window when you click an image, and I want it to simply open the new link in the same window. Here is what I have in the head section: Code: <script language="JavaScript1.1"> <!-- var slideimages=new Array() var slidelinks=new Array() function slideshowimages(){ for (i=0;i<slideshowimages.arguments.length;i++){ slideimages[i]=new Image() slideimages[i].src=slideshowimages.arguments[i] } } function slideshowlinks(){ for (i=0;i<slideshowlinks.arguments.length;i++) slidelinks[i]=slideshowlinks.arguments[i] } function gotoshow(){ if (!window.winslide||winslide.closed) winslide=window.open(slidelinks[whichlink]) else winslide.location=slidelinks[whichlink] winslide.focus() } //--> </script> Here is what I have in the body: Code: <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("images/scroll-logo.jpg","images/scroll-natingredients.jpg","images/scroll-ucoriginal.jpg","images/scroll-organic.jpg","images/scroll-uckick.jpg") slideshowlinks("healthprogressives.html","faq.html","index.html","faq.html","index.html") //configure the speed of the slideshow, in miliseconds var slideshowspeed=5000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) } slideit() //--> </script> Thank you~ I want to create this box. http://i31.tinypic.com/oqb12q.jpg I know i can do it with a iFrame, but i've heard they are quite vunerable to hacking. I already have my .php sorted to show the admin posted news on my site (Im alright at .php; rubbish and javascript). Was just wondering if there was a way to do it without using iFrames ? Hi to everyone! Script first: Code: var allowscroll = 0 //Mouse scroll ____________________________________________________________________________________ function handle(delta) { if(allowscroll == 1){ if (delta < 0){ simgs1dest_x -= 30 } else{ simgs1dest_x += 30 } } if(allowscroll == 2){ if (delta < 0){ textdest_y -= 30 } else{ textdest_y += 30 } } } function wheel(event){ var delta = 0; if (!event) event = window.event; if (event.wheelDelta) { delta = event.wheelDelta/120; } else if (event.detail) { delta = -event.detail/3; } if (delta) handle(delta); if (event.preventDefault) event.preventDefault(); event.returnValue = false; } if (window.addEventListener){ window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel; } I'm using this script to scroll two divs, which each activates self scrolling onMouseOver and onMouseOut deactivate scrolling by setting allowscroll varible to 0. And everything works fine, but this script doesn't allow to scroll browser entire page! So is there a script wich will scroll browser page when allowscroll is equal to 0? I am using the below script on http://bubbles4urtroubles.com. Because I made the bubbles larger than the ones used in the original script, the horizontal scroll bar displays some of the time, then turns off. Is there any way to just not have the horizontal scroll bar? Also, how would I set the zindex so the bubbles are always in front of everything else. Thank you in advance. //Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com) //Based on code by Altan d.o.o. (snow@altan.hr) //For full source code and installation instructions to this script, visit http://www.dynamicdrive.com var no = 15; // image number or falling rate var speed = 2; // the lower the number the faster the image moves var snow = new Array(); snow[0] = "bubble.png" snow[1] = "bubble2.png" snow[2] = "bubble3.png" var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 600, doc_height = 1024; if (ns4up||ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); j = 0; for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } } else if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } } if (j == (snow.length-1)) { j = 0; } else { j += 1; } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]+pageYOffset; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE_NS6() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = ns6up?window.innerWidth-5:document.body.clientWidth; doc_height = ns6up?window.innerHeight-5:document.body.clientHeight; } dx[i] += stx[i]; if (ie4up){ document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } else if (ns6up){ document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px'; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px'; } } setTimeout("snowIE_NS6()", speed); } if (ns4up) { snowNS(); } else if (ie4up||ns6up) { snowIE_NS6(); } // End --> </script> Hi I had a problem earlier with the dom, which I have resolved. I was just wondering if anyone new how to use the dom, to create a table styled effect, a 3x5 grid. I find that I can create div elements and add them to the document, but they are only added vertically and not in the horizontal. This is my code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <META name="generator" content="Free Script Editor, see www.freescripteditor.com"> <TITLE>Email Client</TITLE> <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/> <script src="javascript/prototype.js" type="text/javascript"></script> <script src="javascript/scriptaculous.js" type="text/javascript"></script> <script src="javascript/dragdrop.js" type="text/javascript"></script> <script src="javascript/controls.js" type="text/javascript"></script> <script src="javascript/effects.js" type="text/javascript"></script> <script src="javascript/builder.js" type="text/javascript"></script> <script type="text/javascript"> var xmlhttp = false; //check if we are using IE try { //If the javascript version is greater than 5. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); alert ("You are using Microsoft Internet Explorer."); } catch(e) { //if not, then use the older active x object. try { //if we are using Internet Explorer xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); alert("You are using Microsoft Internet Explorer"); } catch (E) { xmlhttp = false; } } //If we are using a non-IE browser, crea a javascript instance of the object if(!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); alert ("You are not using Microsoft Internet Explorer"); } function createTable() { var divright, div1, div2, div3, div4, div5, div6, div7, div8, div9, div10, div11, div12, div13, div14, div15; divright = document.getElementById('right'); div1 = document.createElement('div'); div1.className = 'droparea'; div1.setAttribute('id', 'sortList1'); div2 = document.createElement('div'); div2.className = 'droparea'; div2.setAttribute('id', 'sortList2'); div3 = document.createElement('div'); div3.className = 'droparea'; div3.setAttribute('id', 'sortList3'); div4 = document.createElement('div'); div4.className = 'droparea'; div4.setAttribute('id', 'sortList4'); div5 = document.createElement('div'); div5.className = 'droparea'; div5.setAttribute('id', 'sortList5'); div6 = document.createElement('div'); div6.className = 'droparea'; div6.setAttribute('id', 'sortList6'); div7 = document.createElement('div'); div7.className = 'droparea'; div7.setAttribute('id', 'sortList7'); div8 = document.createElement('div'); div8.className = 'droparea'; div8.setAttribute('id', 'sortList8'); div9 = document.createElement('div'); div9.className = 'droparea'; div9.setAttribute('id', 'sortList9'); div10 = document.createElement('div'); div10.className = 'droparea'; div10.setAttribute('id', 'sortList10'); div11 = document.createElement('div'); div11.className = 'droparea'; div11.setAttribute('id', 'sortList11'); div12 = document.createElement('div'); div12.className = 'droparea'; div12.setAttribute('id', 'sortList12'); var div13 = document.createElement('div'); div13.className = 'droparea'; div13.setAttribute('id', 'sortList13'); div14 = document.createElement('div'); div14.className = 'droparea'; div14.setAttribute('id', 'sortList14'); div15 = document.createElement('div'); div15.className = 'droparea'; div15.setAttribute('id', 'sortList15'); divright.appendChild(div1); divright.appendChild(div2); } function getmessage(inbox_id) { var object = document.getElementById('content'); var server = "getmessage.php?inbox_id=" +inbox_id; xmlhttp.open("GET", server); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { object.innerHTML = xmlhttp.responseText; } } xmlhttp.send(null); } function createSortables() { Sortable.create('container1', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7' , 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList1', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList2', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList3', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList4', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList5', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList6', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList7', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList8', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList9', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList10', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList11', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList12', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList13', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList14', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList15', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); } window.onload = function() { this.createTable(); this.createSortables(); } </script> </HEAD> <BODY> <!--header div - for message 'new', 'reply' --> <div class="container" id="container"> <div class="header"> </div> <!-- end of header div--> <!--Begin the div class left - this will hold the inbox emails for review--> <div class="left" id='container1'> <?PHP include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php'); $str = "id"; $i = 0; $inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i"; $inbox_result = mysql_query($inbox_query); while($row = mysql_fetch_array($inbox_result)) {//start while trainer query $inbox_id = $row['0']; $to = $row['1']; $subject= $row['2']; $sent = $row['3']; $message = $row['4']; $i++; echo "<div class='draggable' id='$str$i'> $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$subject</a> </div>"; }//end while inbox query ?> </div> <!--end left div--> <!--begin the right div - this is the right side of the screen frame for postponed email area--> <div class="right" id="right"> </div> <div class="content" id="content"> </div> </div> <!--end the right div element--> <!--begin the main content div - this will hold sent message--> </BODY> </HTML> I have created an editable grid based on: http://www.webismymind.be/editablegrid Although I have created a few basic sites - coding is still pretty new to me, but what I want to do is make this grid editable by an admin user - and then have other users who can view it but not edit it. I am trying to create a basic staff rota & any help would be much appreciated Thanks Hello, I have this idea, but I wouldn't want to reinvent the wheel if it's already been done. I want to generate perspective grid on canvas depending on browser window size, something like this, but without textures: http://www.123rf.com/photo_2651286_a...rspective.html Do someone of you guys know if some similar script already exists? Or at least some tips on how not to end up writing a 1000 lines script (At this point I would just drop the idea)? All thoughts appreciated. P.S. even an obscure algorithm would probably suffice, 'cause the main problem I'm struggling with is diminishing size perspective calculations Hey, I have a script which uses an array of numbers to represent their position in a div. its 5 by 5 like so: Code: tileMap = [ [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], ]; images = new Array(); images[1] = "no block"; images[3] = "brick.PNG"; Image[1] means you can move on the tile, 3 means you cannot (aka a collision). Now this is fine but i have issues regarding my movement of the image. I want to use WASD keyboard buttons which i can do using a CASE statement. But how do you make the image move Regarding Left/Right/Up/Down (also so that it stops moving when you stop holding down one of the keyboard buttons. I use this to detect the key button pressed: Code: function handleKeyMovement(keyValueDown) { switch(keyValueDown) { case 97: //A Move Left //move it left break; case 100: //D Move Right //move it right break; case 119: //W Move Up //move it up break; case 115: //S Move Down //move it down break; } } p.s ideally i would like to move the said image by certain pixel amounts so it looks more smooth in movement. Is it possible? Hope you can help ! Hi Peers, i am trying to build a template for my work. 1- it consists of 3 rows of data pulled from a databse based on 3 parameters entered in a form. those 2 rows includes 60 cells each ( 60 columns : 60 months) 2- i will have another 2 empty rows where i have to call another data from another table or enter it manually.. 3- i ll have the last row that will hold calculation results based on the above rows.. Any idea on how to build that ? \please let me know if you need more details or mock up .. it almost like an excel web spreadsheet except that sopme data is pulled directly from a database.. thank you Hello, I'm more looking for advice but any helpful examples would be great. So basically what I need to accomplish is a grid, that I can drop objects into, then save the coordinates. So let's say I have a 3x3 set of tiles which will represent "floor tiles", and I load from my MySql database a users "furniture", what's the best method of being able to take these dynamic items drop them on a tile which can be then saved in an xml file or something. What are the best j/s libraries for this? I know jQuery and mootools have drag and drop functions but can they accomplish what I'm looking for? Any feedback will help, I'm comfortable coding in js but I want to do it effeciently and there's got to be people who have done similar things. i am trying to change my background image after click on given in grid option. any body show me complete code in java script. resource: HP Laptop Repair and Solution Service Center in Delhi Does anyone know where I could get a scroller similar to the one used in this recent news div? http://www.383project.com/ thanks! Have a container set to an em height and need the get the scroll or overflow value. Basically need to know if text node inside container has content hidden below the height allowed. How do I get this?
Hi, Quick question - I want to find the scrollTop value for some ajax divs but I can't seem to get scrollTop to work. The html looks like this: Code: <div id="media-meta-container" style="width: 302px;"> <p>Subtitles <span id="status" ></span></p> <div id="scrollbox" > <div id="content" > <div id="content_0">Content 0</div> <div id="content_1">Content 1</div> <div id="content_2">Content 2</div> <div id="content_3">Content 3</div> <div id="content_4">Content 4</div> </div> </div> </div> Where scrollbox is, you guessed it, a scroll box. I want to find the y position of each of the content divs. I tried this (for exampel for the last element) but it didn't work: Code: var height = $('#content div')[4].attr('scrollTop'); Any ideas? Good morning, I'm using the TDC JavaScript Ticker code and would like to have the data scroll from right to left. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="sagscroller.css" /> <script type="text/javascript"> //Note- Below example by JavaScriptKit.com function tdcticker(){ tickerSet.MoveNext(); if (tickerSet.EOF) //if end of data's file tickerSet.MoveFirst() setTimeout("tdcticker()",9000); } function init(){ tickerSet=ticker.recordset tickerSet.moveFirst() setTimeout("tdcticker()",9000) } </script> <a href="" datasrc="#ticker" class="ticker" datafld="messageURL" style="width:260px; border:0px solid black;"> <span id="tickerDiv" datasrc="#ticker" datafld="MESSAGES" ></span> </a> <script type="text/javascript"> if (document.all) ticker.ondatasetcomplete=init </script> Thanks in advance! Hello, Could anyone plz recommend a script that adds a "move to top" box for our .php site similar to the one we have on our blog site: http://sand.greekconcierge.com/ many thanks, Andy hello I have the Javasript , to Control the direction of Maarquee .. its very useful for any one , feel fre to use .. But not this why i'm here I need to Improve it , this code Has 4 Images , 1- on click Marquee Speeds up .. done 2- On click Marquee Slows Down .. done 3-On click Marque Go left .. done 4-On click Marque Do right .. done 5- On click Marque Scroll Up ............Needs Help to do it 6- On click Marquee Scroll Down .... Needs help to do it i want N# 5 , 6 done same way on clik on image to go up and down .. code PHP Code: <style type="text/css">a {text-decoration: none} a:link {color: black;}</style> <table style="width: 100%; direction: rtl; background-color: EBEBEC; border: 1px solid EBEBEC" cellspacing="3" cellpadding="3" class="style1"> <tr> <td style="width: 100px"> <img src="images/right_button.gif" title="Go Right" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.direction='right';document.all.last_feed.start();"> <img src="images/left_button.gif" title="Go Left" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.direction='left';document.all.last_feed.start();"> <img src="images/plus.gif" title="Speed Up" border="0" align="center" style="cursor:hand; " onclick="document.all.last_feed.scrollAmount=8;"> <img src="images/minus.gif" title="Slow Down" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.scrollAmount=4;"> </td> <td style="font-family: tahoma; font-size: 0.75em"> <marquee id="last_feed" behavior="scroll" direction="right" scrolldelay="50" height="20" scrollamount="5" onmouseover="this.setAttribute('scrollamount', 0, 0); " onmouseout="this.setAttribute('scrollamount', 5, 0);" >Your Text here</marquee></td></tr></table> Hello, How can i get scroll bar position of body tag ? Thanks in advance. |