I saw a good website template and started making a website. The link is: https://html5up.net/lens. In the process, I observed a typical UI bug, where in if a user scrolls down the page and clicks on "X" of the image (to see fullscreen image),toggles back, scrolls to the top of the page, the content which was visible before disappears though it still appears in the DOM.
I saw the js function written for the toggle, it's straightforward and works fine until we don't scroll on the web page. Please see bug screenshot.Screenshot of the bug
This is a known, ongoing issue with Chrome and CSS visibility. You can 'fix' this by updating the CSS of the affected children, ie. changing classes or simply setting the visibility of the child element manually. I believe this to be because Chrome automatically prevents the rendering of the divs because at the time they are called to be shown, they are off screen and not viewable.
Related
I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?
I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]
I'm looking for behaviour similar to pinned Gmail tabs, where tab head blinks when there's a new email and the tab is not in focus.
chrome.windows.update(..) has a 'drawAttention' option. But chrome.tabs.update(..) only has 'active' and 'highlight' options.
I couldn't locate a method of indicating an updated tab in the active window without switching to it/or highlighting it (which seems to have almost similar behaviour to active).
The glowing tab effect is specific to pinned tabs, and only happens when the page's title changes. This feature is not Chrome-specific, it also available in Firefox.
There is no way to get this effect for unpinned tabs, but if the tab is pinned, then you could change the page's title to get the desired effect via content script. To use this, you must declare the permissions to access the host.
Here is minimal example to achieve the goal:
chrome.tabs.executeScript(tabId, {
'document.title += ".";'
});
If you want to use this feature, I suggest to switch between two states (e.g. with trailing dot and without dot), to prevent the title from getting too long.
Unless the tab content is really updated, I recommend against using this trick, because the visual indicator is misleading when there is no update in the tab.
Alternative ugly ways to draw attentions to unpinned tabs with chrome.tabs.update are:
Pin/unpin tab
Move tabs across the tab strip
Activate/deactive the tab
I'm afraid that highlighting is as far as tabs API goes.
You could use a content script to show an annoying animated favicon until the tab gets visible as a possible workaround.
I'm building a Wordpress site that uses a lot of javascript, and I suspect some of the code is interfering with loading the content. The site sometimes loads fine, but sometimes only the images show up, but the text content does not. It does only when I hover over where the text is supposed to be, or resize the browser. I'd post a code, but I'm not even sure which part to post.
This is a link to the site:
http://paraboladesignstudio.ipage.com/yahaira
I'd appreciate any leads.
I added position: relative and height:100% to the element that didn't show up properly (for example, "aside"), and since then the problem hasn't happened.
I decide to make my own "neverending" scroll page which suits exactly my needs rather than making comfortable with some extensive classes that could not have to work exactly the way I would like them to.
Now, when all works like a charm, last thing remains. Preserve the scroll position when the browser's back button is hit. Every time you get to the bottom of the page I change the hash # part of the url. When the back button is hit, it shows waiting icon and then loads dynamic content.
Firefox scroll after that exactly to place the page was scrolled (good).
Opera and Safari seem to load exactly the same state there were before, so dynamic content seems to be already prefetched and displayed (good).
But IE and Chrome want to scroll before dynamic content is load and they don't try again later. IE get stucked at the top of the page and Chrome somewhere in the middle (bottom of the page before dynamic content shows up).
Now, what could I do to solve this issue? I could in theory store the current scroll position to url hash when any click is detected. Then previous page is load and I could simply parse the hash and ScrollTop(). But for some reason, this
$(document).live("click", function() { window.alert("gotcha"); });
doesn't work for me anyway.
The document doesn't have anything to be clicked on. document.documentElement is the root <html> node, so attach events to that, or to the window if appropriate.