I recently found the perfect mini-script for the pictures section of the site I've been working on non-stop for the last half year. I had it working but apparently in Firefox it doesn't want to play nice. What's even odder is I've played with it a bit; all my references are fine, but the thing won't do what I say anymore. Another oddity is I searched Google for some of the code, found it again (to examine it), and wouldn't you know: that incarnation runs perfectly on WebKit and even ran flawlessly on Firefox! I am about to pull my hair out, so, any help is appreciated. By the way, the script in question gets dynamically loaded towards the end of the DIV. My site (pictures section): http://www.elemovements.com/pictures and the replica: http://www.gmcbryde.com/. Here is the code, as well, just for good measure (which you can find unminified at http://el.x10.mx/js/logic/pictures.js [you need only concern yourself with the first 40-50 lines or so]):
if ( $('div.highslide-gallery').length ) {
$( function() {
var $Div = $('div.highslide-gallery'),
$Ul = $('ul.horiz-list'),
$UlPadding = 0;
$Ul.width(9000);
$Div.width( $Div.parent().parent().width() - 26 );
var $DivWidth = $Div.width();
$Div.css( {overflow: 'hidden'} );
var lastLi = $Ul.find('li:last-child');
$Div.mousemove(function(e){
var $UlWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + $UlPadding;
var left = (e.pageX - $Div.offset().left) * ($UlWidth-$DivWidth) / $DivWidth;
$Div.scrollLeft(left);
} );
} );
}
The issue I am experiencing is that the DIV just won't move in Firefox. In WebKit, it works as expected but all that happens in good ol' Mozilla is the mousemove() event gets fired. I appreciate anyone's help. Thank you.
I just remembered that Firefox requires an initial width for elements, and I had forgotten to again include the CSS I had for it after I first scrapped it. That made all the difference. Thanks anyway!
Related
I am losing my mind with this seemingly simple code.
I have created a sticky menu for a few sites and they all share the same problem. On iOS devices, at least the iPhone 6 with up to date iOS, the menu jumps into its fixed position too early. It's as if iOS miscalculates the offset for the element and runs the function too early. Though for the life of me I can't figure out how or why. On desktop it works fine. On Android it works fine. Please help!! The site is [DreaD Illustrations][1]. I have tried everything I can think of and find on the internet. Also, I noticed, it calculates incorrectly on initial load, but when you scroll down and scroll back up it seems to work. Help! The code is below.
var navBar = jQuery("nav.site-navigation.main-navigation.primary.mobile-navigation");
var topofNav = navBar.offset().top;
stickyDiv = "being-sticky";
mahMain = jQuery('#main').outerWidth();
jQuery(window).load(function(){
jQuery(window).on('scroll', function() {
if (jQuery(document).scrollTop() > topofNav) {
navBar.addClass(stickyDiv);
navBar.outerWidth(mahMain);
} else {
navBar.removeClass(stickyDiv);
}
});
});
.being-sticky {
position:fixed;
top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Thanks everyone for your help!
So it was a simple fix for me for safari. I created a variable of whenToScroll and set it differently if it was safari or another browser! That seemed to fix it! Though I tried the safari setting for chrome and no go.
if (jQuery.browser.safari)
var whenToScroll = jQuery("div.hgroup.full-container").outerHeight();
else
var whenToScroll = navBar.offset().top;
Have you tried setting a timeout and seeing how that displays on IOS? If it's a timing thing that's being read differently, you can use navigator.userAgent to remove the class a bit later for IOS devices only.
if(/iPhone|iPad|iPod/.test(navigator.userAgent)) { //IOS browsers
setTimeout(function(){
navBar.removeClass(stickyDiv);
}, 7000); // however many milliseconds you need it to wait for
}else{
navBar.removeClass(stickyDiv);
}
First off, I'd like to say that I'm sorry if this is an easy question. I'm fairly new to the HTML/CSS scene, and haven't even arrived at the Javascript one yet.
Here's my problem. I have a website I'm trying to build for my uncle, which you can see here. (it's still deep in pre-alpha stage, so the links don't work). It works fine as a local file, but as soon as I host it, my 'sticky' header starts to stick too soon, if at all. Reloading the page works about 1 time in 10.
I may or may not have isolated the cause of the problem: my placeholder. My sticky code itself works fine most of the time, except for one thing: as the sticky bar docks, it becomes fixed and the text jumps up 90-odd pixels. To combat this, I added lines 6 and 7 to my code below:
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
sticky.classList.remove('fixed');
window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
jQuery('.content').css("paddingTop", "0px");
}
document.addEventListener('scroll', onScroll);
It basically sticks a placeholder in there to stop that jump. It works fine, except now it's broken my code. I have experimented a bit and discovered that the placeholder seems to load randomly, and the header just goes weird. That's the best I can do.
It seems to be the placeholder code breaking it, as without the code it seems to work fine, perhaps after a couple of reloads. However, I am completely stumped. Has anyone got any idea how to fix it?
(Tested in Chrome 64 bit and 32 bit, as well as Chrome for Android, although that's glitchy on another level. Works fine as a local page, but not when hosted.)
It seems that the these code is executed too early that the image is not loaded yet, you can use chrome dev tool to add a pause to break to var origOffsetY = sticky.offsetTop;.
Then you can see 2 cases: 22 or 642
You can further inspect that the image, which should be the banner, is not completed when 22 condition is met, and if you use document.querySelector('.splash img') to get it and check its height, you'll see 0. While in the 642 case, you'll get 500.
The difference may be sometimes the image come from cache, sometimes it load from internet, so it may or may not able to decide the height when your script is executed.
So we have to make sure the image which is in the .splash is already loaded:
<script>
// Wrap the logic to a function for call.
var stickFunction = function() {
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
sticky.classList.remove('fixed');
window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
jQuery('.content').css("paddingTop", "0px");
}
document.addEventListener('scroll', onScroll);
}
// Get the image element
var splashImage = document.querySelector('.splash img');
// Check if image is complete or not.
if (splashImage.complete) { // If completed, do the logic.
stickFunction();
} else { // If not, tell the image to call the function for you when it is loaded.
splashImage.onload = stickFunction;
}
</script>
I'm trying to build a slideshow script will work with images of any width. Not too surprisingly, I'm having some centering issues that cause the portrait mode images to start off on the left when they initially display and then immediately move to the center after a short delay (giving it a bit of a "shooting ducks at a carnival" feel) .
I think that the solution is to get the image width right before it displays and then use that to center it, but I've been having some trouble finding reliable code that does that correctly. I've seen some examples that get the dimensions on load, but since the page (obviously) only loads once before the slideshow starts, that doesn't help much. I put it into CodePen for anyone to view that is kind enough to try and assist me:
http://codepen.io/Realto619/pen/fhdwK
I'm also having a problem with the getPrev() and getNext() functions not working on the first click, They work fine after that, and they seem to be firing on those first clicks, but they don't do what they're designed to until the second click.
Thanks in advance...
As I suspected, the problem was due to the image dimensions / image container not changing for each slide, so the css couldn't center it without having an accurate width for margin:0 auto; to work properly.
I created the following function and then called it in each of the other functions:
function getDim() {
iW = $(window).innerWidth();
iH = $(window).innerHeight();
natW = $(".fadein img").get(0).naturalWidth;
natH = $(".fadein img").get(0).naturalHeight;
natR = natW/natH;
adjH = iH*0.98;
adjW = adjH * natR;
$(".fadein").css('width',adjW);
$(".fadein img").css('width',adjW);
$(".fadein img").css('height',adjH);
}
Hopefully this will help someone else with a similar issue that comes here.
I'm working on a custom theme on tumblr and I want to make it responsive.
Here's what I came up with so far: couchspinach.tumblr.com
My problem is with photosets. I'm using the {photoset} tag.
The Tumblr docs say:
{Photoset} Embed code for a responsive Photoset that shrinks to fit the container (max. 700-pixels wide)
I've tested the layout in a few browsers and images are resizing correctly everywhere except on the ipad! Here's a couple of screenshots in landscape mode. The first photoset is ok, the second one not. It happens both on Safari and Chrome for ios.
I haven't found much online, this is the only discussion that was relevant to the problem but no solution yet. Anyone knows what it might be? Honestly, I have no idea where to start, I removed the js and that didn't make a difference, same with the css. I'm really at loss at what to do. Any help would be really appreciated.
Bingo!
function resizePhotosets(){
var parentWidth = document.body.querySelector('.html_photoset').offsetWidth;
var photosets = document.body.querySelectorAll('iframe.photoset');
for(var i = 0; i < photosets.length; ++i){
var photoset = photosets[i];
photoset.width = parentWidth;
}
}
window.onload = resizePhotosets;
window.onresize = resizePhotosets;
// if using Infinite Scroll, call resizePhotosets() in it's callback function.
https://gist.github.com/edadams/6678258
Many thanks to Ed Adams.
Hopefully, this will be an easy answer for someone with Javascript time behind them...
I have a log file that is being watched by a script that feeds new lines in the log out to any connected browsers. A couple people have commented that what they want to see is more of a 'tail -f' behavior - the latest lines will always be at the bottom of the browser page until the viewer scrolls back up to see something. Scrolling back to the bottom should return you to the auto-scrolling behavior.
My google strikeout on this one is - hopefully - just a matter of not knowing anything at all about javascript and therefore, not knowing what keywords to search for. I don't need a complete solution - just a 'close enough' that lets me jump in and get my hands dirty.
EDIT:
I've been attempting the scrollTop/scrollHeight idea, but am clearly missing something. I've done next to nothing with Javascript, so again I'm probably asking very low-level questions:
<html><body>
<script type="text/javascript">
for (i=0; i<100; i++)
{
document.write("" + i + "<br />");
document.scrollTop = document.scrollHeight;
}
</script>
</body></html>
This was one of many permutations. Obviously, I can't output the log line-by-line in javascript, but I'm just trying to see the correct behavior. What's the missing link I need here?
EDIT AGAIN:
This has turned into a far more interesting problem that I first expected. The code suggestion using window.scroll does do the trick. I started playing with restricting the scroll to only take place when the browser was at the bottom of the document body. This is easy enough to do in theory, but in practice it hits a snag:
Every time you get new text from the server, the size of the body increases and your current scroll position is no longer at the bottom of the document. You can no longer tell the difference (using scrollHeight, clientHeight and scrollTop) whether the user has scrolled up or if the text has just shot beyond their view.
I think that if this is going to work, I'm going to have to commit myself to having a JS event that fires when the user scrolls and turns off scrolling if they are above the bottom of the window, but turns it back on if they have scrolled down to the point where they are effectively at the bottom of the view. I'm looking at the onScroll event and, given that the math on the variables I mentioned works out pretty well, I think I am on the right path here. Thanks for your input, everyone!
x = 0; //horizontal coord
y = document.height; //vertical coord
window.scroll(x,y);
To scroll the whole document use this:
window.scrollTo(0, document.body.scrollHeight);
if you have just a single scrollable div or something then the process is different:
var obj = $('id');
obj.scrollTop = obj.scrollHeight;
for (i = 0; i < 100; i++) {
document.write("" + i + "<br />");
window.scroll(0,document.body.offsetHeight);
}
Nice jQuery function gets this done
$('html,body').animate({ scrollTop: element.offset().top }, 'slow');
This worked for me, used it to AutoScroll to a dropdown menu to bring it into focus
This Explains What set time interval is - http://www.w3schools.com/jsref/met_win_setinterval.asp
This Explains What set time out is - http://www.w3schools.com/jsref/met_win_settimeout.asp
This will scroll the page with javascript and will stop after 6 seconds
<script type = "text/javascript" >
var x;
function autoscroll(){
self.scrollBy(0,x)
}
function playautoscroll(){
x = 1;
setInterval('autoscroll()',0.01);
stop();}
function onetozero(){
x=0;
}
function stop(){
setTimeout ("onetozero()",6000);
}
window.onload=playautoscroll
</script>
obj.scrollTop = obj.scrollHeight;