[SOLVED] Easy Question

[gtal3x]

Please go to this page: http://www.eblog.ru/index.php?newsid=2493#comment And scroll down until the bbcode textarea... Now please click at the "Smile", when you click on it there is a little window that pops up with all the smilies... I tried to look at the source code of that page to see how is done but could not find the function thats pops up that little window... basicly my code is:

<div class="menu" id="b_emo" onmouseover="change('b_emo', 'menuh');" onmouseout="change('b_emo', 'menu');" onClick="Javascpt Some Function...........)">
<img title="Smiles"  border="0" SRC="images/bbcode/emo.gif" align="center">
</div> 
</td> 

Can anyone tell me how to do it? I wont it to popup excaly like in that page and not anywere in the page

Thanks in advance!

 

[phpQuestioner]

try something like this:

 

<script language="javascript"> 

function showSmileys(section)
{
document.getElementById(section).style.display='block';
document.getElementById('emoticons').onclick=function() {
  hideSmileys(section);
}
}

function hideSmileys(section)
{
document.getElementById(section).style.display='none';
document.getElementById('emoticons').onclick=function() {
  showSmileys(section);
}
}

</script>

<div style="width:500px;height:30px;background:gray;display:block">
<table align=center avalign=middle>
<td>
<img id="emoticons" src="" onclick="showSmileys('smileys')" style="cursor:pointer"><br style="line-height:0.01em" />
<div id="smileys" style="position:absolute;margin:0px;z-index:1000;border:solid 1px black;display:none;background:white;width:150px;height:100px;overflow:auto">
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
add emoticons here<br>
</div>
<td>
</table>
</div>

 

also you will be able to see how they do this if you view the external javascripts - the function you should look for is simpletag().

[gtal3x]

Thanx a lot for your help!!! The script you gave me worked 100% however i changed few parameters so the script can fit to my previous code and its still opens the smilies when i click but it does not close.... can you spot the error? (I will post the hol code incase i did something wrong earlier...)

<style type="text/css"> 
div.menu {
border: 1px solid #CCCCCC; 
} 
div.menuh { 
border: 1px solid black; 
}
</style> 

<script language="javascript"  type="text/javascript">
function change(id, newclass) 
{ 
identity=document.getElementById(id); 
identity.className=newclass; 
}

function showSmileys(section)
{
document.getElementById(section).style.display='block';
document.getElementById('emo').onclick=function() {
  hideSmileys(section);
}
}

function hideSmileys(section)
{
document.getElementById(section).style.display='none';
document.getElementById('emo').onclick=function() {
  showSmileys(section);
}
}

</script>


<td>
<div class="menu" id="b_emo" onmouseover="change('b_emo', 'menuh');" onmouseout="change('b_emo', 'menu');" onclick="showSmileys('emo')" style="cursor:pointer"><br style="line-height:0.01em">
<img title="Smiles"  border="0" SRC="images/bbcode/emo.gif" align="center">
</div> 
</td> 

<div id="emo" style="position:absolute;margin:0px;z-index:1000;border:solid 1px black;display:none;background:white;width:150px;height:100px;overflow:auto">
<table>
<tr>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':request:'); return false;">
<img style="border: none;" alt="request" src="http://www.eblog.ru/engine/data/emoticons/request.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':sad:'); return false;">
<img style="border: none;" alt="sad" src="http://www.eblog.ru/engine/data/emoticons/sad.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':tongue:'); return false;">
<img style="border: none;" alt="tongue" src="http://www.eblog.ru/engine/data/emoticons/tongue.gif" /></a></td></tr>
<tr><td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':wassat:'); return false;">
<img style="border: none;" alt="wassat" src="http://www.eblog.ru/engine/data/emoticons/wassat.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':crying:'); return false;">
<img style="border: none;" alt="crying" src="http://www.eblog.ru/engine/data/emoticons/crying.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':what:'); return false;">
<img style="border: none;" alt="what" src="http://www.eblog.ru/engine/data/emoticons/what.gif" /></a></td>
</tr>
<tr>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':bully:'); return false;">
<img style="border: none;" alt="bully" src="http://www.eblog.ru/engine/data/emoticons/bully.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(''); return false;">
<img style="border: none;" alt="angry" src="http://www.eblog.ru/engine/data/emoticons/angry.gif" /></a></td>
</tr></table>
</div>

Notice i changed the onclick function, the one you wrote was when you click on img, i made it to be in the div because i need it to be there but i guess thats were error is coming from...!

Thanks again man for your time!

[gtal3x]

LoL the error was so stupid, i fixed now. Thanks again!

[phpQuestioner]

yeah I just got a chance to look at it; it was a simple error - had your id name wrong in you JS.

 

this is how it should have been:

 

<style type="text/css"> 
div.menu {
border: 1px solid #CCCCCC; 
} 
div.menuh { 
border: 1px solid black; 
}
</style> 

<script language="javascript"  type="text/javascript">
function change(id, newclass) 
{ 
identity=document.getElementById(id); 
identity.className=newclass; 
}

function showSmileys(section)
{
document.getElementById(section).style.display='block';
document.getElementById('b_emo').onclick=function() {
  hideSmileys(section);
}
}

function hideSmileys(section)
{
document.getElementById(section).style.display='none';
document.getElementById('b_emo').onclick=function() {
  showSmileys(section);
}
}

</script>


<td>
<div class="menu" id="b_emo" onmouseover="change('b_emo', 'menuh');" onmouseout="change('b_emo', 'menu');" onclick="showSmileys('emo')" style="cursor:pointer"><br style="line-height:0.01em">
<img title="Smiles"  border="0" SRC="images/bbcode/emo.gif" align="center">
</div> 
</td> 

<div id="emo" style="position:absolute;margin:0px;z-index:1000;border:solid 1px black;display:none;background:white;width:150px;height:100px;overflow:auto">
<table>
<tr>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':request:'); return false;">
<img style="border: none;" alt="request" src="http://www.eblog.ru/engine/data/emoticons/request.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':sad:'); return false;">
<img style="border: none;" alt="sad" src="http://www.eblog.ru/engine/data/emoticons/sad.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':tongue:'); return false;">
<img style="border: none;" alt="tongue" src="http://www.eblog.ru/engine/data/emoticons/tongue.gif" /></a></td></tr>
<tr><td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':wassat:'); return false;">
<img style="border: none;" alt="wassat" src="http://www.eblog.ru/engine/data/emoticons/wassat.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':crying:'); return false;">
<img style="border: none;" alt="crying" src="http://www.eblog.ru/engine/data/emoticons/crying.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':what:'); return false;">
<img style="border: none;" alt="what" src="http://www.eblog.ru/engine/data/emoticons/what.gif" /></a></td>
</tr>
<tr>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(':bully:'); return false;">
<img style="border: none;" alt="bully" src="http://www.eblog.ru/engine/data/emoticons/bully.gif" /></a></td>
<td style="padding:2px;" align="center"><a href="#" onClick="dle_smiley(''); return false;">
<img style="border: none;" alt="angry" src="http://www.eblog.ru/engine/data/emoticons/angry.gif" /></a></td>
</tr></table>
</div>