how to change css img element with javascript - javascript

I would like to change the CSS using javascript so that I can dynamically adjust the height of a single image on my web page. This is being done so that the image will fit nicely in the viewable screen no matter what the screen size.
My CSS
.wrapper img {
height: 630px;
}
My Div
<div class="wrapper" id="imageDiv"></div>
What javascript code should I use to change the CSS height to say 200px.
Thank you.

Why not just set the height in percentage if the goal is to autoadjust based on viewport height etc:
.wrapper img {
height: 100%;
}
Anyway:
document.getElementById('imageDiv').style.height = '200px';

Try this :
document.getElementById("imageDiv").style.height="200px";
(this would only change it for that one element.)

Using JQuery, you could just put inside the method that you want:
$('img.wrapper').css('height','200px');

Related

How can I let a parent element behave exactly like its child in terms of size?

For example, if I place
<div>
<img ...>
</div>
somewhere and then apply the styles width, height, max-width, etc. to the div element, I want the result to look exactly as if I had placed the img element there and applied the styles to it.
Is this possible using CSS? If not, is it possible using JavaScript?
Edit: For clarification. I'm not looking for a solution to a specific case. Rather, I'm looking for some sort of pattern to replace img elements with div > img elements, without changing the look. The pattern should work in as many contexts as possible.
You could simply use
img {
width: 100%;
height: 100%;
display: block;
}
However, this will most likely result in a distorted image (i.e. width to height proportion), except if you define width and height exactly in the proportion to each other which corresponds to the image proportions.
Set the css property display to inline-block.
Here is a snippet (div border is in blue):
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
box-sizing: content-box;
display:inline-block;
}
</style>
</head>
<body>
<h1>
<p></p>
<div id="example1"><img src="https://lh4.googleusercontent.com/-Y6mZ3dizRWA/AAAAAAAAAAI/AAAAAAAAAZ8/lC8SUn_bjkU/photo.jpg?sz=48"></img></div>
</body>
</html>
Yes, if you set width: 100% and height: 100% to your image it will take the size of your div.
But your image will be stretch that way, you may only want to specify its width or height or if you want a smart way to fill a div with an image prefer a background-image with a background-size to cover or contain.
PS: A image tag is a unique tag : <img> not <img></img>

How to get browser's height from CSS

I am using scrollbar function in my div tag.
I want to set the scroll bar to my browser height.
I am trying to get the value like this.
javascript
<script>
var height = window.innerHeight;
</script>
css code
<style>
.kryesore {
overflow-y: scroll;
overflow-y:auto;
height:height-320px ;
}
</style>
here I have created JSFIDDLE code
I want to show the table within the header and footer without browser scrollbar.
the scroll bar should show only in the table that is my requirement.
if I get browser window height I will subtract it by 320. then it will fix my issue and the browser windows scroll bar also not shown so that i want to get the javascript value to css.
can any tell me the correct solution.
You can do it via CSS only.
I don't know what is your CSS class for scrollbar, thus I'm using scrollbar class.
<style>
.scrollbar {
overflow-y: auto;
height: calc(100vh - 320px);
}
</style>
100vh is equal to browser's height, calc function can dynamically calculate such CSS values.
You can't reference JS variables through CSS, but you can change CSS with JS.
Try:
JS
document.querySelector('.kryesore').style.height = height;

Revolution Responsive jQuery Slider image width and height change

Inside the div with class slotholder is an image of class defaultimg with height and width added automatically. I want to change specially image height and width.
Here is the code:
<div class="slotholder">
<img class="defaultimg" alt="" src="image.png" style="width: 1399px;
height: 724.45px; position: relative; left: -25px; opacity: 0;">
I have tried to change width and height in css like:
img .defaultimg{
width:1570px !important;
height:813px !important;
}
But isn't working. How can I change this by CSS or jQuery?
If you want to change width and height of the slider, look into the documentation of the revolution slider script. There you'll find all the settings, including e.g. the gridwidth and gridheight options to set the size of your slider even for different viewport sizes.
So on initializing your slider, you could do the following:
jQuery(document).ready(function() {
jQuery("#your-slider").revolution({
gridwidth:1570,
gridheight:813
});
});
If you already initialize your slider with some settings, just add the gridwidth and gridheight options.
This is a more proper solution than trying to overwrite the generated styles with CSS !important declarations.
The problem is your selector:
img .defaultimg
Searchs for an element with class defaultimg inside an img (which isn't possible by the way)
What you need is the img element with class defaultimg remove the space like this:
img.defaultimg

How to make the avatar preview image fluid when using jCrop

When a user wants to change their avatar in BuddyPress, they are given the opportunity to crop their new image after uploading it.
During the 'crop step', the uploaded image is displayed on screen. This 'preview image' seems to be a fixed size (it does not resize when the browser window is enlarged or made smaller). I'd like the preview image to resize when the browser window is resized (i.e. be fluid).
Any idea how can I do this?
Notes: jCrop (which is provided in the WordPress core) is being used to crop the avatar.
I tried adding this to my stylesheet but that didn't work:
img {
max-width : 100%;
height : auto;
}
try this css code
img{max-width:100%;height:auto;}
Maybe you can try to destroy jCrop when user resize the window and create it again when user stop resizing. jCrop create his own image when jCrop is created and maybe this is the problem.
Try this:
In your JS:
var jcrop;
$(window).rezise(function(){
jcrop.destroy();
jcrop = $('#yourIMG').Jcrop({
boxWidth: $('#yourIMG').width(),
boxHeight: $('#yourIMG').height(),
// ...
});
});
$(document).ready(function(){
jcrop = $('#yourIMG').Jcrop({
boxWidth: $('#yourIMG').width(),
boxHeight: $('#yourIMG').height(),
// ...
});
});
Like I said I have no idea what the code looks like so... You may have to overwrite some stuff.
This is how you should do it.
HTML:
<div id="inner">
<img src="http://c.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/business_user.png" />
</div>
CSS:
#inner {
width: 40%;
height: 40%;
border: 1px solid;
}
img {
width: 100%;
height: auto;
}
Wrap the preview image in a div and give it a class/id. Set there height and width to percentages (whatever you want). Now as long as it parent etc can resize this will as well now. Get the image inside and set the CSS to width: 100%; and height auto; This will get it to take up the wrap we just made. Now you only have to worry about putting the wrap in the right place. Mess around with it until you get what you want.
Note: If there are styles already on it you may need to use !important; but I would not recommend it.
DEMO HERE
If this still is not an option, you could use jQuery to get the width of the screen and using that update the image to resize. Not the best way but you could do that.

Image scaling size dependent on browser size

Using this site as an example : http://www.reebok.com/en-GB/
The header div height adjusts dependent on the size of the browser, and the inner content has 100% height & width.
Is this controlled by javascript of can this be done solely with CSS?
You can only do this with the help of html & css. Write like this:
img{
width:100%;
height:auto;
}
check this http://jsfiddle.net/e8V47/
In your page, it's actually Javascript which is used.
The height of the container is modified inline (the style attribute)
<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">
It's however possible to do a similar thing with CSS, using % in height. For example :
.module{
height:40%; // A percentage relative to the parent element
}
the image in your example is adjusting by browser, it's in , if you only set up the width or height, the browser will adjusts another automatically.

Categories