We accept safe and secure Credit Card and PayPal Payments.
 
Perl Scripts

All Count
Attachment Mailer
Perl Scripts Build A FAQ Plus
Perl Scripts Clock In Center
eBackup Automated
Easy Poll
eSurvey
Fetch a File
Form Maker
Mailing List Server
MySQL Mate
PDF Creation
QCart
Quick Fix
Quote of the day
Speed Search
Task Manager
Traffic Pack
Upload Plus
Upload Gold
Upload Pro
Website Manager

 
Free Perl Downloads

Free Perl Scripts Main Page
Free Perl Scripts 404 Alerter
AccessLog Viewer
Build A FAQ
PHP Scripts eBackup
Free PHP Scripts ErrorLog Viewer
eVars - Server Info
HT Pass Creator
Upload Lite
Website Manager

 
JavaScripts

Free Java Scripts Alert Boxes
Free JavaScripts Browser Sniffer
Check email
Generators
Slide Show
Sudoku
Window Maker
More...

 
Extra Utilities

ASP Scripts Ascii Codes
Free ASP Scripts Color Picker
Font Finder
HT Pass Creator
Meta Cloak
Meta Magic
Pano Zooms
SlideShow
Server Size

 
Online Tutorials

Free HTML Scripts Glossary
Free HTML Scripts HTML
JavaScript
MySQL
SSI
Build Traffic
Other

 
Miscellaneous

About Us
Graphics
Testimonials
Installations
Latest versions

 
Hawk Eye in Tennis

Should Hawk Eye replace linesmen and lineswomen at all tennis tournaments?







 
View all Polls

Run Polls on your site

Run your own Surveys

 
Store Download FAQs Contact Us Support Programming Policies  
Miscellaneous     List of Categories

  1. How do I scroll to the very top of a page?

  2. How do I make a link void of any action?

  3. How do I nest quotes without JavaScript causing a runtime error?

  4. How do I hide select menus when using layers?

  5. How do I find an element's position on a page?







  1. How do I scroll to the very top of a page?

    Using the scrollTo() method which accepts two arguments. Horizontal and vertical pixel positions. Eg. to scrol to the very top :

    <a href="javascript:scrollTo(0,0);">

    Or to scroll to any part of a page, enter the pixel co-ordinates. scrollTo(10,175)

    Top of Page



  2. How do I make a link void of any action?

    By using the void() function. Using it in a href tag will cause the link to do nothing, you could then use the onclick event handler to execute another function. Eg.

    <a href="void(0);" onclick="alert('Hello')">

    Top of Page



  3. How do I nest quotes without JavaScript causing a runtime error?

    You must escape them or alternate between single and double quotes. Take a look at the first example which uses alternating quotes.

    <a href='#' onclick="alert('Hello')">About </a>

    The following example uses the escape character (\) to let the JavaScript engine know that we want the quote printed and is not part of the syntax.

    <a href='#' onclick="alert('How\'s your day?')">About </a>

    Quotes can be escaped numerous times in any one statement. If you forget to escape your quotes, your scripts will fail. Take a look at this stipped down example :

    'You\'re day\'s going well?'

    Sometimes you need to print double quotes, in this case, you'd use something like the following :

    "Click the link that says \"Start\""

    Top of Page



  4. How do I hide select menus when using layers?

    When using div tags that scroll in any direction, select menus or drop down menus, and in some cases other form fields, remain at the top most layer of the rendered page, or above layers and div tags. This is true for for Internet Explorer 6 and earlier anyway. The latest version of Firefox, and the Mozilla engine (which also powers Netscape and a few other browsers) does not inherit this problem.

    There are two methods you can use to solve the problem of select menus above layers in Internet Explorer. Between the two, you should be able to form a solution for your layers below select menu problem.

    1. Use an <iframe> tag. iframes are rendered even higher than select menus in the layer array. So you could create an empty iframe inside your div tag, set it's position to absolute, and it's z-index to -1. Then, create a nested div tag inside your outer layer and set it's position to absolute also, but it's z-index to 1 or greater. Then position it's left and top co-ordinates so that it rests above the iframe. Here's an example of the code you could place inside your layer to cover select menus, form elements and possibly all other elements:

    <iframe width="890" height="550" style="position: absolute; top 0px; left: 5px; z-index: -1;" frameborder="0"></iframe>

    Then position the elements of your layer, in a nested layer, so they rest above the iframe, like such:

    <div style="position: absolute; z-index: 2;">

    Your layer's elements here.

    </div>

    The above solution will cover all form elements in IE.

    2. Hide all select menus by changing their visibility from visible to hidden, then back again as required. Here's an example of how to hide all select menus found on a page and how to restore them, so that your layer's content can appear uninterupted. You'd call the first function to hide all select menus, and the second to restore their visibility.

    <script>
    function hideSelect(){
     for (var i = 0; i < document.all.length; i++) {
      o = document.all(i);
      if (o.type == 'select-multiple') {
       if (o.style) o.style.display = 'none';
      }
      if (o.type == 'select-one') {
       if (o.style) o.style.display = 'none';
      }
     }
    }

    function restoreSelect(){
     for (var i = 0; i < document.all.length; i++) {
      o = document.all(i);
      if (o.type == 'select-one') {
       if (o.style) o.style.display = '';
      }
      if (o.type == 'select-multiple') {
       if (o.style) o.style.display = '';
      }
     }
    }
    </script>


    Top of Page



  5. How do I find an element's position on a page?

    This JavaScript will give you the position of any element on a page, whether you're looking for the left pixel, top pixel, bottom pixel or right pixel position of the element. The script can be called using any event such as onmouseover, onclick, onkeypress, etc. It makes use of the event object to backtrack up the document tree using the offsetParent, offsetLeft and offsetTop properties. Additionally, the offsetWidth and offsetHeight properties are used to compute the elenet's pixel right and pixel botom positions.

    The script is supported by all major browsers including Mozilla Firefox and Microsoft Internet Explorer. It will return either the pixel positions of any element on a page, whether the user has scrolled down a page or not. You do not need to define element IDs nor positions if using event handlers.

    The following two functions backtrack through the document's object model, computing the top and left position of each element copy and paste these two functions to your document.

    <script type="text/javascript">
    function getPageOffsetLeft(el){
    	var x = 0;
    	
    	if(el){
    		if(el.offsetLeft != null){
    			x = el.offsetLeft;
    			if(el.offsetParent != null){
    				x += getPageOffsetLeft(el.offsetParent);
    			}
    		}
    	}
    	return x;
    }
    
    function getPageOffsetTop(el){
    	var y = 0;
    	if(el){
    		if(el.offsetTop != null){
    			y = el.offsetTop;
    			if(el.offsetParent != null){
    				y += getPageOffsetTop(el.offsetParent);
    			}
    		}
    	}
    	return y;
    }
    </script>
    To call the above functions, you must pass in a reference element as an object. That is, the element for which you wish to find the position. For example, if you had an div tag on you page named "divA", you could use :

    myDiv = document.getElementById('divA');

    divLeft = getPageOffsetLeft(myDiv);

    alert(divLeft);


    To get the pixel position of an element from an event, include the following function in your document :

    <script type="text/javascript">
    function getPosFromEvent(event, getEnd){
    	if(event.srcElement){
    		pLeft = getPageOffsetLeft(event.srcElement); 
    		pTop  = getPageOffsetTop(event.srcElement);
    	} else {
    		pLeft = getPageOffsetLeft(event.target); 
    		pTop  = getPageOffsetTop(event.target);
    	}
    	
    	alert("Pixel Left: " + pLeft);
    	alert("Pixel Top: " + pTop);
    }
    
    function getEndPosFromEvent(event){
    	if(event.srcElement){
    		pRight = getPageOffsetLeft(event.srcElement) + event.srcElement.offsetWidth; 
    		pBot  = getPageOffsetTop(event.srcElement) + event.srcElement.offsetHeight;
    	} else {
    		pRight = getPageOffsetLeft(event.target) + event.target.offsetWidth; 
    		pBot  = getPageOffsetTop(event.target) + event.target.offsetHeight;
    	}
    	
    	alert("Pixel Right: " + pRight);
    	alert("Pixel Bottom: " + pBot);
    }
    </script>

    Then to call the above function, you could place the following event handler in any element on your page. For example, you could add the onmouseover event handler to a <td> tag like this :

    <td onmouseover="getPosFromEvent(event);">

    Mouseover to see left and top pixel position of this cell
    Click to see right and bottom pixel position of this cell

    Here's an entire HTML page that will show you the pixel position of all elements within the page whenever you mouseover any one of them.



    Top of Page


Speed Search our site
Linux Hosting Plans from $9.12 per month, includes Plesk Control Panel, MySQL databases, cgi-bin, crontab manager and 50 email accounts.

Survey Software
Create unlimited web based surveys on your website from your website

Discounted Scripts
Subscribe to our periodial newsletter to receive special offers.

Bathroom Hygiene
How often do you thoroughly clean your bathroom?








View all Polls

Run Polls just like this one on your website!


About us | Contact us | Script FAQs | Script Support | Website Hosting | Our Policies | Store | Testimonials
Subscribers log in here. Subscribe to our periodical newsletter for special offers on commercial scripts, hosting, exciting business opportunities, and industry news and events. Our Mailing List Software is powered by Consolidator    
HTML Plain text
©1999 - 2015 All content Copyright PerlScriptsJavaScripts.com Proudly hosted by LinuxHostingPlans.com