Chrome extension popup resizability by user - javascript

I'm currently designing a Chrome Extension
and I want to make the size of the popup itself changeable by user.
popup.html is the content that goes inside the popup.
So in order to do something with the popup itself,
I think I'll have to work with the codes in popup.js,
but before starting, I want to know if this is possible.
Thank you in advance.

Besides #wOxxOm's answer, you could also add a div inside popup body and set its resize CSS property both.
style:
div {
resize: both;
overflow: auto;
}
HTML:
<body>
<div>
I am div
</div>
</body>

Borders of the extension toolbar popup aren't resizable, but you can implement the functionality yourself by adding 3 thin div elements (4px x 100%, for example) on sides of the popup except for the top, add mousedown event listener on each one that will set a global boolean flag, which will be used in mousemove handler, and unset in mouseup. To actually resize the popup simply set document.body.style.width = newWidth + 'px', for example. To provide visual cues add :hover CSS on those div elements with corresponding cursor: .... rule.

Related

How to constrain rendered HTML code inside a div

I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.

Increase size of parent div as image gets bigger

My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!
Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}
Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.
Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.

JS TinyMCE change width and heigth of pop-up window

I`m using tinymce plugin, and I have a little problem.
In the TOOLS tab there is source button (here is a link http://www.tinymce.com/). When I click on it, new pop-up window appear.
So, the problem is that for some monitors, this window is too big, because width and height set in px.
Is there some way to change this properties from size in px to percent? For example from width:640px and height:630px (as in example) to width:52% and height:75%
Try keeping the textarea for TinyMCE in a div and style it to your requirement
For Example:
<style>
#div
{
width : 50% !important;
}
</style>
<div id="div">
<textarea>text</textarea>
</div>
Hope this helps you.

How to set a target="_blank" in a DIV tag?

Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>
Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.
trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.

Empty Div doesn't register CSS events in IE6

I have two elements that have the same event onmousedown.
The elements also have a Cursor: move property set in the CSS style.
The elements are empty, and need be be empty, or at least transparent, except for the border.
In IE 6 the only the border registers the cursor change or activates the javascript event handler. IE6 treats the empty div's like they don't exist. If you hover or click on the border, it changes the cursor and can activate the onmousedown event.
This is not a problem in FF... Anyone know what's going on?
Example Fiddle
It's because IE6 hates web developers.
Make it happy by forcing the div to be non-empty, with a as content.
<div id="ie6-hates-you"> </div>
It works in ie6 if you remove position:absolute;top:0;left:0 from both containers.
Add float:right to #container2 and you get the same layout.
Wrap a container around the 2 divs and set it to position:relative;
<div id="test-container">
<div id="container1"><div id="container2"></div></div>
</div>
css
#test-container{position:relative;width:300px;height:300px}
This works in ie6.
Updated fiddle
that is becouse the absolute positioning..
you must set the width to 100%
width: 100%;

Categories

Resources