|
JavaScript - Resize Images Before Displaying Them On Screen
Hello there I am using the below code to resize images posted on a forum, however when the page is loading it loads the images full size on sreen stretching the page to however wide the largest picture is and only resizes them once every picture has loaded and the page then goes back to normal width.
Does anyone know how I could make it so the images only display once they've resized ? Code: <script>
window.onload = resizeimg;
function resizeimg()
{
var theImages = document.getElementsByTagName('img');
for( var i = 0; i < theImages.length; i++ )
{
im = theImages[ i ];
if( im.width > 468 && !/\/(pic1\.jpg|pic2\.jpg)/i.test( im.src ) )
{
im.style.width = '466px';
im.style.border = "1px solid #000000";
im.style.padding = "2px";
im.style.marginBottom = "1px";
im.onclick = function()
{
window.open( this.src, 'fullscale','width='+ this.width +', height='+ this.height +',scrollbars=1,resizable=1').focus();
}
try{ im.style.cursor = 'hand';}catch(e){ im.style.cursor = 'pointer'; }
im.title = 'Click Here To See Image Full Size ';
}
}
}
</script>
Similar TutorialsHi All! I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page. Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code. Thanks in advance Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. Hi friends, I have a dropdown menu,when i select one item from the dropdown menu,i want a checkbox to be created on the screen.How do i achieve this? Thank You Madhusudan Hello, http://www.phoenixdigitalweb.com/Con...urecommercial/ The main image is actually 1087 pixels wide. I want all the photos to appear 1087 pixels wide, but there is some code that is resizing the images. Can someone please take a look for me? Let me know if any code is needed. Thanks!! 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 So this is my first thread and I am a noob at javascript so please forgive obvious mistakes. I am try to make images float across the screen horizontally. Ideally I would like them to come from both sides and be at different y positions. The problem I am having is that I can only seem to get one to move at a time. Another problem is that when they move off to the right of the screen it expands the viewable size of the site. So here's what I've come up with thus far. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
body {
background-color: #0CF;
}
</style>
<script language="javascript">
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1000; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("cloud").style.top = y+'px';
document.getElementById("cloud").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',100);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="backgroundgradient.png" onload="moveImage()">
<div id="cloud" class="movable">
<img src="cloud01.png" />
</div>
<script language="javascript">
var x = -100; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1500; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage01() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("plane").style.top = y+'px';
document.getElementById("plane").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage01()',10);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="web_layout/backgroundgradient.png" onload="moveImage01()">
<div id="plane" class="movable">
<img src="plane.png" />
</div>
</body>
</html>
Any help is greatly appreciated. Thanks I'm a newbie...be gentle Hi I have to display images in Listview control,again the listview in Repeater data control.I have to provide the image URL for image control by retrieving image stream from database. With using asp.net,c# is very slow,so how can I achieve this using javascript? Please anybody can help me.. 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? This is the code my js script. I don't know how to edit the size in this script. My pic is around 300x300. Please teach me thanks a lot. Javascript if ($(".brandbtnch").size()>0) { $(".brandbtnch").click(function(){ var id=$(this).attr("data-id"); var data=$(".data"+id).html(); $(".brandbigpicl").html(data); }); } I just want to resize the pic edit with this script. Thanks jQuery(window).resize(function(){ window.location.href=window.location.href; }); this code was work all browsers but not work IE6. if anyone knows reply.. I'm centering a section of html between a header and a footer on window load and resize. However, there are some strange issues happening. I'll list a couple and the code below. I also have an external header.php, footer.php, and profile.css that are used, but I don't want to post unnecessary code. If needed, I'll be glad to post it up though. Any help would be greatly appreciated. This one has got me stumped. -If the window is reduced lower than full screen, as the window is lengthened the footer will jump over the last line of text in the middle content. -If the window is loaded in a reduced window, then fullscreened, sometimes the middle content will not recenter. HTML Code: <?php
session_start();
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/UserFunctions.php");
//Checks for logout function
if(isset($_GET['logout'])){
logOut();
header('Location: http://'.$_SERVER['HTTP_HOST']);
}
//Checks if user is not logged in
if(isset($_SESSION['loggedIn']) != True){
header('Location: http://'.$_SERVER['HTTP_HOST']);
}
//Checks if user has saved new account information
if(isset($_POST['accountSaved'])){
accountChangeSave($_POST['firstName'],$_POST['middleName'],$_POST['lastName'],$_POST['agency'],$_POST['password'],$_POST['email']);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/profile.css"/>
<script type="text/javascript" src="jsFiles/main.js"></script>
<title>Home</title>
</head>
<body>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<div id="wrap">
<!-- Header Include -->
<?php
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/header.php");
?>
<div id="main">
<!-- Administrator profile -->
<?php
if($_SESSION['userType'] == 'admin' or $_SESSION['userType'] == 'superAdmin'){
?>
<div id="middleContent">
<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
<div id="linkImages">
<a href="javascript:void(0)" onclick="setAccountValuesJS(); openLightBox('accountBoxContent');">
<img id="leftLinkImage" src ="images/silhouette.png"/>
</a>
<img id="verticalBorder" src="images/welcomeBorderVertical.png"/>
<a href="" id="rightLinkImage"><img src="images/groupSilhouette.png"/></a>
</div>
<div id="linkText">
<div id="leftLinkText">My Account</div>
<div id="rightLinkText">Manage Users</div>
</div>
</div>
<!-- Basic user profile -->
<?php
}else{
?>
<div id="middleContent">
<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
<div id="linkImages">
<a href="javascript:void(0)" onclick="setAccountValuesJS(); openLightBox('accountBoxContent');">
<img id="leftLinkImage" src ="images/silhouette.png"/>
</a>
<img id="verticalBorder" src="images/welcomeBorderVertical.png"/>
<a href="" id="rightLinkImage"><img src="images/briefcase.png"/></a>
</div>
<div id="linkText">
<div id="leftLinkText">My Account</div>
<div id="rightLinkText">Apps</div>
</div>
</div>
<?php
}
?>
</div>
</div>
<!-- Footer Include -->
<?php
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/footer.php");
?>
</body>
</html>
CSS Code: /*Site Wide*/
body {
margin: 0;
padding: 0;
color: #ffffff;
font-family: Gill Sans, sans-serif;
background-color: #F1F1F1;
height:100%;
}
html{
overflow:scroll;
height:100%;
}
img{
border-width:0px;
}
#wrap{
min-height:100%;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
color: white;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: white;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
/*Middle Content*/
#main{
overflow:auto;
padding-bottom: 170px;
}
#middleContent{
position:relative;
width:100%;
min-width:900px;
text-align:center;
}
#error{
size:x-large;
color:black;
font-weight:600;
}
/*header.php*/
#header{
background-image: url("../images/backgroundOrange.jpg");
position: relative;
height: 100px;
width: 100%;
min-width:900px;
}
#navigationBar {
height:1em;
font-family: sans-serif;
position: absolute;
font-size: 18px;
top:40px;
right:0%;
}
#topLogo {
position: absolute;
top: 18px;
}
/*footer.php*/
#titleText{
font-size:large;
font-weight:2;
}
#footer{
position: relative;
background-color:#1F1F1F;
color:#ffffff;
min-width:900px;
margin-top:-170px;
height: 170px;
width:100%;
clear:both;
}
#bottomCopyright{
position:relative;
top:150px;
color: #BBBBBB;
font: sans-serif;
width:100%;
text-align:center;
font-size:small;
margin:auto;
}
#infoImageContainer{
position:relative;
float:left;
margin-top:50px;
left: 20px;
}
#infoImage{
position:relative;
height:40px;
}
#infoTextContainer{
position:relative;
float:left;
height:50%;
margin-top:1.5em;
left: 40px;
}
#infoText{
font-size:small;
position:relative;
height:3em;
}
#contactImageContainer{
position:relative;
float:right;
height:50%;
margin-top:50px;
right: 170px;
}
#contactImage{
position: relative;
height:35px;
}
#contactTextContainer{
position:relative;
float:right;
height:50%;
margin-top:1.5em;
left: 40px;
}
#contactText{
font-size:small;
position:relative;
height:3em;
right:20px;
}
#networkLinksContainer{
position:relative;
margin:auto;
height:50%;
margin-top:40px;
width:100%;
text-align:center;
}
#networkLinks{
position: relative;
height:54px;
margin:auto;
width:300px;
text-align:center;
top:40px;
}
/*Account Box*/
#fade{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
min-width:900px;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#boxWrapper{
position:absolute;
top:0px;
left:0px;
width:100%;
margin:auto:
}
#accountBoxContent{
display: none;
position: relative;
margin:auto;
width: 250px;
height: 430px;
padding: 16px;
background-color: #DBDBDB;
z-index:1002;
overflow: auto;
}
#editTitle{
height:50px;
font-size:X-Large;
font-weight:bold;
color:#282828;
vertical-align:inline-middle;
}
#editAccountLine{
color:#282828;
background-color:#282828;
height:1px;
}
#editAccountForm{
text-align:right;
position:relative;
top:30px;
color:#282828;
font-size:small;
font-weight:bold;
}
#editAccountLinks{
position:relative;
top:20px;
text-align:center;
}
#editAccountLinks > a{
color:#282828;
text-decoration:none;
}
#changeLinks{
position:relative;
bottom:3px;
font-size:x-small;
color:blue;
}
#formatText{
position:relative;
bottom:6px;
text-align:left;
font-style:italic;
}
#password{
background-color:#EBEBE4;
color:#545454;
}
#email{
background-color:#EBEBE4;
color:#545454;
}
Javascript Code: var firstName;
var middleName;
var lastName;
var agency;
var password;
var email;
//Vertically centers the middle content div
function setMiddleContentPos() {
var window = document.body.scrollHeight;
var header = document.getElementById('header').scrollHeight;
var footer = document.getElementById('footer').scrollHeight;
var middle = document.getElementById('middleContent').scrollHeight;
var center = window - header - footer;
var top;
if(window-header-footer-middle > 50){
top=center/2-middle/2;
document.getElementById('middleContent').style.top=top+'px';
}
}
//Vertically centers the middle content div
function setLightBoxPos(contentId) {
var winHeight = getWindowHeight();
if(winHeight > 0){
var contentElement = document.getElementById(contentId);
var contentHeight = contentElement.offsetHeight;
if(winHeight - contentHeight > 0){
//[Window height]/2 - [Lightbox Height]/2
contentElement.style.top = (winHeight/2 - contentHeight/2)+'px';
}
else{
contentElement.style.top = '0px';
}
}
}
//Open and Close Lightbox
function openLightBox(contentId){
document.getElementById(contentId).style.display='block';
document.getElementById('fade').style.display='block';
setLightBoxPos(contentId);
}
function closeLightBox(contentId){
document.getElementById(contentId).style.display='none';
document.getElementById('fade').style.display='none';
}
//Set account values in js vars based on form
function setAccountValuesJS(){
firstName = document.getElementById('firstName').value;
middleName = document.getElementById('middleName').value;
lastName = document.getElementById('lastName').value;
agency = document.getElementById('agency').value;
password = document.getElementById('password').value;
email = document.getElementById('email').value;
}
//Set account values in form based on js vars
function setAccountValuesForm(){
document.getElementById('firstName').value = firstName;
document.getElementById('middleName').value = middleName;
document.getElementById('lastName').value = lastName;
document.getElementById('agency').value = agency;
document.getElementById('password').value = password;
document.getElementById('email').value = email;
}
//Checks a string for prescence of illegal characters
//Illegal Characters: > < ' " \ / &
function stringIsClean(string){
if(string.indexOf('>') != -1 || string.indexOf('<') != -1 || string.indexOf("'") != -1 || string.indexOf('"') != -1 ||
string.indexOf('&') != -1 || string.indexOf('/') != -1 || string.indexOf('\\') != -1){
return true;
}
else{
return false;
}
}
//Saves account information
function saveAccount(){
firstNameTest = document.getElementById('firstName').value;
middleNameTest = document.getElementById('middleName').value;
lastNameTest = document.getElementById('lastName').value;
agencyTest = document.getElementById('agency').value;
passwordTest = document.getElementById('password').value;
emailTest = document.getElementById('email').value;
if(stringIsClean(firstNameTest) || stringIsClean(middleNameTest) || stringIsClean(lastNameTest) || stringIsClean(agencyTest) ||
stringIsClean(passwordTest) || stringIsClean(emailTest)){
document.getElementById('formatText').style.color = 'red';
}
else{
setAccountValuesJS();
document.getElementById('accountSaved').value = 'true';
document.getElementById('accountForm').submit();
}
}
//Sets middle content to adjust on load and resize
window.onload = function() {
setMiddleContentPos();
}
window.onresize = function() {
//setLightBoxPos('accountBoxContent');
setMiddleContentPos();
}
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 Hello, I have build a tree view forum, I have used the iframe tag to import it to my wordpress blog . I have a script that determine the size of the iframe on load: Code: <script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
</script>
The problem with the script is that the forum(tree view forum) only shows topics. I have another script that displays the contents of any issue only while clicking (Void). In actual the contents of each issue is charging ahead - but the resize function of the Iframe script not see it. How do I fix it, that the size of the Iframe will change automatically? Thanks alot Hello awesome coders! I am here in need of your help. I have a site with a lot of videos, from different sources, in different sizes, only thing they have in common is <div id="player">. Due do different sources, each video player is different. Some have embed code, some have object, some have iframe, some have both/all. Is it possible to create a script that will: Change the height and width of object, embed, iframe within the div. Is there another way to resolve this issue without changing all video code manually. is it possible to make a textarea resize with text? so if e.g the text overflows, the text-area is automatically resized so that there's no scrolling? It needs to resize automatically as the user is typing (more or less), he/she shouldn;t click on any buttons to resize it
Hello Frnds, I made a website, but when I resize my window the content get disturbed. How to stop it. Please gimme suggestion ASAP Hi, I got some JavaScript code from the net to resize DIV's depending on the window-size. It works perfectly in FF, but it won't work in IE. Code: function Resize(){
var winW = 630, winH = 460;
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth-30;
winH = window.innerHeight-200;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth-30;
winH = document.body.offsetHeight-200;
}
}
var topHeight = document.getElementById('top').offsetHeight;
var setHeight = document.getElementById('settings').offsetHeight;
var headersHeight = document.getElementById('headers').offsetHeight;
var leftWidth = document.getElementById('left_column').offsetWidth;
document.getElementById('container').style.width=winW+"px";
document.getElementById('container').style.height=(winH-topHeight-setHeight)+"px";
document.getElementById('headers').style.width=(winW-leftWidth)+"px";
document.getElementById('data').style.width=(winW-leftWidth)+"px";
document.getElementById('data').style.height=(winH-topHeight-setHeight-headersHeight)+"px";
}
I've been working on this for some days. I would appreciate any help I can get. Erik Hey everyone My project was to create 4 buttons , 2 for div 1 and 2 for div 2. The two divisions have overflow container so that the information will never leak outside the div. At the moment I have it so the style is 1x1 with opacity to 0 , then when visitors want to find information about a subject they press a button to move the div to a possition , opacity to 1 and the size is changed and the other button to return it. Ive hit many problems and for my project I need to follow these lines, Ive found that I cant make javascript resize the same div more than once after a while. could someone help me with this, Im trully baffled. |
|||||||