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.
Related
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.
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.
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%;.
Ok, so I'm trying to get an element to be the full height of a page. My html element is matching the pages size even when I resize or open up the inspect element box and close it, but my body and other elements won't, so instead I am using javascript to make my element the size of the html box, which works, but when you resize the browser window or close/open the developer tools, the html element resizes but the other element doesn't.
Is there some way to add a listener on my html element to run a function when it changes height?
Here is some code I've tried using what someone suggested but doesn't work:
$('#program-cell').height($('html').height());
$('html').resize(function () {
$('#program-cell').height($('html').height());
});
After adding the .resize() plugin one of the answers suggested I was able to get it almost working. When opening and closing the developer tools it works, but resizing the window didn't change anything. I guess because I am matching the size of the html element, the html element will grow though to match the size of the object I'm resizing, which means it will only get bigger and never smaller.
I had to clear out the height of the object I'm resizing by setting it's height to auto, then match the height of the html. I finally got it working, and here is the code that works:
$('#program-cell').height(($('html').height()-84)+'px');
$('html').resize(function () {
$('#program-cell').height('auto');
$('#program-cell').height(($('html').height()-84)+'px');
});
I have the -84 to subtract the height of my header.
You don't need JavaScript at all.
html, body { height:100%; }
div { height:100%; }
<html> <!-- 100% of window height -->
<body> <!-- 100% of html height -->
<div></div> <!-- 100% of body height -->
</body>
</html>
JSFiddle example.
If your divider's parent has a value which isn't 100% height your divider will not have 100% height relative to the page body.
<html> <!-- 100% of window height -->
<body> <!-- 100% of html height -->
<div style="height:30px"> <!-- 30px high parent -->
<div></div> <!-- 100% of parent height = 30px -->
</div>
</body>
</html>
There's a plugin to add listeners for element resizing that you can use to do just that. Check it out here.
Alternately, .resize() works on window.
I have a flex component like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
...
width="100%"
height="100%"
creationComplete="init()">
.......
<components:NavigationBar id="nagivationBar"
left="0" bottom="0" />
This is supposed to show at the bottom left of the screen considering that parent container fills the screen.
The behaviour I just described shows perfectly with Safari
with Chrome it shows correctly if the download bar beneath is not visible but as soon as the download bar has something it covers the bottom part of it.
and FireFox seems to always hide like 50 pixels or so from the bottom of the screen.
It seems like every browser renders the 100% height in its own way.
What is your recommended best way to overcome this? I can add a 100 pixel margin at the bottom but it's not something I want to do in this application.
Try something like this in the <head></head> section of the HTML page that loads your Flex Application:
<style type="text/css">
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
}
</style>
Not sure it will help in your case but it's easy to try.
You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.
Sorry the solution is an outside-of-Flex one, but it'll work.
Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.
Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.
PS. From my experience working with browser height may be very troublesome.
this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative