How to dynamically resize image in tinyMCE editor? - javascript

I am using TinyMCE editor. However, I have run into a problem. I can add the image and resize it as well but when I resize, both height and width get resized by same proportion.
I want to resize only height without affecting the width and vice-versa. The only way I can do this is by hardcoding width and height values which is pretty tedious job. How to fix it?
When I resize both height and width gets resized, no option to resize them separately

Unlock the width and height by clicking on the the lock button

Related

Retrieve elements height dynamically?

I'm currently try to write a toggle menu script.
Most of the futures are fine, but...
Here's my bin:
https://jsbin.com/rabiporoji/edit?html,css,js,console,output
I use media query to make a different layout,
the idea is... I tried to make the menu extend under 500px screen width,
and not to change anything when the screen size is wider than 500px.
But while the screen size stretched from small to wider than 500px,
the toggle menu will still extended if i click th button.
ps(in this case the height is fixed, but in the project i'm workin on they are pics with only width fixed in percentage)
So, I'm wondering if there's any way to retrieve the elements height dynamically, every time I change the window size.
I know there might be some js libraries and solve this problem in ease.
But I really wanna know some js basis before I start using those.
TY for your time!
window.addEventListener('resize', function(event){
let height = document.getElementById('thing').offsetHeight;
console.log('offsetHeight',offsetHeight)
});

Find out what height would have my image if i will resize the width to another value

I have a twitter bootstrap carousel in which I have images and iframes. Images work perfectly because they have img-responsive class and they resize. The iframes don't work like that. I have to give them a width and a height and change their width and height whenever the user resizes the browser.
The carousel can contains only images, only iframes, or images and iframes in the same time.
How can I make the iframes work like the images? Have the same dimensions, resizes in the same way?
My images are 750 x 427px. The thing that passes my mind is to give the iframes width 100% of the container because this work and after this I have to find the height considering that if the width is for example 300px the height should direct proportional with the image dimensions which are 750 x 427px.
We can simply use the rule of three ? Or there is somehthing more complex using image ratio?
Through .height() and .width methods.
You could use $("#imgID").height() to get its height and $("#imgID").width() to get its width. Of course the imgID is replaced with the actual ID of your image.

How to make bxslider adjust height to container div/browser window

I am trying to use bxslider to make a full-height slider that is dependent on the browser window, so the entire slide is always showing.
As it is now, it is adjusting its width based on the browser window, but I can't get it to adjust its height.
Do I have to somehow adjust the image height itself (within the slide) to be based on the browser window?
Is there another slider plugin I should be using for this?
Thanks in advance!

SVG resizing height on window resize, also center to parent

So I've run into troubles when making my web app responsive. I've managed to make it so that the SVG adapts when the width is resized, but I've run into trouble with height.
The best solution I've come up with for height resize is the following js/jQuery code:
function updateWindow(){
var y = (($(window).height()));
svgMap.style.height=y;
}
updateWindow();
window.onresize = updateWindow;
What this does is set the SVG viewport height to equal that of the window.. This works in a sense that it centers the SVG with the browser window's height. Not so excellent, it screws up on mobile devices and adds a strange top-margin almost. It also makes the SVG slightly smaller unless I multiply "y" by some value greater than one. Doing so, however, increases the margin-top esque gap. How troublesome..
You can view the demo here:
http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils.html
and the demo w/o the height center change here: http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils%20-%20Copy.html
To sum things up, How does one go about centering an SVG within an <object> tag, horizontally AND vertically. Also, I would like it so that the SVG map itself fills the wrapper container.
Any help is appreciated, thanks.
EDIT: So I've given up on trying to get it to just fit the parent's height.. Instead I just wrote some JS that will prompt the user with a warning if the height is too small that it will cause overflow of the page. I also made it so that it would be styled perfectly by adding inline CSS to each page, accompanied with media queries.
If you set the SVG's width and height to 100%, ie.:
<svg width="100%" height=="100%">...
then it should just be a matter of resizing the container that the SVG is inside. The preserveAspectRatio setting of "xMidYMid meet" should then centre it vertically.

Why can't I figure out the width of elements with automatic widths?

I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});

Categories

Resources