|
JavaScript - Moving Multiple Images Across Screen. Only One Works At A Time.
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 Similar TutorialsCode: function move_user_img(str) {
var step = 25;
// change this to different step value
switch(str) {
case "down":
var x = document.getElementById('imageUser').offsetTop;
x = x + step;
document.getElementById('imageUser').style.top = x + "px";
break;
case "up":
var x = document.getElementById('imageUser').offsetTop;
x = x - step;
document.getElementById('imageUser').style.top = x + "px";
break;
case "left":
var y = document.getElementById('imageUser').offsetLeft;
y = y - step;
document.getElementById('imageUser').style.left = y + "px";
break;
case "right":
var y = document.getElementById('imageUser').offsetLeft;
y = y + step;
document.getElementById('imageUser').style.left = y + "px";
break;
}
}
function move_report_img(str) {
var step = 25;
// change this to different step value
switch(str) {
case "down":
var x = document.getElementById('imageReport').offsetTop;
x = x + step;
document.getElementById('imageReport').style.top = x + "px";
break;
case "up":
var x = document.getElementById('imageReport').offsetTop;
x = x - step;
document.getElementById('imageReport').style.top = x + "px";
break;
case "left":
var y = document.getElementById('imageReport').offsetLeft;
y = y - step;
document.getElementById('imageReport').style.left = y + "px";
break;
case "right":
var y = document.getElementById('imageReport').offsetLeft;
y = y + step;
document.getElementById('imageReport').style.left = y + "px";
break;
}
}
Code: <div id ="display" style="width:640px; height:480px; overflow:hidden;">
<div>
<img src ="
<?php
echo UPLOADPATH . $userImage;
?>
" style = "position:absolute;" id="imageUser"/>
</div>
<div id ="imageReport">
<img src = "
<?php
echo $reportImage;
?>
" style = "opacity:0.25;height:700px; width:450px;" />
</div>
</div>
<div style="position:absolute; top:550px; left:100px;">
<p>Control User Image</p>
<input type=button onClick=move_user_img('up') value='Up'>
<input type=button onClick=move_user_img('left') value='Left'>
<input type=button onClick=move_user_img('right') value='right'>
<input type=button onClick=move_user_img('down') value='down'>
</div>
<div style="position:absolute; top:650px; left:100px;">
<p>Control Report Image</p>
<input type=button onClick=move_report_img('up') value='Up'>
<input type=button onClick=move_report_img('left') value='Left'>
<input type=button onClick=move_report_img('right') value='right'>
<input type=button onClick=move_report_img('down') value='down'>
</div>
I'm still kinda new at this. Please bear with me..I'm trying to make all imgs move in different directions using the following code. I was givin the code and I need to insert something into it so this will work. I just can't understand it and WANT to ..driving me NUTTY. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BUZZ</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var widthMax = 0;
var heightMax = 0;
var buzzSpeed = new Array(3);
buzzSpeed[0] = 10;
var xPosition = new Array(3);
xPosition = -20;
var yPosition = new Array(3);
yPosition[0] = 0;
var xDirection = new Array(3);
xDirection[0] = "right";
var yDirection = new Array(3);
yDirection[0] = "down";
function setBug(newStartPoint) {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
setInterval("flyBug(0)", 30);
}
function flyBug(curBug) {
var activeBug = document.getElementById("bugImage" + curBug);
var activeElement = document.getElementById("bugElement" + curBug);
if (xDirection[curBug] == "right" && xPosition[curBug] > (widthMax - activeBug.width - buzzSpeed[curBug]))
xDirection[curBug] = "left";
else if (xDirection[curBug] == "left" && xPosition[curBug] <= 0)
xDirection[curBug] = "right";
if (yDirection[curBug] == "down" && yPosition[curBug] > (heightMax - activeBug.height - buzzSpeed[curBug]))
yDirection[curBug] = "up";
else if (yDirection[curBug] == "up" && yPosition[curBug] <= 0)
yDirection[curBug] = "down";
if (xDirection[curBug] == "right")
xPosition[curBug] = xPosition[curBug] + buzzSpeed[curBug];
else if (xDirection[curBug] == "left")
xPosition[curBug] = xPosition[curBug] - buzzSpeed[curBug];
else
xPosition[curBug] = xPosition[curBug];
if (yDirection[curBug] == "down")
yPosition[curBug] = yPosition[curBug] + buzzSpeed[curBug];
else if (yDirection[curBug] == "up")
yPosition[curBug] = yPosition[curBug] - buzzSpeed[curBug];
else
yPosition[curBug] = yPosition[curBug];
activeElement.style.left = xPosition[curBug] + document.documentElement.scrollLeft + "px";
activeElement.style.top = yPosition[curBug] + document.documentElement.scrollTop + "px";
}
window.onresize = setBug;
</script>
</head>
<body onload="setBug()">
<div id="bugElement0" style="position:absolute; left:20px; top:0px;">
<img id="bugImage0" src="bug.jpg" alt="buggy" height="48" width="48" /></div>
<div id="bugElement1" style="position:absolute; left:25%; top:75%;">
<img id="bugImage1" src="bug.jpg" alt="buggy1" height="48" width="48" /></div>
<div id="bugElement2" style="position:absolute; left:40%; top:48%;">
<img id="bugImage2" src="bug.jpg" alt="buggy2" height="48" width="48" /></div>
<div id="bugElement3" style="position:absolute; left:58%; top:58%;">
<img id="bugImage3" src="bug.jpg" alt="buggy3" height="48" width="48" /></div>
<div id="bugElement4" style="position:absolute; left:90%; top:75%;">
<img id="bugImage4" src="bug.jpg" alt="buggy4" height="48" width="48" /></div>
</body>
</html>
The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons. It works great in Firefox, but does not in Internet Explorer. HELP webpage: http://www.isp.ucar.edu/ ------------ standard mouseover commands are used in index.php <CODE> <a href="http://www.tiimes.ucar.edu/beachon/" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"> <img src="images/buttons/button-beachon.gif" alt="BEACHON" width="181" height="74" border="0" id="img1" /></a> </CODE> ------------ <CODE> if (document.images) { img1on = new Image(); img1on.src = "images/buttons/button-beachon-on.gif"; img1off = new Image(); img1off.src = "images/buttons/button-beachon.gif"; img2on = new Image(); img2on.src = "images/buttons/button-bgs-on.gif"; img2off = new Image(); img2off.src = "images/buttons/button-bgs.gif"; img3on = new Image(); img3on.src = "images/buttons/button-iam-on.gif"; img3off = new Image(); img3off.src = "images/buttons/button-iam.gif"; img4on = new Image(); img4on.src = "images/buttons/button-nvia-on.gif"; img4off = new Image(); img4off.src = "images/buttons/button-nvia.gif"; img5on = new Image(); img5on.src = "images/buttons/button-utls-on.gif"; img5off = new Image(); img5off.src = "images/buttons/button-utls.gif"; img6on = new Image(); img6on.src = "images/buttons/button-water-on.gif"; img6off = new Image(); img6off.src = "images/buttons/button-water.gif"; img7on = new Image(); img7on.src = "images/buttons/button-exploratory-on.gif"; img7off = new Image(); img7off.src = "images/buttons/button-exploratory.gif"; // second image that does not appear in original button space img1ad = new Image(); img1ad.src = "images/buttons/beachon-overview-sm.gif"; img2ad = new Image(); img2ad.src = "images/buttons/bgs-overview-sm.gif"; img3ad = new Image(); img3ad.src = "images/buttons/iam-overview-sm.gif"; img4ad = new Image(); img4ad.src = "images/buttons/nvia-overview-sm.gif"; img5ad = new Image(); img5ad.src = "images/buttons/utls-overview-sm.gif"; img6ad = new Image(); img6ad.src = "images/buttons/water-overview-sm.gif"; img7ad = new Image(); img7ad.src = "images/buttons/exploratory-overview-sm.gif"; } { function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); document["holder"].src = eval(imgName + "ad.src"); } } } function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); document["holder"].src = "images/buttons/isp-overview-sm.gif"; } } </CODE> Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz. Code: <html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">
function Start() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function NewDest() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
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("ufo").style.top = y+'px';
document.getElementById("ufo").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()',30);
if (x == dest_x) && (y == dest_y) {
NewDest();
}
}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>
</body>
</html>
Hi all, I'm new to javascript and im trying to teach myself how to use it, however, ive come accross a problem. I'm using this code embeded in a HTML page for rollover images: Code: <script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "./Images/nav/home2.png" ;
homebuttondown = new Image() ;
homebuttondown.src = "./Images/nav/home2.png" ;
newsbuttonup = new Image();
newsbuttonup.src = "./Images/nav/news.png" ;
newsbuttondown = new Image() ;
newsbuttondown.src = "./Images/nav/news2.png" ;
gallerybuttonup = new Image();
gallerybuttonup.src = "./Images/nav/gallery.png" ;
gallerybuttondown = new Image() ;
gallerybuttondown.src = "./Images/nav/gallery2.png" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
<a href="index.html?cmd=welcome" onmouseover="buttondown('homebutton')"onmouseout="buttonup('homebutton')">
<img src="./Images/nav/home2.png" name="homebutton" border="0" /></a>
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
<a href="services.html?cmd=welcome" onmouseover="buttondown('gallerybutton')"onmouseout="buttonup('gallerybutton')">
<img src="./Images/nav/gallery.png" name="gallerybutton" border="0" /></a>
This works completly fine in 1280 x 800 but goes mental when you hover over it in 1024 x 768 screen resolution. Can anyone help please, it would be greatly appreciated! I need to make it so that when a user moves the mouse over an image it appears enlarged in a seperate div tag when the user moves their mouse over the image The problem is that the image just enlarges and makes a copy of itself in the div tag it is already in... this is the code: <td width="55" height="55"><div id="hello"><img src="jpegs for Thu/Copy of Misc/ajam.jpg" onmouseover="<div id = "Enlargedimage"><img src="jpegs for Thu/Copy of Misc/ajam.jpg"/> width="55" height="55"/></div></td> any help would be greatly appreciated Dear all, I would like to know if javascript can detect the screen idle time, if certain time come up in idle, then it will redirect to another page, any help will be appreciate, thanks! Eddie I want to create a javascript that will have two butterflies flying across the screen at the same time. One will go from the bottom left to the top right and the other will go from the top left to the bottom right. I have the first part of the code, but can't figure out how to get the second part of the code. I know I need to add another variable, but after that i get confused. Thanks for any help. <--------------------------- BEGIN CODE ------------------------------> <!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"> <head> <title>Butterfly</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <script type="text/javascript"> /* <![CDATA[ */ var a; var topPosition = 150; var leftPosition = 0; function flyButterfly() { var butterfly = document.getElementById("butterfly"); butterfly.style.left = leftPosition + "px"; butterfly.style.top = topPosition + "px"; butterfly.style.visibility = "visible"; topPosition -= 3; leftPosition += 10; if (topPosition <= 0) { topPosition = 150; leftPosition = 0; } } /* ]]> */ </script> </head> <body onload="a = setInterval('flyButterfly()', 100);"> <p><img src="butterfly.gif" id="butterfly" style="position: absolute; left: 0px; top: 0px; visibility:hidden" alt="Image of a butterfly" height="120" width="150" /></p> <h1>Butterfly</h1> <p>According to Wikipedia:</p> <blockquote><p>A butterfly is an insect of the order Lepidoptera, it belongs to either the Hesperioidea (the skippers) or Papilionoidea (all other butterflies) Superfamilies. Some authors have also suggested the inclusion of the superfamily Hedyloidea, the American butterfly moths. They are notable for their unusual life cycle with a larval caterpillar stage, an inactive pupal stage and a spectacular metamorphosis into a familiar and colourful winged adult form. The diverse patterns formed by their brightly coloured wings and their erratic-yet-graceful flight have made butterfly watching a popular hobby.</p></blockquote> </body> </html> <--------------------------- END CODE ------------------------------> I am trying to select multiple <tr>'s (onclick) in a <table> and then move every selected <tr> to another location in the table (on click). I will also be adding functionality to delete specific rows from a table by clicking on a <td> element, though I've already done this by doing. document.getElementById("container").deleteRow(row.parentNode.rowIndex); I am just completely unsure of how to tackle storing each selected row -- and then moving each selected row elsewhere in the table. I've seen many examples that accomplish close to what I am trying to acheive, however, they are all done via drag and drop and do not allow selecting multiple rows. Am I doing something wrong here? I have two anonymous functions to validate two different forms on two different pages. They both work on the individual page, though when I try and put them in the same script.js folder only the top function seems to work. Code: <script type="text/javascript">
// Form Validation / Catalog Template ----------------------------------------------------------------------------------------------------------------------
document.getElementById("formValidation").onsubmit = function(){
if(document.getElementById("reqAddrCont").value == ""){
document.getElementById("reqAddrCont").className = "error";
return false;
}if(document.getElementById("reqAddrName").value == ""){
document.getElementById("reqAddrName").className = "error";
return false;
}if(document.getElementById("reqAddr1").value == ""){
document.getElementById("reqAddr1").className = "error";
return false;
}if(document.getElementById("reqAddr6").value == ""){
document.getElementById("reqAddr6").className = "error";
return false;
}if(document.getElementById("reqAddrState").value == "0"){
document.getElementById("reqAddrState").className = "error";
return false;
}if(document.getElementById("reqAddrPost").value == ""){
document.getElementById("reqAddrPost").className = "error";
return false;
}if(document.getElementById("reqAddrPhone").value == ""){
document.getElementById("reqAddrPhone").className = "error";
return false;
}if(document.getElementById("reqAddrEMail").value == ""){
document.getElementById("reqAddrEMail").className = "error";
return false;
}else{
return true;
}
};
// Form Validation / New Account Template --------------------------------------------------------------------------------------------------------------------------
document.getElementById("formValidationAccount").onsubmit = function(){
if(document.getElementById("AcctName").value == ""){
document.getElementById("AcctName").className = "error";
return false;
}if(document.getElementById("AcctTitle").value == ""){
document.getElementById("AcctTitle").className = "error";
return false;
}if(document.getElementById("AcctCompany").value == ""){
document.getElementById("AcctCompany").className = "error";
return false;
}if(document.getElementById("AcctAddress1").value == ""){
document.getElementById("AcctAddress1").className = "error";
return false;
}if(document.getElementById("AcctAddress2").value == ""){
document.getElementById("AcctAddress2").className = "error";
return false;
}if(document.getElementById("AcctAddress6").value == ""){
document.getElementById("AcctAddress6").className = "error";
return false;
}if(document.getElementById("AcctState").value == "0"){
document.getElementById("AcctState").className = "error";
return false;
}if(document.getElementById("AcctPost").value == ""){
document.getElementById("AcctPost").className = "error";
return false;
}if(document.getElementById("AcctCountry").value == ""){
document.getElementById("AcctCountry").className = "error";
return false;
}if(document.getElementById("AcctPhone").value == ""){
document.getElementById("AcctPhone").className = "error";
return false;
}if(document.getElementById("AcctLogin").value == ""){
document.getElementById("AcctLogin").className = "error";
return false;
}if(document.getElementById("AcctLogin2").value == ""){
document.getElementById("AcctLogin2").className = "error";
return false;
}if(document.getElementById("AcctPassword").value == ""){
document.getElementById("AcctPassword").className = "error";
return false;
}if(document.getElementById("AcctPasswordDupe").value == ""){
document.getElementById("AcctPasswordDupe").className = "error";
return false;
}else{
return true;
}
};
</script>
I've seen a few people elsewhere with a similar problem, but couldn't get the solutions to work for my individual problems. I am currently trying to display a gallery of images using Lightbox, and a contact form in a different modal window using a different script. Here is the URL, so you can view the source. Clicking 'contact' opens the Contact window, which currently works, and clicking the images SHOULD open lightbox but doesn't. If I shuffle the code around, I can get Lightbox to work but the contact window then breaks. If someone could provide just the code I should replace mine with so I can just copy and paste it in, that would be great because I don't know anything about javascript and struggled to follow the instructions for this I found elsewhere. However any help is appreciated! Thanks in advance. (: (Just in case you notice - please excuse my use of tables in the coding, this is just temporary) Hello everybody I am new here and my English is not very good, sorry. I hope this post is in the correct forum.Thank you in advance for helping me out. I am from the netherlands and we are having a problem with a script. I will explain a few things so everything is clear for you. We are a member from a website: www.onderdelenzoeker.nl Through this website customers can ask for used carparts. If we have these parts in stock we can send the customers an email trough this website. (we are loggin in at leden.onderdelenzoeker.nl) We don't have a regular stock and price so every email we send is unique. That is why we are using this script. When we are sending a customer an email, this script will put the parts in our webshop with the prices. The customer will get an email with a unique link and can order the parts and pay trough the internet. But now the problem , this script won't work the first time. If we fill in a form and send it the first time the script won't work (the customer is getting an email but without the link and the parts are not in the webshop). If we fill in the same form a second time and send it the script is working and the customer is getting an email with a link and the parts are in the shop. Now the script is working in IE and we are using Trixie (is the same like greasemonkey is for FF) I hope I have written down all the information you need. And I hope there is somebody who can help me out. Thank you for your time and effort. Nicole This is the script: PHP Code: // ==UserScript== // @name onderdelenzoeker.nl Extractor for ie // @namespace http://www.autodemontage-wlubbers.nl // @description Adds products to the autodemontage-wlubbers.nl webshop width the information form the onderdelenzoeker.nl website when a users request a product. // @date 09.05.2011 // @version 1.0.2 // @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js // @include http://leden.onderdelenzoeker.nl/* // ==/UserScript== var merk; var model; var bouwjaar; var base_url = 'http://www.autodemontage-wlubbers.nl/shop/admin/services.php?action='; $(document).ready(function(){ setTimeout('replace_button()',500); }); replace_button = function(){ if($('.info').find('td:eq(7)').length!=0){ merk = $('.info').find('td:eq(7)').html().split(' ')[0]; model = $('.info').find('td:eq(10)').html(); bouwjaar = $('.info').find('td:eq(13)').html().replace(/[^A-Za-z0-9 .]/,''); $('.info:eq(4)').find('button').after('<input type="button" class="button" onclick="addProjectToShop();" style="width:100%" value="Verstuur gegevens naar aanvrager" />'); $('.info:eq(4)').find('button:eq(0)').remove(); $('body').after('<iframe style="display:none;" id="sendFrame" />'); $('#sendFrame').attr('src',base_url+'login&pass=q6pk4mcn5kzy5hppg0bcq'); } setTimeout('replace_button()',1000); } addProjectToShop = function (){ $('body').after('<div style="position:fixed;top:'+(window.innerHeight/2-100)+';left:'+(window.innerWidth/2-200)+';width:400px;height:200px;border:1px solid black;background:white;" id="loadingFrame" ><h1>Sending...</h1></div>'); var length = 10; var sPassword = ""; for (i=0; i < length; i++) { numI = getRandomNum(); while (checkPunc(numI)) { numI = getRandomNum(); } sPassword = sPassword + String.fromCharCode(numI); } var int_ = 200; $('.info:eq(4)').find('label').each(function(){ var parent = $(this).parent().parent().parent(); if(parent.find('input:eq(0)').attr('checked')) { setTimeout('$(\'#sendFrame\').attr(\'src\',\''+base_url+'addProduct&pass=q6pk4mcn5kzy5hppg0bcq&code='+sPassword+'&merk='+merk+'&model='+model+'&bouwjaar='+bouwjaar+'&item='+$(this).html()+'&prijs='+parent.find('input:eq(1)').val()+'&statiegeld='+parent.find('input:eq(2)').val()+'&verzendkosten='+$('#verzendkosten').val()+'&garantie='+parent.find('select option:selected').text()+'\');',int_); int_ = int_ + 200; } }); setTimeout('$(\'#sendFrame\').attr(\'src\',\''+base_url+'logout\');',int_); $('textarea').val($('textarea').val()+"\nU kunt de producten via onze webshop bestellen.\nKlik of kopieer de onderstaande link in uw browser.\nhttp://www.autodemontage-wlubbers.nl/shop/index.php?route=product/product/refcode&refcode="+sPassword); setTimeout('$(\'#loadingFrame\').remove();$(\'#sendFrame\').remove();validate_and_submit();',4000); return false; } getRandomNum = function () { var rndNum = Math.random() rndNum = parseInt(rndNum * 1000); rndNum = (rndNum % 94) + 33; return rndNum; } checkPunc = function (num) { if ((num >=33) && (num <=47)) { return true; } if ((num >=58) && (num <=64)) { return true; } if ((num >=91) && (num <=96)) { return true; } if ((num >=123) && (num <=126)) { return true; } return false; } 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>
Hi 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 Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles. I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px. I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it. It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content. I think there is something wrong with the validation of document.getElementById(articleID).style.height ? Any ideas? Thank you! Code: Code: <!DOCTYPE html>
<html land="en">
<head>
<script language="javascript" type="text/javascript">
function showhideContent(articleID) {
if(document.getElementById(articleID).style.offsetHeight = '0px'){
document.getElementById(articleID).style.height = '250px';
}
else{
document.getElementById(articleID).style.height = '0px';
}
}
</script>
<style type="text/css">
p {
margin:10px;
font-size:12px;
}
h1 {
margin:10px;
}
body {
background-color:lightgrey;
font-family:Arial;
font-size:12px;
}
#newsletter {
width:500px;
border:solid;
border-width:1px;
border-color:black;
background-color:white;
text-align:left;
font-size:11px;
}
#header {
height:125px;
}
#footer {
height:50px;
background-color:#330033;
}
#headerbar{
background-color:lightblue;
height:35px;
overflow:hidden;
font-size:12px;
-webkit-transition: background-color 1s;
}
#headerbar:hover{
background-color:#3399FF;
}
.content{
background-color:white;
height:0px;
overflow:hidden;
-webkit-transition: height 0.5s ease-in-out;
}
#expand{
background-color:red;
}
</style>
</head>
<meta charset="UTF-8">
<body>
<center>
<div id="newsletter">
<section id="header">
<img src="newsletter_header_test.jpg">
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
</p>
<article>
<section id="headerbar">
<div style="float:left;">
<h1>Introducing: the first article</h1>
</div>
<div style="float:right;">
<p>
<a id="expand" href="#" onClick="javascript:showhideContent
('article1');return false;">Show/Hide Article</a>
</p>
</div>
</section>
<div>
<section id="article1" class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus
<br><br>
sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in
mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
</p>
</section>
</div>
</article>
<br>
<br>
<section id="footer">
<p>footer</p>
</section>
</div>
</center>
</body>
</html>
hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone. i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on. below is the Java-script code along with my form code too Javascript: <script type="text/javascript"> function nextSelect(o) { if (o.value == '0') { var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.length = 0; return; } var d = document; var useSelect = d.getElementById(o.name + '_' + o.value); if (!useSelect) { alert('Unknown id: ' + o.name + '_' + o.value); return; } var copy = useSelect.cloneNode(true); copy.style.display = 'inline'; var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.parentNode.insertBefore(copy, next); next.parentNode.removeChild(next); } </script> my form: <div style="display: none;"> <!-- ##### First Selection ####### --> <select name="second" id="first_dp" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38">2 3/8'</option> <option value="dp_4">4'</option> </select> <select name="second" id="first_hw" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="hw_3_12">3 1/2'</option> <option value="hw_4">4'</option> </select> <!-- ####### 2nd Selection ####### --> <select name="third" id="second_dp_2_38" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38_4.85">4.85 lbs/ft</option> <option value="dp_2_38_6.65">6.65 lbs/ft</option> </select> <select name="third" id="second_dp_2_78" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_78_6.85">6.85 lbs/ft</option> <option value="dp_2_78_10.4">10.4 lbs/ft</option> </select> >>>>>>and so on till 3rd selection<<<<<<<<< </div> <form action="pdfHandle.php" method="post" id="pdfsearch"> <fieldset> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="142" height="146"> <p> Type:<br /> Size:<br /> Weight:<br /> </td> <td width="266"><select name="first" onclick="nextSelect(this);"> <option value="0">Choose</option> <option value="dp">Drill Pipe</option> <option value="hw">Heavy Weight</option> </select><br/> <select name="select"> </select> <br/> <select name="select"> </select> <br/> <select name="select"> </select> </td> </tr> </table> <p> <input type="submit" name="submit" id="submit" value="Create PDF" /> <input type="reset" value="Reset Selection" /> </p> </fieldset> </form> ----------------------------------------------------------------------- i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps i thank you for viewing this post. Hello can anyone help me with modestmaps? I need to add my own map I mean lots of images to it but my JS knowledge is kinda poor. Can anyone help? Feel free to suggest other map frameworks I don't need anything special it should be light-weight, ability to add my own maps and put some markers on it. Thanks in advance. EDIT: Oh I forgot and license should allow modifications and using it in website which is comerecial. I mean I won't take payment for viewing it but it still comercial. Hi all, I have a number of images placed on a map (the images are dots indicating a location) When clicked, that displays different textual information somewhere on the page. View here and click the dots on the map for what I am trying to explain: http://www.garethhardy.com/Shine/?page_id=6 What I want to do now is to toggle these dots so that when clicked, the dot turns white. This I could do with some code I found on the net. However, I need it to toggle all images. In that if one image has been clicked and turned white, and then the user clicks a different black ot, then that black dot should turn white, and the white dot should turn back clack. Hope that makes sense! Thanks in advance Dan I am trying to make different images hover over a table of sliced images when you mouse over a particular image. ex. mouse over image 1 = have image 1.1 hover over entire table of images in spot A; mouse over image 2 = have image 2.2 hover over entire table of images in spot B....ect. what i have so far only allows me to mouse over image 1 and have image 1.1 hover over entire table in spot A. Any time i try to move forward with more div's on other images it just jacks everything up. Here it is:
Code: <html>
<head>
<title>map</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function init()
{
loadAll(document.getElementById('map1'));
}
window.onload = init;
function loadAll(arrayLoading)
{
var areas = arrayLoading.getElementsByTagName('area');
for(var i=0;i<areas.length;i++) areas[i].onmouseover = mouseIsOver;
}
function mouseIsOver()
{
var area = this;
var coords = this.coords;
var x1 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var y1 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var x2 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var y2 = parseInt(coords);
var img = document.createElement("img");
img.src = area.getAttribute("imgSrc");
img.style.position = 'absolute';
img.style.left = x1 + 'px';
img.style.top = y1 + 'px';
img.style.height = y2 - y1 + 'px';
img.style.width = x2 - x1 + 'px';
area.parentNode.appendChild(img);
img.onmouseout = function ()
{
this.parentNode.removeChild(this);
setTimeout(function () { area.onmouseover = mouseIsOver; }, 50);
};
area.onmouseover = null;
}
</script>
<style type="text/css">
#map1
{
position: relative;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (map.psd) -->
<table id="Table_01" width="651" height="761" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14">
<img src="images/map_01.png" width="650" height="213" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="213" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img src="images/map_02.png" width="442" height="48" alt="" /></td>
<td colspan="2">
<img src="images/map_03.png" width="87" height="48" alt="" /></td>
<td rowspan="14">
<img src="images/map_04.png" width="121" height="547" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt="" /></td>
</tr>
<tr>
<td colspan="6" rowspan="4">
<img src="images/map_05.png" width="257" height="164" alt="" /></td>
<td colspan="3" rowspan="2">
<img src="images/map_06.png" width="92" height="69" alt="" /></td>
<td colspan="3" rowspan="2">
<img src="images/map_07.png" width="94" height="69" alt="" /></td>
<td>
<img src="images/map_08.png" width="86" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td rowspan="12">
<img src="images/map_09.png" width="86" height="498" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="68" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<div id="map1">
<div class ="noborder">
<img src='images/map_10.png' alt="" width="93" height="95" usemap=#airmap>
<map name=airmap>
<area shape=Rect Coords=-17,-5,107,109 imgSrc="images/Rt5.png" />
</map>
</div>
</div></td>
<td colspan="2">
<img src="images/map_11.png" width="93" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="10">
<img src="images/map_12.png" width="93" height="429" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="94" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/map_13.png" width="230" height="81" alt="" /></td>
<td colspan="4" rowspan="3">
<img src="images/map_14.png" width="77" height="82" alt="" /></td>
<td colspan="2">
<img src="images/map_15.png" width="43" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/map_16.png" width="43" height="334" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/map_17.png" width="153" height="84" alt="" /></td>
<td rowspan="2">
<img src="images/map_18.png" width="77" height="84" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="images/map_19.png" width="28" height="83" alt="" /></td>
<td rowspan="6">
<img src="images/map_20.png" width="49" height="253" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="83" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/map_21.png" width="119" height="48" alt="" /></td>
<td colspan="4" rowspan="2">
<img src="images/map_22.png" width="112" height="48" alt="" /></td>
<td colspan="2">
<img src="images/map_23.png" width="27" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/map_24.png" width="27" height="169" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/map_25.png" width="120" height="62" alt="" /></td>
<td colspan="3">
<img src="images/map_26.png" width="111" height="23" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/map_27.png" width="111" height="99" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/map_28.png" width="120" height="60" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="60" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="119" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="77" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="42" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="92" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="121" height="1" alt="" /></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
|
|||||||