|
JavaScript - Window.scrollto(0,0) Problem In Ie
At the bottom of my document (pageA), I have an iframe like this:
<iframe src="pageB.html#anchor" ... pageA opens with the iframe at position 0,0. <body onload="window.scrollTo(0,0)" ... works for FF but not for IE(8). How could this be fixed in IE? Similar TutorialsHi, I'm having a problem with my page not resetting to the point where the user clicked on an element. I believe this to be a javascript problem, however, if it is not I would be glad to move it to the proper forum. What I have is a page with a div that contains a large image (a map). the dims are 1237 x 1550. I am using a browser window resized to approx. 800 x 600 so that I can simulate a smaller screen viewport. The page has links that are scattered about the map (positioned with css) and what I want to do is launch a video using the HTML5 video tag when the user clicks on a link. The video is supposed to open in the center of the users viewport and then dim the map div, which it does, however the page resets its position after the js function and aligns the page back to the upper left corner of the browser window. If the user had scrolled (both x and y) to the max of the scroll bar, then this will be fairly frustrating to have to keep moving back, thus my dilemma. I tried using scrollto to reset the scroll back to where the user was, but this is not working. What's funny is if I put an alert at the very end of the function, the page displays properly (video is centered on the screen where the user was in their viewport) but resets as soon as the alert is closed. I then tried using location.reload(false), but this keeps the function from running properly (the page shows properly for a fraction of a second then resets back to a newly launched page). Below is the code. Also, this has only been tested with FF and Chrome on my local drive. It is not anywhere on the web right now. In chrome, the page resets to the top only. I'm really not interested in making this work with IE since this is for personal/family use. Your help is greatly appreciated. Code: CSS
body {
background: black;
text-align: center;
vertical-align: middle;
}
div#bkg {
position: absolute;
text-align: center;
z-index: 1;
}
p#day1 {
position: absolute;
top: 800px;
left: 1000px;
font-weight: bold;
width: 50px;
background: white;
}
Javascript
function showVid(srcVid) {
// set the proper filename of the vid
srcVid = srcVid + ".ogv";
// create the video tag
var vidWin = document.createElement("video");
vidWin.id = "movie";
vidWin.setAttribute("width", "320");
vidWin.setAttribute("height", "240");
vidWin.setAttribute("controls", "controls");
// pic size is 1237 x 1550
var vpw = window.innerWidth;
var vph = window.innerHeight;
var xPosOff = window.pageXOffset;
var yPosOff = window.pageYOffset;
var leftNum = ((vpw/2) + xPosOff) - 160;
var topNum = ((vph/2) + yPosOff) - 120;
vidWin.setAttribute("style", "position: absolute; left: " + leftNum + "px; top: " + topNum + "px; z-index: 255;");
// create the source tag
var vidSrc = document.createElement("source");
vidSrc.src = "videos/" + srcVid;
vidSrc.type = "video/ogg";
vidSrc.codecs = "theora, vorbis";
vidWin.appendChild(vidSrc);
document.getElementById('bkg').style.opacity = 0.5;
document.body.appendChild(vidWin);
window.scrollTo(xPosOff, yPosOff);
// tried this, it didn't work
// location.reload(false);
}
HTML
<body>
<div id='bkg'>
<img src="images/pic1.jpg" />
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
</div>
</body>
Thank you in advance for your help with this. I have two pages. One page with thumbnails and another page with the actual gallery. On the gallery.html page I can scroll to my 5th image in the list by the following code: onclick="myScroll.scrollToPage(5,5)" I want to achieve this same effect from the index.html file into the gallery.html file. I have tried using anchored links like #image5, but that just messes up the page and the iscroll script I am working off of. Thank you again anyone who can help. I have a menu on my site that is not working in IE. It works fine in Safari and Firefox, but it doesnt even open the link for the correspoding button. It just stays on the home page. Someone told me it was the google analytics, but I changed the menu portion of the code and added the gaq_push and the trackEvent, but it's still not working. Help guys, thanks.
Hello, I posted this at another site, but am still at a loss so I hope I can get some help here I am at a complete loss with this plugin. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like: http://www.bqcreative.com/gcc2/menu.html That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs. Image of what each food section should look like: Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help HTML (with irrelevant code removed): Code: <div class="menunav">
<ul>
<li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
<li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Sandwiches</a></li>
<li><a href="#">Wraps & Pitas</a></li>
<li><a href="#">Dinners</a></li>
<li><a href="#">Desserts</a></li>
</ul>
<br /><br /><br />
<hr />
</div>
<div class="menuwrap">
<div id="appetizers">
<div class="itemleft">
<p>Appetizer foods on the left</p>
</div>
<div class="itemright">
<p>Appetizer foods on the right</p>
</div>
</div>
<div id="skinnygreek">
<div class="itemleft">
<p>Skinny Greek foods on the left</p>
</div>
<div class="itemright">
<p>Skinny Greek foods on the right</p>
</div>
</div>
</div>
CSS: Code: .menunav {
width: 90%;
margin-top:35px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
.menunav ul {
list-style:none;
}
.menunav li {
display:block;
text-align:center;
float:left;
padding: 0 10px;
}
.menunav li a {
color: #2e6ab1;
text-decoration: none;
float:left;
font-family: 'DominicanRegular', sans-serif;
font-size:1.5em;
}
.menuwrap {
width: 721px;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
overflow-y:auto;
overflow-x:hidden;
position:relative;
}
#appetizers {
width: 721px;
float:left;
position:relative;
top:0px;
left:0px;
}
#skinnygreek {
width: 721px;
clear:left;
float:left;
position:relative;
top:0px;
left:800px;
}
.itemleft {
width:50%;
float:left;
}
.itemright {
width:50%;
float:right;
}
Javascript (in header section): Code: <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
<!--
jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});
// -->
</script>
Hi I am having a problem with that code : Code: <!DOCTYPE html>
<html>
<head>
<title>ScrollTo</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
</head>
<body>
<div id="sections">
<ul>
<li id="s1">
<h2>Section 1</h2>
</li>
<li id="s2">
<h2>Section 2</h2>
</li>
<li id="s3">
<h2>Section 3</h2>
</li>
<li id="s4">
<h2>Section 4</h2>
</li>
<li id="s5">
<h2>Section 5</h2>
</li>
</ul>
</div>
</div>
<a href="#" onclick="$('#sections').scrollTo($("#s5"));>#5</a>
</body></html>
onclick="$('#sections').scrollTo($("#s5")); is not working thank you for helping [help] i have the big problem,,, how script to make data to new window (after that, output can print) n data from previous window with datatables (datatables.net) and with default header n footer in new window??? case: [datatable] i search with datatable and have 3 record... and show in new window with default header n footer company , and in new window have function to print the record with header and footer. I hope, anybody can help me..Please thank you Hey guys, im pretty new to using Jquery and coding period. i came across a problem with the .scrollto plug-in and i have searched up and down for an answer and none would really solve the problem. im trying to run .scrollto to jump from one div to the next with a smooth animation in a horizontal website. this is what the head tag looks like so far <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script src="scripts/jquery.localscroll-min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $.localScroll(); }) </script> i tried removing either local scroll or scrollTo and see if there was a conflict but that wasnt the case. ive seen the script run on a webpage without having to add $.localScroll(); to every link, right now it just doesn't move at all. any help would be greatly appreciated. Hey everyone, I'm a NOOB, yeah, its hard at the beginning but you have to start somewhere right? Anyway I'm currently building a website that incorporates JavaScript, ActionScript, and the usual CSS and XHTML, but I've run into a bit of a snag. Our wishes for this grass roots web page was to add Ariel Flesler's ScrollTo jQuery plugin to our navigation, to dynamically slide our entire pages from left to right, right to left, upon the users choice. But, our navigation buttons, on our homepage in particular, are within a SWF file. Now is it possible to trigger the ScrollTo effect from buttons within a SWF? If not, can you provide a alternate solution to this dilemma? Thank you all, and I'm happy to be a new student of this community. I have an oscommerce site, and several affilate stores underneath it. Im tring to open my 'Mall Stores' landing page in a new window, but can't lick it. Code: <td <?php echo $item_menu_04;?> onClick="document.location=' <?php echo tep_href_link('./store/Layout0.html')?>'">
<div class="div3"><div class="div2"><div class="div"><?php echo "MALL Stores"?></div></div></div>
I know the document.location bit is not right, but when I change it to window.open it throws an error about a missing ; Thanks Hi All, I am opening window using following code : Code: <script>window.open('Results.aspx?sorttype=text&sort=OTName&sortname=Document&sortorder=ascending','Results','top=0,left=0,height=715,width=" & sRsultWindowSize & ",toolbar=no,status=yes,resizable=yes,scrollbars=no,location=no')</script>
I want to keep new window top of the parent window. How can i achieve that ? Thanks for your help -John Hi, I am learning Javascript and place the script tag in the head of my document and the code doesnt work as it loads the page. I understand that the window.onload function must call the function when the page has loaded but i cant seem to get it to work, I have wrapped my changeImage function in the onload function and it still doesnt work. where am i going wrong? I would like the script tag in the head of the document and understand how to use the window.onload function with my changeImage function. Thank you. Code: window.onload = function () {
changeImage();
}
var myImage = document.getElementById("image");
var imageArray = ["images/leaf.jpg","images/sky.jpg","images/tree.jpg"];
var imageIndex = 0;
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}// changeImage ... end
setInterval(changeImage, 3000);
I wrapped the whole of the code in the function but then in the console it doesnt do the setInterval it just stops at that break point. I'm using an onLoad script to resize a browser window for a flash player - Code: <script>
function ResizeOpen(){
window.resizeTo(435,475)
window.moveTo(280,140)
}
</script>
Works fine, but in IE & FF it causes second browser windows to open to the same size after it's been called, requiring users to resize the second windows. Tried using an onUnload with following script - Code: <script>
function ResizeClose(){
window.resizeTo(window.screen.availWidth, window.screen.availHeight)
}
</script>
Doesn't work. They're both in the <body> element - Code: <body ........ onLoad="ResizeOpen()" onUnload="ResizeClose()"> Any way to make this work? Thx. Hi, I have a requirement of parent and child window. Onclick of a link on the parent page i am opening a child window with "window.location". On the child window i am displaying a jsp with the overlap screen on the parent screen using DOJO. After doing all the action on the child page when i am about to close the child window which is having button like cancel,close i am hiding the overlap screen. But my actual concern is when i close the child window, my parent page's scroll bar is scrolling down to the bottom of the page which should not happen and it should be there at the top of the page. How can i acheive this behaviour. Can anyone help me in this. Thanks in advance Hi, I have a code that opens a new window from a flash movie. The window opens fine, but the parent window goes blank and displays this on the top left of the screen: [object] (in IE8) [object Window] (in Firefox) Does anyone know what I'm missing? This is the code for the button that opens the new window: on (release) { getURL ("javascript:window.open('/RG_Map.pdf','RGCommunityMap','width=700,height=700');"); } Hi! everyone. I've run into a problem with a piece of script and being code illiterate I could use some help. I'm making a page with a few thumbnails that I want to use as links to open a larger image in a pop-up window. I found this piece of code ( call it a senior moment ~ but I didn't make a note of where it was ) that works fine in Firefox and Safari, but IE8 is telling me that there is an error in the highlighted line: Code: <script language="JavaScript">
function openW(mypage,myname,w,h,features) {
if(screen.width){
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
}else{winl = 0;wint =0;}
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
var settings = 'height=' + h + ',';
settings += 'width=' + w + ',';
settings += 'top=' + wint + ',';
settings += 'left=' + winl + ',';
settings += features;
win = window.open(mypage,myname,settings);
win.window.focus();
}
</script>
Code: <a href="JavaScript:openW('URL','TITLE',WIDTH,HEIGHT,'')">LINK</a>
Anyone got an idea if it can be tweaked to make IE recognize it? Or a simple alternative script that works cross browser? Any help would be greatly appreciated. Thanks <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> Code: <SCRIPT type="text/Javascript">
<!--
function submitClick() {
var userid = document.login.userid.value;
var pin = document.login.pin.value;
if (document.login.userid.value=='')
{
window.alert('User ID not entered');
}
else if (document.login.pin.value=='')
{
window.alert('Pin not entered');
}
else
{
window.alert (
"User ID: " + userid +
"\nPIN: " + pin
);
}
}
//-->
</SCRIPT>
</head> <body> <center><img height="120" width="240"> <h3 align="center">Please enter your User ID and PIN:</h3> <center> <table width="50%" id="Table1"> <tbody> <tr> <td width="50%" align="RIGHT">User ID:</td> <td width="50%" align="LEFT"><input type="text" name="userid" size="20"></td> </tr> <tr> <td align="RIGHT">PIN:</td> <td align="LEFT"><input type="text" name="pin" size="20"></td> </tr> <tr> <td></td> Code: <td align="LEFT"><INPUT TYPE="button" NAME="button" VALUE="Submit" onSubmit="return submitClick();"></td> </tr> </tbody> </table> </center> </center> </body> </html> I'm needing the program to use pop up windows when no user id has been entered or no pin has been entered. If both have been entered then i need it to show the user id and pin in a pop up window. Not sure where I've went wrong so any help would be much appreciated. Hi, Can you please help me to solve the window.open() problem with firefox browser? I wrote the statement which is given below, window.open('filename.php','file_head','width=730,height=525,status=no,location=no,menubar=no,resiza ble=no'); Only width & height parameters were working in firefox & others are not working. This was working properly in IE. Problem exisitng with firefox only. Please let me know if anyone have solution for this problem Hi and thanks for taking the time to help me. Just to say in short, I'm a musician and not a programmer, the only thing I have learned is html many years ago, however JS and Java I have never done at all. About 6 month ago I asked a colleague of mine to make me a new website. All went very nicely apart from one little detail as the title says. The popup window with the music player (me playing), keeps on going in the background as soon as a person continues to browse through the page. Unfortunately, my colleague hasn't answered any of my emails asking him to fix it, and therefore I found this forum through google with hope that perhaps you'd be able to help me out. I have found the part of the code that shows the function to open a new window (in the <head></head> part of the page). Here it is: <code> <SCRIPT LANGUAGE="javascript"> <!-- function otworz(adres) { noweOkno = window.open(adres, 'okienko', 'menubar=no, toolbar=no, location=no, scrollbars=auto, resizable=yes, status=no, width=270, height=260, left=30, top=30') noweOkno.focus() } --> </script> </code> Here is the part which is already in the <body> of the page <code> <a href="javascript:otworz('muzyka.htm')"><img src="muzyka.png"></a> <!-- <object type="application/x-shockwave-flash" id="player1" allowscriptaccess="always" allowfullscreen="false" data="OriginalMusicPlayer.swf" width="170" height="90"><param name="movie" value="OriginalMusicPlayer.swf" /><param name="FlashVars" value="playlistXmlPath=music/playlist.xml" /></object> --> </code> My colleague is Polish and hence the Polish language of the function and the htm file. If it would be more usefull for you to see the actual website, then I can of course give you the adress as well, but perhaps the code above would do. In any case, I thank you for any help or advice you can give me. Greetings Daniel Hi I have faced popup window resizable problem in Safari. When I resize that popup window its resizing. When I used this code window.open('chat.html','Test','width=230px,height=405px,location=no,status=no, menubar=no,toolbar=no,r esizable=false ,scrollbars=no'); Please any body help unresizing popup window. Thanks In advance Ruban |
|||||||