|
JavaScript - Script To Calculate Image Resize From Pixel Dimensions.
Hi
I would appreciate a pointer in the right direction for a script I require. I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa. Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size. Any ideas? Rob Similar TutorialsQUESTION 1: Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction. Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings. I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image. So, let's say this is the URL: www.adomainname.com/image.jpg and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k. So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px. For an image that's 300 px x 500 px, it should remain as such. For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px. I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited. Note: The part that I am most interested in is in being able to detect the size / dimensions of the image. QUESTION 2: On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.) I'm currently trying to move a div that holds a text message forward pixel by pixel and eventually I'll write the code for it to go backwards and repeat. But I am not quite understanding what I've done wrong. It seems like a simple task, but It's not going anywhere. I call a function from the xhtml document like so: Code: <body onload = "moveText()">
<div id="movingText">
<p>This message should scroll forward</p>
</div>
............
and the function looks like: Code: function moveText() {
var movingText = document.getElementById("movingText");
movingText.style.left = (parseInt(movingText.style.left) + 1) + "px";
setTimeout("moveText()", 50);
}
it seems so clear cut, I can't imagine what could be wrong but apparently all my browsers don't like it. Anyway spot anything? Hi All Is is possible to 'Refresh' a script when the browser window is resized? I know how to execute a script using the (window).resize event but I effectively need to 'destroy' the initial instance and re-load it. This must be acheived without refreshing the browser If it helps I'm using the SmoothDivScroll plugin which has a known bug whereby widths aren't recalculated when the window is resized. The script stops working untill the browser is restored to it's initial width and unfortunately I don't have the expertise to fix that All help appreciated Cheers Craig I'm trying to reduce the space between the page content and the footer..this is the code i'm using to resize and the method call is implemneted in master page pageload() Code: function resize() {
var windowHeight;
if (document.getElementById("leftnav") && document.getElementById("content")) {
// document.getElementById('leftnav').style.height = document.getElementById('content').offsetHeight - 20 + 'px';
if (document.getElementById("content").offsetHeight >= 698) {
document.getElementById("leftnav").style.height = document.body.clientHeight + "px";
document.getElementById("content").style.height = document.body.clientHeight + "px";
}
}
This method resizes based on the content but it gives more extra space between the content and the footer which is not our site standards. Any suggestions please? thanks I have been trying for some time now to find a script to create a cookie for the following, so that the user selected font size is remebered throughtout the site. I have traweled the internet for some time now but all to no avail, the only guides i can find are for resizing a single element, which is no good for what i require. The code i already have is: <script type="text/javascript"> //Specify affected tags. Add or remove from list: var tgs = new Array( 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'b', 'li', 'form.button' ); //Specify spectrum of different font sizes: var szs = new Array( 'x-small','small','medium','large','x-large' ); var startSz = 2; function ts( trgt,inc ) { if (!document.getElementById) return var d = document,cEl = null,sz = startSz,i,j,cTags; sz += inc; if ( sz < 0 ) sz = 0; if ( sz > 5 ) sz = 5; startSz = sz; if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ]; cEl.style.fontSize = szs[ sz ]; for ( i = 0 ; i < tgs.length ; i++ ) { cTags = cEl.getElementsByTagName( tgs[ i ] ); for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ]; } } </script> On a seperate issue i would also like to know if there is a script i can put in to enable users to quickly return to the default font size (although it would not be the end of the world if such a thing is not possible). i have this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly Code: <script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>
Hello, I have this short script he Code: function resizeImages() { //Function will be ran onload in the <body> tag
var img = document.images; //Puts all the images in an array
for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
var parentElement = img[i].parentNode; //Gets parent element of image
var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
var imgWidth = img[i].width(); //Gets image width
var parentHeight = parentElement.height(); //Gets height of parent element
var imgHeight = img[i].height();//Gets image height
if (parentWidth < imgWidth){
img[i].width(parentWidth); //Sets width of image to width of parent element
img[i].style.height = "auto"; //Scales height
}
if (parentHeight > imgHeight){
img[i].height(parentHeight); //Sets height of image to height of parent element
img[i].style.width = "auto"; //Scales width
}
alert(parentWidth); //To test if parentNode is working correctly. Should return an integer.
}
}
It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage. Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed. The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder. Thank you, Jared I was wondering if anyone knows of a javascript which re-sizes an image live as the user changes their browser window like the front page of the Louis Vuitton website? We would like it to fill the users browser window when they first load their page and then change size as they adjust their browser window. If not in javascript then if anyone knows of a flash script that would good, just prefer to just javascript. http://www.louisvuitton.com/ Thanks all Chris Can someone tell me how to veiw this eval's out put? PHP Code: function doButtons(picimage) { eval("document['picture'].src = " + picimage + ".src"); } PHP Code: <?php // to change the image size within the web page function imageResize($width, $height, $target) { //takes the larger size of the width and height and applies the formula accordingly... //this is so this script will work dynamically with any size image if ($width > $height) { $percentage = ($target / $width); } else { $percentage = ($target / $height); } //gets the new value and applies the percentage, then rounds the value $width = round($width * $percentage); $height = round($height * $percentage); //returns the new sizes in html image tag format... //this is so you can plug this function inside an image tag and just get the return "width='$width' height='$height'"; } ?> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Ronnie T. Moore, Editor --> <!-- Web Site: The JavaScript Source --> <!-- Begin var photo_1 = new Image(); var photo_2 = new Image(); var photo_3 = new Image(); photo_1.src = "uploads/harkly_1.jpg"; photo_2.src = "uploads/harkly_2.jpg"; photo_3.src = "uploads/harkly_3.jpg"; function doButtons(picimage) { eval("document['picture'].src = " + picimage + ".src"); } // End --> </script> </HEAD> <?php //get the image size of the picture and load it into an array $photo_1="uploads/harkly_1.jpg"; $photo_2="uploads/harkly_2.jpg"; $photo_3="uploads/harkly_3.jpg"; $myImg1 = getimagesize($photo_1); $myImg2 = getimagesize($photo_2); $myImg3 = getimagesize($photo_3); echo " <BODY> <center> <table border=1> <tr><td> <p> <li><a href = '' onmouseover = \"doButtons('photo_1')\"><img name='photo_1' src='$photo_1' ";echo imageResize($myImg1[0], $myImg1[1], 55); echo " border=0><p> <li><a href = '' onmouseover = \"doButtons('photo_2')\"><img name='photo_2' src='$photo_2' ";echo imageResize($myImg2[0], $myImg1[1], 55); echo " border=0><p> <li><a href = '' onmouseover = \"doButtons('photo_3')\"><img name='photo_3' src='$photo_3' ";echo imageResize($myImg3[0], $myImg1[1], 55); echo " border=0><p> <td width=440 height=300> <img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> </tr> </table> </center> "; ?> Hi, I was wondering how to resize a div containing some text by setting a width and height so it would stretch to fill that area like an <img> tag? E.g. when you set the width and height attribute of an image, it resizes the image to fill that area. I do not wish to send a request to a php script to build an image containing the text since it will be slow and affect the scalability of the web app. Oh, and I would preferably not like to use html5 because it is a requisite that I need compatibility with ie7+ (and firefox/chrome). Thanks, akrylic Hello Everyone! I hope someone can help me with fixing this javascript code About the Code So I got this Resize Image Code here. This code is for a free Forum Software called Zetaboards (just like phbb or vbulletin). I just need to put the code in my Admin Control Panel to make it work for the whole forum. What does the code do? The code add a BBCode to the posting page, which allows all members to insert images to their posts (just like the usual "img" bbcode) and also makes it possible to resize the images. There are different resize image options: 1. [rimg]IMG_SRC[/rimg] // just inserts an image, like the normal "(img)(/img)" TAGS do. 2. [rimg=Width,Height]IMG_SRC[/rimg ] // with this option, you can change the width and height of the image. 3. [rimg=Percentage(needs % to be included)]IMG_SRC[/rimg] // Resize the image by typing the percentage size of the original image 4. [rimg=h,height]IMG_SRC[/rimg] //Just type the wanted height for the image, and the Width will be automatically adjusted 5. [rimg=w,width]IMG_SRC] //same as the code above, just the Height will be automatically adjusted instead. 6. [rimg=x]IMG_SRC[/rimg] //x will be both the height and width (so it'll be a square...) Here is a test thread I made to test the "rimg code", so you can see how the code works: http://s1.zetaboards.com/Piano2/topic/2874654/1/ What are the problems with the Code? - the Images are not resized correctly - sometimes, the images are resized correctly, but when i refresh the page, the images are again resized wrong. - or sometimes, when the images are displayed wrong (too big or small), they will become fine when i refresh the page again - In the Search View (when using the search) the images are too big and almost take the whole screen... - the first option "[rimg][rimg]" even doesn't work completely on IE and Google Chrome and causes all other [rimg] bbcodes to be disabled And finally this is the Javascript Code: PHP Code: <script type="text/javascript"> // Rimg by RedBldSandman of ZBCode.com $(function() { if (location.href.match("topic")||location.href.match("single")) { $(".c_post").each(function() { parse_rimg(this); }); } else if (location.href.match("search")) { $(".search_results").each(function() { parse_rimg($(this).children("div:eq(0)")); }); } else if (location.href.match("post")) { var rimg_br = ($("a:contains(Full BBCode List)").next().html()!=null)?" ":"<br />"; $("td#c_bbcode").append(rimg_br+"<button name='rimg' type='button'>Rimg</button>"); $("button[name=rimg]").mouseover(function() { $("input[name=helpbox]").val("Insert Image (with resize options)"); }).click(function(e) { if (e.preventDefault) e.preventDefault(); e.returnValue = false; var u_p = prompt("Enter the Image Location","http://"); if (u_p==null) return; var u_w = prompt("Options:\n1. Enter the chosen Width for the Image\n2. Enter the dimension to change (w for width or h for height)\n3. Enter the Percentage you wish to resize the Image to (include % sign)\n4. Leave blank for un-resized image"); if (u_w==null) return; u_w = u_w.replace(/s/gi,"").toLowerCase(); if (u_w=="") { ZetaInsert("[rimg]"+u_p+"[/rimg]"); return; } else if (u_w.match("%")) { ZetaInsert("[rimg="+u_w+"]"+u_p+"[/rimg]"); return; } else if (u_w=="h") { var u_h = prompt("Enter Resize Height"); if (u_h==null) return; ZetaInsert("[rimg=h,"+u_h+"]"+u_p+"[/rimg]"); return; } else if (u_w=="w") { var u_h = prompt("Enter Resize Width"); if (u_h==null) return; ZetaInsert("[rimg=w,"+u_h+"]"+u_p+"[/rimg]"); return; } else if (parseInt(u_w)) { var u_h = prompt("Enter Chosen Height"); if (u_h==null) return; ZetaInsert("[rimg="+u_w+","+u_h+"]"+u_p+"[/rimg]"); } }); $("#topic_review tbody tr").each(function() { parse_rimg($(this).children("td:eq(1)")); }); } }); function parse_rimg(z) { $(z).html($(z).html().replace(/[rimg(?:=s*([dw%]+?)s*(?:,s*(d+?)s*)?)?](.+?)[/rimg]/gi,function(x,y,a,b) { if (y.match("%")) { y = y.replace(/[^d.]/gi,""); return "<img src='"+b+"' alt='Posted Image "+y+"' class='Rimg_percent' />"; } else if (y.match(/D/i)) { y = y.replace(/[^hw]/gi,"").toLowerCase().split("")[0]; y = (y!="h"&&y!="w")?null:y; if (y) { return "<img src='"+b+"' alt='Posted Image "+a+"' class='Rimg_single Rimg_"+y+"' />"; } else { return x; } } else if (!a) { return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+y+"' />"; } else { return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+a+"' />"; } })); $(".Rimg_single").not("div.spoiler .Rimg_single").each(function() { Rimg_single(this); }); $(".Rimg_percent").not("div.spoiler .Rimg_percent").each(function() { Rimg_percent(this); }); $(z).find("div.spoiler_toggle").click(function() { $(this).next().toggle(); $(this).next().find(".Rimg_single").each(function() { Rimg_single(this); }); $(this).next().find(".Rimg_percent").each(function() { Rimg_percent(this); }); }); } function Rimg_single(x) { var oldH = $(x).height(); var oldW = $(x).width(); var newD = $(x).attr("alt").replace(/[^d.]/gi,""); if ($(x).hasClass("Rimg_h")) { $(x).height(newD).width((newD/oldH)*oldW); } else if ($(x).hasClass("Rimg_w")) { $(x).width(newD).height((newD/oldW)*oldH); } $(x).attr("alt","Posted Image").removeAttr("class"); } function Rimg_percent(x) { var NewD = $(x).attr("alt").replace(/[^d.]/gi,"")/100; $(x).height($(x).height()*NewD).attr("alt","Posted Image").removeAttr("class"); } function Preview() { var prevQuote; if ($("#c_post-preview").length || $("#c_post textarea").val() || $("#txt_quote").val()) { if (!$("#c_post-preview").length) { $("#c_post").prepend("<div id='c_post-preview'></div>"); } if ($("#txt_quote").length && $("#txt_quote").val()) { prevQuote = "[quote]" + $("#txt_quote").val() + "[/quote]"; } else { prevQuote = ""; } $.post(main_url + "tasks/", { "task": 5, "post": prevQuote + $("#c_post textarea").val() }, function(s) { $("#c_post-preview").html(s); if (window.parse_utube&&typeof window.parse_utube=="function") parse_utube($("#c_post-preview")); parse_rimg($("#c_post-preview")); }); } return false; } </script> Can someone please help to make the code work correctly so the images are resized properly at least on Firefix and IE? Thanks for your answers and help! hi, which is the first code in javascript to load an image from my computer and then to automatically resize it to me ... as in the facebook thanks
Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this? Thank you in advance. I am trying to write a custom BBcode for a forum I moderate. I don't have the licensing information because its not my forum and i am just a moderator. If anyone wants to verify the legitimacy of the forum I work for please PM me and I will try and get you any information I can. This code that I has works perfect in EditRocket, but when I add it to the custom BBcode the image does not resize. Original EditBucket Code: Code: <html>
<head>
<script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
</head>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png">
</body>
</html>
vBulletin Custom BBcode: title: Test Image bbcode tag name: timage Replacement: Code: <script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="{param}">
</body>
Example: [timage]http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png[/timage] Description: Embed imaged inline with forum Option: no hello i'm building a search engine and one of the options i'm implementing is this: the user is able to control the scale of the thumbnail, small, medium and large the problem is that when i have 1000 pictures inside a div when i hit resize i get like a 5 sec delay for them to resize here is the javascript code: Code: Code: var factor;
function fillImg(imgPath, imgElement){
imageObj = new Image(32,32);
imageObj.src = imgPath;
if(imgElement.src != imgPath ){
imgElement.src = imgPath;
}
}
function errHandler(err){
alert("Error occured!");
}
function resizeImgList(scale){
if(scale == "s"){
factor = 50;
}else if(scale == "m"){
factor = 100;
}else{
factor = 150;
}
var lists = document.getElementById("rs_ls").getElementsByTagName("li");
for(var li_index = 0; li_index < lists.length; li_index++){
var canvas = lists[li_index].getElementsByTagName("span");
for(var c_index = 0; c_index < canvas.length; c_index++){
var link = canvas[c_index].getElementsByTagName("a");
for(var a_index = 0; a_index < link.length; a_index++){
var image = link[a_index].getElementsByTagName("img");
for(var i_index = 0; i_index < image.length; i_index++){
var w = $(image[i_index]).attr("width");
var h = $(image[i_index]).attr("height");
var results = resizeItem(w,h,factor,factor);
var w = results[0];
var h = results[1];
var m = results[2];
$(image[i_index]).attr("width",w);
$(image[i_index]).attr("height",h);
$(image[i_index]).attr("style","width:"+w+"px;height:"+h+"px;");
}
wa = w+12;
ha = h+12;
$(link[a_index]).attr("style","width:"+wa+"px;height:"+ha+"px;");
}
wc = w+12;
hc = h+12;
$(canvas[c_index]).attr("style","width:"+wc+"px;height:"+hc+"px;margin-left:"+m+"px;margin-right:"+m+"px;");
}
wli = w + 12 + m * 2;
hli = h + 12;
$(lists[li_index]).attr("style","width:"+wli+"px;height:"+hli+"px;");
}
}
function resizeItem(eWidth, eHeight, tWidth, tHeight) {
percentage = (tHeight / eHeight);
newHeight = parseInt(eHeight * percentage);
newWidth = parseInt(eWidth * percentage);
if (newWidth > tWidth) {
percentage = (tWidth / newWidth);
newHeight = parseInt(newHeight * percentage);
newWidth = parseInt(newWidth * percentage);
}
margin = (tWidth - newWidth + 12) / 2;
results = [newWidth, newHeight, margin];
return results;
}
each result set of 50 images has this structu HTML Code: Code: <span> <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> . . . <li>...</li> <!-- 50 <li> --> </ul> </span> so 50 results are contained inside a span each <li> has this structure inside: HTML Code: Code: <li> <span> <a href...> <img> </a> </span> </li> I altered the resizeImgList function with 1 for loop but even then it didnt seem to improve. i was thinking that i could resize only the results the user is currently seeing inside the div, the current <span> of results but i'm anaware of how to accomplish this please if anyone has any idea I would be gratefull. Thank you. Peter. PS. results (spans) are fetched via AJAX on scrolldown inside the a div (which is the result container). Hi' there Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized? Hello... Just curious on what I am doing wrong: I want to get the pixelHeight of a div called content and assign it to a variable. Then I want to use that variable as the css top position property for another div. I'm new to Javascript, but am learning it. Right now I am just having trouble assigning the variable. I get 'undefined' when I try to output the variable to the browser. Here's the code : Code: <script language="javascript">
var divh = document.getElementById('top').style.pixelHeight;
</script>
</head>
<body>
<!-- output divh -->
<script language="javascript">
document.write(divh);
</script>
this gives me undefined in my browser What am I doing wrong?? Thanks Kevin Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript. Code: <noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">
var delay=6000
var curindex=0
var images=new Array()
images[0]="quote1.gif"
images[1]="quote2.gif"
images[2]="quote3.gif"
images[3]="quote4.gif"
images[4]="quote5.gif"
var preload=new Array()
for (n=0;n<images.length;n++)
{
preload[n]=new Image()
preload[n].src=images[n]
}
document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=images[curindex]
}
setInterval("rotateimage()",delay)
</script>
But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics. Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated. Thanks, Dell How do I get the pixel position of the caret in an editable IFrame? I am building a WYSIWYG editor which works for Gecko, Trident, Webkit and Presto. I am doing this by setting the designMode to 'on' for an IFrame. The problem that I am having is that I need to know the pixel position of the caret so I can determine if the caret is at the bottom of the page. The reason I want the pixel position is so that way I can auto scroll the scrollbar to that position. I should mention that we are using JavaScript. Any ideas appreciated. |
|||||||