Browsed a lot, fiddled with it a lot. Came to the conclusion others may see the mistake that I am blind to.
The code is supposed to move the sidebar according to window height, sidebar height, content height, etc.
This is the code:
$(document).ready(function() {
var windowheight = $(window).height();
var identheight = $(".ident").height();
var sidebarheight = $(".sidebar").height();
var mainheight = $(".main").height();
var pos = $(window).scrollTop();
var diff = (((sidebarheight + 20) + identheight) - windowheight);
var cur = ((sidebarheight + 20) + (pos - diff)) - 2;
var max = (mainheight + 30);
contentScroll();
$(window).resize(function(){
windowheight = $(window).height();
identheight = $(".ident").height();
sidebarheight = $(".sidebar").height();
mainheight = $(".main").height();
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
$(window).scroll(function (){
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
function contentScroll() {
if (sidebarheight < mainheight) {
if (diff < identheight) {
if (pos >= identheight) {
$('.sidebar').css({
'margin-top' : (pos - identheight) + 'px'
});
}
} else {
if (pos >= diff && cur <= max) {
$('.sidebar').css({
'margin-top' : (pos - diff) + 'px'
});
}
if (pos <= diff) {
$('.sidebar').css({
'margin-top' : '0px'
});
}
}
}
}
});
I'm aware of it not being perfect, it's still in the rough phase. It works perfectly fine in FireFox, but not in chrome. The function is being called (tested with alerts). It just doesn't do anything.
Probably something about chrome reading syntax different.
If anyone that see's my mistake would kindly point me to it, it's been too long for me to keep cracking my head open over this.
This is the mock-website in question: http://klok-bremen.de/fff/
Use $(window).load instead of $(document).ready because the parent elements' heights will change after the images load.
Related
var totalHeight = 0;
$(".scroll-section").each(function(){
totalHeight += $(this).height();
});
$(".site-content").scroll(function() {
var scrollTop = $(".site-content").scrollTop();
var movePos = (scrollTop / totalHeight) * 100;
movePos = movePos + 100;
console.log(movePos);
$(".page-fixed").css("background-size", `${movePos}% 100%`)
});
I tried margin, does not work
Doing this for webflow so yeah... Would need to get it webflow compatible as well
Is there another way to rewrite this code to be more optimized, because i see that it's very repetitive in the mousemove action, also if condition
if (dept === "Parlement européen") {
var popup_topo = $("<div class='popup_topo'><strong>" + dep + "<br/>" + total + " parrainages</strong></div>");
$(this).on("mousemove", function (event) {
if ($(window).width() < 480) {
var x = event.pageX - $(this).offset().left - 45;
var y = event.pageY - $(this).offset().top + 30;
} else if ($(window).width() > 480) {
var x = event.pageX - $(this).offset().left + 30;
var y = event.pageY - $(this).offset().top + 30;
}
$(this).append(popup_topo);
popup_topo.css({
top: `${y}px`,
left: `${x}px`,
});
})
.on("mouseleave", function (event) {
popup_topo.remove();
});
}
else {
var popup_topo = $("<div class='popup_topo'><strong>" + dept + "<br/>" + total + " parrainages</strong></div>");
$(this).on("mousemove", function (event) {
if ($(window).width() < 480) {
var x = event.pageX - $(this).offset().left - 45;
var y = event.pageY - $(this).offset().top + 30;
} else if ($(window).width() > 480) {
var x = event.pageX - $(this).offset().left + 30;
var y = event.pageY - $(this).offset().top + 30;
}
$(this).append(popup_topo);
popup_topo.css({
top: `${y}px`,
left: `${x}px`,
});
})
.on("mouseleave", function (event) {
popup_topo.remove();
});
}
Here are couple of simple suggestions:
The mousemove event (at least the vanilla version, and I'm assuming jQuery's is similar) gets called quite frequently. You could set a minimum time between iterations if you want to process considerably less code.
You use the same definition for y in two places; you can define it just once, outside the conditional block.
As commenters have mentioned, your outer conditional statement should probably be removed entirely.
(Note: You probably don't need or want to include if ($(window).width() > 480) -- unless you have a reason to treat a width of exactly 480 as a special case with no format specified.)
I am trying to re-size an image in a popup. The original image is 6000 x 4000. I do a check to see if the image is greater than 500, and if so I just try and set the image to 500. Trying to set it using 'this', makes the pop open in a tab and the image is still its original size. If I try and set the image not using 'this', the pop up works as intended regarding where it is positioned on screen and the size of the box, but the image, is still its original size--6000 x 4000. (PS: I have to use ES5 as well.)
What gives?
Thanks,
CM
<script language="javascript" type="text/javascript"><!--
// let i=0;
function resize() {
console.log("Testing");
let i=0;
if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
i=30; //This browser is Internet Explorer 6.x on Windows XP SP2
} else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
i=0; //This browser is Internet Explorer 6.x
} else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=25; //This browser is Firefox on Windows
} else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=45; //This browser is Mozilla on Windows
} else {
i=80; //This is all other browsers including Mozilla on Linux
}
var imgWidth = document.images[0].width;
var imgHeight = document.images[0].height;
console.log("Original image width is: " + imgWidth);
console.log("Original image height is: " + imgHeight);
if(imgWidth > 500){
//Shrink the image to size of popup frame
this.imgWidth = 500;
this.imgHeight = 500;
console.log("Adjusted image width is: " + imgWidth);
console.log("Adjusted image height is: " + imgHeight);
//Get display/screen width and height
var screenWidth = screen.width;
var screenHeight = screen.height;
console.log("Screen width is: " + screenWidth);
console.log("Screen height is: " + screenHeight);
//Set popup position on display/screen
var leftpos = screenWidth / 2 ;
var toppos = screenHeight / 2 - imgHeight / 2;
console.log("Left position is: " + leftpos);
console.log("Top position is: " + toppos);
//Set popup frame width and height equal to adjusted image width and height
var frameWidth = imgWidth;
var frameHeight = imgHeight+i;
console.log("Frame width is: " + frameWidth);
console.log("Frame height is: " + frameHeight);
window.moveTo(leftpos, toppos);
window.resizeTo(frameWidth,frameHeight+i);
}
else if (document.documentElement && document.documentElement.clientWidth) {
var imgHeight = document.images[0].height + 40 - i;
var imgWidth = document.images[0].width + 20;
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - imgWidth / 2;
var toppos = height / 2 - imgHeight / 2;
frameWidth = imgWidth;
frameHeight = imgHeight + i;
window.moveTo(leftpos, toppos);
window.resizeTo(frameWidth, frameHeight + i);
} else if (document.body) {
window.resizeTo(document.body.clientWidth, document.body.clientHeight - i);
}
self.focus();
}//end resize() function
//--></script>
Use
var imgWidth = document.images[0].style.width;
instead of
var imgWidth = document.images[0].width;
I have problem with my parallax slideshow script. It's not scrolling smooth and its shaking weird. The thing is that I couldn't find the proper script for element(like slider etc), most of them are only for single image. There is my script:
<script type="text/javascript">
var ypos,image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('slider');
image.style.top = ypos * .8 +'px';
}
window.addEventListener('scroll',parallex);
link to the site: http://www.pappu-lighting.com/Slider/Home.html
$(window).scroll(function(){
if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
var temp = 100 - ($(document).scrollTop() - 1200) / 8;
var bonus = '50% ' + temp*-1 + '%';
document.getElementById('div').style.backgroundPosition = bonus;
}
}
How is the document height is smaller than the window scroll top value + the viewport height, when I scrolled down to the end of document. Should not they be the same? I am struggling with this for last couple of hours but still not getting the hang of it.
$(function(){
vpw = parseFloat($(window).width());
vph = parseFloat($(window).height());
appearh = parseFloat(vph*0.4);
dh = $(document).height();
footerh = $('#footer-area').height();
footTop = dh - footerh;
resizeDiv(vpw, vph, appearh);
$(window).scroll(function(){
scrollPos = $(window).scrollTop();
jj = vph + scrollPos;
console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
if(scrollPos > appearh){
addWin = parseFloat(dh - vph);
$('#trends').removeClass('hidetrends',2000).addClass('showtrends',2000);
/*console.log( dh + '>' + scrollPos + ';' + addWin );
if(scrollPos >= 1672){
$('#trends').css('position', 'relative');
}else if(scrollPos <= 1672){
$('#trends').css('position', 'fixed');
}*/
}else{
$('#trends').removeClass('showtrends',2000).addClass('hidetrends',2000);
}
});
});
window.onresize = function(event) {
resizeDiv(vpw, vph, appearh);
}
function resizeDiv(vpw, vph, appearh) {
$("#full-width").css({"height": vph + "px"});
}
Try this:
$(window).scroll(function(){
vpw = parseFloat($(window).width());
vph = parseFloat($(window).height());
appearh = parseFloat(vph*0.4);
dh = $(document).height();
footerh = $('#footer-area').height();
footTop = dh - footerh;
resizeDiv(vpw, vph, appearh);
scrollPos = $(window).scrollTop();
jj = vph + scrollPos;
console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
....
The reasoning behind this is I think it'd be wise to actually set your variables as you scroll