|
JavaScript - Have A Problem With Page Refresh And Scrollto
Hi,
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>
Similar TutorialsAt 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? 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 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.
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 a page named pck_rates.php which contains a form that go to the page update_pck_rates.php when i press updade data button in the second page i want the first page to be refreshed to show the new data's. i want to know if i can set a name to the page pck_rates.php and after the update query in the second page i will refresh the pck_rates.php page using this name?? i don't know what is the function and how to make this idea. can anyone help me please <HEAD><TITLE>main</TITLE> <meta http-equiv="refresh" content="5;url=http://localhost/php_basic/short_pro/php/main.php"> <!--<script language="JavaScript"> var i=0; function validat() { setTimeout("moretext()",5000); alert("santosh"); } function moretext() { if(i==0) { alert(window.location); window.location.reload(); i++; } else { } } </script>--> </head> <BODY onload="validat();"> i hav written dis code to auto refresh page only once but it is refreshing after every 5 seconds. Earlier i hav wriiten meta tag but it is refreshing page after every 5 seconds & after that i hav wriiten script to auto reffresh page only once but they both r doin the same work,so can u plz help me in solvin my problem Hi Guys, Our company own a lot of domains and want to put a short page of copy on each address along with keywords before redirecting the user to our main site. I have been able to get the page to load the main site after the desired time using this code in the head... Quote: <META HTTP-EQUIV="refresh" CONTENT="40;URL=http://webaddress.com/"> That works perfectly, I am now trying to display a countdown timer from 40 seconds down to 0, and on 0 redirect the user. Saying something like "You will be redirected in XX seconds". Is there anyway of doing this? I've been searching google for the answers with no luck and can only seem to find timers that countdown to a set date. Thanks in advance! Ria Hi, For the last few day's i've been searching for a js/ajax div refresh. I need a js/ajax script that refresh a div every 10 seconds or gets menu.php file and updates it. Thanks. Is this possible? I am writing a script that will display an alert box that reads "your play was saved" after a user clicks the submit button on a form. The only problem is that after clicking save, the page refreshes. Here is the code I tried to use Code: function savedMessage(){
document.getElementById("CmdFinish").addEventListener("click",function(e) {
GM_setValue("Saved", 1); }, false);
if (GM_getValue("saved", 0) == 1) {
alert("Your play has been saved");
GM_setValue("saved", 0); // or GM_deleteValue("saved"); }
}
The button ID is "CmdFinish" and the value is "saved". Is there ANY way i can make the script run only on a page refresh? **Note** The script is for a specific page and not the whole site, so it wont run on every refresh on the site, only when it's needed on 1 page. How can I write a JavaScript for the following requirement. I have to go to a link say
Quote: www.google.com and refresh it for every 5 seconds continuously. Thanks Is it possible to change the URL when a page refreshes? E.G Someone clicks a link on index.php to page1.php. When you refresh page1.php it actually loads page2.php The reason i ask my site uses AJAX to change pages (therefore doesnt refresh and stays on the index.php page). So if someone has followed 3-4 links and refreshes the page it will go back to the homepage, i want it so it reloads the currently page (i can use query strings to get the relevant page) I've a web page when a user logs in, it will have a link that shows the "username" and a link for "logout". After the user logs out, the "username" and the "logout" links will change to "login" and "register" links, respectively. The page uses javascript to check a user cookie, if the user cookie exists, it will show the "username" link and the link for "logout". If no user cookie exists, "login" and "register" links will replace the "username" and "logout" links. Here's the problem: When a user who has log in, clicks the "logout" link, a perl script will delete the user cookie, and redirects back to the same page. The page does not show "login" and "register" links AUTOMATICALLY. Both links will appear ONLY after the user MANUALLY Refreshes the page. It appears that I need a system to refresh the page automacally ONLY one time. How can this be done? How to modify the script so that after from refreshing after set time it should refresh for only x number of time. Say the page should reload after 300*1000 (time/seconds) for say 4 times (number). After the page has refresh 4 times, it should not refresh again. <HTML> <HEAD> <script><!-- function doLoad() { setTimeout( "refresh()", 300*1000 ); } function refresh() { window.location.reload( true ); } //--></script> </HEAD> <BODY BGCOLOR=#FFFFFF onload="doLoad()"> Hi For our new site we need to regularly update part of page. What solutions are there for this purpose?? This may be a stupid question, but is there a way to have a page refreshed at a specific time of day? I have made up a page I set as my browser's home page, an electronic Page-A-Day calendar. If I am working on the computer overnight I would like this page to refresh autotically at midnight. I have seen all sorts of posts that describe how to refresh after a certain amount of time has passed, but nothing for what I would like to do. For those interested the code i have for the webpage in in the attached file. Nite All, I have the following code: Code: $(function() {
$("#check_login").click(function() {
event.preventDefault();
var $email = $("#login_email").val();
var $password = $("#login_password").val();
$.post("check.php", {email: $email, password: $password}, function(result) {
if(result=="Success"){
parent.$.fancybox.close();
window.location.replace("index.php");
}else{
$("#login_check").html(result);
$("#login_email").val('');
$("#login_password").val('');
}
});
});
});
I'm basically checking a user login. If the login is successful I'd like to close the Fancybox. This part works fine. I'm using an iFrame from Fancybox. If I don't have this part: Code: parent.$.fancybox.close(); It will reload the index page in my iFrame. How can I refresh my other page from the iFrame? Thanks in advance. |
|||||||