We Keep Coding

Resizing image while printing html

I want to print a div of a html page which has texts and images. To do that I used a javascript function with window.print(). Upto now it prints that div with large images.
I need to resize the images keeping proportion.
As I am not from this (html,css,javascript) field, I have no idea how to do.
I searched on internet but didn't get any link with help in resizing image while printing.
Can you give any sort of idea?

You can control the layout of the print document by using mediaqueries. An example would be
#media print {
img {
max-width : 300px;
height : auto;
}
}
more information about this and some examples can be found here

You want to do something like this:
var images = document.getElementsByTagName('img')
for(var i = 0; i<images.length; i++) {
if (images[i].width > screen.width) {
// Reduce the width so image fits.
var factor = (screen.width-50)/img.width;
images[i].width *= factor;
images[i].height *= factor;
}
if (images[i].height > screen.height) {
// Reduce the height so it fits.
var factor = (screen.height-50)/images[i].height;
images[i].width *= factor;
images[i].height *= factor;
}
}
Does this help?

you can just set the image's width() and height() like below:
$('.imgClass').width(700); // Units are assumed to be pixels
$('.imgClass').height(700);
//.imgClass is a common class on multiple images
Hope this will helps you.

Or you can just use inline css for defining the dimensions of the image
<img style="width:150px;float: right" src="image_path.png">

adjust responsive size of iframe with jquery

Hello I'm trying to adjust the size of youtube videos in my web. I want them to be responsive that I'm using jquery to do that. I have done it successfully but the thing is I want the height of youtube video to be decreased. Right now, it's too big. When I try to do it, the responsiveness feature is removed. Can you check how I can decrease the size of the video and keep the responsiveness?
<script>
function update_iframe_size(){
var parent_id = $("iframe").parent().attr("id");
if (parent_id == "main_video") {
var parent_class = $("iframe").parent().attr("class");
var parent_width = $("iframe").parent().width();
console.log(parent_class);
var width = $("iframe").css("width"); // $("iframe").width();
var height = $("iframe").css("height");
var ratio = parseInt(height)/parseInt(width);
var new_height = parseInt(parent_width) * ratio
$("iframe").css("width", parent_width);
$("iframe").css("height", new_height);
}
}
update_iframe_size()
$(window).bind("resize", function(){
// alert("reized");
update_iframe_size();
});
</script>
I tried to decrease the height that I did $("iframe").css("height", new_height*0.7);
but then the height is set to the one I want. However responsiveness gets messed up.

Refer following link: iFrame always take height and width 100% depends on parent div/element which is position relative.
http://jsfiddle.net/masau/7wrhm/

'Media-queries' for javascript - different code for different viewport height/widths

The problem
I'm using javascript to calculate widths of elements to achieve the layout I'm after. The problem is, I don't want to load the code on smaller screen sizes (when the screen width is less than 480px for example). I'd like this to work on load and on browser/viewport resize.
I'd consider small screen devices 'the default' and working up from there. So, none of the following script is called by default, then if the browser width is greater than 480px (for example), the following script would be called:
The code
$(document).ready(function() {
//Get the figures width
var figure_width = $(".project-index figure").css("width").replace("px", "");
//Get num figures
var num_figures = $(".project-index figure").length;
//Work out how manay figures per row
var num_row_figures = Math.ceil(num_figures / 2);
//Get the total width
var row_width = figure_width * num_row_figures;
//Set container width to half the total
$(".project-index").width(row_width);
x = null;
y = null;
$(".project-index div").mousedown(function(e) {
x = e.clientX;
y = e.clientY;
});
$(".project-index div").mouseup(function(e) {
if (x == e.clientX && y == e.clientY) {
//alert($(this).next().attr("href"));
window.location.assign($(this).next().attr("href"));
}
x = y = null;
});
});
// Drag-on content
jQuery(document).ready(function() {
jQuery('#main').dragOn();
});
The extra bit
The slight difference on larger screens is to do with the browser/viewport height. This is in regards to the line:
var num_row_figures = Math.ceil(num_figures / 2);
You can see once the calculation has a value, it divides it by 2. I only want this to happen when the browser/viewport height is above a certain amount - say 600px.
I'd be happy with this being the 1st state and then the value is divided by 2 if the height is greater than 600px if it's easier.
Can anyone help me/shed some light on how to manage my script this way. I know there's media queries for managing CSS but I can't seem to find any resources for how to manage javascript this way - hope someone can help.
Cheers,
Steve

You can use window.matchMedia, which is the javascript equivalent of media queries. The matchMedia call creates a mediaQueryList object. We can query the mediaQueryList object matches property to get the state, and attach an event handler using mediaQueryList.addListener to track changes.
I've added an example on fiddle of using matchMedia on load and on resize. Change the bottom left pane height and width (using the borders), and see the states of the two queries.
This is the code I've used:
<div>Min width 400: <span id="minWidth400"></span></div>
<div>Min height 600: <span id="minHeight600"></span></div>
var matchMinWidth400 = window.matchMedia("(min-width: 400px)"); // create a MediaQueryList
var matchMinHeight600 = window.matchMedia("(min-height: 600px)"); // create a MediaQueryList
var minWidth400Status = document.getElementById('minWidth400');
var minHeight600Status = document.getElementById('minHeight600');
function updateMinWidth400(state) {
minWidth400Status.innerText = state;
}
function updateMinHeight600(state) {
minHeight600Status.innerText = state;
}
updateMinWidth400(matchMinWidth400.matches); // check match on load
updateMinHeight600(matchMinHeight600.matches); // check match on load
matchMinWidth400.addListener(function(MediaQueryListEvent) { // check match on resize
updateMinWidth400(MediaQueryListEvent.matches);
});
matchMinHeight600.addListener(function(MediaQueryListEvent) { // check match on resize
updateMinHeight600(MediaQueryListEvent.matches);
});

#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
So i searched a bit and came up with this example from w3 schools .http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1
i think this is something you are trying to achieve.
For pure js , you can get the screen width by screen.width

.css() not setting width value

I'm looking to simply move a divs width as certain pictures load in my application. As such for some reason I read the Div's width add 128 and then use the .css() to change divs new width. For some reason the .css() function isn't updating the width as it goes along. It only updates on the last picture that is loaded. I'm really not to sure why this is happening. Here is some code:
document.getElementById('back').onload = function(){
var width = $("#LoadingBar").css("width").replace(/[^-\d\.]/g, '');
width = parseInt(width);
var newwidth = width + increment;
newwidth = newwidth +"px";
$('#LoadingBar').animate({width:newwidth},"fast");
if(width == 1280) {
//This is another div that I show once all the pictures load
$("#everything").show();
}
}
Any ideas as to what I am breaking?

Use the jquery width property to update element widths.
css is for more esoteric properties of your HTML elements.
$("#LoadingBar").css("width")
Becomes:
$("#LoadingBar").width()
You can set width too
$("#LoadingBar").width(MyWidthValue);

instead of using css width use: var width = $("#LoadingBar").width() to get the numeric value. Then increment it and append units

Just do this to change the width
$(<your element>).width(function (a, w) {return w+=128});
and this if you need to animate
$(<your element>).animate({width:"+=128"},'fast');

Problem in zooming using Raphaël

I am building an application using Raphaël. I have done my work on vectors, now what I want is this - that I want to zoom the vectors. I have implemented this code on it, but when I zoom out the element its coordinates also changes with it, which I don't want.
Please help me out. Thanks in advance.
Here is my code:
var raphael=Raphael(20,20,500,500)
var dress=raphael.rect(50,30,200,300)
dress.attr(
{
fill:"green",
stroke:"black",
opacity:"0.3"
}
)
var mdipoint=raphael.circle(150,175,2).attr(
{
fill:"black",
stroke:"black"
}
)
dress.toFront()
dress.mousemove(function(){
var c= dress.scale(0.5)
//var x,y;
xx=event.pageX
yy=event.pageY
document.getElementById("t1").value=xx
document.getElementById("t2").value=yy
// var x,y;
// x=event.pageX-150
// y=event.pageY-175
//document.getElementById("t1").value=x
//document.getElementById("t2").value=y
// alert(x+","+y)
})
dress.mousemove(function(event){
var x,y;
x=event.pageX-70
y=event.pageY-50
document.getElementById("t1").value=x
document.getElementById("t2").value=y
})
dress.mouseout(function(){
document.getElementById("t1").value=""
document.getElementById("t2").value=""
})

To return something to its original size, use .scale(1). The scale is always relative to the original size, not the previous size.
So to shrink the rectangle on mouseover and then to return it to its original size, with its original corner coordinates, use something like:
dress.mouseover(function(){
// Shrink rectangle
dress.scale(0.5)
});
dress.mouseout(function(){
// This will return it to original size
dress.scale(1);
})
simplified jsFiddle example
(You don't need to assign scaling operations to variables)