JavaScript - Making A Function To Display A Full Size Image In A Table..from A Thumnail

My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its:

Code:

<script type="text/javascript">
  addLoadEvent(function() { function1(1); })
  //function1 makes the table rows do something appearance wise.
</script>

<tr>
  <td></td>
  <td></td>
  <td>
    <img src="pics/delete.png" alt="Delete" onclick="function2();">
  </td>
</tr>

I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site.

I would like to add a Lightbox like image display function to TinyMCE. What is a good approach in the regard, integration or extension?

Thank for your input in advance.

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've got this listbox full of hundreds of employee names. Clicking on a name executes a function using onchange. Because of the length of the list I decided a search function would be really handy and I finally found one that works.
Now the search function, when you type in the input box, scrolls the list to the first matching entry. And that's good, that's what I wanted.
The problem comes in when you try to click on the name the search function found. Nothing happens ofcourse because the onchange tag in the list reacts to changes, not direct clicks.

<select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:260px; width:220px; margin-bottom: 15px;">
<option selected="selected">Loading</option>
</select>

The list is populated by java but for testing I disabled the function that clears the "Loading" option and I set it to selected. That way the loading option is highlighted by default and the search function is free to highlight something else, then when I click on the search result it works like it's supposed to.
But keeping a highlighted option at the top of the list for that sole purpose isn't very elegant, especially since if you click on it the onchange function tries to execute and generates errors. The only solution I can think of is to use java to generate another option way at the bottom of the list that has the selected attribute but I don't quite know how to do that.
Does anyone have any thoughts on what I can do?

Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts.


Thanks

xx

hello everyone.
i am new to this forum and new with webdesigning..

i was wondering if anyone can help guide me to get the right coding

im trying to make it so that when clicking thumbnails it will change the full screen background to its respective picture along with continuing its automatic slideshow

www.petpawfurry.com is the website in which im working on.

also, is there anyway to make the slider, slide to the right, instead of fading in and out?

thanks so much, hope someone can help

i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.

can any one guide me i am new to programming

Thanks in advance!!!

Dear Experts,

I am very new for javascript so I am not even sure it is possible or not.

The situation is like this,

I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button.

this is the sample layout:

<table>
<tr>
<td colspan=8>
Full size image will be shown in this cell
</td>
</tr>
<tr>
<td colspan=8>
Caption of the image will be displayed here
</td>
</tr>
<tr>
<td>Previous Button</td>
<td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td>
<td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td>
<td>Next Button</td>
</td>
</tr>

My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table.
As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails.

I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you.

Thanks in advance.

Charles

Hi
I want to create a javascript form validation but i cant with the following code.
What is wrong with the code? How to create a form validation without changing the following code-
Code:

<html>
<head><title>Javascript Validation</title>
<style>
  .lf{
position:relative;
left: 30px;
 float right;
 }
</style>
<script>
 function validate()
{
var c=document.getElementById("f1").value;
  if(c.length<1)
 alert(" Name Field can't be blank");

 if(c.length<=5)
 alert("Enter a valid name");

var a=parseInt(document.getElementById("f6").value);alert(a);
var b=document.getElementById("f7").value;alert(b);
var d=document.getElementById("f8").value;alert(d);
var lp=0;
  if((d%400)==0 && (d%100==0) || (d%4==0))
  lp=1;


  if((a==31) && ((b=="4") || (b=="6") || (b=="9") || (b=="11")) )  
    alert("Date out of Range"); 
 if((lp==0) && ((a=="29") || (b=="2")  )  
    alert("Date out of Range"); 


} 


</script>

</head>
<body>
 <div style="width:50%;background-color:lightgray;"> 
<fieldset>

 <legend  style="color:brown;font-weight:bold;"> SignUp Form</legend>
<table height=300>
 
<form>
   <tr><td> FirstName:&nbsp;&nbsp;<input type="text" name="fn" id="f1"  class="lf" size=50 /></td></tr>
  <tr><td> Address: &nbsp;&nbsp;&nbsp; <input type="text" name="adr" id="f2" class="lf" size=50 /></td></tr><br/><br/>
  <tr><td> Zip:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="zp" id="f3" class="lf" size=20 /></td></tr><br/><br/>
  <tr><td> UserName:&nbsp;<input type="text" name="fn" id="f4" class="lf" size=30 /></td></tr>
  <tr><td> Password: &nbsp;&nbsp;<input type="password" name="fn" id="f5" class="lf" size=30 /></td></tr>
  <tr><td> DOB: <br /><br />Day:&nbsp;&nbsp;&nbsp;<input type="text" name="dy" id="f6" />
  		Month:&nbsp;<input type="text" name="m1" id="f7" />
  		Year:&nbsp;<input type="text" name="m2" id="f8" /></td></tr>
 <tr><td> Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="fn" id="f9"  size=50 /></td></tr>
  <tr><td><center>

  <input type="submit" value="submit" onClick="validate()" />
</center></td></tr> 
</form>

</table>


</fieldset></div></body>
</html>

I was wondering if someone could help me make this function that's tied to a HTML select work on an <imput type="image">.

Ideally what I would like to do is tie everything to the <input type="image"> , right now the way the code works is that when I choose yes or no the image on the <img src=""> changes. So basically when I choose yes or no in the select what I would like the image source to change for the <input type="image"> assuming it's possible.

Ty...

See my demo page for where I have it working on an img src but not an input which is what I really want.

Here's the link again to my testing / demo page: http://www.myu2sig.com/stellardonations/buttontype.php

Now for all of the code that produces what you see on said page.

Code:

<script type="text/javascript">
	function showimage(t){
		if (!document.images)
		return;
		document.images[t.getAttribute("name").replace("select","pics")].src=t.options[t.selectedIndex].id
	}
</script>

Regular Image using: < img name="firstpics" src="/stellardonations/paypaldonate.gif"><br />
<img name="firstpics" src="/stellardonations/paypaldonate.gif">

<br /><br />

Input Image using: < input type="image" src="/stellardonations/paypaldonate.gif" border="0" name="submit" ><br />
<input type="image" src="/stellardonations/paypaldonate.gif" border="0" name="submit">

		<br /><br />
		
		<select name="firstselect" onChange="showimage(this)">
		<option id="/stellardonations/paypalsubscribe.gif" value="Yes">Yes</option>
		<option selected="selected" id="/stellardonations/paypaldonate.gif" value="No">No</option>
		</select>
		
		<br /><br />
		
		No = Donate<br />
		Yes = Subscribe

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

Hi, I have this code:
Code:

window.addEvent('domready',function(){
			
			document.id('cool').addEvent('click',function() {
				
				light = new LightFace.IFrame({ height:400, width:800, url: 'http://google.com', title: 'Google!' }).addButton('Close', function() { light.close(); },true).open();
				
			});
			
		});

It's a piece from something called the lightface iframe. What I want to do is to have this code on my javascript page, that's included on the main page where I want to call it. I call on it like this: Code:

<a href="#" id="cool">Edit general info</a>

However this only works if it's on the main page, not when I have it on my js page. So what I want to do is to turn it into a function, because that I know works.

Could anyone help me with this?

Thanks in advance for your time!

I followed the tutorial below and got my image fade to work:
http://clagnut.com/sandbox/imagefades/

Now I want to have text become visible once the fade is done. I can't get it to work.

style portion:

.enhanced {
visibility:hidden;
}

javascript functions:

<script language="javascript">
document.write("<style type='text/css'> ##thephoto {visibility:hidden;} </style>");
window.onload = function() {initImage()};
function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999pacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 150);
}
if (opacity = 100) {
textId = 'enhanced';
text = document.getElementById(textId);
text.style.visibility="visible";
}
}
}
</script>

I have added this to the last function:

if (opacity = 100) {
textId = 'enhanced';
text = document.getElementById(textId);
text.style.visibility="visible";
}

But the text appears instantly.

Hello,

To start I want to say I'm a newbie at coding/programming and all that so I would appreciate a lot if the explanations would be more thorough. I have a wordpress website (so i guess it can run javascript) and I want to create these tables where certain rows could be clicked and would expand for more information, I made an image for an illustration http://i44.tinypic.com/hurdoz.png . I would so appreciate any help that could tell simple steps how to achieve this, I guess this is a trivial problem to some of you but to me.. i don't know where to begin so yeah, I'm waiting for anything :]

Hi All,
I am using jFlow slider for my website and in the head there is that function
<script type="text/javascript">
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "706px",
height: "420px",
duration: 500,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</script>

What i want to do is detect the browser window (max width 1024 ) and change the width and height attribute of this function...something like this :

<SCRIPT language="JavaScript">
<!--
if ((screen.width<=1024) && (screen.height<=768))
{
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "706px",
height: "420px",
duration: 500,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
}
else
{
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "706px",
height: "420px",
duration: 500,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
}
//-->
</SCRIPT>


But can't get this to work...any help please??

//Sam