Coded-Codes101: onmouseover

Showing posts with label onmouseover. Show all posts

Monday, January 10, 2011

GridView Row Highlighting on Mouseover

spgv.RowCreated += new GridViewRowEventHandler(spgv_RowCreated);

void spgv_RowCreated(object sender, GridViewRowEventArgs e)
   {
   // only apply changes if its DataRow
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
   // when mouse is over the row, save original color to new attribute, and change it to highlight yellow color
   e.Row.Attributes.Add("onmouseover",
   "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#EEEEEE';this.style.cursor='pointer'");

   // when mouse leaves the row, change the bg color to its original value
   e.Row.Attributes.Add("onmouseout",
   "this.style.backgroundColor=this.originalstyle;this.style.cursor='default'");

   // on click row, go to item detail
   e.Row.Attributes.Add("onclick", "javascript:location.href='" + ((DataRowView)e.Row.DataItem).Row.ItemArray.GetValue(6) + "'");
   }
   }

Wednesday, December 9, 2009

Sliding Javascript Menu (onmouseover)

A/N: There is a simpler way of achieving this effect - using JQuery. See post here.

Code is a modification of the one found in http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/

(Demo)

<!DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sliding popup menu</title>

<style
type="text/css">

.dropdown
div {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
</style>

<script
type="text/javascript">

var DDSPEED = 10;

var DDTIMER = 15;

// main function to handle the mouse events //

function menuEvent(id, d) {

var h = document.getElementById(id + '-header');

var c = document.getElementById(id + '-content');
clearInterval(c.timer);

if (d == 1) {
clearTimeout(h.timer);

if (c.maxh && c.maxh <= c.offsetHeight) { return }

else
if (!c.maxh) {
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function() { ddSlide(c, 1) }, DDTIMER);
}

else {
h.timer = setTimeout(function() { ddCollapse(c) }, 5000);
}
}

// collapse the menu //

function ddCollapse(c) {
c.timer = setInterval(function() { ddSlide(c, -1) }, DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //

function cancelHide(id) {

var h = document.getElementById(id + '-ddheader');

var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);

if (c.offsetHeight < c.maxh) {
c.timer = setInterval(function() { ddSlide(c, 1) }, DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //

function ddSlide(c, d) {

var currh = c.offsetHeight;

var dist;

if (d == 1) {
dist = (Math.round((c.maxh - currh) / DDSPEED));
} else {
dist = (Math.round(currh / DDSPEED));
}

if (dist <= 1 && d == 1) {
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';

if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
clearInterval(c.timer);
}
}
</script>
</head>
<body>

<div
class="dropdown">

<a
id="Menu-header"
onmouseover="menuEvent('Menu',1)"
onmouseout="menuEvent('MASMenu',-1)">
Hover to display menu >>

</a>

<div
id="MASMenu-content"
style="display:none;"

onmouseover="cancelHide('MASMenu')"
onmouseout="menuEvent('MASMenu',-1)">

<ul>

<li><a
href="#">Navigation Item 1</a></li>

<li><a
href="#">Navigation Item 2</a></li>

<li><a
href="#">Navigation Item 3</a></li>

<li><a
href="#">Navigation Item 4</a></li>

<li><a
href="#">Navigation Item 5</a></li>

</ul>

</div>
</div>
</body>
</html>

Friday, April 10, 2009

OnMouseOver Event: Show Text

Context: You have a text link and when the mouse pointer is over that link, there is a pop-up by the side that shows description of the link.

The idea is that each link has a Javascript mouseover event, which is defined to set the visibility of a division (div) to true. This is a very neat trick using CSS. Codes from this post are obtained from TechnoRealm. You can find more free Javascripts there!

1) Javascript function

2) Set the display DIV style and positioning in the CSS file

<style type="text/css">#div1, #div2, #div3 {position:absolute; top: 100; left: 200; width:200; visibility:hidden}</style>

3) HTML Code for the links

<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)">Link 1!</a> <a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)">Link 2</a> <a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)">Link 3</a>

4) Text within the DIV tags

<div id="div1">Link 1 text! I've restrained the div size to 200px wide in the style declaration. Modify this to suit yourself.</div> <div id="div2">Link 2 text! You can add all the usual style options, and position it to suit yourself!</div> <div id="div3">Link 3 text! Use it to explain terms or further describe your linked pages, whatever!</div>

Coded-Codes101

Monday, January 10, 2011

GridView Row Highlighting on Mouseover

Wednesday, December 9, 2009

Sliding Javascript Menu (onmouseover)

Friday, April 10, 2009

OnMouseOver Event: Show Text

Topics

Contributors

Followers