With the recent Firefox and Chrome browser releases, the default status bar has been taken from us to free up more screen space and de-clutter the UI. The status bar was used to display the URL of any link the user rolls over, among other things.
The browser makers couldn't completely remove the status part of the status bar, because users need to be shown where they will be going if they roll over a link. They've settled into displaying a temporary, tooltip-style modeless text bar that appears at the bottom left or right of the browser window's client area on link rollover.
I'll put aside my displeasure with the browser makers invading MY beautiful client area and smearing their chrome all over with distracting fade-in transitions and weak color/contrast choices. I'd just like some suggestions on how to best deal with this current situation.
I use absolute positioning to keep some of my DOM elements in the lower left and right of the visible client area on the page. Is there a way to detect in javascript how tall these temporary status bars will be so that I can vertically offset my elements far enough from the bottom of the page so that they are not occluded by the temporary status bar?
Browser plugins like StatusBar-4-Evar are not a good solution for me because I could never suggest that my users install anything to view my website. I'd like solutions to work with the browsers' default settings.
I don't want to work too hard for this; I'd like to avoid browser/version detection to know when I should vertically offset my elements. I am ready to accept if my page design is not workable and to assume the bottom of the page is now off-limits to any content other than that page content which flows there naturally.
Related
I am no programmar nor tech savvy person myself.
I just wanna know if it's possible to achieve this goal:
The default behavior of the browser(e.g. chrome) is it sends one page up or page down depending on where I click(above or below scroll thumb).
But when clicking somewhere on the scroll track, I wish it navigates right through the target position in the web page.
for better understanding, here's the screenshot of cnn.com main page for reference:
(In first screnshot, I highlighted where I will click.
Second screenshot is the default behavior of the browser as a result.
Third screenshot is what I want realize for my own convenience. it's useful when navigating through long articles.)
I think it is almost impossible to do this on my part because maybe it's hardcoded in browser's engine level or something, but I wanted to make sure it really is.
or any workaround like making autohotkey script or something?
thank you so much!
There seems to exist a trick with Shift, but it doesn't work in browsers.
However, you are manipulating a browser, and browsers have a built-in scripting language — JavaScript. Here's the setup you need to do:
Go to the place on the page you want to scroll to.
Open the developer console (Ctrl+Shift+I and then click on the "Console" tab). This shouldn't interfere with the scroll position.
Type window.scrollY and press Enter.
After that, the console will output the amount of vertical scrolling. In the following AutoHotkey code I'll use 12345 as an example; replace it with the value you have. Note that it also scrolls to the left margin.
Send {F6}javascript:window.scrollTo(0,12345)`%3Bvoid`%200{Enter}
It appears that, due to a bug, this doesn't work in Firefox.
I know your problem, I think chrome must have this config, you can type in the address bar "chrome://chrome-urls" for searching
I'm using the latest Firefox testing a fluid layout.
Somehow after the last update of FireFox, I seem to no longer be able to shrink the page width below a certain threshold level (in my case 348px). Even if I delete all elements on the page, I'm still at 348px.
I have tried to hide all toolbars and Firefox buttons, but still no change.
If check a page in Chrome, the HTML width gets reported correctly = whatever my browser window is resized to.
*Question:
Is this a new "feature"/setting? If so, can I turn this off... It's annoying for sure.
Firefox 14 (if I remember correctly) should have a responsive layout tool - you might want to check that out.
I am trying to insert a custom widget into the Internet Explorer 8 url bar, next to the stop and reload buttons. This is just a personal productivity enhancer for myself.
The "window model" for this part of the IE frame is an "address bar root" window that owns the windows which comprise the IE8 url bar: an edit box, a combo control, and the stop and reload buttons.
From another process, I create a new WS_CHILD window (with a custom class name) that is parented by IE's address bar root window, thus making it a sibling of the edit box and stop/reload. I call SetWindowPos with an hwndInsertAfter of HWND_TOP to make sure it appears "above" (i.e. "in") the urlbar. This works nicely, and I see my window painted initially inside the IE urlbar.
However, when I activate the IE window, the urlbar edit control jumps back in front of my window. I know this is happening because I still see my window painted behind the urlbar, and because when I print ->GetTopWindow() to the debug console on a timer, it becomes the HWND of the urlbar edit control.
If I update my message loop to call SetWindowPos with HWND_TOP on WM_PAINT, things are better -- now when I activate the IE window and move it around, my control properly stays planted above the edit control in the urlbar. However, as soon as I switch between IE tabs, which updates the text of IE's urlbar Edit control, my control shift backs behind the Edit control. (Note: This also happens when I maximize or restore the window.)
So my questions are:
1) Is it likely that IE is intentionally putting its urlbar edit control back on top of the z-order every time you click on a tab in IE, or is there a gap in my understanding of how Windows painting and z-ordering works? My understanding is that once you specify z-ordering of child windows (which are not manipulable by the end-user), that ordering should remain until programmatically changed. So even though IE is repainting its Edit control upon tab selection whereas I am not repainting or otherwise acting upon my window, my window should stil remain firmly on top.
2) Given that the z-order of my window is apparently changing, shouldn't it receive a WM_WINDOWPOSCHANGING/WM_WINDOWPOSCHANGED? If it did, I could at least respond to that event and keep myself on top of the Edit control. But even though I can see my window painting behind the urlbar Edit control when I click on a tab, and even though my debug window output confirms that the address bar root's GetTopWindow() becomes the HWND of the Edit control when I click on a tab, and even though I see WM_WINDOWPOSCHANGING/WM_WINDOWPOSCHANGED being sent to the Edit control with an hwndInsertAfter of HWND_TOP when I click on a tab, my own window receives no messages whatsoever that would allow me to keep the z-order constant. This seems wrong to me, and addressing it would force me to run in IE's process and hook all messages sent to its Edit control just to have an event to respond to :(
Thank you for your help!
It's quite likely that IE is juggling the Z-order of the controls when you change tabs. In IE9, the URL bar and the tabs have a common parent. When you select a new tab, it activates the URL bar (and activation usually brings the window to the top of its local Z order).
No. You get WM_WINDOWPOSCHANGED when a SetWindowPos function acts on your window. If some of the siblings have their z-orders changed, you don't get a message. Nobody called SetWindowPos on your window. You can see this by writing a test program that juggles the z-order of some child windows.
This makes sense because there might be an arbitrary number of sibling windows, and it could be an unbounded amount of overhead to notify all of them. It also would be nearly impossible to come up with a consistent set of rules for delivering these messages to all the siblings given that some of the siblings could react by further shuffling the z-order. Do the siblings that haven't yet received the first notification now have two pending notifications? Do they get posted or dispatched immediately? What if the queue grows and grows until it overflows?
This is different from WM_KILLFOCUS/WM_SETFOCUS notifications in that it affects, at most, two windows. That puts a reasonable bound on the number of notifications. Even if there's a runaway infinite loop because the losing control tries to steal the focus back, the queue won't overflow because there's only one SetFocus call for each WM_KILLFOCUS delivered.
Also, it's reasonable that windows might need to react to a loss of focus. It's much less likely that window C needs to know that B is now on top of A instead of the other way around, so why design the system to send a jillion unnecessary messages?
Hacking the UI of apps you don't control and that don't have well-defined APIs for doing the types of things you want to do is anywhere from hard to impossible, and it's always fragile. Groups that put out toolbars and browser customizations employee more people than you might expect, and they spend much of their day probing with Spy++ and experimenting. It is by nature hacking.
Scroll bars are really boring. I've seen a few really inventive new user interfaces for updating these. I believe there are many better ways to spend 10px then with a solid color and static buttons. Here are two examples I've found:
http://www.youtube.com/watch?v=-PnXY4wjuH8
http://chikuyonok.ru/u/demo/infoscroller/
(credit for this link goes to this question uses HTML5 Canvas )
Do you have any other ideas to add to this list? How can we give a better idea of view-status in the document, without wasting so much real estate? How can we add more functionality to the notorious dead space on the right?
Firstly, one should be very careful about “updating” the scrollbar. The scrollbar is a great success story, a simple, elegant, powerful control that is critical for successful computer use and almost universally understood by users. Trying to improve the scrollbar is like trying to improve the ballpoint pen. It’s stayed the same for so long because there’s really not much more you can do. Being "boring" is not a good reason to improve it. Users don’t use an app or site because it has new and "cool" controls. They use an app or site because it lets them accomplish their tasks. To improve the scrollbar, consider how changes can improve task completion.
Good things the humble scrollbar has:
Capacity to scroll one pane-full.
Capacity to scroll one line (fine tuning).
The capacity to do each of the above repeatedly without moving the mouse (so a user reading some content only has to click occasionally after initially placing the mouse over the right spot).
Allows random access to anywhere in the pane by simple linear drag and drop.
Intuitively shows the relative position in the content (e.g., allowing the user to judge how close s/he is to the end).
Intuitively shows the relative size of content by the size of the slider relative to the track.
Supports intuitive keyboard activation via the cursor keys -good shortcuts, and good for accessibility.
Supports clickamatic (pressing down and holding the mouse button to scroll multiple lines or pane-fulls).
Very smooth real-time feedback on user actions.
All in a remarkable compact and unobtrusive control that doesn’t distract from the content (what the user is really interested in).
You don’t want to mess with any of that. In particular, the pop-up scrollbar you link to is probably a bad idea because it interferes with the capacity to scroll by a pane-full by clicking the track. That is perhaps the most common user action so it deserves the greatest number of pixels (i.e., the track).
On the other hand, building on existing scrollbar capability, like the Infoscroller you link to, is a something worth investigating further. For the original research on this concept, see:
McCrickard DS and Catrambone R (1999)
Beyond the scrollbar: An evolution and
evaluation of alternative navigation
techniques. Georgia Institute of
Technology Technical Report
GIT-GVU-97-19.
Obviously, what you show in the scrollbar track depends on your content. A thumbnail of the content won’t work well for a text table or list. For that, Greg Raiz has suggested indicating the values for the current sort order. If there’s not enough space, maybe tooltips or callouts can appear pointing to key places in the track to drag to. MS Word does something similar with this, showing a tooltip indicating the page and section of the current drag-to point.
Here’re some other ways we could build on the scrollbar:
More Buttons. I’ve seen suggestions to include both up and down buttons at the top and bottom so the user can transition between scrolling down and up without having to slew the entire height of the pane. Or you could have buttons to scroll immediately to the beginning and end of the content, handy for users who don’t know about Ctrl-Home and Ctrl-End, saving them from making a long drag of the slider. MS Word includes buttons to execute the last Find or Goto, among other possibilities.
Split bar. On the subject of MS Word, MS Word and Excel scrollbars include a split control to allow you to divide the window into two panes. That would be handy for a lot of other applications, such as browsers and large lists and tables.
Expert activation. If you don’t want to clutter the scrollbar with more buttons and controls, consider providing expert shortcuts via meta keys. Ctrl-clicking an arrow button could scroll the user to the beginning and end of the content. Ctrl-clicking the track could instantly scroll to the corresponding position in the content, particularly useful if you’ve implemented Infoscroller. Ctrl-clicking the slider could pop open a mini dialog or text box to enter a page number, list item identifier, or Find criteria to jump to.
Left side scrollbar. There is some research suggesting we should usually be putting vertical scrollbar on the left side, rather than the right (see Kellener E, Barnes GM, & Lingard R (2001), Effects of scroll bar orientation and item justification, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting). Having the scrollbar position consistent with the content alignment means less average slew distances for faster scrollbar use. In the same vein, putting the scrollbar on the left in a browser would shorten the distance between the scrollbar and the Back button for faster navigation. However, the advent of the scrollwheel may have made this idea obsolete.
Great question. Please see RockScroll, which is now standard in Visual Studio 2013 Preview: http://www.hanselman.com/blog/IntroducingRockScroll.aspx
RockScroll in turn inspired MetalScroll:
which in turn inspired RockMargin.
Also, Jetbrains Resharper plug-in for Visual Studio puts a vertical affordance to the right of the scrollbar. The information is displayed as little horizontal bars of different colors. These bars indicate a piece of code that can be improved. Clicking on a bar scrolls the code page to bring the code in question into view:
Also, most file comparison software uses fancy scrollbars. See Scooter Software's Beyond Compare 3.0, which puts an "infoscroller"-like affordance separate from the scrollbar. The affordance on the left is draggable like a scrollbar. In addition, to reduce the need for horizontal scrolling, there is a bottom pane which puts the current line from the left pane on top and the current line from the right pane below. Moving the info-scroller allows the user to scroll both documents simultaneously, which makes "merging" changes between two versions of the same document MUCH easier. Please see:
WinMerge has a different, equally scrollable, left-pane that functions like a scrollbar and duplicates the existing scrollbars. http://winmerge.org/about/screenshots/filecmp.png
Finally, Google Chrome integrates search functionality (the "find bar") into the scroll bar.
And Greg Raiz came up with the ABC Scrollbar:
And Overlay Scrollbars which minimize the non-client area:
And a research, gaze-enhanced scrolling techniques.
I like the Google Wave scrollbar- it seems like they've reconciled scroll bars with Fitt's Law.
i am using code right out of the examples in yahoo maps api, but when i click on a smart window i get the close button (x) in the upper left. the only thing i am changing is the html in the smart window but i dont understand why that would affect the location of the close button. also, i dont see any documentation on how to change this on the yahoo maps api web site.
You may want to look in your page CSS for anything that floats img tags left or positions them absolutely (think along those lines).
One debugging method would be to temporarily turn off your page's CSS to see the result.