extended message box , how to do that ?

[masarat]

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

[zaphod42]

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?

[masarat]

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

[Markus]

I'd suggest having a look at some of the javascript frameworks as most give you this sort of functionality plus much more!

[zaphod42]

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:)...

popUpMsgObj=false
myPopUps=new Object()
//Messages should be named the same as the inputs they are mapped to
myPopUps.Messages={
    postTitle:'this is a help message for the title',
    postBody:'this is a help message for the body'
}
function gebi(id){return document.all?document.all[id]:document.getElementById(id)}
function helpMessage(el){
    if(!el.popUpMsg && !popUpMsgObj[el.id]){
        if(popUpMsgObj){
            var tmpEl=popUpMsgObj.el
            clearInterval(tmpEl.popUpInt);
            tmpEl.popUpInt=false;
            document.body.removeChild(popUpMsgObj);
            tmpEl.popUpMsg=false;
            popUpMsgObj=false
        }
        el.popUpMsg=newPopUp(el)
        popUpMsgObj=el.popUpMsg
        openNewPopup=function(){openPopup(el.popUpMsg)}
        el.popUpInt=setInterval("openNewPopup()",0)
    }
}
function newPopUp(el){
    var popup=document.createElement('div')
    popup.style.position='absolute'
    popup.style.top=el.offsetTop+'px'
    popup.style.left=(el.offsetLeft+el.offsetWidth)+'px'
    popup.style.width=0
    popup.style.overflow='hidden'
    popup.content=document.createElement('div')
    popup.content.className='myPopupClass'
    popup.content.style.position='absolute'
    //popup.content.style.width=myPopUps.Styles.width+'px'
    //popup.content.style.height=myPopUps.Styles.height+'px'
    popup.content.innerHTML=myPopUps.Messages[el.id]
    popup.appendChild(popup.content)
    popup.el=el
    document.body.appendChild(popup)
    popup.style.height=popup.content.offsetHeight+'px'
    return(popup)
}
function openPopup(o){
    var popup=o
    if(popup.offsetWidth>popup.content.offsetWidth){
        clearInterval(popup.el.popUpInt)
    }else{
        popup.style.width=(popup.offsetWidth+10)+'px'
    }
}

[HTML]<input id="postTitle" name="postTitle" onmouseover="helpMessage(this)" /><br />
<input id="postBody" name="postBody" onmouseover="helpMessage(this)" />[/HTML]

[Markus]

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.

[zaphod42]

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:)

[masarat]

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

 
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
 
    $("button").click(function () {
      $("p").show("slow");
    });
 
  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button>Show it</button>
  <p style="display: none">Hello</p>
</body>
</html>
 
 

[acoder]

Use focus() in place of click().