How do i do this?


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 6 of 6

Thread: How do i do this?

  1. #1
    Join Date
    May 2005
    Posts
    115

    How do i do this?

    How do i do this?
    http://goburo.com/?page_id=2
    Click on the image and an image pops up with the background turning dark without reloading or exiting the page.

    Well i'm not sure is this done with AJAX but sure it's cool. I'm guessing it can be done with a couple of lines of code. What should be the keyword i'm looking for?

  2. #2
    Join Date
    May 2007
    Posts
    6
    Try using the following script and css

    Code:
    <script>
    function maskIt()
    {
         var bodObj=document.getElementsByTagName("body")[0];
         var maskDiv= document.createElement("div"); 
         maskDiv.className="maskClass";
         bodObj.insertBefore(maskDiv,bodObj.childNodes[0]);
    }
    </script>
    Code:
    <style>
    .maskClass {
        z-index:5;
        display:none;
        position:absolute;
        top:0;
        left:0;
        height:inherit;
        -moz-opacity: 0.50;
        opacity:.50;
        filter: alpha(opacity=50);
        background-color:#000000;
    }
    </style>
    copy and paste the above code into the head tag of your html page and then call the maskIt() function.
    More on PHP Ajax and other technologies @ my homepage:
    www.tejuspratap.com

  3. #3
    Join Date
    May 2005
    Posts
    115
    Hi thinktejas, thanks for your great reply.

    But can you show me how to use this script? I should have probably mention before that i have no experience with javascript .

    I entered this at my <body> but nothing happened.

    <Script Language="JavaScript">
    maskIt();
    </Script>

    Where do i add the path to my image which i want to show, similar to the initial website i gave?
    Last edited by Ant_Magma; 04-18-2008 at 06:43 AM.

  4. #4
    Join Date
    Apr 2007
    Location
    Sterling Heights, Michigan
    Posts
    8,666
    Quote Originally Posted by thinktejas
    copy and paste the above code into the head tag of your html page
    Did you do this?
    I don't answer coding questions via PM or Email. Please post a thread in the appropriate forum section.
    Please use [Code]your code goes in here[/Code] tags when posting code.
    Before posting your question, did you look here?
    Got a question on Linux? Visit our Linux sister site.
    Modifications Required For VB6 Apps To Work On Vista

  5. #5
    Join Date
    May 2005
    Posts
    115
    Quote Originally Posted by Hack
    Did you do this?
    Yep i did. Here's my code
    Code:
    <html>
    <head>
    <title>
    	Title
    </title>
    	<script>
    	function maskIt()
    	{
    	     var bodObj=document.getElementsByTagName("body")[0];
    	     var maskDiv= document.createElement("div"); 
    	     maskDiv.className="maskClass";
    	     bodObj.insertBefore(maskDiv,bodObj.childNodes[0]);
    	}
    	</script>
    
    	<style>
    	.maskClass {
    	    z-index:5;
    	    display:none;
    	    position:absolute;
    	    top:0;
    	    left:0;
    	    height:inherit;
    	    -moz-opacity: 0.50;
    	    opacity:.50;
    	    filter: alpha(opacity=50);
    	    background-color:#000000;
    	}
    	</style>
    
    </head>
    
    <body>
    
    <Script Language="JavaScript">
    maskIt();
    </Script>
    
    </body>
    </html>
    What did i miss? Also where do i put the link which i'm suppose to bring up with the effect? The maskIt() doesn't take any arguments.

  6. #6
    Join Date
    May 2007
    Posts
    6
    You can call the maskit function on Body load.

    <body onload="maskIt()">
    </body>
    Last edited by thinktejas; 07-30-2008 at 06:14 AM.
    More on PHP Ajax and other technologies @ my homepage:
    www.tejuspratap.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center