Javascript onHover effect ?

[Designer_101]

Hi

I need an onHover effect for a blog. I would like it to look similar in design to daniwebs. (where you roll your mouse over the title and the box appears with the first few lines of text from the topic)

Could anyone suggest some code for this ?
A website that might help ect. ?

I'm starting a course in javascript in may and cant wait to learn however right now, i just need this one block of code, and have no idea how its done.

Thanks in advance

[ccube921]

This would depend on how you intend to display the thread in the first place.

[Designer_101]

Ok for examples sake lets say i have this code on my index page:

<a href='post.php?id=10'>Click Me</a>

I want to add an onHover effect perhaps activating a PHP query.
Selecting the content of the first post on that page. (Leave that to me).

All i need is for someone to show me how to make a function in PHP that collects the query data and shows it in a onHover popup box (like daniwebs)

Any ideas?

[ccube921]

Yes, there is a JS function: document.createElement('div'), so you would contain that in a variable, d for example and then modify the innerhtml (the text you want to go in the div) with DHTML so your code looks like this:

<script type="text/javascript">
function creatediv()
d=document.createElement('div')
d.innerhtml=variable holding the text you wish to display
</script>

[ingeva]

I want to add an onHover effect perhaps activating a PHP query.

I've done this with JavaScript before, and do not believe that you can scedule php from JavaScript, unless you open another URL -- and then you have a communication problem.

I think the easiest way would be to preload a DIV containing the text you want to show. In the style sheet, set the visibility to "hidden" (or display:none) as default. You can load many different DIVS this way (different ID's).

When the mouse hovers over the object, change the style for the DIV. This should be a relatively simple matter. There may be a couple of differences according to the browser in use. You would have to account for that.

Just thought about it: You can use ONE DIV only, and change its contents and visibility, and in addition its position (use the mouse's position as a starting point). In this case, the various texts can be saved as simple JavaScript variables.

[Designer_101]

Thankyou ingeva

But thats really simple
surly other designers would do that instead of writing big amounts of code. This must mean theres a downside right ?

can anyone explain any problems with using onHover events to change the visibility of a div through css visibility of a div ?
If not, then il use that method :D

Thankyou again

[ccube921]

It makes sense, but, I still dont understand, if you are using php to store your threads how do you intend to store the text and display it using JS (unless JS can access mysql or w/e db you use)?

PS I was getting into PHP and was just wondering how you integrate PHP with JS

[Designer_101]

i didnt really think about that bit yet lol. I'm sure theres some way around it :/

[ccube921]

Right, so if you get any leads on that let me know cause I really would love to know (My future projects, which at the moment are just in my head, sort of depend on this)

[Designer_101]

OK lol
No problem. I'l make a note of your username and do some investigating :D

[ingeva]

Thankyou ingeva
can anyone explain any problems with using onHover events to change the visibility of a div through css visibility of a div ?
If not, then il use that method :D

The reason why I didn't go into details was that I haven't been using much JavaScript lately so it's a little rusty.

But make a function like this:

function onoff (id,onoff)
{ if (!GetElementByID(id)) return false;
      GetElementById (id).visibility = onoff;
   return true;
}

If "onoff" is "hidden" the element will still take up place but in your case it must be in a different layer than the main page, so it doesn't matter. The opposite of "hidden" is "visible".

Of course, you need something like this HTML/JavaScript code for the element:

<div id="element" onmouseover ='onoff("element","visible")' onmouseout ='onoff("element","hidden")'>(to be filled by function)</div>

If you want a text variable to fill the box and set the position ov the element, do it like this:

GetElementById (id).innerHTML = text;
     GetElementById (id).style.top = top;
     GetElementById (id).style.left = left;

Of course you need to define the top and left positions. You can probably find a routine for that also, but this function is very browser dependable so you may have to do some studying.

To define text variables in JavaScript from php, do this:

<script type="text/JavaScript">
<?php
echo <<<end
<!--   (Some older browsers and "3C validation requires this)
var baby = "$text1";
var doll = "$text2";
var puppy = "$text3";
var teddy = "$text4";
// -->
</script>

end;
?>

...and you can call the function specifying one of the texts: baby, doll, puppy or teddy.
Since I am multilingual, I sometimes put different language texts in different php include files, so all I need to change for a different language is the name of the include file. But this is outside the scope of this thread .... :)

I recommend the W3schools for help here. Their javascript reference is quite readable, although you need to learn the basics of the language before you get too intimate with the semantics.

I don't know if I can leave an URL here, but if you search for "JavaScript Tutorial" you'll find a link to the W3schhols. W3C is THE authority on web programming standards.

AFTERTHOUGHT:

Since the "visibility" settings can differ between browsers, it might be an idea to use this instead:

function changeStackOrder(layer)
{
    document.getElementById("img1").style.zIndex=layer;
}

"layer" is the layer (or stack) number you want to place the element in. If it's higher than the main page, it will show, and if it's lower (and the main page has an opaque background) it won't. I believe this will work for all browsers that can interpret JavaScript.

[Designer_101]

ingeva thanyou so much
i'l add to your reputation, that was a really good response.
Thankyou for taking the time :)

[pmcd9]

Please help with a similar hover problem I am having.

I have written a CSS hover effect and it works perfectly for me, but I want to add the ability for the hover to sense the edge of the browser and adjust itself to remain inside the browser window at all times much like the hover effect works on this messageboard.

Can this be accomplished with CSS or do I have to resort to JavaScript? In either case I don't know how to go about it and would appreciate the help of the more learned members of this board.

Thank you.

Here is the code I have written...

The HTML

<td width="53"> 
		<div align="center"><a class="thumbnail" href="http://www.yahoo.com" target="_blank"><img src="images/thumbTest_1.jpg" width="50px" height="68px" border="0" />
		<span><img src="images/popoutTest_1.jpg" width="200" height="272" />
        <br />Image Description</span></a>
        </div>
	</td>

And the css

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail
{
position: relative;
z-index: 0;
padding-left:40;
padding-right:40;
}

.thumbnail:hover
{
background-color: transparent;
z-index: 50;
text-decoration: none;
}

.thumbnail span /*CSS for enlarged image*/
{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img /*CSS for enlarged image*/
{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span /*CSS for enlarged image on hover*/
{
visibility: visible;
left: 60px; /*position where enlarged image should offset horizontally */
top: 10px;
}