FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


A Useful Javascript





ahs2k
Below is a CSS Javascript that I found very useful to my website.
It adds a 'fisheye' effect to your text.
Move your mouse over the text and watch it change from big to small.
It's implemented using JavaScript and CSS.



CSS: Fisheye


This code is divided into TWO parts. The following part is to be copied into the HEAD of the HTML document.

Code:
<style type="text/css">

  span {font-size: x-small}

</style>



<SCRIPT LANGUAGE="JavaScript">


<!-- Begin

function convertPreBlocks() {}

var regular = "x-small";

function bigger(thing){

   thing.style.fontSize = "large";

   siblingElement = thing.previousSibling;

   while(siblingElement) {

      if(siblingElement.tagName=="SPAN") {

         siblingElement.style.fontSize = "medium";

         break;

      }

      siblingElement = siblingElement.previousSibling;

   }

   siblingElement = thing.nextSibling;

   while(siblingElement) {

      if(siblingElement.tagName=="SPAN") {

         siblingElement.style.fontSize = "medium";

         break;

      }

      siblingElement = siblingElement.nextSibling;

   }

}

function normal(thing){

   thing.style.fontSize = regular;

   siblingElement = thing.previousSibling;

   while(siblingElement) {

      if(siblingElement.tagName=="SPAN") {

         siblingElement.style.fontSize = regular;

         break;

      }

      siblingElement = siblingElement.previousSibling;

   }

   siblingElement = thing.nextSibling;

   while(siblingElement) {

      if(siblingElement.tagName=="SPAN") {

         siblingElement.style.fontSize = regular;

         break;

      }

      siblingElement = siblingElement.nextSibling;

   }

}

//  End -->

</script>


The next part, is to be copied into the BODY of the HTML document.

Code:
The Geek's Raven<br />

[An excerpt, with thanks to Marcus Bales]

<br /><br />

<span onmouseover="bigger(this)" onmouseout="normal(this)">Once upon a midnight dreary,</span><br/>

<span onmouseover="bigger(this)" onmouseout="normal(this)">fingers cramped and vision bleary,</span><br/>

<span onmouseover="bigger(this)" onmouseout="normal(this)">System manuals piled high and wasted paper on the floor,</span><br/>

<span onmouseover="bigger(this)" onmouseout="normal(this)">Longing for the warmth of bedsheets,</span><br/>

<span onmouseover="bigger(this)" onmouseout="normal(this)">Still I sat there, doing spreadsheets:</span><br/>

<span onmouseover="bigger(this)" onmouseout="normal(this)">Having reached the bottom line,</span><br/>

<span onmouseover="bigger(this)" onmouseout="normal(this)">I took a floppy from the drawer.</span><br/>

<span onmouseover="bigger(this)" onmouseout="normal(this)">Typing with a steady hand, I then invoked the SAVE command</span><br/>

<span onmouseover="bigger(this)" onmouseout="normal(this)">But got instead a reprimand: it read "Abort, Retry, Ignore".</span><br/>



*** Please edit the words accordingly. ***

===== For any questions, please reply to this post. Thanks. =====
orno
i personally don't like fancy mouseover effects etc, but just as a suggestion, next time, link to a page where theres an actual example of the effect so that users could get a look at it before using it Smile
kv
I second it. Providing a sample page link is very useful. I don't have to try all that code myself and get it working, just to see that I didn't like the result.
digibluez
onMosueover effects,i would use then,but haven't found any good one yet.If i want a mouseover,i use it on images and links only.And it dont requiere any javascript.
You have to remember that some users have ti disabeld.And thereis this new addon for firefox too now.Bah.
charliehk
If you change the size of text onMouseOver, there will be a displacement (movement) of text.

I think onMouseOver effect for text is useful if you place your cursor over a term and it pops up a small window (not really a window) showing the description of text.
Related topics
resolution detection with javascript
Spanish Javascript Tutorial
Java tutorials
[JS]Some must have Javascript and related stuffs-updated!!!!
Check if the client has JavaScript enabled
CSS/HTML
Hover Buttons Completely with CSS
JavaScript useful links
Embed Javascript for Alert and self.close in C# .NET
Expanding Javascript+CSS List
javascript problem
Which do you prefer ASP,ASP.NET,PHP,JSP?
If u can read Chinese
Code snippet
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.