I don't know if this is a browser bug. I positioned a div at the bottom of the page just underneath the viewport, calculating it with $(document).height() and animate it to bottom:0, works great even when scrolling, cause of updating with the scroll-event. But when I reload this page or scroll down a bit the original position value was used, so it animates to the original viewport value.
View 1 Replies<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-
[code]....
What is the jquery equivalent of document.body.scrollTop / document.documentElement.scrollTop
View 11 Replies View RelatedI have the following bit of jQuery:
Code:
$("#save_photos_all_continue").click(function() {
event.preventDefault();
var $black_white_all = $("#black_white_all").is(':checked');
var $color_all = $("#color_all").is(':checked');
var $other_all = $("#other_all").is(':checked');
[Code]...
In Google Chrome it works fine but in Mozilla/5.0 it actually goes to the save_edits page instead of just using the post and staying on the original page.
The original page is visible for a very short moment, before the modifications done with the javascript are visible. This is logic to me, sinceI add my javascriptat the end of the page, as recomended. For the user it is a little confusing. Is there a way that the user sees only the page with the javascript modifications?
[Code]...
I've got a number of divs with the prefix menu and the suffix where is say 1-10. My code is below. It assigns the click function fine to each, but assigns them all the function based on the last value of the for loop. (It calls the current value, while I want the value from when the code was originally executed to set up the click function). Scratching my head on how to accomplish this.$(function(){
[Code]...
I'm having some problem with return value for a function. I'm trying to access google blogger's API to display blog entries on my site. I'm doing this through JQuery and requesting a JSON response. Everything seems to work ok, but I want to access the link for the blog entry. This is a subset of the "entry" object.
It's structured like this:
Entry:
title,
content,
link:
rel,
type,
href,
rel,
type,
href,
I want to get the link where the "link.rel == "self". To do this I have to loop through the link object (5 times). The loop and conditional statement works correctly, but I can't get the variable inside this loop back to my original function.
I have this code:
$.each(data.feed.entry, function(i, entry){
$.each(entry.link, function(j, link){
if(link.rel == "self"){
var postlink = link.href;
alert("link : " + postlink);
return postlink;
}});
alert(postlink);
});
jQuery.crSpline - Smooth 2D animation along paths of multiple waypoints, using Catmull-Rom splines.
Demo GitHub You provide: A series of (x,y) points that the path should follow. Plugin provides:
Animation along a smooth 2D path that intersects all points. Check out the demo page to see what it looks like.
[Code]...
I just published an early release of this and am looking for feedback from other developers! I made it because I needed an easy way to make animations out of extended sequences of coordinates (without doing the math to stitch together bezier curves), and as far as I could tell no one else had published an easy method to animate along Catmull-Rom splines using jQuery. This is the result, and the hope is that it will be super easy to use and helpful for people besides just me.
Future plans: More general animations and customizable behavior. The current version only animates top and left properties along whole pixel values. It also assumes that every segment of the path should take equal time, resulting in some strange speed changes when moving from small to large segments. Currently brainstorming good fixes for all of these.
If you go on my test site: [URL]... You will see a navigation menu at the top, with an animated ball. Every time you click on one of the links in the navigation menu, you will notice that after a new page is loaded there is a sudden jump from the balls original position to it's new position. (Not that obvious in Firefox but very obvious in IE and Safari) My question is how can I resolve this.
I assumed that wrapping the code in the $(document).ready function would elimate this issue as everything inside it will load before the page contents are loaded.
[Code]...
This is probably a very easy one for somebody. It's like "Who Wants to be a Millionaire"; if you know the answer it's easy. But I don't.I disabled an event listener with: document.getElementById("thumb_link"+ tagName).onmouseover=function(){null};So what's the opposite? How do I re-start the original mouseover function please? Oh and yes I have Googled it for hours.
View 4 Replies View RelatedI'm trying to make a Javascript application that animates a ball bouncing up and down. I have five image files (ball1.jpg, ball2.jpg, etc located in the same folder as my html file. Here is my code:
[Code]...
My code also has all of the text which makes it xhtml in the beginning which I didn't type out. When I open the html file in Chrome, I see the first picture and the Start Animation button but when I click the button nothing happens.
I have a regular html page called a.html
this page opens a modal dialog window called modal1.html
modal1.html contains a 'Next' button.
when the button is pressed the modal1.html is replaced with modal2.html
modal2.html contains another button.
when its button is pressed, the modal dialog window should close and the location of the original page a.html should change.
I am trying to do something like:
//window.parent.location.href = 'anotherPage.html'
window.opener.location.href = 'anotherPage.html'
window.close();
I cannot use window.opener in modal2.html because its opener is actually modal1.html.
In fact anotherPage.html is opened in a whole new browser page
How can I refer to a.html in this chain?
I have encoded same javascript file with "Microsoft script encode" and accidentally deleted the original file.There is a way to convert the encoded file into the original version.. The form of the encoded file is : <script type="text/jscript.encode">#@~^.....
View 5 Replies View RelatedI am trying to create a new window from which the original page can close that new window. For some reason the following code will not work. Passing the window.open command to a variable called myWindow does not work with the mouse event, but it seems to work fine with a javascript: URL command. I would prefer to do it with the mouse event. Code:
View 2 Replies View RelatedI need to run window.open() via href (not via onclick) as the CMS I'm working on only allows setting the href, not the whole <a> tag. I'm doing this: <a href="javascript: window.open('myUrl.php');">click this</a> and the window pops up just fine but the originating page changes to blank with '[object Window]' in it. How can I prevent the originating page from changing URL (by adding something to the javascript call)? Like "return void;" or something - but of course that didn't work...
View 2 Replies View Relatedi have a form, and for the user to upload a file, i use window.open with my upload script. however, after the file is uploaded, i want the filename to be put back on the original page in an input text field. how would i go about doing this?
View 1 Replies View RelatedI need a script to open a popup window which contains a php form.
after the form has been submitted or cancelled i need to go back to
the originated page (php also) and reload original page.
do you guys have any simple solutions?
I have 50 thumbnails running vertically down the page, so that the viewer must scroll quite a bit to see them all. When a thumbnail is clicked I want to display the full size image in the middle of the viewport. Thus, the top offset of the absolute div that displays the full size picture will change depending on how far down the viewer has scrolled.
I can bind a function to the <img> tag that will set the top offset of the div where the full size images are displayed but I don't know how to get the current position of the viewport, or how to position something with respect to the viewport.
Can jQuery pull the viewport position out of the DOM and let me center something in it?
How can i find the DIV position (top and left) relative to viewport ?
View 1 Replies View Relatedcannot get my first scrollTop to work. What am I doing wrong
<script type="text/javascript"> $(document).ready(function () { alert("got here"); $('#slidetoggle_mini_chapter_0').click(function () { alert("got here"); $('#slidetoggle_mini_chapter_0').scrollTop(300); }); }); </script> <p id="slidetoggle_mini_chapter_0" >Show - 0</p>
it gets inside the click but does nothing with the scrollbar at all.
The mouse position tutorial has an example of how to find the click position within an element. How do you find the click position within the viewport?
View 1 Replies View RelatedI'm using a simple toggle function to reveal divs when clicking on the associated heading. What I'm aiming to achieve:
1. When the heading is clicked, the hidden div will be revealed and the page scrolled so that the heading is at the top of the viewport.
2. If the page has insufficient height for the heading to move to the top, the page height will be increased to allow this to occur.
3. When the heading is clicked again, the div will be hidden but the heading remain in its current position at the top of the viewport. If a div is being toggled closed when not at the top, the page having been scrolled, then it should remain in its current position.
Other things to consider:
Preventing the amount of any generated empty space at the page bottom from being sufficient to fill the entire viewport.
Current state of play:
The code below will move the heading and revealed div to the top of the viewport if the page height is sufficient. When the div is hidden again, the heading drops down to its original location on the page, which is disorienting for the user.
Markup
<h2 class="trigger">Switch<h2>
<div>Content to toggle</div>
jQuery
$(document).ready(function() {
$('.trigger').next('div').hide();
$('.trigger').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
$(this).next('div').toggle();
});
});
I am migrating a site from prototype/scriptaculous to jQuery, and I am encountering a lot of problems with animations in IE. I should start by asking that in scriptaculous, none of these animations require special CSS or tricks for IE (like getting rid of position absolute or anything like that), but this seems to be the case for almost every animation I do in jQuery - is there a list somewhere of all the little hacks and tricks people need to do to get these animations to work in IE? I have re-implemented a few hundred of these animations (mostly crossfades, sliding up and down, highlights), and not a single one worked in IE with the original CSS from the scriptaculous version (in most cases, the other browsers would). In most cases this has to do with absolute positioning. Is it possible jQuery 1.4.4 (the version I am working with) just has massive problems or something because my impression was this library was supposed to be easier to work with, not inordinately more difficult... I just find it hard to believe everyone else is having this many issues with it.
In any event, one thing I can't find any fix for anywhere, is animating the scrollTop of an element (NOT the whole page, which seems to be what everyone else wants to do). I have a div with overflow:hidden, and two buttons underneath which allow the user to scroll through the div (a real scrollbar in this context would not look good or be very useful in comparison).
I ported the code over from scriptaculous, and it works just fine in all normal browsers. Here is the version that would animate scrolling up:
Tested in Firefox/Chrome/Safari just fine right off the bat. But in IE, it just waits and then calls my callback, setting the scrollTop correctly at the end but not actually animating. It's not totally failing, in the sense that the scrolling does happen, and the callback does fire, but it should animate, and I don't really see any reason why it wouldn't. I have set position on the div and all wrapping divs to relative, and static, and set the display value, set the zoom value, widths, heights, everything, but this div will not animate as it scrolls at all in IE only (this is all IE's - 6, 7, and 8). I also tried isolating the div on its own page, removing nearly all the content (leaving text so it will have something to scroll through), practically no CSS outside of width, height, and overflow, and again - does not work in IE only (works in all other browsers without fail).
I have following code to have a scroll animation effect. The cod eis triggered e.g. by a click.[code]...
The problem is, that the browser (tested in FF, Chrome, IE9) just jumps to the scroll target, no effect is viewable. I googled the code in different places, everybody else seems to have no probs with it.
Any ideas what I'm missing here?
I am able to get the page to scroll using something like this
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: rw_X, scrollLeft: rw_Y},2000);
I was hoping to be able to target the animate element by using something like this
document.body Is this not possible? What are some targets that allow you to scroll the page (the position of the scroll bars)?
I'm making this page: [URL] and i want that the menu bar (#menup) be in 100% opacity when .ScrollTob is 0, and 10% when is more than 1. I have this:
$(function(){
$(window).scroll(function() {
if(.scrollTop = 0) {
$("#menup").css("opacity", "1");
}
else(.scrollTop >= 1) {
[Code]....