Category: Web Browsers


jQuery Gloss Plugin

17th January

It’s lovely to make you webpage interactive. jQuery plugins add effects to multiple elements of HTML. jQuery Gloss adds a Gloss (shining) effect to images by simple and lightweight code.

This effect is added on hover effect (mouseover, mouseout).

This plugin is ~2.2 Kb and it’s simple as:

Add a DIV element to hold the image with class=”gloss”. eg:
<div class=”gloss”><img src=”” alt=”Image gloss effect” /></div>
Include the script file of jQuery Gloss plugin. eg:
<script type=”text/javascript” src=”gloss.1.0.js”></script>
Call the Gloss function. eg:
<script type=”text/javascript”>$(document).ready(function (){ $.gloss(); });</script>
OR
add this before </body>: <script type=”text/javascript”> $.gloss();  </script>

Resources:

jQuery Plugins: plugins.jquery.com/project/gloss
Source & Demo: www.freelancer-id.com/gloss


Apply a custom font to your website, Works on all Browsers

Posted by Alaa Badran in Browsers, CSS, Design, Free Stuff, HTML, Web Browsers, XHTML. 11 comments

2nd June

For web developers and web designers who want to add their FONT to websites without using Standard Web Fonts and without making text as images.

Google has create a Google Font API for public use to give web developers and web designers the ability to use extra fonts on the web, not only the standard web fonts.


jQuery Animate – Advanced

24th September

In the last jQuery Animate article I wrote, I mentioned how to use the .animate() function with few tricks.

But here, I am going to write about jQuery Animate function in general and I will explain few things and some tricks.

The jQuery Animate is a smart object because could be used at any syntax.
I mean,
We can use the default syntax of this function as follow:

$().animate({
/* params */ },
/* integet time period in milliseconds */
);


jQuery: Catch Keyboard Events

18th June

Lot of jQuery projects relies on keyboard/mouse event like pressing “p” for previous and “n” for next also using the arrows.

Because this is important, I have managed a code to get the keyboard character on 3 events:
– Keypress
– Keyup
– Keydown

I have created a function to return the key as below:

function getKey(key){
if ( key == null ) {
keycode = event.keyCode; // To Mozilla
} else {
keycode = key.keyCode;
}
// Return the key in lower case form
return String.fromCharCode(keycode).toLowerCase();
}

Now let’s use the events:

/*Keypress*/
$(document).keypress(function (eh){
alert(“Keypress: The key is: “+getKey(eh));
});

/*Keyup*/
$(document).keyup(function (eh){
alert(“Keyup: The key is: “+getKey(eh));
});

/*keydown*/
$(document).keydown(function (eh){
alert(“Keydown: The key is: “+getKey(eh));
});

To see an exaple of this code, please check the … Read More »


Scroll window smoothly using jQuery

26th March

Using jQuery animate() function to do a smooth scrolling:

I have also created a div as follow:

<div id=”scrollToHere”>
Scroll to here
</div>

You need something to run your script. Create a button like this:

<input type=”button” onclick=”scollWin();” value=”Scroll up” />

The jQuery Code will be like this:

function scrollWin(){
$(‘html,body’).animate({
scrollTop: $(“#scrollToHere”).offset().top
}, 800);
}

Here is something to try:

now jQuery window scrolling is done with animation.

Enjoy it..