I have a JavaScript function that when a user does a mouse-over a thumbnail, a larger preview of the image pops up. The JavaScript calculates the top and left offset position to either display the preview on the right or left of the screen, depending on the screen size.
The function works when the object passed is an image.
My goal is to use the same function as a template, and have it work but instead that using a thumbnail for the hover event, just use a link. So the user does a mouse over the link, and the image preview pops up.
My problem is that the offset left position is not being calculated when using IE8 or IE11, Firefox and Chrome work fine.
The image is always being displayed on the right size of the screen. But this only happens on IE. I guess, I am not sure, but perhaps IE treats the and tag differently to calculate offset?
Here is a copy of the jquery function:
function linkOverShow(a, strSKU) {
$("#pUpImg").attr("src", "/images/items/" + strSKU + ".jpg");
var offset = $(a).offset();
if (offset.left - 350 < 0) {
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left + 100));
} else {
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left - 350));
}
$("#pUp").show();
}
On IE, the code only goes to the line:
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left + 100));
I am hoping to fins someone in this forum that can offer some ideas as to why this is happening, and possibly offer some recommendations to try to solve the issue.
I hope also I am asking this question correctly.
Any help is greatly appreciated.
Thank you much.
Related
I hope you're all right.
I've searched everywhere but I can't find the answer to my problem.
The issue is that I want a logo to rotate while the page is scrolling (this is already achieved), but when I click on a title in the menu, I want the logo to move (as I do now) but when it reaches the element in question, always stays straight, so that you can always see the logo as it should be.
This is the code I have for the scroll and the logo now:
<script>
$(window).scroll(function () {
var theta = $(window).scrollTop() / 200;
$('#header-logo').css({ transform: 'rotate(-' + theta + 'rad'});
});
I do not have much experience with javascript and much less with jquery.
Thank you!
I'm having trouble with an animated scrollbar. The intended behaviour should be on clicking the nav-button, scroll with ease to the end of the page(and a little break near the end).
Now the problem on PC works perfect. On android device (I tried my phone), the scrollTop value and the ($(document.body).height() - $(window).height()) do not match. There is exactly 55px less with the scrollTop thus acting all sorts of strange... Also sometimes it works sometimes it doesn't. I've figured it has something to do with the browser bar collapsing and upsetting the value...but i can't figure it out.
I've tried the following: initializing the variables on scroll event, i've tried vanilla js that didn't work. Need help :) for reference http://www.developer.morningmood.org , also i've printed out the values on bottom of the page if it helps. Here's the code.
contactF = Math.floor($(document.body).height() - $(window).height());
$("#cont").click(function(){
if ($(document).scrollTop() < contactF && flagScroll==true){ //flag stops other buttons from beying pushed
flagScroll = false;
var inter = setInterval(function(){
var doc = $(document).scrollTop();
if (doc == contactF){ // this is the final desired position
clearInterval(inter);
flagScroll = true;
pix = 10; //pixels to jump
return;
}
if (doc >= contactF-50){ // this is a break on aproach
pix = 1;
}
$(document).scrollTop(doc + pix);
}, 10);
}
})
EDIT: also to find the bug, you nedd to scroll from the top of the page all the way to the bottom, if from the top of the page you just push the contact button it works. but if you scroll it doesn't, it upsets the value...
Had the same exact problem and spent a whole day to figure it out.
You are right about the address bar collapse on Android chrome messing it up. Turns out the jQuery function $(window).height() always reports the viewport height that is before the address bar collapses. To get the correct value, use window.innerHeight instead. You can find more information about URL bar resizing here https://developers.google.com/web/updates/2016/12/url-bar-resizing
You can also find people asking similar questions regarding the safari address bar auto-hide, the solutions are similar. Mobile Safari $(window).height() URL bar discrepancy
I have a div, absolutely positioned, originally non-visible that is shown at the position of an element being clicked rendering its preview (top position of the preview is lined to the top of the element clicked).
When the element being clicked is positioned low, the preview is render somewhat below the original page border, and scrolling is necessary. I want to move the preview upward to have its bottom edge on the previous page bottom limit. The problem is the code I use doesn't return what is expected for the page height (it is greater than the sum of the preview height and the clicked-element top position).
Here's the code:
file 1:
jQuery('elementClicked').live('click',function(){
...
jQuery("previewDiv").setTopAtClickedElement(jQuery(this));
...
}
file 2:
jQuery.fn.setTopAtClickedElement = function (element) {
//original positioning
this.css('top', element.offset().top + 'px');
// the troublesome part where the eventual correction should be done
if (element.offset().top + this.height() > jQuery(document).height())
{
this.css('top', jQuery(document).height() - this.height() + 'px');
}
}
Similar happens when I use
Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight)
for the measure of the document height as suggested on a link
Do you have any suggestions on how I should implement this troublesome part of the code?
Please tell if I wasn't clear enough,
Thank you,
Instead of .height() Try using jQuery's outer.height() - api docs, which will take into account any padding (and optionally marign) you have on the page.
A jsfiddle or codepen will help us all out in solving your problem.
I am currently developing a webpage for an iPhone which contains a DIV element that the user can touch and drag around. In addition, when the user drags the element to the top or bottom of the device's screen, I want to automatically scroll the page up or down.
The problem I am having is trying to determine a reliable formula to get the coordinates in the onTouchMove event that coorespond with the user's finger reaching the top or the bottom of the device viewport. My current formula seems tedious and I feel there may be an easier way to do this.
My current formula to determine if the touch event has reached the bottom of the screen:
function onTouchMoveHandler(e)
{
var orientation=parent.window.orientation;
var landscape=(orientation==0 || orientation==180)?true:false;
var touchoffsety=(!landscape?screen.height - (screen.height - screen.availHeight):screen.width - (screen.width - screen.availWidth)) - e.touches[0].screenY + (window.pageYOffset * .8);
if(touchoffsety < 40) alert('finger is heading off the bottom of the screen');
}
I have done a bit of Javascript reflection on objects such as the window, document, body, e.touches to see if I could find a set of numbers that would always add up to equal the top or bottom of the screen, but without reliable success. Help with this would be greatly appreciated.
Assuming the screenY field of a touch holds the y coordinate relative to the screen-top regardless of current scroll position, your current calculation does not make a whole lot of sense to me. I hope I did not misunderstand what your trying to do.
To find out if a touch is close to the top or the bottom of the device, I would first check if screenY is close to top (top being 0), since you can work with that value directly. Then, if it's not close to top, calculate how close it is to the bottom and check that.
var touch = e.touches[0];
if (touch.screenY < 50)
{
alert("Closing in on Top");
}
else //Only do bottom calculations if needed
{
var orientation=parent.window.orientation;
var landscape=(orientation==0 || orientation==180)?true:false;
//height - (height - availHeight) is the same as just using availHeight, so just get the screen height like this
var screenHeight = !landscape ? screen.availHeight : screen.availWidth;
var bottomOffset = screenHeight - touch.screenY; //Get the distance of the touch from the bottom
if (bottomOffset < 50)
alert("Closing in on Bottom");
}
That's actually not bad. You could also use Zepto.js and its built-in touch events and .offset() method to get it a little easier:
http://zeptojs.com/#touch
http://zeptojs.com/#offset
However, I'm interested to know whether or not you actually manage to get it scrolling at the bottom, and if the performance is smooth enough to make the effect worthwhile. (frequently scrolling in iOS interrupts JavaScript really hard)
I am having an issue positioning a background image using the following jquery background position command in Firefox, Google Chrome, and Safari. The code works correctly in IE 8.
$('#element').css({ backgroundPosition: 'xpx ypx' });
The desired effect is a continuous stream of fluid from the right side of the screen to the left, blurred out while behind the main page content. This is achieved using 2 fluid images, one completely sharp and one completely blurred. As the user resizes the window, a jquery function calculates the appropriate positioning of the blurred image (set as a background image) and edits the backgroundposition css attribute.
The x position of the image is calculated dynamically based on window size and the y position is static. The css appears to be modified correctly (note the backgroundposition display in the right most text box). However, the background image I am attempting to overlay is absent in mozilla/chrome/safari. See jscript code below:
$(window).resize(function () {
// image positioning variables
var windowwidth = $(window).width();
var imgwidth = $('#imgFluid').width();
var offset = $('#divFluidBlur').offset();
// calculate and implement position
blurPositionLeft = (windowwidth - imgwidth) - offset.left;
$('#divFluidBlur').css({ backgroundPosition: blurPositionLeft + 'px' + ' 30px' });
// debug: display actual css Background Position of element to text box
$("#txtActualBackgroundpos").val(document.getElementById ("divFluidBlur").style.backgroundPosition); }
Thanks in advance for your help,
Andrew
What you are doing should work. Anyway, you may want to try a little cleaner version: $('#divFluidBlur').css('background-position', blurPositionLeft + 'px' + ' 30px'); And you may want to use Firebug to temporary disable or change values of other styles that could be iterfering.
Could you privide an online example of the problem?