I just happened to notice the below behavior in chrome.The search suggestion is extending beyond the chrome window itself. I am curious as to how this can be implemented. Is this just some css styling? or something more?
This unfortunately is not possible. The search box is an internal part of chrome, thus part of the application itself. Your web page, which has the div inside of it is limited to the browser window itself, any attempt at breaking out of this container will simply end up in your div either being moved off-screen or your browser will simply get scrollbars. So long story short, this is not possible.
Besides that it would be quite dangerous as malicious users could pretty much take over everything you see on your computer screen.
I agree with Paradoxis his answer but there is a way. I can't see any use in it but a select box with a lot of options can extend beyond the chrome window.
I have tried playing with the width and height of the select box to, but as expected that only applies for within the window.
The behavior that you see in the screenshot is the ellipsis property of css
http://jsfiddle.net/HerrSerker/kaJ3L/1/
Still if you want to extend some div beyond the window of your browser
then try giving it more width than the width of your browser
eg:
width: 1900px;
Related
What I'd like to do, if it's technically possible, is leverage JavaScript (frameworks such as jQuery are totally fine, too), to determine what percentage of an inactive browser window might still be in view.
For example, in the image below, imagine I'm working on a project for CNN.com. In this scenario, I know I can use window.onfocus and window.onblur to determine whether the window marked as Background window is in focus or not.
[![enter image description here][1]][1]
However, I'm interested in measuring what percentage of the viewport/page for the Background window is visible to the end user, and/or what percentage of the page for the Background window is not visible. Or, an alternative approach could also be to simply determine whether an element (by ID) is in view on the Background window or it's obstructed by any foreground windows.
After extensive Googling and Stack Overflow searching, I'm not finding a solution for what I'm trying to achieve. This could obviously be due to technical impossibility, but I wanted to ensure I've left no stone unturned in troubleshooting.
The use case here is that I'd like to be able to pause videos and animations, etc. when a given element is not visible on the page -- not just when the window is not active at the moment, since users can often have windows arranged side-by-side, and might want to watch a video while multi-tasking. even though the window might be active at a given moment. Conversely, if a window is covered up, the desire here (for business purposes) is to pause the video, so we are not serving videos (or video ads) when a player is out of view.
My users and I are running into a rendering glitch in Chrome only (on both Windows and Mac) where an overlaid div that I'm using for on-hover tooltip-style "popouts"(see first image below) does not get rendered properly in certain cases (see second image below). In all other browsers I've tested, it works as expected.
Here's how the hover popouts are supposed to look (and what happens in Firefox, Safari, IE):
Here's what happens in Chrome:
You can see it in action on this site if you look at May 24 using a browser window width of ~ 1200px (significnatly wider or narrower windows do not seem to work). The glitch only affects the popouts in the bottom right of the menu that are popping left, e.g. those on May 24. Hovers using the same exact mechanism higher up in the page work just fine. Glitched popouts are invisible (except for part of the carat), but if you click on the link to lock the popout in place and then hold left click while moving your mouse around as if to "select text" in the area where the popout should be, it will then render partially. Also if I open dev tools and try to select the popout, it will render just fine at that point.
I've been looking at this all day and trying different work arounds with opacity, z-index, etc. and getting nowhere. Does this glitch ring any bells for anyone? Is there a way to force Chrome to render the div, once its been positioned and unhidden? I'm fine with any work-around or hack.
I use a custom (and fairly complicated) jquery plugin for popouts. If it would be helpful to see the non-minified javascript for the plugin, I can post or provide a link to that, but general guidance that leads me to a work around will be sufficient to be accepted as an answer.
Edit: My Browser Build: 26.0.1410.65
(Per my comments)
This does indeed seem to be a bug in Chrome, though without a smaller test case to reproduce it, it could be very hard to track down. You may want to report it to the Chrome team with as much information as possible.
In support of my "it's a bug" assertion:
The hidden/clipped elements become visible when they are selected.
The elements underneath the hidden/clipped elements are not clickable.
This indicates that z-index and height is correct.
It only happens under very specific circumstances; the rest of the items with the same style work fine. The same item may work fine at a slightly bigger/smaller screen width.
Applying a 3D transform fixes it.
The problem goes away when I apply a CSS transform such as scale3d or translate3d. I imagine this is because certain CSS properties cause the browser to switch to GPU acceleration.
In this case, switching to the fast path for rendering seems to alter the drawing sequence enough to fix the problem.
Super hacky but this fixes it for me:
$('.drop-link.food').on('hover',function() {
$('.tool-tip').css('overflow', 'hidden').height();
$('.tool-tip').css('overflow', 'auto');
});
Obviously this isn't a "good" solution, and even remaining hacky you could probably optimize it to only force the redraw on the tooltip it needs to, but hopefully it helps...
Another clue:
$('.drop-link').on('hover',function() {
$(this).siblings('.tool-tip').css('display','block');
});
This won't fix it right away, but it seems like if this is there, once you've hovered on something, it will work the next time you hover on it.
Not sure if this helps with your situation, but over the last couple of days I've started to notice that certain site elements on Facebook and Weight Watchers no longer show up. Specifically it seems to be affecting items that (I believe) to be controlled by or dependent on Javascript. When I call up these sites in Firefox and Safari they work as expected.
This question already has answers here:
How to make the window full screen with Javascript (stretching all over the screen)
(22 answers)
Closed 6 years ago.
Hy all,
I need a javascript code, that when my site loads, automatically load it into full screen mode, as if i was pressing F11, and i have my reasons to do that..So anyone knows the right code to do that?
I also need to prevent the user from changing the screen size of the page
There is a full screen API, but it is currently an early draft and browser support is very weak.
Foisting full screen mode on anyone who visits your site is one of the more hostile things you can do as a web author. You should seek an alternative design that solves whatever problem you have without doing that.
Unfortunately, there is no perfect way to get the browser to come up in full screen mode. However, you can use the screen object to determine the screen size, and set your window size appropiately. The useful screen properties are availWidth and availHeight or width and height. You can then use those to set the window object properties, either innerWidth and innerHeight or outerWidth and outerHeight. I suggest you play around with retrieving and setting these properties. Also, different browsers behave slightly differently, so, if possible, I suggest you try your code on IE (which (surprise!) is the least standard), Firefox, Safari, and Chrome.
I know the "purists" will tell you forcing a certain window size is not a good thing to do. But in some cases it is appropriate. I have written an application related to the card game bridge, and, if the browser comes up too small, the card images are unreadable. So, the first time a user accessses my web page, I make it as large as I can. Most people leave it that size. But, if they reduce the size, I store the dimensions in a cookie, and the next time they go to my page, it remembers how big to make the page. I have received many compliments on using this approach.
I have a Flash/Flex object (Flashlight-VNC), which I would like to dynamically resize to fit the entire window after pressing a button in the Flex app. This would preferably happen without restarting the Flex app (and therefore the VNC session). I would just use the built-in Flash fullscreen mode, however Adobe's somewhat silly security restrictions prevent keyboard input while in fullscreen mode.
How exactly can I do this? I'm already using SWFObject to embed the SWF, if that helps. I am open to any solution utilizing ActionScript, JavaScript, or both, however I am not all too familiar with ActionScript or Flex, and the AS-based solutions I have found involve extending a "Sprite" object to add resize functionality, which Flashlight-VNC does not seem to use.
I see that there is a very similar question already posted on this site, however the accepted answer points to one dead link and another link that does not answer my question (my goal is to resize the object on command, not from when the page loads).
Thanks!
This really isn't related to flash. It's more about HTML DOM manipulation. You want to make sure your Flash SWF is set to use 100%/100% and then when you want to trigger "full screen" mode change the html container to be placed in the top-left-most corner and have a width/height of 100% of screen.
You'll still have the browser's toolbars and tabs and address bar, but if you want keyboard input there aren't many options.
I have a Flash file embedded into HTML - the objects inside are place based on the browser's screen size.
Most of the time I don't want a scroll bar, as things are correctly placed, but once the browser window gets too small it'd be nice to have it.
So, the main question: can I have a Javascript code listening for the browser window, then adding a scroll bar if it's smaller than a certain number?
Many thanks!!
-m
For IE > 6 and all other major browsers, you don't even need JavaScript, a
body { min-height: 150px }
should do.
Compatibility info on min-height on Quirksmode.org