|
JavaScript - Image Keeps Resizing Javascript Problem?
Similar TutorialsHello all; I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code: Code: <body>
<canvas id="worldscreen" class="map"></canvas><br />
<script type="text/javascript">
function loadImages(arrow, call) {
var images = {};
var loaded = 0;
var num = 0;
for (var src in arrow) {
num++;
}
for (var src in arrow) {
images[src] = new Image();
images[src].onload = function(){
if (++loaded >= num) {
call(images);
}
};
images[src].src = arrow[src];
}
}
window.onload = function(images) {
var canvas = document.getElementById("worldscreen").getContext("2d");
var arrow = {
top: "sideQUEST/images/arrow-top.png",
right: "sideQUEST/images/arrow-right.png",
bottom: "sideQUEST/images/arrow-bottom.png",
left: "sideQUEST/images/arrow-left.png",
};
loadImages(arrow, function(images) {
canvas.drawImage(images.top, 100, 18);
canvas.drawImage(images.right, 215, 36);
canvas.drawImage(images.bottom, 100, 115);
canvas.drawImage(images.left, 36, 36);
});
};
</script>
</body>
You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you. I am making my first mobile website and need to put wallpapers in it. I cant make every picture in all resolution for each mobile. I found this website which can auto- resize image when user select their mobile brand...i have tried to learn it from page source but failed. Can any one help me please, m newbie xD here is the website: http://cartoonized.net/cellphone-wallpaper.ph Im using the below javascript to resize images on a forum I have created but I want it to ignore 2 certain images that are part of my header. Heres the code Code: <script>
window.onload = resizeimg;
function resizeimg()
{
if (document.getElementsByTagName)
{
for (i=0; i<document.getElementsByTagName('img').length; i++)
{
im = document.getElementsByTagName('img')[i];
if (im.width > 600)
{
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
if (document.all) im.style.cursor = 'hand';
if (!document.all) im.style.cursor = 'pointer';
im.title = 'Click Here To See Image Full Size ';
}
}
}
}
</script>
But I want it to ignore 2 images..and not resize them. head1.jpg head2.jpg Any help would be gratefully recieved !! Cheers !! I'm coding my new website, and to save bandwidth, i'm letting users link to their own avatars, so I want to resize any images over 150px wide so it doesn't mess up my layout - simple, right? Well, you'd think so, but I don't know any javascript, so i've scrapped this together with what little I know: Code: var obj=document.getElementsByTagName("img");
for(var i=0;i<obj.length;i++){
if(obj[i].className == "avatar") {
if(getElementWidth(obj[i]) > 150) {
obj[i].style.width = 150;
}
}
}
Can anyone help me fix that or code me a new one please? I need it to check all elements (well, images - but only images will be using it) for a width of over 150px, and, if it is - change it to 150px I know it's pretty simple but it's hurting my head! :P Thanks in advance -Alux Hi there, I just recently took over a site that has some java code on it I'm unfamiliar with. If you go to smalltowngossipmusic.com, you'll see what this code does. Go to the pages "Sounds" or "Travel", and once your mouse leaves the main image at the top of the page, you should see those pages shrink. This is some code that was implemented on the site (which is wordpress) in the header.php template. Here is the code: Code: <script type="text/javascript">
/* <![CDATA[ */
var $ = jQuery.noConflict();
$(document).ready(function () {
headerImage();
});
var speed = 500;
var origMT = 0, origHeight = '120px';
function expandHeader(obj) {
$('.headerImage').animate({height: '436px'},speed);
$('.headerImage img').animate({'margin-top': '-2px'},speed);
}
function shrinkHeader(obj) {
$('.headerImage').stop().animate({'height': origHeight},speed);
$('.headerImage img').stop().animate({'margin-top': origMT},speed);
}
function headerImage() {
origMT = $('.headerImage img').css('margin-top');
origHeight = $('.headerImage').css('height');
$('.headerImage img').css('margin-top','0');
$('.headerImage').css('height','436px');
setTimeout(shrinkHeader,speed*2);
$('.headerImage').hover(expandHeader, shrinkHeader);
}
/* ]]> */
</script>
If you look at the page source for each page, you'll see that there is nothing out of whack (at least, not that I can find). However, for some reason, this shrinking script only works on the two pages I mentioned - on every other page, it either doesn't work at all, or it only works about half-way. I have made sure the page.php and header.php templates both have accurate picture information in them, and can not find anything wrong anywhere. Is there any advice anyone here can give me on how to fix this? I've been doing html and css for awhile, but am relatively new to javascript and php, so am a bit out of my element on this. I'm willing to post any more code, snippets, whatever needed, just let me know what you need if you think you can help. Thanks, Brandon I am trying to dynamically resize an image. Here is my code: Code: <img border="0" src="images/right.gif" width="16" height="100" name="right">
<SCRIPT Language=Javascript>
<!--
function ChangeImgSize(){
right.height = 3000;
}
ChangeImgSize()
//-->
</SCRIPT>
This is on an asp page, and the <script> tag is the last thing on the page before </body> The image does not get resized. I've been testing the page on current browsers (IE 8, Firefox, Chrome). I'm certain I'm doing something newbish, I don't really know Javascript all that well. Thanks in advance, Skip I am in the process of making a website and have a question as I am new to javascript, for the smaller screens I would like to have a script that moves the link buttons closer together and resizes them to make them smaller. Is this possible and if so can someone write the code for me to then alter for the website. The website is tvbcraft.com and it is the menu bar i am trying to add a script to. The buttons have a menustyle.css sheet and a menuscript.js file.
Hi CodingForum! For my website, I have a working script that changes the background image of my website every time it is reloaded. However, I would also like the image to dynamically resize as the user resizes the browser window. here is a code snippet: Code: <head>
<script type="text/JavaScript">
/*<![CDATA[*/var el="bgImg";var bgimg=new Array("../00home/06home.jpg","../00home/07home.jpg");var random=Math.round((bgimg.length-1)*Math.random());var cssStr="#"+el+" { background: url("+bgimg[random]+") no-repeat center } ";var style=document.createElement("style");style.setAttribute("type","text/css");if(style.styleSheet){style.styleSheet.cssText=cssStr;}else{var cssText=document.createTextNode(cssStr);style.appendChild(cssText);}document.getElementsByTagName("head")[0].appendChild(style);/*]]>*/
</script>
<style type="text/css">
.rotatebg {
z-index:0;
position:fixed;
top:0; left:0;
width:1378px; height:1178px;
background-repeat: no-repeat;
background-position:inherit;
overflow:hidden;
}
</style>
</head
<body>
<div class="rotatebg" id="bgImg" style="width:100%; height:100%" ></div>
</body>
Does anyone know how I can augment/alter this coded setup to enable the randomly loaded background image to proportionately fill the browser window? Hello, I am working on my site http://www.alvadesign.com and trying to incorporate an image menu like the one at http://www.phatfusion.net/imagemenu/index.htm. I am new to javascripting and just begining to learn. I have the menu showing up now but not functioning upon rollover. This is all being done in a wordpress theme. This uses mootools.js and truthfully anything I did could be wrong at this point. Im not sure what im doing wrong and any help is greatly appreciated. Thank you, Alva www.alvadesign.com Hi, Im using the following javascript to cycle through 3 images on my website header. http://www.dynamicdrive.com/dynamici...nslideshow.htm However, I have put it in a div layer and it works fine, except in Internet explorer, if you load the page in a small window and then maximise, it moves out of position. Similarly if you open the page maximised, and then make the page smaller, it again moves out of position. My page layout is centered on the web page. is there anyone who could help me? Hi guys, I have this little snippet of code that swaps a toggle image for news for a plus or minus sign showing if the div is open or closed. This code has worked before but i made a couple modifications today and it stopped working unexpectedly and i'm not sure why its failing. I am presetting the div tag with a plus sign with css and then modifying it with javascript. The problem i am having is that when the div tag has been opened it does not swap the image to min.gif anylonger. It remains max.gif. Here's the javascript code Code: var News_Images = new Array();
News_Images[0]="images/max.gif"
News_Images[1]="images/min.gif"
function DisplayNews(body,box,link,id){
$(body + " > div > .news_box").each(function(){
if($(this).css("display")=="block"){
$(this).slideToggle("slow");
}
});
$(body + " > div > a[class='open_button_closed']").each(function(){ // search and change the + / - images
$(this).css("background-image",'url('+script_path+News_Images[0]+')');//
});
$(body + " > div > a[class='open_button']").each(function(){
$(this).css("background-image",'url('+script_path+News_Images[0]+')');//
});
if($(body + " > div > #"+box+id).css("display")=="none"){
$(body + " > div > #"+box+id).slideDown("slow");
$(body + " > div > #"+link+id).css("background-image",'url('+script_path+News_Images[1]+')');//
alert("box =" + box + " id = " + id + " link =" + link);
}
}
And here is the html sample Code: <div class="recent_news_box">
<a onclick="DisplayNews('#display_recent','news_link','open_button',3); return false;" id="open_button3" class="open_button"></a>
<a class="link_block" href="">Some Title Text</a>
<div style="display: none;" class="news_box" id="news_link3">
<img class="front_image" alt="" src="" align="right">
<span class="date">Jul 21, 2009</span>
<div>Some Stuff to display here will be short text</div>
</div>
</div>
Thanks in advance. Hey all- trying to get this bit of js to work properly. I'm close, but the issue is that if the window is opened at a size that is SMALLER than the original image, it wont scale down to the smaller size until i first make the window bigger, THEN size it down smaller. The image itself is big (its fashion photography so it needs to be high res) and the js sets the minimum width at 1070. Id like to have the image as big as possible and then on page load automatically drop down to as low as 1070px if the window size is small. Here is the js: Code: jQuery.noConflict();
function screenSize() {
var w, h;
w = (
window.innerWidth ?
window.innerWidth :
(
document.documentElement.clientWidth ?
document.documentElement.clientWidth :
document.body.offsetWidth));
h = (
window.innerHeight ?
window.innerHeight :
(
document.documentElement.clientHeight ?
document.documentElement.clientHeight :
document.body.offsetHeight));
return {w:w, h:h};
}
jQuery(document).ready(function ()
{
if( screenSize().w > 1070 )
{
document.getElementById('home-page-bg-image').style.width = screenSize().w + 'px';
}
})
jQuery(window).resize(function()
{
if( screenSize().w > 1070 )
{
document.getElementById('home-page-bg-image').style.width = screenSize().w + 'px';
}
});
let me know if you have any ideas Hi I have some Javascript on my website http://www.restoreanddesign.co.uk The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors. I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript. i have bolded/coloured the lines i think is causing the problems -------------------------------------------------------------------- Code: <script type="text/javascript" language="JavaScript">
// JavaScript Document
var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "images/newtopbar.jpg"
images[2] = "images/newtopbar2.jpg"
images[3] = "images/newtopbar3.jpg"
images[4] = "images/newtopbar4.jpg"
var image = images[rand1]
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
Hello, I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document). Links: http://www.courtneyhunt.com.au/press_bg.html http://www.courtneyhunt.com.au/press_gallery.html I am a complete novice with JavaScript so if anyone could help that would be great. Thank you in advance. I got an index.php Code:
<html>
<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>
As you can see, each of the option brings specific value "../komik1/|23" komik1 is a directory | is a delimiter 23 is the pages in one chapter and can be considered also as how many images are there on a specific directory This is my bacakomik.php Code: <?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">
With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this? I believe that the fix should be somewhere on input tag inside OnClick, or do you know where? Anyway, I found this on the net http://p2p.wrox.com/php-faqs/11606-q...avascript.html Please help me to those who can... Ok, told you I'd be asking lots of questions ... Code: <div id="resizetest" style="width:200px;height:200px;border:2px solid blue">
<div style="background:#000033">
<a href="#" style="float:right;background:#ffffff" onclick='document.getElementById("resizetest").height="50";'>_</a>
</div>
This is a resize test
</div>
Why doesn't this resize? I've looked at examples, and I don't see what's wrong. Hi folks! Very, very new to Javascript and I'm having a problem. What I'm trying to do is create a page that uses an iframe to show the fullsized image, while using thumbnails at the bottom. I need the iframe to resize depending on the size of the image since some are landscape and others are portrait oriented. I found a script online that did it for the height of the picture so I tried to modify it to do both the width and the height and haven't had much luck. Here's the code, and I apologize in advance for my noob coding. Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Halloween 2009</title>
<script language="JavaScript">
<!--
function calcWidth()
{
//find the width of the internal page
var the_width=
document.getElementById('preview').contentWindow.
document.body.scrollWidth;
//change the width of the iframe
document.getElementById('preview').width=
the_width;
}
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('preview').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('preview').height=
the_height;
}
//-->
</script>
<style type="text/css">
body {background: url(background/bg3.gif); text-align:center}
img {height: 5em; width:5em; display: inline; border: none}
</style>
</head>
<body>
<div style="height: 448px">
<iframe src="Halloween '09 021.jpg" name="preview" id="preview" onLoad="calcWidth();calcHeight();" marginheight="0" marginwidth="0" scrolling="no">
An iframe capable browser is required to view this web site.
</iframe>
</div>
<div id="thumbnails" style="padding-top: 1.5em; width: 40em; text-align: center">
<a href="Ariana.JPG" target="preview"><img src="Ariana.JPG" alt="" /></a>
<a href="Halloween '09 002.jpg" target="preview"><img src="Halloween '09 002.jpg" alt="" /></a>
<a href="Ayesha.jpg" target="preview"><img src="Ayesha.jpg" alt="" /></a>
ETC...
</div>
</body>
</html>
|
|||||||