12, May 2008

Small Question.... - webmaster forum

 
Webdigity webmaster forums
This forum shares its ad revenue with its members!
[ Home | Help | Search | Forum's Shop | Archive | Login | Register | Webmaster Directory ]
Webdigity Webmaster Forums  >  Web Development  >  JavaScript
Topic: Small Question....
« previous next »
Pages: [1] Print

Author Topic: Small Question....  (Read 634 times)
Supreme Overlord
***
Gender: Female
Posts: 148
1008 credits
Members referred : 0



« on: Jun 20, 2007, 04:47:09 PM »

I had a friend code me this tool I use on a daily basis, it works my pulling images from a real estate IDX database.  It worked fine, until our MLS #'s rolled up to 6 digits instead of 5.  I need to know how to change the code so I can pull pictures with 5 or 6 digits.  The images are stored in sub-folders named after the last digit in the number.  If you would like to see full code let me know, but I am removing the path so unknowns can't pull pictures from our MLS system without permission.

Thanks in advance for all of your help.  JavaScript is not my thing....

Code:
<html>
<head>
<title>Photo Loader</title>
<script type="text/javascript">
<!--
function checkField( ref ) {
var mainPath = 'http://path...';

// CHANGE THIS ABOVE PATH TO THE COMPLETE URL PATH OF THE PHOTOS
// EXAMPLE:
// var mainPath = 'http://path...';

var tempNum = ref.value.substr( 4 );
var imgPath = mainPath + tempNum + '/REIS';

if ( ref.value.length == 5 ) {
var imgArray = new Array();
imgArray.push( document.getElementById( 'a' ) );
imgArray.push( document.getElementById( 'b' ) );
imgArray.push( document.getElementById( 'c' ) );
imgArray.push( document.getElementById( 'd' ) );
imgArray.push( document.getElementById( 'e' ) );
imgArray.push( document.getElementById( 'f' ) );
imgArray.push( document.getElementById( 'g' ) );
imgArray.push( document.getElementById( 'h' ) );
imgArray.push( document.getElementById( 'i' ) );

var photoArea = document.getElementById( 'photo_area' );

var textArray = new Array();
textArray.push( document.getElementById( 'a_text' ) );
textArray.push( document.getElementById( 'b_text' ) );
textArray.push( document.getElementById( 'c_text' ) );
textArray.push( document.getElementById( 'd_text' ) );
textArray.push( document.getElementById( 'e_text' ) );
textArray.push( document.getElementById( 'f_text' ) );
textArray.push( document.getElementById( 'g_text' ) );
textArray.push( document.getElementById( 'h_text' ) );
textArray.push( document.getElementById( 'i_text' ) );

imgArray[0].src = imgPath + ref.value + '.jpg';
imgArray[1].src = imgPath + ref.value + 'A.jpg';
imgArray[2].src = imgPath + ref.value + 'B.jpg';
imgArray[3].src = imgPath + ref.value + 'C.jpg';
imgArray[4].src = imgPath + ref.value + 'D.jpg';
imgArray[5].src = imgPath + ref.value + 'E.jpg';
imgArray[6].src = imgPath + ref.value + 'F.jpg';
imgArray[7].src = imgPath + ref.value + 'G.jpg';
imgArray[8].src = imgPath + ref.value + 'H.jpg';
photoArea.style.display = 'block';
textArray[0].innerHTML = 'Main';
textArray[1].innerHTML = 'a';
textArray[2].innerHTML = 'b';
textArray[3].innerHTML = 'c';
textArray[4].innerHTML = 'd';
textArray[5].innerHTML = 'e';
textArray[6].innerHTML = 'f';
textArray[7].innerHTML = 'g';
textArray[8].innerHTML = 'h';
}
}
function switchPhotos( ref ) {
var main = document.getElementById( 'a' );
var temp = main.src;
main.src = ref.src;
ref.src = temp;

var mainText = document.getElementById( 'a_text' );
var switchText = document.getElementById( ref.id + '_text' );
var temp2 = mainText.innerHTML;
mainText.innerHTML = switchText.innerHTML;
switchText.innerHTML = temp2;
}
-->
</script>
<style type="text/css">
<!--
html, body {
margin: 0px;
padding: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif, sans;
font-size: 10px;
}
img {
margin-top: 10px;
border: 1px solid black;
padding: 1px;
}
input {
width: 50px;
}
#photo_area {
margin: 5px;
display: none;
}
span {
padding: 3px 3px 3px 5px;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
top: -6px;
left: -4px;
}
#header {
padding: 10px;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
color: white;
font-size: 24px;
font-weight: bold;
font-style: italic;
}
-->
</style>
</head>
<body>
<div id="header">
<input type="text" id="text_field" onKeyUp="checkField( this );" maxlength="5" />
<-- Input MLS Number
</div>
<div id="photo_area">
<img id="a" src="#" />
<span id="a_text">&nbsp;</span>
<div>
<img id="b" src="#" width="50" onClick="switchPhotos( this );" />
<span id="b_text">&nbsp;</span>
<img id="c" src="#" width="50" onClick="switchPhotos( this );" />
<span id="c_text">&nbsp;</span>
<img id="d" src="#" width="50" onClick="switchPhotos( this );" />
<span id="d_text">&nbsp;</span>
<img id="e" src="#" width="50" onClick="switchPhotos( this );" />
<span id="e_text">&nbsp;</span>
</div>
<div>
<img id="f" src="#" width="50" onClick="switchPhotos( this );" />
<span id="f_text">&nbsp;</span>
<img id="g" src="#" width="50" onClick="switchPhotos( this );" />
<span id="g_text">&nbsp;</span>
<img id="h" src="#" width="50" onClick="switchPhotos( this );" />
<span id="h_text">&nbsp;</span>
<img id="i" src="#" width="50" onClick="switchPhotos( this );" />
<span id="i_text">&nbsp;</span>
</div>
</div>
</body>
</html>
I am a metal monkey!
Administrator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 7823
39873 credits
Members referred : 3



« Reply #1 on: Jun 20, 2007, 09:37:25 PM »

Too hard to find this one. I guess you should contact the guy that made it in the first place.

Trial and Error my two best teachers Cool
Promote your blog for free.... Visit through proxy

Last blog : Keep it Legal - Tims guide to legal notices
Supreme Overlord
***
Gender: Female
Posts: 148
1008 credits
Members referred : 0



« Reply #2 on: Jun 20, 2007, 09:48:37 PM »

He hasn't had time....

I think the trouble is with the line if ( ref.value.length == 5 ), it needs to be 5 or 6, not just 5....

Thanks
I am a metal monkey!
Administrator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 7823
39873 credits
Members referred : 3



« Reply #3 on: Jun 20, 2007, 09:53:03 PM »

Then try that, or try something like ref.value.length < 7

Trial and Error my two best teachers Cool
Promote your blog for free.... Visit through proxy

Last blog : Keep it Legal - Tims guide to legal notices
Supreme Overlord
***
Gender: Female
Posts: 148
1008 credits
Members referred : 0



« Reply #4 on: Jun 20, 2007, 09:58:13 PM »

That didn't work, but I think it might be part of the issue.  When I change line
var tempNum = ref.value.substr( 4 );
to 5 it works with the 6 digit numbers, but not the 5 digit numbers anymore.  Is there a command that I can use there that will use 5 for 6 digit #'s and 4 for 5 digit #'s?
I am a metal monkey!
Administrator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 7823
39873 credits
Members referred : 3



« Reply #5 on: Jun 20, 2007, 10:00:42 PM »

Let me guess. It used to work with 4 digits and now you want it to work with 5 and 6, right?

Trial and Error my two best teachers Cool
Promote your blog for free.... Visit through proxy

Last blog : Keep it Legal - Tims guide to legal notices
Supreme Overlord
***
Gender: Female
Posts: 148
1008 credits
Members referred : 0



« Reply #6 on: Jun 20, 2007, 10:10:53 PM »

No, it has something to do with the fact that the last digit of the number is the name of the folder it's stored in.   It already works with 5 digits.  For example MLS#95367 photos are stored in folder 7.  And are called REIS95367, REIS95367a, RE95367b, etc through g.
So if I press Alt F4... What?
****
Gender: Male
Posts: 362
2186 credits
Members referred : 2



« Reply #7 on: Jun 23, 2007, 12:48:16 AM »

if you are stil looking for an answer

Quote
<html>
<head>
<title>Photo Loader</title>
<script type="text/javascript">
<!--
function checkField( ref ) {
var mainPath = 'http://path Visit through proxy...';

// CHANGE THIS ABOVE PATH TO THE COMPLETE URL PATH OF THE PHOTOS
// EXAMPLE:
// var mainPath = 'http://path Visit through proxy...';

//changed
if (ref.value.length == 5)
   var tempNum = ref.value.substr( 4 );
else if (ref.value.length == 6 )
   var tempNum = ref.value.substr( 5 );


var imgPath = mainPath + tempNum + '/REIS';

//changed
if ( ref.value.length == 5 || ref.value.length == 6 ) {

var imgArray = new Array();
imgArray.push( document.getElementById( 'a' ) );
imgArray.push( document.getElementById( 'b' ) );
imgArray.push( document.getElementById( 'c' ) );
imgArray.push( document.getElementById( 'd' ) );
imgArray.push( document.getElementById( 'e' ) );
imgArray.push( document.getElementById( 'f' ) );
imgArray.push( document.getElementById( 'g' ) );
imgArray.push( document.getElementById( 'h' ) );
imgArray.push( document.getElementById( 'i' ) );

var photoArea = document.getElementById( 'photo_area' );

var textArray = new Array();
textArray.push( document.getElementById( 'a_text' ) );
textArray.push( document.getElementById( 'b_text' ) );
textArray.push( document.getElementById( 'c_text' ) );
textArray.push( document.getElementById( 'd_text' ) );
textArray.push( document.getElementById( 'e_text' ) );
textArray.push( document.getElementById( 'f_text' ) );
textArray.push( document.getElementById( 'g_text' ) );
textArray.push( document.getElementById( 'h_text' ) );
textArray.push( document.getElementById( 'i_text' ) );

imgArray[0].src = imgPath + ref.value + '.jpg';
imgArray[1].src = imgPath + ref.value + 'A.jpg';
imgArray[2].src = imgPath + ref.value + 'B.jpg';
imgArray[3].src = imgPath + ref.value + 'C.jpg';
imgArray[4].src = imgPath + ref.value + 'D.jpg';
imgArray[5].src = imgPath + ref.value + 'E.jpg';
imgArray[6].src = imgPath + ref.value + 'F.jpg';
imgArray[7].src = imgPath + ref.value + 'G.jpg';
imgArray[8].src = imgPath + ref.value + 'H.jpg';
photoArea.style.display = 'block';
textArray[0].innerHTML = 'Main';
textArray[1].innerHTML = 'a';
textArray[2].innerHTML = 'b';
textArray[3].innerHTML = 'c';
textArray[4].innerHTML = 'd';
textArray[5].innerHTML = 'e';
textArray[6].innerHTML = 'f';
textArray[7].innerHTML = 'g';
textArray[8].innerHTML = 'h';
}
}

function switchPhotos( ref ) {
var main = document.getElementById( 'a' );
var temp = main.src;
main.src = ref.src;
ref.src = temp;

var mainText = document.getElementById( 'a_text' );
var switchText = document.getElementById( ref.id + '_text' );
var temp2 = mainText.innerHTML;
mainText.innerHTML = switchText.innerHTML;
switchText.innerHTML = temp2;
}
-->
</script>
<style type="text/css">
<!--
html, body {
margin: 0px;
padding: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif, sans;
font-size: 10px;
}
img {
margin-top: 10px;
border: 1px solid black;
padding: 1px;
}
input {
width: 50px;
}
#photo_area {
margin: 5px;
display: none;
}
span {
padding: 3px 3px 3px 5px;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
top: -6px;
left: -4px;
}
#header {
padding: 10px;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
color: white;
font-size: 24px;
font-weight: bold;
font-style: italic;
}
-->
</style>
</head>
<body>
<div id="header">
<input type="text" id="text_field" onBlur="checkField( this );" maxlength="6" />
<-- Input MLS Number
</div>
<div id="photo_area">
<img id="a" src="#" />
<span id="a_text">&nbsp;</span>
<div>
<img id="b" src="#" width="50" onClick="switchPhotos( this );" />
<span id="b_text">&nbsp;</span>
<img id="c" src="#" width="50" onClick="switchPhotos( this );" />
<span id="c_text">&nbsp;</span>
<img id="d" src="#" width="50" onClick="switchPhotos( this );" />
<span id="d_text">&nbsp;</span>
<img id="e" src="#" width="50" onClick="switchPhotos( this );" />
<span id="e_text">&nbsp;</span>
</div>
<div>
<img id="f" src="#" width="50" onClick="switchPhotos( this );" />
<span id="f_text">&nbsp;</span>
<img id="g" src="#" width="50" onClick="switchPhotos( this );" />
<span id="g_text">&nbsp;</span>
<img id="h" src="#" width="50" onClick="switchPhotos( this );" />
<span id="h_text">&nbsp;</span>
<img id="i" src="#" width="50" onClick="switchPhotos( this );" />
<span id="i_text">&nbsp;</span>
</div>
</div>
</body>
</html>

I changed the javascript code in 2 places
I put "//changed" before each line that changed

also changed 2 things in the HTML

the maxlength to 6
and the onKeyUp to onBlur which means "when leaving the input field"

I hope it helps


Last blog : Free Consultation
Supreme Overlord
***
Gender: Female
Posts: 148
1008 credits
Members referred : 0



« Reply #8 on: Jun 23, 2007, 07:22:54 PM »

Works perfectly!

Thanks for all of your help!
Trackback URI for this entry : http://www.webdigity.com/trackback.php?topic=6825
Tags : Pull from database Bookmark this thread : Digg Del.icio.us Dzone more....

Topic sponsors:
Get a permanent link here for $1.99!


Pages: [1] Print 
Webdigity Webmaster Forums  >  Web Development  >  JavaScript
Topic: Small Question....
« previous next »
Jump to:
User Area
Welcome, Guest. Please login or register.
Did you miss your activation email?
May 12, 2008, 06:46:55 PM





Login with username, password and session length

Donate to our community, and get a permanent link back to your site!

Donate to our community, and get a permanent link back to your site!


Forum Statistics
Total Posts: 34.927
Total Topics: 7.262
Total Members: 3.479
Tutorials : 56
Resources : 143
Designs : 220
Latest Member: mileymo1

20 Guests, 1 User online :

11 users online today:



Readers

Web Design Gallery · Whois Lookup · Pagerank · Tag Browsing · Lo-fi version · Syndication · Webmaster forum history · Advertise
Developed by HumanWorks © 2005 - 2008 Webdigity webmaster community · sublime directory
Webdigity Webmaster Forums | Powered by SMF 1.0.12. © 2001-2005, Lewis Media. All Rights Reserved.