By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,028 Members | 1,945 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,028 IT Pros & Developers. It's quick & easy.

extended message box , how to do that ?

P: 3
hello

this is my first time here , i used to enter your site and read the quistions and your answer , but this time i have a quistion , hoping that you will help me

i am new to javascript and DHTML , i want to make a help message [ using message box modle] that appear when user put the mouse in a text box within fourm , but i want this message to appear slowly from left to right [extended from the text box ] until the whole message appear , any idea to start with will be great .

thanx alot
Oct 21 '08 #1
Share this Question
Share on Google+
8 Replies


P: 55
hmmmmm message box model? "extend"...do you want it to slide out as if from under the text box, or grow, like reveal the text from left to right.....and by slowly....how slowly?
Oct 21 '08 #2

P: 3
hello

thanx for replaying , i want it to slide from the text box so doesn't appear in one time , it just look as it's width grown until the whole width appear
Oct 21 '08 #3

Markus
Expert 5K+
P: 6,050
I'd suggest having a look at some of the javascript frameworks as most give you this sort of functionality plus much more!
Oct 21 '08 #4

P: 55
Markus is right, you should definitely look into some frameworks, but since you said it's for a forum, this should work for what you need, but again....if you plan to continue enriching your website with javascript functionality....it would be a good idea to get something that does more:)

Like I said earlier Masarat, if you have questions about this just send me another message:)...

Expand|Select|Wrap|Line Numbers
  1. popUpMsgObj=false
  2. myPopUps=new Object()
  3. //Messages should be named the same as the inputs they are mapped to
  4. myPopUps.Messages={
  5.     postTitle:'this is a help message for the title',
  6.     postBody:'this is a help message for the body'
  7. }
  8. function gebi(id){return document.all?document.all[id]:document.getElementById(id)}
  9. function helpMessage(el){
  10.     if(!el.popUpMsg && !popUpMsgObj[el.id]){
  11.         if(popUpMsgObj){
  12.             var tmpEl=popUpMsgObj.el
  13.             clearInterval(tmpEl.popUpInt);
  14.             tmpEl.popUpInt=false;
  15.             document.body.removeChild(popUpMsgObj);
  16.             tmpEl.popUpMsg=false;
  17.             popUpMsgObj=false
  18.         }
  19.         el.popUpMsg=newPopUp(el)
  20.         popUpMsgObj=el.popUpMsg
  21.         openNewPopup=function(){openPopup(el.popUpMsg)}
  22.         el.popUpInt=setInterval("openNewPopup()",0)
  23.     }
  24. }
  25. function newPopUp(el){
  26.     var popup=document.createElement('div')
  27.     popup.style.position='absolute'
  28.     popup.style.top=el.offsetTop+'px'
  29.     popup.style.left=(el.offsetLeft+el.offsetWidth)+'px'
  30.     popup.style.width=0
  31.     popup.style.overflow='hidden'
  32.     popup.content=document.createElement('div')
  33.     popup.content.className='myPopupClass'
  34.     popup.content.style.position='absolute'
  35.     //popup.content.style.width=myPopUps.Styles.width+'px'
  36.     //popup.content.style.height=myPopUps.Styles.height+'px'
  37.     popup.content.innerHTML=myPopUps.Messages[el.id]
  38.     popup.appendChild(popup.content)
  39.     popup.el=el
  40.     document.body.appendChild(popup)
  41.     popup.style.height=popup.content.offsetHeight+'px'
  42.     return(popup)
  43. }
  44. function openPopup(o){
  45.     var popup=o
  46.     if(popup.offsetWidth>popup.content.offsetWidth){
  47.         clearInterval(popup.el.popUpInt)
  48.     }else{
  49.         popup.style.width=(popup.offsetWidth+10)+'px'
  50.     }
  51. }
[HTML]<input id="postTitle" name="postTitle" onmouseover="helpMessage(this)" /><br />
<input id="postBody" name="postBody" onmouseover="helpMessage(this)" />[/HTML]
Oct 21 '08 #5

Markus
Expert 5K+
P: 6,050
Zaphod, the idea of this forum is that questions are posted in the forum. Otherwise, what is the point? We could just have an PMing system for people to discuss questions.

Now, I have noticed you're a very helpful contributor, so it makes sense for you to answer questions posted in the forums as these answers generate more google links.

Please do not reply to people who PM you with questions, but redirect them to post in the relevant forum.

Thanks for your time, Zaphod.
Oct 21 '08 #6

P: 55
sorry Markus:) For everyone elses benefit:

Masarat said he has a forum, and he wants a "help box" to pop up from the input fields, he plans to use css to style the message, and the above code should be able to handle it cross-browser....you'll notice a couple lines commented out, 35 & 36, where I use "myPopUps.Styles". That is how I usually handle my styles since I don't use much css...if anyone else would like to use this and has problems I'm happy to help implement:)
Oct 22 '08 #7

P: 3
hello

thanx alot zaphod 42 and markus for your replay , really thank you alot.

but i am still having the problem , i found a piece of code that do something like what i want , but what i found it is work on button click i want to do the same but in form text box "onfocus" so can you plz help me in that?

this is the piece of code that i found it

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3. <head>
  4.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  5.  
  6.   <script>
  7.   $(document).ready(function(){
  8.  
  9.     $("button").click(function () {
  10.       $("p").show("slow");
  11.     });
  12.  
  13.   });
  14.   </script>
  15.   <style>
  16.   p { background:yellow; }
  17.   </style>
  18. </head>
  19. <body>
  20.   <button>Show it</button>
  21.   <p style="display: none">Hello</p>
  22. </body>
  23. </html>
  24.  
  25.  
Oct 25 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Use focus() in place of click().
Oct 27 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.