logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 06-24-2009, 11:40 AM   #1
swetha123
 
Join Date: Oct 2008
Posts: 17
Default call the javascript function with in script

hello,

I need to display some dynamic text for large images when user hover overs on thumbnails

it is fine working for me when i don't call a function
I commented the code which should be called as a function in the test.js file
I want a function to be called there and display the text in the <div id="text"></div>

hope you understood my problem here is the code

test.html

Code:
<html>
<head>
<script src="test.js" type="text/javascript"></script>
<script type="text/javascript">
function mover(id)
{
document.getElementById("large").innerHTML='<img src="/swetha_static_projects/sample/images/large/'+id+'.jpg"/>';
document.getElementById("text").innerHTML= "call the javascript function txt(id) here which is in test.js file instead writing the commented code below";
/*var ch =id ;
if (document.getElementById(ch))
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="text.php"
url=url+"?x="+id
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
 if (xmlHttp.readyState==4  xmlHttp.readyState=="complete")
 { 
document.getElementById("text").innerHTML=xmlHttp.responseText
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
 try
 {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
}
return xmlHttp;
}*/
}
</script>

</head>
<body>
<div id="content-wrapper">      
   <ul>     
     <li><a href="javascript:msg('gallery')" id="gallery"> Gallery </a></li>      
   </ul>   
  <div id="main-content"> </div> 
  </div>
</body>
</html>
here is my test.js code

Code:
function txt(x)
{ 
var ch =x ;
if (document.getElementById(ch))
{ 
 //alert(ch);
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="text.php"
url=url+"?id="+x
xmlHttp.onreadystatechange=stateChanged1 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}

function stateChanged1() 
{ 
 if (xmlHttp.readyState==4  xmlHttp.readyState=="complete")
 { 
document.getElementById("main-content").innerHTML=xmlHttp.responseText
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
 try
 {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
}
return xmlHttp;
}
here is the text.php

Code:
<html>
<head>
</head>

<body>
<?php
$id=$_GET['x'];
$myFile = $id.".html";
$fh = fopen($myFile, 'r');
$text = fread($fh, filesize($myFile));
fclose($fh);
echo $text;
?>
</body>
</html>
here is gallery.html

Code:
<html>
<head>
<style type="text/css">
<!--
#container {
height: 350px;
width: 516px;
background-color:#000;
margin-top:0px;
}
#thumb {
margin-left:8px;
 height: 200px;
width:50px;
cursor:pointer;
}
#large 
{
height:300px;
width:445px;
float:right;
margin-top:-190px;
margin-right:2px;
text-align:center;
/*padding:6px 0px 0px 0px;*/
}
#text 
{
height:25px;
width:350px;
text-align:center;
margin-top:-25px;
margin-right:80px;
float:right;
background-color:#000;
color:#FFF;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="thumb">  
  <img src="/swetha_static_projects/sample/images/thumb/001.jpg" width="50px" height="38px" id="001"
  onmouseover="mover('001');" style="margin-top:25px;" alt="swe" title="s"/><br/>

  <img src="/swetha_static_projects/sample/images/thumb/002.jpg" width="50px" height="38px" id="002"
  onmouseover="mover('002');" style="margin-top:4px;"/><br/>
  
  <img src="/swetha_static_projects/sample/images/thumb/003.jpg" width="50px" height="38px" id='003'
  onmouseover="mover('003');" style="margin-top:4px;"/><br/>

  <img src="/swetha_static_projects/sample/images/thumb/004.jpg" width="50px" height="38px" id='004'
  onmouseover="mover('004');" style="margin-top:5px;"/><br/>
  
  <img src="/swetha_static_projects/sample/images/thumb/005.jpg" width="50px" height="38px" id='005'
  onmouseover="mover('005');" style="margin-top:6px;"/>
 </div>
 <div id="large"></div>
  <div id="text"></div>
 
</div>
</body>
</html>
swetha123 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:50 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com