|
JavaScript - Help - Window Scrolling By Javascript
Hi - I don't know much about javascript, html, or web development.
I have this javascript on my page (that is an iframe). <script type="text/javascript"> var site = 'http://' + 'localParameter("site_address")' <!-- window.location = site //--> </script> Note: site_address is a parameter that's passed to the page when loaded. Now, I need to make this iframe scroll down by like 50 pixels once the page is loaded. How can I do this? Thanks Similar TutorialsHere is an example of a scrolling window and the codes about it: Code: HTML code: <html> <head> <title>A DOM Scrolling Window</title> <script language="Javascript" type="text/javascript" src="scroll.js"> </script> <link rel="stylesheet" type="text/css" href="scroll.css"> </head> <body> <h1>Scrolling Window Example</h1> <p>This example shows a scrolling window created using Javascript and the W3C DOM.The red-bordered window below is actually a layer that shows a clipped portion of a larger layer.</p> <div id="thewindow"> <div id="thetext"> <p> I want to make this text scroll horizontally in one line from left to right.Any suggestions? </p> </div> </div> </body> </html> Code: JS code:
// global variable for position of the scrolling window
var pos=100;
function Scroll() {
if (!document.getElementById) return;
obj=document.getElementById("thetext");
pos -=1;
if (pos < 0-obj.offsetHeight+130)return;
obj.style.top=pos;
window.setTimeout("Scroll();",30);
}
// Start scrolling when the page loads
window.onload = Scroll;
I have some questions about it: a)Can i move the text from top to the buttom?(which is the opposite from what it moves now). b)How can i make the text to move nonstop?In other words when it stops to start again. c)I have used the obj.style.left=pos in order to make the text move from left to right but i want it to move all horizontally in one line only.How could i do that?Something like this: This is a text.This is text.This is a text.This is a text... not like : <p> This is a text.This is a text.This is a text.This is a text... <p> Hello, I was wondering if there is a way to prevent the browser window from scrolling when you are scrolling inside an overflow auto div and reach the end of the div's scroll? Right now I have a few people complaining about a div that loads scrolling info on the screen and when they scroll down using the mouse wheel and get to the bottom of the div then the rolling of the mouse wheel starts scrolling the browser window. It would be nice if the browser could see that your cursor is over the div and even though it reaches the end, not scroll the window unless you move the cursor outside of the div that you are currently scrolling. Any ideas or is this just something we have to deal with? Thanks Can someone please help with this code. The window is supposed to automatically scroll and move but it isn't working. (It was taken from a discontinued book called javascript in 24hrs) The javascript: Quote: var pos=100; function Scroll(){ if (!document.getElementById ) return; obj=document.getElementById("thetext"); pos -=1; if(pos < 0-obj.offsetHeight + 130) return; obj.style.top=pos; window.setTimeout("Scroll();", 30); } //start scrolling when the page loads window.onload=Scroll; the css: Quote: #thewindow{ position:relative; width:180px; height:150px; overflow:hidden; border:2px solid red; } #thetext{ position:absolute; width:170px; left:5px; top:100px; } the html: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="scroll.css" /> </head> <body> <h1> scrolling window example</h1> <p>This example shows a scrolling window created using javascript and the w3cdom.The red border window is actually a layer that shows a cliped portion of a larger layer"</p> <div id="thewindow"> <div id="thetext"> <p>This is the first paragraph of the scrolling message.The message is created with regular html</p> <p>Entries within the scrolling area can use any html tags.They can contain <a href="#">links</a></p> <p> No limit to the number of paragraphs that you can include here...</p> <ul> <li>For example you could format items using a bulleted list.</li> </ul> <p>The scrolling ends when the last part of tht scrolling text ids on the screen.You've reached the end.</p> </div> </div> </body> </html> Here is the program: http://www.1728.com/newwindow.htm Basically, I want to input a number in the input box, which assigns a number to the variable numval located at document.box1.b1. When clicking on the "new window" button, an alert displays the input box value, then another window opens and displays the integers 1 through 12 and the amount squared. I would like the new window to obtain the number from the previous window so that the new window will display integers (and their squares) from 1 to the value of numval. Hi Guys, I've been progressing along ok onthe CSS side of things but am having some trouble on the javascript side of things. I've decided to jazz a site up with a scrolling gallery from a template i'm using but unfortunately I don't know how to get the main image to change on a click of the smaller one? can anybody please help a brother out! here's the site template - http://dev.jeffking.co.uk/index.html All i'm after is the big main image to change to the same (larger) image of the smaller one in the scrollbar below the main frame. Many thanks! Hi, I am new to javascript,this is my first time using it, I am wishing to have 2 buttons on my website, one that scrolls to the bottom of my page when clicked and then stops at the bottom and one that scrolls back up the page when clicked, but I want my viewers to be able to see this movement. I have some code (below) which works fine in firefox but it doesn't work in explorer, and I can't get this code to work moving upwards (after taking away the minus from -50). Can anybody please help me I have been battling for days trying to make it work although I am finding it hard to understand javascript being a first time user. I currently have this javascript : [CODE] <head> <script language="JavaScript"> function pageScrollup() { window.scrollBy(0,-50); // horizontal and vertical scroll increments if (window.pageYOffset) { scrolldelay = setTimeout('pageScrollup()',5); } } </script> </head> <body> <a href="JavaScriptageScrollup()">Back to Top</a> </body>[ICODE] Any help is greatly appreciated. OrangeAnt Its about this: http://www.wduffy.co.uk/blog/keep-el...omment-page-1/ Everywhere is used for a whole div on some side and when its on the top of the page. But what if its in the middle..? Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013 Scroll down and then up.Anyway to fix this? if you take a look at this site here you can see that it no longer scrolls or even displays content, but here it does. I'll bet there's a quick fix here, but not sure what it is. Any ideas?
After months of searching the web, and found nothing about javascript drag and drop kinetic scrolling, I decided to develop it by myself, relying on my flash knowledge, because I was created kinetic scrolling in flash with ease! And now, after learning javascript a little bit and spending almost a week, I finally succeded to create such a thing in javascript! And I'm ready to share it with you, but I need a little help from someone more experienced to fix an small issue ! Here is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Drag and Drop Tutorial</title>
</head>
<body onload="borders()">
<div style="position:absolute; left:0%; top:0%; ">
<style type="text/css">
.drag {
position: absolute;
}
</style>
<div style=" position:absolute; width:100%; height = 100%; left:0%; top: 0%" id="pageContainer">
<input id="1" class="drag" style="width:100px; height:100px; top: 0px" type="submit" value="Drag 'n' throw me">
<input id="2" class="drag" style="width:100px; height:100px; top: 120px" type="submit" value="Drag 'n' throw me">
<input id="3" class="drag" style="width:100px; height:100px; top: 240px" type="submit" value="Drag 'n' throw me">
<pre id="debug"> </pre>
</div>
<script language="JavaScript" type="text/javascript">
<!--
//Kinetic moving script
var x = ""
var y = ""
var i = 1
var dest_x = ""
var dest_y = ""
var date = new Date();
var time1=date.getTime();
var Xpos_diff = ""
var Ypos_diff = ""
var time_diff = ""
var objID = ""
function kinetic() {
var dragobj = document.getElementById(objID);
//Keep on moving the image till the target is achieved
x = (x - dest_x) * 0.97 + dest_x;
y = (y - dest_y) * 0.97 + dest_y;
//Move the image to the new location
dragobj.style.left = x+'px';
dragobj.style.top = y+'px';
if (i < 1) {
window.setTimeout('kinetic()',10);
}
}
//Drag and drop + thtow calculation___________________________________________________________________________________________________
function $(id){
return document.getElementById(id);
}
var _startX = 0; // mouse starting positions
var _startY = 0;
var _offsetX = 0; // current element offset
var _offsetY = 0;
var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag
var _debug = $('debug'); // makes life easier
InitDragDrop();
function InitDragDrop()
{
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}
function OnMouseDown(e)
{
i = 1
// IE is retarded and doesn't pass the event object
if (e == null)
e = window.event;
// IE uses srcElement, others use target
var target = e.target != null ? e.target : e.srcElement;
objID = ExtractNumber(target.id)
var dragobj = document.getElementById(objID);
x=dragobj.style.left
y=dragobj.style.top
dest_x=dragobj.style.left
dest_y=dragobj.style.top
// for IE, left click == 1
// for Firefox, left click == 0
if ((e.button == 1 && window.event != null ||
e.button == 0) &&
target.className == 'drag')
{
// grab the mouse position
_startX = e.clientX;
_startY = e.clientY;
// grab the clicked element's position
_offsetX = x1 = ExtractNumber(target.style.left);
_offsetY = y1 = ExtractNumber(target.style.top);
// bring the clicked element to the front while it is being dragged
_oldZIndex = target.style.zIndex;
target.style.zIndex = 10000;
// we need to access the element in OnMouseMove
_dragElement = target;
// tell our code to start moving the element with the mouse
document.onmousemove = OnMouseMove;
// cancel out any text selections
document.body.focus();
// prevent text selection in IE
document.onselectstart = function () { return false; };
// prevent IE from trying to drag an image
target.ondragstart = function() { return false; };
// prevent text selection (except IE)
return false;
}
}
function ExtractNumber(value)
{
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}
function OnMouseMove(e)
{
if (e == null)
var e = window.event;
// this is the actual "drag code"
_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
x=_offsetX + e.clientX - _startX
y=_offsetY + e.clientY - _startY
dest_x = _offsetX + e.clientX - _startX
dest_y = _offsetY + e.clientY - _startY
Xpos_diff = (_offsetX + e.clientX - _startX) - x1
Ypos_diff = (_offsetY + e.clientY - _startY) - y1
x1 = _offsetX + e.clientX - _startX
y1 = _offsetY + e.clientY - _startY
var date = new Date()
var time2 = date.getTime();
time_diff = time2-time1
time1 = time2
}
function OnMouseUp(e)
{
if (_dragElement != null) {
_dragElement.style.zIndex = _oldZIndex;
// we're done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
// this is how we know we're not dragging
_dragElement = null;
dest_x = x + time_diff * Xpos_diff*3
dest_y = y + time_diff * Ypos_diff*3
i = 0
kinetic()
}
else{
i = 1
x=_dragElement.style.left
y=_dragElement.style.top
dest_x=_dragElement.style.left
dest_y=_dragElement.style.top
}
}
//-->
function borders(){
if(x<0){
dest_x = 0
}
else if(x>document.documentElement.clientWidth-100){
dest_x = document.documentElement.clientWidth-100
}
if(y<0){
dest_y = 0
}
else if(y>document.documentElement.clientHeight-100){
dest_y = document.documentElement.clientHeight-100
}
window.setTimeout('borders()',10)
}
</script>
</div>
</body>
</html>
What need to be fixed is an small issue when start dragging the object and then stop moving while you still drag object, after release the mouse in still position the object will make a small move! And that must not happening! You will see by yourself what I meant, just drag and throw object! If you like it you are free to use it! All I want is someone to help fix this issue! I currently have my code set to this: Code: <a href=\"javascript:if(confirm('Are you sure this offer is not working and wish to report it?;?')){document,location.href='report.php?offername=".$row['name']."&offerid=".$row['offerid']."';}\">Report</a>
How would I make it so that: 1. It opens in a new window (target="_blank")?? 2. I can define how big that window is Thanks hi. i am looking for help (example) to open to a new window in the original window. the original window is blocked from any user inputs. a good example is here at http://www.dominos.com/home/index.jsp and click on "locations" button. is there a special name for this window.open? thanks Hello, I have an asp page to search for data. I like to open it in a new window while retain the search values. And I also can resize the window as well as set its attributes like height, width,etc. I created a js function like this: function posttopopup(formname, windowname) { if (! window.focus)return true; window.open('', windowname); formname.rel="nofollow" target=windowname; return true; } on my asp search page: <form method="post" action=search.asp" onSubmit="posttopopup(this, 'popupwindow')"> ..... <input type="button" name="Submit1" value="Search" onclick="if (isDate()) document.Search.submit();"> I keep getting errors like "document.search has no value..." What did I do wrong? Thanks. On my website, I have a domain name registration field that links to a reseller storefront and then searches for that domain name. I would like the storefront to open in a new window, instead of the parent window. I have tried to insert the target="blank tag but can not seem to get it to work. Is there another way to make that window open? I would appreciate any help to make this function work. You can see the page and field he http://websites4magicians.com/inprogress/ The field is on the left side, just below the center of the page. Thanks for the help! What i would like from someone if it can be done is when a page loads a another window will open with links to pages and then when a link is pressed the first window opens with the url of the link clicked but the navigater window still open so that the user can still use the navigator to navigate round the site and also if posible that there is 2 textbox one called title and the other called url and then a submit button and then it adds to the links in the page and is saved And philip M if you read this then if you havent already done so go to your private messages but i think that you have and your ignoring me so that fine if this post is in the wrong catorgry then please say with correct part of the forum.
Hey Guys, I feel like a complete idiot posting this, but I clearly am missing something. I'm trying to open a window with the specs below but all it does is open a standard sized window. Any help would be greatly appreciated. Code: <SCRIPT LANGUAGE="javascript">
function open_window() {
window.open ('https://domain.com/document.php','newwindow',config='height=418,width=590,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,directories=no,status=no')
}
</SCRIPT>
<p><a onclick="open_window()"><img src="images/image.png" width="142" height="113" /></a></p>
I'm slowly learning javascript, have a little java background. I wanted to just make a button you push to enter a prompt. The problem was I want the prompt message to print in a new window. Here is what I have. Can anyone help me with this? <html> <head> <script type="text/javascript"> function show_prompt() function openindex() { OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no"); { var name=prompt("Please enter your name",""); if (name!=null && name!="") { OpenWindow.document.write("Hello " + name + "! How are you today? Welcome to my Demo page, Enjoy!"); } } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Click Me " /> </body> </html> When I click the button to open an url (example: http://www.yahoo.com) from a page, I can mark this url/screen name. So the next time I click on the same button, the same window will pop up instead of opening multiple windows. If I have already had the window opened not via the button, when clicking the button, it pops up a new window instead of opening up the existing. Is there a way to check the screen name or partial url of the existing window? If there is a match with the url being called from the button, it will use the existing one. Hi everyone I am a newbie with respect to programming and this is my first post I have a small problem, probably very basic to everyone except me, and would appreciate and value your advice I have entered below a javascript I am using on my website. This script is designed to automatically insert videos based on keywords and works perfectly except that my visitors are taken away from my website when they use it. Can someone please tell me what code to insert, and where, in order get the script to open in a new page. I am aware how to do this in html using target ="blank" but do not know how to do it in javascript. Thankyou in anticipation, the code I am using is below: Code: <!-- BEGIN HostDomain --> <div id="HostDomain_DivId"> </div> <script src="http://app.HostDomain.com/script/HostDomainUtils.js"> </script> <script language="JavaScript" type="text/javascript" src="http://app.HostDomain.com/script/widgetTy pe/carousel/ptContentflow.js" load="fancyScrollbar"> </script> <script type="text/javascript"> /* Do not change the values given below. */ var HostDomain_Organization_Name = "MySite"; var HostDomain_Organization_ID = "xxxxxxxx"; var HostDomain_Feed_ID = "xxxxxxx"; var HostDomain_DivId = "HostDomain_DivId"; var HostDomain_AppServerPath = "http://app.HostDomain.com"; </script> <script src="http://app.HostDomain.com/script/HostDoma in.js"> </script> <!-- END HostDomain --></font></td> |
|||||||