Response title
This is preview!
Hi all,
I'm new to jQuery and was wondering if anyone could help me on this problem i have???
I want to update the inner HTML of a div from the contents of a textbox once the user has typed in a letter. I have done it in javascript but want to convert it to jQuery.
Here is what I have done.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("imagepreview").draggable({ containment: '#dragcontainer' });
$("text1preview").draggable({ containment: '#dragcontainer' });
$("text2preview").draggable({ containment: '#dragcontainer' });
$("text3preview").draggable({ containment: '#dragcontainer' });
});
</script>
<SCRIPT TYPE="text/javascript">
<!--
function copyText(e)
{
document.getElementById( e.name + 'preview' ).innerHTML = e.value;
}
//-->
</SCRIPT>
<link href="custDesMod_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("imagepreview").draggable({ containment: '#dragcontainer' });
$("text1preview").draggable({ containment: '#dragcontainer' });
$("text2preview").draggable({ containment: '#dragcontainer' });
$("text3preview").draggable({ containment: '#dragcontainer' });
});
</script>
<SCRIPT TYPE="text/javascript">
<!--
function copyText(e)
{
document.getElementById( e.name + 'preview' ).innerHTML = e.value;
}
//-->
</SCRIPT>
<link href="custDesMod_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="head"></div>
<div id="main">
<div id="custDesMod">
<div id="menu">
<div id="text">Text <input name="text1" type="text" onKeyUp="copyText(this)"></div>
<div id="text">Text <input name="text2" type="text" onKeyUp="copyText(this)"></div>
<div id="text">Text <input name="text3" type="text" onKeyUp="copyText(this)"></div>
<div id="imgUpload">
<FORM encType="multipart/form-data" method="post" action="my_upload.php">
Photo<br>
<INPUT size="30" type="file" name="image"><br>
<INPUT value="Upload" type="submit" name="upload">
</FORM>
</div>
</div>
<div id="container">
<img class="containerBgImg" src="products/blank_mug_left.jpg">
<div id="dragcontainer">
<div id="image1preview" class="Drag">img1</div>
<div id="text1preview" class="Drag">tb1</div>
<div id="text2preview" class="Drag">tb2</div>
<div id="text3preview" class="Drag">tb3</div>
</div>
</div>
</div>
</div>
</body>
</html>
<div id="main">
<div id="custDesMod">
<div id="menu">
<div id="text">Text <input name="text1" type="text" onKeyUp="copyText(this)"></div>
<div id="text">Text <input name="text2" type="text" onKeyUp="copyText(this)"></div>
<div id="text">Text <input name="text3" type="text" onKeyUp="copyText(this)"></div>
<div id="imgUpload">
<FORM encType="multipart/form-data" method="post" action="my_upload.php">
Photo<br>
<INPUT size="30" type="file" name="image"><br>
<INPUT value="Upload" type="submit" name="upload">
</FORM>
</div>
</div>
<div id="container">
<img class="containerBgImg" src="products/blank_mug_left.jpg">
<div id="dragcontainer">
<div id="image1preview" class="Drag">img1</div>
<div id="text1preview" class="Drag">tb1</div>
<div id="text2preview" class="Drag">tb2</div>
<div id="text3preview" class="Drag">tb3</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the style sheet custDesMod_style.css
#main{
width: 550px;
}
#custDesMod {
}
#menu {
float: left;
}
#imgUpload{
}
#container {
width: 240px;
height: 240px;
position: relative;
float: right;
border-color: #999999;
border-style: solid;
border-width: 1px;
}
.containerImg {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
#dragcontainer {
width: 130px;
height: 165px;
position: relative;
float: right;
right: 25px;
top: 30px;
}
.Drag {
width: 100%;
cursor: move;
}
#image1preview {
width:auto;
background-color: silver;
z-index: 1;
position: absolute;
}
#text1preview {
width: auto;
padding: 0 0 0 0;
background-color: #00FFFF;
z-index: 2;
position: absolute;
}
#text2preview {
width: auto;
padding: 0 0 0 0;
background-color: #CCFF00;
z-index: 3;
position: absolute;
}
#text3preview {
width: auto;
padding: 0 0 0 0;
background-color: #FF99FF;
z-index: 4;
position: absolute;
}
width: 550px;
}
#custDesMod {
}
#menu {
float: left;
}
#imgUpload{
}
#container {
width: 240px;
height: 240px;
position: relative;
float: right;
border-color: #999999;
border-style: solid;
border-width: 1px;
}
.containerImg {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
#dragcontainer {
width: 130px;
height: 165px;
position: relative;
float: right;
right: 25px;
top: 30px;
}
.Drag {
width: 100%;
cursor: move;
}
#image1preview {
width:auto;
background-color: silver;
z-index: 1;
position: absolute;
}
#text1preview {
width: auto;
padding: 0 0 0 0;
background-color: #00FFFF;
z-index: 2;
position: absolute;
}
#text2preview {
width: auto;
padding: 0 0 0 0;
background-color: #CCFF00;
z-index: 3;
position: absolute;
}
#text3preview {
width: auto;
padding: 0 0 0 0;
background-color: #FF99FF;
z-index: 4;
position: absolute;
}
My idea is to be able to click a text box and take the name it and pass it to the function to concat with string 'preview' to get the name of the div I want to update.
And as you can tell i want to then be able to allow the user to position the div within a container.
Any help is welcomed!!
:)
1