We want to change the position and height of the chrome extension window when we click the extension icon in the browser.
The extension is not popup window.
We are going to do it using Javascript. Can you give me some codes please on how to do this?
Not sure why if the popup window isn't in use at all, you'd care about its dimensions and location. Why show it?
That being said, height and width can be changed. Simply set them in css for html and body elements. If by changing position you mean that upon click the popup would open in the center of the screen (for example), as far as I know, this cannot be done. It must point to the extension's icon.
Related
I've figured how to get a div to follow a mouse, but how can I get it to reposition when the div comes close to the edge of the browser window?
For example, on Youtube, if you hover over the video makers name the div will always stay in the browser and never go off screen.
Click here, hover over Lindsey Stirling and resize your browser a few times for a live example.
Does anyone know how to do this?
Use the "title" property. This example should work fine. http://jsfiddle.net/8vj3k7zo/
<div title="no, I am 100% serious, please look at me! Oh, and try resizing the browser window.">This is some test text look at me!!!"</div>
Of course, you can't style the title tooltip, as it's part of the native browser implementation. If you'd like to get a styled div to peek over the edge of the browser, you can't do that.
On the other hand, if you would like to make sure that the entirety of the custom CSS tooltip is always inside the browser when the mouse is close to the edge (and not partially outside the bounds of the window), check out this excellent library: https://github.com/HubSpot/tooltip
I have some objects that I need to place outside of the main window then move them with CSS3 transition effect inside the window. I want to be sure if these objects are in their special positions visually. Here is a screenshot of how I think it could look like:
White rectangle represents browser window and the area filled with gray color is the 'outside' area that contains some objects I work with.
You could try to see what's outside with Firefox Developer Toolbar.
Right click on any element in Firefox and choose "Inspect Element (Q)"
Than select the 3D-view. It's a small button in the top right corner of the panel.
With this, you'll be able to explore the layers of your site, as well as stuff that is not in the normal viewing context.
You can use Screenfly. This allows yo to set any screen size you desire. You could set a huge screen size to see if your text is in right position.
I got this code that allows a nice pop up window when clicked on a particular image. This brings out a larger image for a gallery I made. However for some reason I can't get it to appear at the center of the user's window, as all the images are different sizes, they move depending on the image shown.
The link is at:
http://zeendesign.co.uk/cherrieimogen/cherrieimogen/cherrieImogen/portfolio.html
(the css is called reveal.css)
Any help would be greatly appreciated. Thank you!
You are assuming that left on the container must be set to 20% and that's what the script's doing.
Try setting left based on (windowWidth-containerwidth)/2.
i.e.:
v = Math.floor(($(window).width()-$("#myModal").outerWidth())/2)+"px";
$("#myModal").css("left",v);
Position the dialog after the image is loaded.
$('#dlg')
.dialog('open')
.dialog({position:'center'});
We built a broadcast player that pops-up with the window.open script:
onclick="window.open('Media-player.html','player','scrollbars=0,width=360,height=655')"
The problem is, when someone zooms into the the player (or the parent frame for that matter) the pop-up window does not resize with it and the player overlaps within the window and some parts become hidden.
Is there any way to resize the window to fit it's contents when users zoom in? Would like to avoid enabling the scroll bars or just making the dimensions bigger. Thanks.
There is no way to know if a user has zoomed the browser, but there are some tricks to try to detect it.
See this thread: Catch browser's "zoom" event in JavaScript
I am trying to determine the actual viewPORT size of the current browser window. I've tried:
window.innerHeight/innerWidth
document.documentElement.clientHeight/clientWidth
document.body.clientHeight/clientWidth
All return the full page size and NOT the viewing area.
What I'm trying to ultimately achieve is forcing a popup menu to appear on screen (in the viewport). Right now when it is shown, it might show below the scroll and the users are not happy with that. I know the x,y of where they've clicked. I just need to compare that to the size of the viewing area (with the size of the popup) to see if it will go offscreen.
It should be noted that the page is showing in an IFRAME, so if I need to go up one level to get the correct value, I can do that.
window.innerHeight/innerWidth
That unequivocally does give you viewport size (in this case, the size inside your iframe), but it isn't available on IE.
document.documentElement.clientHeight/clientWidth
That gives you viewport size, when the browser is in Standards mode. Typically used as fallback for IE.
document.body.clientHeight/clientWidth
That gives you viewport height in Quirks mode. You don't want to be in Quirks mode. Check the <!DOCTYPE of your document.
I just need to compare that to the size of the viewing area
Then you'll also have to look at the document.documentElement.scrollTop/scrollLeft.
Try
document.getElementById("").offsetWidth
Fill the above code with different element ID's, try using the body tag, or a wrapper div.
Apparently by going to the parent document, I was able to get the correct value.
Thanks!