When uploading adding high resolution images to a tinymce textarea they are often exceeding the width of the editor - is there a way to limit the width to 100%
I have tried overriding the width of all images on the page using CSS, but this doesn't work as tinymce works using a simulated iframe, and doesn't use the page's CSS rules
One way would be to use the tinymce iframe to limit your images in size.
Using the tinymce parameter editor_css you may define a css file which will be used for the editor content.
Another way is to set the image width/height using javascript/jQuery:
$(tinymce.get('your_editor_id').getBody()).find('img').css('width', '500').css('height', '500');
Related
I need to embed a Facebook Page Plugin on a website.
According to the info on
https://developers.facebook.com/docs/plugins/page-plugin
it can be any width between 180px and 500px
On large screen I want 500px width, but on smaller it would need to something around 300px.
Now, there is an option which makes the iframe adjust to the width of the container, but that part of it doesn't work for me at all.
So, what I have is two iframes (one for 500px width, one for 300px), and using #media queries, I hide/show the correct one.
However, it still loads two iframes.
Is there an equivalent <picture>/<video> tag I could use, which would load only one, depending on screen-width?
Alternatively, what I am doing wrong with the iframe?
Below is the code replicated in jsfiddle:
https://jsfiddle.net/nuy4r1gk/2/ <-- 2 iframes
As you can see, it works, but it's loading two iframes, which is far from good. If I use css styling (#media) on the iframe, it just cuts it off, rather that loading narrower.
https://jsfiddle.net/nuy4r1gk/4/ <-- 1 iframe with css
I found a working solution when using the iFrame embed method. It works with any container width between the supported 180-500px
https://stackoverflow.com/a/52459262/10401291
I regularly detect window width via enquire.js or media queries, but what if I want to style things differently based on the width of an element, say a div, and then change the appearance of its children based on its width? Thanks. I'm using SASS if that helps.
As the question states,
I want to have the text inside the p tag or DIV tag to be automatically adjusted,
for example I set the text font size to be 30px,
then if the div/p is big enough or even huge, the text will always be in its 30px,
on the other hand if the div/p become smaller (regardless because of width/height),
the text font size will also shrink so it can display itself 100% inside the small div/p
I have looked for solutions, but many of them requires external jQuery,
is there any simple way or a method without external plugin to do this?
Try using media queries. You can then set a different font size when the P or DIV is within different height and width ranges.
This may help:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Scenario
I'm making a Responsive website where I need to give multiple sizes to dropdown for various screen sizes with custom styling
What I tried
i'm using this DropKick plugin to make custom styled dropdowns it adding width in px. it's very good for me
this is example I made using the plugin http://jsfiddle.net/jitendravyas/HtW8C/1/
Problem
I want to increase or decrease the width and height of dropdown by increasing or decreasing the size of font inside dropdown but when i increase the font-size, dropdown doesn't scale accordingly
Link of plugin https://raw.github.com/JamieLottering/DropKick/master/jquery.dropkick-1.0.0.js
Edit:
I changed px to em here https://github.com/JamieLottering/DropKick/blob/master/jquery.dropkick-1.0.0.js#L117
But this plugin adds a inline width which i don't want. I want to control width by CSS
This is a situation in which the CSS !important rule is actually useful and a valid solution:
a.dk_toggle { width: auto !important; }
This will let you change the font size and have it expand automatically. Or, you can set an explicit width of your choosing, as long as you use that !important rule.
What about when you need to target multiple dropdowns on a page with different widths?
How to individually target multiple dropdowns in CSS for Dropkick Plug-in
Is it possible to show any part of image in img tag (with pixels) via JavaScript?
I would have a prepared big image (e.g. 32x320 pixels) and defined starting position (X,Y , e.g. 0,32) and width/height (e.g. 32,32), and would want the script to show second (32x32 pixel) part of main image.
You could use CSS properties for this and change them via JS. Set the image as a background for an element with your desired size and adjust its position with background-position so that the correct part of it is visible. Some people call it CSS sprites.
For the sake of giving you multiple options, you could always use an HTML5 canvas and redraw the image as necessary. You can find a nice tutorial about how to do this here : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
The CSS sprite method would be preferable nonetheless as IE doesn't support canvas yet.