Why isn't Chrome running this Javascript? - javascript

The script works perfect in FF and IE, but not in Chrome. Could someone help med to locate the problem?
The if statmenst seems not to be runned when they are supposed to, they do nothing when the should.
var top = 285;
var bottom = 650;
var pageheight, maxscroll;
window.onload = function(){
pageheight = document.body.offsetHeight;
maxscroll = pageheight - (bottom+40);
}
window.onscroll = function(){
var element = document.getElementById("guide-menu");
if(window.pageYOffset < top){
element.style.position = "absolute";
element.style.top = "300px";
}
if(window.pageYOffset > top){
element.style.top = "10px";
element.style.position = "fixed";
element.style.marginTop = "0px";
}
if(window.pageYOffset > maxscroll){
element.style.position = "absolute";
element.style.marginTop = (pageheight - bottom - 40) + "px";
}
}

"top" has different meaning in chrome. Just try to rename top variable.

The "top" variable returns the topmost browser window. Chrome is the only major browser not supporting overriding this variable.
Renaming your variable to something like "myTop" works perfectly.
This code works well.
var myTop = 285;
var bottom = 650;
var pageheight, maxscroll;
window.onload = function(){
pageheight = document.body.offsetHeight;
maxscroll = pageheight - (bottom+40);
window.onscroll = function()
{
var element = document.getElementById("guide-menu");
if(window.pageYOffset < myTop)
{
element.style.position = "absolute";
element.style.top = "300px";
}
if(window.pageYOffset > myTop)
{
element.style.top = "10px";
element.style.position = "fixed";
element.style.marginTop = "0px";
}
if(window.pageYOffset > maxscroll)
{
element.style.position = "absolute";
element.style.marginTop = (pageheight - bottom - 40) + "px";
}
}
}
By the way, check that you are puting the right conditions for the IF statements. If you want a menu which scrolls with the webpage, then you have to exchange the two first if conditions.

Related

Scroll eventListener stops working

The problem is when I enable the eventListener width the scroll eventListener stops working.
var header = document.getElementById("header");
var nav = document.getElemantById("ulArea");
var HaLogo = document.getElementById("logo");
var yPosition = window.scrollTop();
window.addEventListener("scroll" , yScroll);
function yScroll () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header.style.height = "90px";
logo.style.float = "left";
logo.style.height = "90px";
logo.style.width = "90px";
logo.style.margin = "0px 0px 10px 30px";
ulArea.style.margin = "0px 0px 0px auto";
ulArea.style.float = "none";
} else {
header.style.height = "220px";
logo.style.background = "transparent";
logo.style.float = "none";
logo.style.height = "150px";
logo.style.width = "150px";
logo.style.margin = "0 auto";
ulArea.style.margin = "0 auto";
ulArea.style.float = "none";
}
}
window.addEventListener("width" , headerHeight)
function headerHeight() {
if (document.getElementById("header").width < 990px) {
header.style.height = "100px";
} else {
header.style.height = "220px";
}
}
There are a few problems with your code:
You need to use the resize event (there is no width event).
I think the logo variable isn;t defined, do you mean HaLogo?
ulArea isn't defined.
You need to use the .style.width property of the element (.width doesn't exist).
You need to parse the element's width into an integer with parseInt. If you don't parse it you'll be comparing a string like '50px' to an int 990.
Change < 990px to < 990 (remove the px).
You should end up with if (parseInt(document.getElementById("header").style.width) < 990) { for your if statement and window.addEventListener("resize", headerHeight); for your second event listener.
I think what you are actually looking for is the resize event instead of width:
window.addEventListener('resize', function(event){
// do stuff here
});

Resize function to replace divs disables onclick function

I know the title is shit, but I don't know what will be better.
The case is, I create few spans with divs inside on absolute coordinate, according to $(window).width(). When I resize it, I want to rearrange them, so on $(window).resize() I call function to delete the spans, $("span").empty(); and do exactly the same thing, as when I created then. Further more there is a click function, that works fine with the first created spans, and then when I clear then and create exactly the same thing after resize, it doens't work.
Please look at the simplified jsfiddle to understand. First try to click object. Then resize the window and try to click on it.
http://jsfiddle.net/4159v04o/1/
Any ideas why that occurs? Thank you in advance!
It's due to divs being created/erased dynamically. What you need is event delegation.
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
Replace:
$('div').on({click: function() {
With:
$(document).on("click", "div", function() {
Updated fiddle
I have debug the code link and changed the code. there were some code related to name.*. but in name there is only string and you are using style method which is not supporting.
So I removed all the name.* line now it is working fine
var secondstack = [];
var positionTop = 20;
var positionLeft = 20;
document.body.style.background = '#00CCFF';
document.body.style.backgroundSize = "cover";
for(var i = 0; i < 25; i++){
var span = document.createElement("span");
span.style.position = "absolute";
span.style.left = positionLeft + "px";
span.style.top = positionTop + "px";
var div = document.createElement("div");
div.style.width = '105px';
div.style.height = '100px';
div.id = i;
div.style.background = '#00FFCC';
$(div).css({backgroundSize: "cover"});
if((positionLeft + 250) < $(window).width()) positionLeft += 120;
else {
old_Width = positionLeft;
var positionTop = 160 + positionTop;
var positionLeft = 20;
}
span.appendChild(div);
document.body.appendChild(span);
}
DivClick();
var resizeTimer;
$(window).resize(function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
DivClick()
});
function rearrange(){
$("div").empty();
$("span").empty();
secondstack = [];
var positionTop = 20;
var positionLeft = 20;
for(var i = 0; i < 25; i++){
var span = document.createElement("span");
span.style.position = "absolute";
span.style.left = positionLeft + "px";
span.style.top = positionTop + "px";
var div = document.createElement("div");
div.style.width = '105px';
div.style.height = '100px';
div.id = i;
div.style.background = '#00FFCC';
$(div).css({backgroundSize: "cover"});
if((positionLeft + 250) < $(window).width()) positionLeft += 120;
else {
var positionTop = 160 + positionTop;
var positionLeft = 20;
}
span.appendChild(div);
document.body.appendChild(span);
}
}
function DivClick()
{
$('div').on({click: function(){
var el = document.getElementById(this.id);
el.style.border = "3px solid white";
if(!(secondstack.indexOf(this.id) > -1)) secondstack.push(this.id);
else {
var index = secondstack.indexOf(this.id);
el.style.border = "3px solid black";
secondstack.splice(index, 1);
}
}});
}
Just paste and run on same Jsfiddel Example

Window width and scroll width values

I want to show "back-to-top" button when the screen resolution is bigger or equal 1200px. Of course, it depends on window width. Here is jQuery code:
var wW = $(window).width() + 17;
console.log(wW);
if (wW >= 1200) {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#oc-ontop').fadeIn('fast');
} else {
$('#oc-ontop').fadeOut('fast');
}
});
}
So, if you set the window width to 1200px, console show you the value 1200. But 1200 is the sum of window width (1183px) + scrollbar width (17px).
How can I calculate scrollbar width in this function to be independent of it's width?
Take a look at this thread: How can I get the browser's scrollbar sizes?
When you apply the code from there (originally Alexandre Gomes Blog):
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
You can write:
var wW = $(window).width() + getScrollBarWidth();

Detect vertical scroll and scrollbar width and apply width change to body

In my page, I wish to detect whether the page has vertical scrollbars, and if so, need to detect the width of the scrollbar, so I can reduce my body by the width and thus prevent my sidebar from changing location from viewing a non-scrolling page to a scrolling page.
I have the following jQuery/Javascript code:
$(document).ready(function () {
var parent, child, width;
if (width === undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() - child.height(99).innerWidth();
parent.remove();
}
if ($("body").height() > $(window).height()) {
//change width of body here
}
});
Unfortunately, this code doesn't work for me. Can someone please let me know where I'm going wrong?
(function($) {
$.fn.ScrollBarWidth = function() {
if (this.get(0).scrollHeight > this.height()) { //check if element has scrollbar
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
}
}
})(jQuery);
Runs like so :
var scrollbarWidth = $('body').ScrollBarWidth();
console.log(scrollbarWidth);​ //prints the scrollbar width to the console
FIDDLE
You shouldn't need to change the width of the body. By default, it's 100% of the window's width and will adjust when scrollbars appear.
However, if you can't for some reason set the width to 100%, first see if disabling the horizontal scrollbar helps you:
overflow-x: hidden;
If that doesn't cut it, use the function from here to get the scrollbar's width. Then, listen to the window resize event:
var $window = $(window),
$body = $('body');
function resize() {
if ($body.height() > $window.height()) {
$body.width($body.width() - getScrollBarWidth());
}
}
$(window).resize(resize);​

How do i get relative dimensions of scrollbale window viewport

I am having a Tooltip (larger image view) that is being positioned via e.pageX e.pageY and i am trying to make sure it is not hidden below the current scrolled view port.
I have seen many sites have this
my code is something like this but i am missing something.
var positionImg = function(e) {
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
var mouseAtY = e.pageY;
var mouseAtX = e.pageX;
var maxBottomVPos = viewportHeight-"i dont know";
var maxTopVPos = 30;
if (mouseAtY >= maxBottomVPos)
{
tPosX = mouseAtX+ 10;
tPosY = mouseAtY -520;
}
else if (mouseAtY <= maxTopVPos)
{
tPosX = mouseAtX;
tPosY = mouseAtY +40;
}
else
{
tPosX = mouseAtX;
tPosY = mouseAtY +20;
}
$zoomContainer.css({top: tPosY, left: tPosX});
};
var maxBottomVPos = viewportHeight-"i dont know";
You probably don't want to go any lower than the height of the element that you are positioning. So use the height of zoomContainer to figure out how much higher it needs to go. This way, the whole thing can be included. Of course, you'll have to consider that the user might shrink the screen too small to fit the container.
To get the scroll offset use scrollTop. With this you will have both the size of the viewport and how far down the viewport is.
I found the answer:
Quite simple:
var positionImg = function(e) {
cntnrH = $zoomContainer.height() + 230;
calHight = e.pageY - $(window).scrollTop() + cntnrH;
docH = $(window).height()
var mouseAtY = e.pageY;
var mouseAtX = e.pageX;
if (calHight >= docH)
{
tPosX = mouseAtX + 5;
tPosY = mouseAtY - cntnrH;
}
else if (calHight <= calHight){
tPosX = mouseAtX;
tPosY = mouseAtY + 15;
}
else
{
tPosX = mouseAtX;
tPosY = mouseAtY +20;
}
$zoomContainer.css({top: tPosY, left: tPosX});
};
doIt = $("img.hovelble");
doIt.hover(showZoomImg, hideZoomImg).mousemove(positionImg);
});

Categories