|
JavaScript - Moving Div Down With Page Scroll
I am trying to find some examples of something I know I have seen in the past, but I am unable to put together a search that is coming up with anything.
What I have is a div of content that I need to always be visible on the screen. The page needs to be scrolled to read through it all so I need a way for the div to move down the page as I scroll. Can anyone point me in the right direction? Similar TutorialsI have a paragraph of text which is embedded in an IFrame. when i search particular string in that paragraph, if the string is found then the string will be highlighted and the full paragraph is loaded in IFrame. but, if the searched text is at the bottom, then scroll bar in an iframe is not automatically moved to the hidden highlighted text position. any body help me to move the scroll bar automatically to the hidden text position in the IFrame? please run the code, type any text from the paragraph of text and click serach button. see the output. [if the searched text is at the bottom, move the scroll bar to see it in the iframe] code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script language="javascript" type="text/javascript"> var html = "Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text."; var iframe; var id; var doc; var index; var highlightStartTag = "<span style='color:#EE7A03'>"; var highlightEndTag = "</span>"; var wrong_word = "speltext"; var afterHighlightText; var newText; var start = 0; function highlight() { iframe = document.getElementById('frame1'); doc = iframe.document; if (iframe.contentDocument) doc = iframe.contentDocument; else if (iframe.contentWindow) doc = iframe.contentWindow.document; } function highlight1() { newText = html; var tid = document.getElementById('TextBox1'); var text = tid.value; index = newText.indexOf(text); if (index >= start) { var length = 0; length = index + wrong_word.length; var before_delim = newText.charAt(index - 1); var after_delim = newText.charAt(length); var beforeHighlightText = newText.substring(0, index - 1); afterHighlightText = newText.substring(length + 1, newText.length); newText = beforeHighlightText + before_delim + highlightStartTag + newText.substr(index, text.length) + highlightEndTag + after_delim + afterHighlightText; doc.write(newText); } else { alert("Reached End"); } return false; } </script> </head> <body onload="highlight()" > <form id="form1" runat="server"> <div> <div> <b>Sample Text:</b> <br /> Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text. </div> <br /> <b>Type the Text to Search from the above passage, for EG:"powerful"</b> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <br /> <b>Move Scroll button to see hidden highlighted text</b> <iframe id="frame1"></iframe> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Search" OnClientClick="return(highlight1());" /> </div> </form> </body> </html> Thanks, Lakshmi Hi Guys, seen some pages who give alerts or Warnings mentioning that i'm moving away from my webpage. Best example is hotmail when you are on the compose mail screen and when click another link it is asking for confirmation. Can you one please shed some light on how to do this. Your help is greatly appreciated. Cheers Dileep Hi. Stuck on an assignment, inserting 3 files that i am working with, unable to get the unhide or move functions working. Thanks for all your help. ***Index.htm Code: 01.<html> 02.<head> 03.<!-- 04. New Perspectives on JavaScript 05. Tutorial 4 06. Review Assignment 07. 08. Avalon Books 09. Author: Rexdreamer 10. Date: 08/12/09 11. 12. Filename: index.htm 13. Supporting files: ab.gif, ablogo.gif, avalon2.htm 14.--> 15.<title>Avalon Books</title> 16.<script type="text/javascript" > //insert embedded script that uses an if statement to test for W3C DOM 17. if (document.getElementById) location.href="avalon2.htm" //if supported browser load avalon2.htm using the href prop of the location obj 18.</script> 19. 20.</head> 21. 22.<body style="background-color: black"> 23.<p style="text-align: center"> 24.<img src="ablogo.jpg" alt="Avalon Books" /><br /> 25.<img src="ab.gif" alt="" /> 26.</p> 27.</body> 28.</html> ***Avalon.htm Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Review Assignment
Avalon Books
Author: Chris Veal
Date: 08/12/09
Filename: avalon2.htm
Supporting files: kids.jpg, fiction.jpg, nfiction.jpg, scripts2.js, styles2.css
-->
<title>Avalon Books</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript">
function placeObjects() { //insert function named placeObj
var w = winWidth/2; //declare variable named w that is =1/2 of the value returned by the winWidth function
placeit("avalon2", W-75, 0);
placeit("kids", W-75, 100); //place kids coordiantes at w75,100
placeit("fiction", W-75, 100);
placeit("nfiction", W-75, 100);
setZ("kids",z3) //use setZ functionto set zindex for kids object to 3
setZ("fiction",z2) //use setZ functionto set zindex for fiction object to 2
setZ("nfiction",z1) //use setZ functionto set zindex for nfiction object to 1
moveAvalon(); //call the moveAvalon function
}
function moveAvalon() {
var x = xc
if (x <= w-125);
shiftIt("avalon",10);
setTimeout("moveAvalon",50);
}
if (x > w-125) {
}
}
function swapImages() { //insert swapimages function, purpose to change the stacking order of the 3image obj
setTimeout("showIt('kids')");
setTimeout("showIt('fiction')");
setTimeout("showIt('nfiction')");
setTimeout("swapIt()", 2000);
}
</script>
</head>
<body onload="placeObjects()">
<div id="kids">
<img src="kids.jpg" alt="" /><br />
Sale this month on children's books
</div>
<div id="fiction">
<img src="fiction.jpg" alt="" /><br />
Fiction selection of the month
</div>
<div id="nfiction">
<img src="nfiction.jpg" alt="" /><br />
Non-fiction selection of the month
</div>
<div id="avalon">
Avalon <span id="books">Books</span>
</div>
</body>
</html>
***script.js Code: /*
New Perspectives on JavaScript
Tutorial 4
Review Assignment
Avalon Books
Name: Chris Veal
Date: 08/12/09
Function List:
xCoord(id)
Returns the x-coordinate of the object with id with the value id
placeIt(id, x, y)
Places the id object at the coordinates (x,y)
shiftIt(id, dx, dy)
Moves the id object dx pixels to the right and dy pixels down
showIt(id)
Hides the id object by setting its visibility style to "visible"
winWidth()
Returns the width of the interior browser window in pixels
winHeight()
Returns the height of the interior browser window in pixels
setZ(id, z)
Sets the z-index value of the id object
swapIt(id1, id2, id3)
Swaps the z-index values of id1, id2, id3
*/
function setZ(id, z) { // create new function called setZ with 2 parameters
object=document.getElementById(id); // use the value of the id parameter to select the obj in the document with that id value
object.style.zIndex=z; // set the z index of the object to the z parameter
}
function swapIt(id1, id2, id3) { // create new function called swapIt with 3 parameters
var object1=document.getElementById(id1); //getObj function to create the 3 variables named obj 1-3
var object2=document.getElementById(id2);
var object3=document.getElementById(id3);
var z1=object1.style.zIndex; //create 2 variables named z1-z3 set variables=to zIndex values of obj1-3
var z2=object2.style.zIndex;
var z3=object3.style.zIndex;
object1.style.zIndex=z3; //change the zIndex value of obj1 to z3thus moving it to the bottom of the stack
object2.style.zIndex=z1; //change the zIndex value of obj2 to z1thus moving it to the top of the stack
object3.style.zIndex=z2; //change the zIndex value of obj3 to z2thus moving it to the middle of the stack
}
function placeIt(id, x, y) {
var object=document.getElementById(id);
object.style.left=x+"px";
object.style.top=y+"px";
}
function shiftIt(id, dx, dy) {
var object=document.getElementById(id);
object.style.left=parseInt(object.style.left)+dx+"px";
object.style.top=parseInt(object.style.top)+dy+"px";
}
function xCoord(id) {
object=document.getElementById(id);
xc=parseInt(object.style.left);
return xc;
}
function showIt(id) {
var object=document.getElementById(id);
object.style.visibility="visible";
}
function winWidth() {
if (window.innerWidth) return window.innerWidth;
else if (document.documentElement) return document.documentElement.offsetWidth;
else if (document.body.clientWidth) return document.body.clientWidth;
}
function winHeight() {
if (window.innerHeight) return window.innerHeight;
else if (document.documentElement) return document.documentElement.offsetHeight;
else if (document.body.clientHeight) return document.body.clientHeight;
}
Usually I can find what I need by doing a Googlesearch. This time, I can't seem to find anything. I need a crossbrowser method for moving layers around the screen. So simple an idea! If it helps answer my query, here is the js for what I have already (a sort of horrible mess that works in IE): PS - I can live with a jquery solution! Code: <!--
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
if (!document.all && !document.layers) return false;
retVal = true; if(!NS && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (!NS) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS) {left = newLeft; top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
if (NS) {left = MM_targL; top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
//-->
hello i use this script, and its working so far. except i want the element to stick to the bottom not the top.. http://javascriptkit.com/javatutors/static3.shtml i am a absolute java-noob and if anyone has a hint for me, i would be happy i already tried to rename some words to bottom, but this doesnt work (ie iebody.scrollTop to iebody.scrollBottom) thanks a lot, regards florian 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? Hi, I have this simple code for gallery on my page. And everything working fine but when i click on small picture to change big picture if I'm page scroll up to top of page. So i scroll to the gallery change picture ad page scroll up to the top. What could be the reason? Here is live axample: http://www.galerija-galiotovic.kus-s...test-hrvatski# Code: <table id="Table_galerija">
<tr>
<td style="width:520px;height:445px;vertical-align:top;padding:20px;">
<h2 style="position:absolute;top:200px;color:#FFF;" id="naslov">Test hrvatski</h2>
<div id="slika_velika"><img id="glavna_slika" style="max-height:390px;max-width:520px;vertical-align:middle;" src="/slike/10012012_7119092522.jpg" alt="KUS Sinj" /></div></td>
<td>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/10012012_7119092522.jpg'"><img src="/slike/thumbnails/10012012_7119092522.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_7509043961.jpg'"><img src="/slike/thumbnails/12012012_7509043961.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_9295689431.jpg'"><img src="/slike/thumbnails/12012012_9295689431.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_8527430603.jpg'"><img src="/slike/thumbnails/12012012_8527430603.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_2126924535.jpg'"><img src="/slike/thumbnails/12012012_2126924535.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div id="gori"><a href="#" onmousedown="moveup()" onmouseup="clearTimeout(moveupvar)"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
<div id="doli"><a href="#" onmousedown="movedown()" onmouseup="clearTimeout(movedownvar)"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div></td>
</tr>
</table>
Hi, i been poken around on here and have not found anything on this as of now, so i thought i would ask. i have a table of data that is positioned in the middle of one of my pages, rather than change the layout i thought it would be nice to just have the page auto scroll down to the middle of the page when the page loads so that the user does not have to constantly scroll down.. i tried this and several versions of it with no luck.. Code: scrollWindow();
// scrolls the window to auto load in middle of page
function scrollWindow()
{
window.scroll(0,450);
}
i also tried scrollBy, and still nothing i tried using the body onload and still nothing... the scroll bar does seem to flash down for a split sec and im wondering if im using the wrong javascript function or if i might have some css that is locking it to load top of page.. not sure what to look for in the css though.. is there a dif function to do this.. thanks Looking for a simple way to have a hidden element made visible when the page scrolls. The idea is to have a back arrow appear only when the page has been scrolled horizontally. trying something along these lines without success ... Code: <script type="text/javascript">
window.onscroll = function () {
if $("back").is(":hidden") {
$("back").show("slow");
}
}
</script>
The site is he www.milesjaffe.com. Thanks -- What is wrong with my code? I am trying to move a div and it wont work at all. Also my little <a> fix is really sloppy. Could I have some help with how I should fix that too? Thanks! Code: <html>
<head>
<script type="text/javascript">
var obj = document.getElementById("object");
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
function right(){
obj.style.left = "" + (x + 1) + "";
}
function left(){
}
</script>
</head>
<body>
<a href="" onclick="right();">
<div id="container" style="position:absolute; top:100px; left:50%; margin-left:-400px; width:800px; height:600px; border:3px solid #808080;">
<div id="object" style="position:relative; top:559; left:379; background-color:#CCCCCC; width:40px; height:40px; border:1px solid #696969;">
</div>
</div>
</a>
</body>
</html>
I already looked at this http://codingforums.com/showthread.p...ht=moving+text thread and I know it's similar. I just don't know what I am doing wrong. My css puts the text where it needs to go, then the script is supposed to alter it's pixel position and so it should move, right? Code: <html>
<head>
<style>
item1 {position: absolute; left:20px; top:280px;}
item2 {position: absolute; right:20px; top:280px;}
</style>
</head>
<body>
<item1 id="item1" >item1</item1>
<item2 id="item2" >item2</item2>
<script type="text/javascript">
var i=0; var j=0;
var obj1=document.getElementById(item1);
var obj2=document.getElementById(item2);
obj1.style.visibility="visible";
obj2.style.visibility="visible";
//if (typeof obj1.style.left!="undefined" && obj2.style.right!="undefined")
//{
//loop from ParseInt to coordinates in center of screen
for (i=0;i<100;i++)
{
obj1.style.left=parseInt(obj.style.left) + i + "px";
document.write("<item1 id="item1">item1</item1>");
document.close();
}
//for (j=0;j<100;j++)
// {
// obj2.style.right=parseInt(obj2.style.right) + j + "px";
// document.write("<item2 id="item2" >item2</item2>");
// }
alert(i);
//}
</script>
</body>
</html>
Am I anywhere close? I am trying this on IE6 (I only have Windows 2000) and on Firefox 3.5.3. Hi there folks. I am a bit stuck with a little code. I am making a online yearbook entry and I wanted an image of myself animate/move from the top left hand to the bottom right of the screen. I also wanted to allow people reading it the option to change bg colour and text size - but I have managed to do those. The difficulty I am having is with moving the image, could anybody suggest any simple codes because I am new to this and don't want my head spinning before I go any further! Any help is greatly appreciated. Hello, I'm newbie in javascript, but i want to make an moving image. In time it should change to other image with other button. Also it could be changed by user. The change should be dynamic like moving from left to right. ^^ Any advices, tutorial links or smthing.. Thx I'm trying to create something like: http://www.deliciouslysortedibiza.com/ But I want the links to move like it does in there. Does anyone know the easiest way I could achieve this? Since I'm fairly new to Javascript and all. Thanks ! Hello everyone. I am trying to make a flag with css and then move it with javascript. Code: <html>
<head>
<title>Flag</title>
<link rel="stylesheet" type="text/css" href="flag3.css" />
<script language="javascript">
Hmove=-100;
function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=4;
if(Hmove<900)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}
</script>
</head>
<body>
<h1>The flag of ___ by www</h1>
<div id="bar3">
<div id="bar2">
<div id="bar1">
</div>
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
</div>
<script language="JavaScript">
moveObjRight(bar3);
</script>
</body>
</html>
This is my code. The image is moving to the right, but i want it bounce from side-to-side in the browser window. Any help will be appreciated. Thank you. Hi, I'm noob , but i have nice idea i want to do it but i can't .. i tried many ways to do it .. but didn't work any of them .. the idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room like this pic : I have 2 DIVs on a page, Div1 and Div2. I want to copy the contents from Div1 into Div2, then suppress the contents of Div1. I want to do this when the page loads. This is what I did: Code: <div id="Div1" style="color:red;">This is the text to be moved</div>
<div id="Div2" style="color:green;"></div>
<script type="text/javascript">
function swapIt()
{
document.getElementById('Div2').innerHTML = document.getElementById('Div1').innerHTML;
document.getElementByID('Div1').style.display = "none";
}
onload = swapIt();
</script>
This, of course, does not work, but I don't know javascript well enough to figure out why. Could someone give me an example of what would work in this case? Hello. I am getting to learn JavaScript, and as for my first personal project, I would like to have a page with some text on it and when the user scrolls, a div containing a picture will move with the user when they scroll. I have found a solution, however, I do not like it. Code: <html>
<head runat="server">
<title>Test</title>
<link type="text/css" href="Main.css" rel="Stylesheet" />
</head>
<body class="mainbackground">
<div id="group">
<div id="sizer" class="sizeholder"></div>
<div id="image" class="image"></div>
</div>
<form id="form1" runat="server">
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</form>
<script type="text/javascript" >
window.onload = function () {
onscroll = function () {
var scrollevel = document.body.scrollTop;
if (scrollevel == 0) {
if (window.pageYOffset)
scrollevel = window.pageYOffset;
else
scrollevel = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
scrollevel = scrollevel + 250;
document.getElementById("sizer").style.height = scrollevel + 'px';
}
}
</script>
</body>
</html>
As you can see, it works by getting the scroll position and adding 250, to a height property-element above the image div. I have tried to use document.getElementById("image").style.top = scrollevel + 'px', but it does not work. Any ideas??? <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript'> <script type = 'text/javascript'> function unselectall(form) { var i=0; for(i=0;i<=15;i++) { tdname = 'invbox'+i; if (document.getElementById && document.getElementById(tdname).style) { document.getElementById(tdname).style.borderColor = '#000000'; form.selected.value = 0; } else { i=20; } } } function selectthis(form, pos) { unselectall(form); var tdname = 'inventory'; document.getElementById(tdname).style.borderColor = '#ffff00'; form.selected.value = form.position1.value; } </script> </head> <body> <form id='inventorytable' method='post' action='addflowerlight.php'> <table id='inventory' border=1> <tr> <td id = 'invbox1' ><img src = 'images/Lights/6inv.jpg' onclick="selectthis('inventorytable', 1);"><input type = 'text' id = 'position1' value='6'></td></tr></table> <input type ='text' id='selected'> <input type ='submit' value='Equip Light'> </form> </body> </html> What am I doing wrong? The onclick wont trigger. My code is: Code: <html>
<head>
<script type='text/javascript'>
winx=220
winy=176
self.resizeTo(winx,winy);
</script>
<img id="default"
style="z-index: 0;left: 0; position: absolute; top: 0px"
height=32 width=32 align=baseline border=0 hspace=0 src='save.gif'></p>
<script type="text/javascript">
document.getElementById("default".style.top = '0px';
document.getElementById("default".style.left = '0px';
</script>
The image shows up, but it doesn't move. I can't seem to find out what I'm doing wrong. Edit: Finally spotted it, I was missing a ")" ._. |
|||||||