homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to set new content beside input field?
toplisek




msg:4409633
 4:33 pm on Jan 22, 2012 (gmt 0)

How to set new content beside input field using jQuery.

Check sample textarea like:
<!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" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div>
<textarea required="" onchange="handleInput(this);" onkeyup="handleInput(this); " tabindex="6" cols="30" rows="15" class="" name="" id=""></textarea>

</div>
</body>

</html>

How to set jQuery trigger for this?
Example: when user moves inside input field it will show him on the right hand side also some bordered content.

 

ZakAltF4




msg:4410339
 5:10 pm on Jan 24, 2012 (gmt 0)

I am not sure what you are tying, but if I understand correctly, could you not do something like this?



<head>
< INCLUDE FOR JQUERY LIBRARY >


<script>
function handleInput(){
var my_txt;
my_txt = document.getElementById('TxtIn').value;
document.getElementById('label').innerHTML = my_txt;
}
</script>


</head>

<body>
<textarea required="" onchange="handleInput();" onkeyup="handleInput(); " tabindex="6" cols="30" rows="15" class="" name="TxtIn" id="TxtIn"></textarea> <span id="label"></span>
</body>




You can do nearly anything with SPAN label at this point ...

append:

$('#label').append('<span style="....." .... ');

show/hide:

$('#label').fadeIn('fast');

replace html contents of

$("#label).html('');

change CSS ...

$("#label).css('backgroundColor','#ffffff');


pretty powerful stuff


-- Zak

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved