Skip to main content

Pop-up div on hover



Pop-up div on hover

use the below code to popup the text and Develop the Code...


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery Tutorial - Pop-up div on hover</title>
    <style type="text/css">
     
      h1, h3 {
        margin: 0;
        padding: 0;
        font-weight: normal;
      }
     
      a {
        color: #EB067B;
      }
     
      div#container {
        width: 580px;
        margin: 100px auto 0 auto;
        padding: 20px;

        border: 1px solid #1a1a1a;
      }
     
      /* HOVER STYLES */
      div#pop-up {
        display: none;
        position: absolute;
        width: 280px;
        padding: 10px;
        background: #eeeeee;
        color: #000000;
        border: 1px solid #1a1a1a;
        font-size: 90%;
      }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var moveLeft = 20;
        var moveDown = 10;
       
        $('a#trigger').hover(function(e) {
          $('div#pop-up').show();
          //.css('top', e.pageY + moveDown)
          //.css('left', e.pageX + moveLeft)
          //.appendTo('body');
        }, function() {
          $('div#pop-up').hide();
        });
       
        $('a#trigger').mousemove(function(e) {
          $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        });
       
      });
    </script>
  </head>
  <body>


   <div id="container">
      <h1>jQuery Tutorial - Pop-up div on hover</h1>
      <p>
        To show hidden div, simply hover your mouse over
        <a href="#" id="trigger">this link</a>.
      </p>
     
      <!-- HIDDEN / POP-UP DIV -->
      <div id="pop-up">
        <h3>Pop-up div Successfully Displayed</h3>
        <p>
          This div only appears when the trigger link is hovered over. Otherwise
          it is hidden from view.
        </p>
      </div>
     
    </div>


  </body>
</html>
Labels:

Comments

  1. AnonymousApril 11, 2013 at 11:18 PM

    I must thank you for the efforts you've put in penning this website. I'm hoping to see
    the same high-grade blog posts by you later on as well.
    In truth, your creative writing abilities has motivated me to get my own site now ;
    )

    Feel free to visit my weblog; spielen book

    ReplyDelete

Post a Comment

Popular posts from this blog

Authentication ASP.NET_SessionId (Session) along with AuthToken (GUID) cookie

Authentication ASP.NET_SessionID (Session) along with AuthToken (GUID) cookie Introduction ASP.NET Session keeps track of the user by creating a cookie called  ASP.NET_SessionId  in the user browser. This cookie value is checked for every request to ensure that the data being served is specific to that user. In many applications, a Session variable is used to track the logged in user, i.e., if a session variable exists for that user, then the user is logged in, otherwise not. Background Whenever any data is saved into the Session, the  ASP.NET_SessionId  cookie is created in the user’s browser. Even if the user has logged out (means the Session data has been removed by calling the  Session.Abandon() or  Session.RemoveAll()  or  Session.Clear()  method), this  ASP.NET_SessionId  cookie and its value is not deleted from the user browser. This legitimate cookie value can be used by the hijacker to hijack the user session by g...
Post a Comment
Read more

PNR Status by web Scraping Method (ASP.NET) C#

To Get the PNR Status by web Scraping Method Steps to Execute the Function Step 1 : Add the below method in your Form and Pass the PNR Number arguement public string GetPNRStatus( string sPNR) { string URI = "http://www.indianrail.gov.in/cgi_bin/inet_pnrstat_cgi.cgi" ; string Parameters = Uri .EscapeUriString( "lccp_pnrno1=" +sPNR+ "&amp;submitpnr=Get Status" ); System.Net. HttpWebRequest req = ( HttpWebRequest )System.Net. WebRequest .Create(URI); //HTTP POST Headers req.ContentType = "application/x-www-form-urlencoded" ; req.Host = "www.indianrail.gov.in" ; //You can use your own user-agent. req.UserAgent = "Mozilla/5.0 (compatible; MSIE 7.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0) DELL;Venue Pro" ; req.Headers.Add( HttpRequestHeader .AcceptLanguage, "en-us,en;q=0.5" ); req.Headers.Add( HttpRequestHeader .AcceptCharset, "ISO-8859-1,utf-8;q=...
20 comments
Read more
C# HttpClient tutorial C# HttpClient tutorial shows how to create HTTP requests with HttpClient in C#. In the examples, we create simple GET and POST requests. The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. HttpClient  is a base class for sending HTTP requests and receiving HTTP responses from a resource identified by a URI. C# HttpClient status code HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: Informational responses (100–199) Successful responses (200–299) Redirects (300–399) Client errors (400–499) Server errors (500–599) Program.cs using System; using System.Net.Http; using System.Threading.Tasks; namespace HttpClientStatus { class Program { static async Task Main(string[] args) { using var client =...
Post a Comment
Read more