I'm making a chat interface, so as people chat and the page gets filled, it needs to automatically scroll down to show the newest messages without the user having to manually scroll down. It works in Chrome, but not in Safari. Here is the particular line that is not working
document.getElementById('chatbox').scrollTop = Number.MAX_SAFE_INTEGER;
If the div ID is "chatbox", what do I need to put in the place of this line for it to work in Safari? Also, to clarify, despite it called "scrolltop" it scrolls to the bottom (which is what I want), but only in chrome.
Safari didnt like "Number.MAX_SAFE_INTEGER;". Replaced with an actual integer (ie 1000000) and it autoscrolled.
Related
I'm trying to make a flipbook for my website, but I've noticed that the back side of pages don't show up properly on Safari. I've tried all sorts of webkit fixes, including -webkit-backface-visibility, as well as some z-index fixes, yet nothing seems to work.
Here is my code and example on CodePen. On all other browsers, a "1" will appear on the left page, called .back in the code. However, on Safari, I am met with a blank page.
How do I get this working in Safari? Note: It technically works in mobile Safari, but only because I never use the back side of a page to display anything.
While trying to tweak some scrolling script to perform "jump to" links on some pages, I noticed that if you have a page with contains a hash tag in the URL, the behavior is different depending on the browsers when you press enter on the address bar, after the page is loaded.
For example, if you load a page with an has in the URL and then scroll away from the target element, I noticed that on Firefox and IE, if you put your cursor on the address bar and press enter, the page will move back to the HTML element having the same id attribute as the hashtag but the page will not be reloaded.
I also noticed that neither popstate nor hashchange events are triggered in such scenario. The scroll event will most likely be triggered but how can we know this is not the user scrolling but the browser reseting back its position?
Is there any was to detect this type of event in the browsers? Given this is outside the viewport I'm a bit curious. But I have a scenario where I would like to reposition the menu depending is the page is scrolling up or down.
To try to explain what I'm looking for:
Page with hashtag #test and element <div id="test">
Press F5, the page posisition itself right where the <div> is
Scroll up or down
Go on the address bar and press enter
---- Looking for an event to detect the previous action ---
the page posisition itself
right where the <div> is
Example in JSBin (open in Firefox):
http://jsbin.com/rifikereze/1/edit?html,js,output
Output:
http://output.jsbin.com/rifikereze/1#test2
Open your console in Firefox
Make sure in the Firefox setting you enable "persistent logs" to keep logs after page reloads
Press F5 (you should see a console message "reloaded")
Now try to move the page, put your cursor in the address bar and press enter
You will see the page does not reload
How can we detect these events (other than scroll events)?
Make sure to use Firefox on Windows if trying to reproduce. It looks like other OSes have other behaviors.
Given the lack of answer, my presumed answer is No.
There is no way to detect re-positioning of browsers using fragment identifiers (aka hash) in URLs and the address bar.
On top of this, browsers seems to have inconsistent behaviors:
Firefox on Linux behave differently than on Windows (it reloads the page).
Chrome seems to be ignoring re-positioning unless the page's position is set back to the top position before unloading.
There seems to be no standard across browsers on whether the normal behavior is to reload or re-position.
The only safe way to detect fragment identifiers repositioning is when loading the page.
In this simple example https://jsfiddle.net/4rsje4b6/1/ why is the #test element not being shown before the alert appears?
Shouldn't the jQuery css() method be syncronous?
#test {
display: none;
}
<span id="test">Element</span>
$("#test").css("display", "inline");
alert("Showed element!");
UPDATE:
This behavior is manifesting for me on Chrome Version 52.0.2743.116 m, Windows 10.
It changes the style synchronously, and you will notice that if you read back the value on the next line and show it.
$("#test").css("display", "inline");
alert("Showed element!" + $("#test").css("display"));
But the change of the style object triggers a repaint request message to the page renderer, and that is handled as soon as the browser becomes idle, which is after this script routine has ended.
It depends on the browser, though. In Edge it works fine, and the element is shown right away but in Chrome and Vivaldi it is not.
Another test to see how browsers handle this:
If you resize the browser window, JSFiddle will scale (each of the areas keeps the same relative size). If you resize the Vivaldi browser with the alert open, it doesn't do that. In fact if you make it small, then show the alert, then make it larger, you just get a grey area in the new space until you close the message box. In Edge, the fiddle will just resize in the background, even though the entire browser window is grayed out, so it's not just a matter of the time of processing, but more that Chrome completely freezes the page when an alert is open.
I have iframe on my page. In firefox, when I tab into the iframe the control goes to html tag in the iframe. (I could see this with document.activeElement.contentWindow.document.activeElement on console.) The next tab gets me to the first control in the iframe.
In IE and chrome it works fine.
Can you please help me, what I am doing wrong?
Thanks
You're doing nothing wrong. Firefox is focusing the root element so that a user who's just using the keyboard can scroll the iframe if he wants to. If the focus went directly to the first text input, for example, the user wouldn't be able to scroll the frame.
And indeed, that's what happens in Chrome. If the subframe happens to not have any text controls in it, the user can scroll it fine after tabbing to it. If it has text controls, the user is screwed if he wants to scroll.
For what it's worth, I just reported this as https://bugs.webkit.org/show_bug.cgi?id=79558 because it seems like a clear accessibility bug...
Hi I have been using Rokstories, a mootools javascript slideshow in Joomla, I am having a very odd problem with Rokstories in IE . I have uploaded a temp copy to my server to show everyone.
If you click on my link in IE , the page loads and Rokstories works as normal, sliding from left to right every few seconds......click one of the other menu links, then go back to the home page and Rokstories does something very odd, the dots move along to say that it is going between slides, but the actual slide stays put and dont move.
If you clear your cache and reload the page it works fine again until you browse to another menu item and come back, then the problem starts again.
I have tested this with IE8 and get the problem, I have also tried it in Chrome & Firefox and done see a problem.
http://www.key4design.co.uk/test/index.php
The first thing I notice (apart from the Google Maps API key alert) is that IE throws an error:
Line: 989
Error: 'Cufon' is undefined
Looking on Chrome/Safari/Firefox all throw up 404 on cufon-yui.js & /plugins/system/Cufon/key4font_400-key4font_700-key4font_italic_400-key4font_600.font.js
Our experience has been the IE will sometimes fail when JS files aren't in cache when it expects them to be. You might want to fix those first.