?
Solved

Jquery hover modal popup

Posted on 2011-03-21
7
Medium Priority
?
3,041 Views
Last Modified: 2012-05-11
Does anyone know of a jquery modal popup that would work when the cusor hovers over the link and then disappears when the cusor is moved off the modal popup.  If you click on the link it will take the user to a new page, but I want the modal popup to display when hovering over the link that will display a subset of the data that is available when you click on the link and are redirected to the new page.

Here is my a href tag...
<a href="/00U/c?cType=2&md0=2011&md3={!day.dayOfYear}&dtfd={!MONTH(day.date)}/{!DAY(day.date)}/{!YEAR(day.date)}" title="Day View - {!day.date}">{!day.dayofmonth}</a>

Open in new window

0
Comment
Question by:-Dman100-
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35184397
Hi,

You could use jQuery position: http://docs.jquery.com/UI/Position

When hovering set the position, when mouse is out of the popup - hide it.

You can also take a look at this post - it is doing the same thing with the menu:
http://extremedev.blogspot.com/2011/02/menu-on-multiple-lines.html
0
 

Author Comment

by:-Dman100-
ID: 35184838
I took a look at the UIPosition, but I was trying the demo and it wasn't working.  Am I missing something?

What should be happening with the UIPosition plugin?  
0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35186883
the ui position will help you to set the position of your modal popup right where you need near the a href tag.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:-Dman100-
ID: 35188947
Hi Roma,

My apologies...I probably didn't correctly explain what Iwanted in my post.  The position isn't the issue.  I'm okay if the position is centered or really anywhere on the page.  What I need is a plugin that will display a modal popup when I hover over the link and disappear when I move the cursor off the modal popup dialog.

Does that make any sense?

My apologies for any confusion.

Thanks for your help.  I sincerely appreciate it.
Regards.
0
 
LVL 9

Accepted Solution

by:
Roman Gherman earned 2000 total points
ID: 35189118
Hi,
This is why I gave you the link to the post: http://extremedev.blogspot.com/2011/02/menu-on-multiple-lines.html

Because it is using the same principle.

Here i have created a sample HTML:
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/1.8.7/ui/jquery-ui.js"></script>
  <link href="http://jquery-ui.googlecode.com/svn/tags/1.8.7/themes/redmond/jquery-ui.css" type="text/css" rel="stylesheet">

<script>
	var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(element, id) {
    // cancel close timer
    mcancelclosetime();

    // close old layer
    mclose();

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    $("#IE6Fix").height($(ddmenuitem).height());
    $("#IE6Fix").width($(ddmenuitem).width() + 2);

    $("#IE6Fix").show();
    $(ddmenuitem).show();

    $("#IE6Fix").position({
        my: "left top",
        at: "left bottom",
        of: $(element),
        collision: "fit"
    });

    $(ddmenuitem).position({
        my: "left top",
        at: "left bottom",
        of: $(element),
        collision: "fit"
    });
}

// close showed layer
function mclose() {
    if (ddmenuitem) {
        $("#IE6Fix").hide();
        $(ddmenuitem).hide();
    }
}

// go close timer
function mclosetime() {
    closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime() {
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

// close layer when click-out
document.onclick = mclose;

</script>  
</head>
<body>
<a href="#" onmouseover="mopen(this, 'testdiv')" onmouseout="mclosetime()">TEST LINK</a>

<div id='testdiv' onmouseover="mcancelclosetime()" onmouseout="mclosetime()" style='width:200px;height:300px;background-color:blue;display:none;'>test</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:-Dman100-
ID: 35190103
Hi Roma1123,

Thank you for your help.  It is working now.  I had one additional follow-up question.  When I ran the test page, I got a message "Allow Blocked Content" and when I put the code into our Salesforce environment, I get the message "Do you want to view only the webpage content that was delivered securely"

If I allow the blocked content it works as expected and if I choose "No" for the secure content, it works fine.  

Is there a way to get rid of that message?  Is it because I'm linking to an external site to access the jquery script files?

Do I need to download those files and access them directly instead of over the internet?

Thanks again for your help!
Regards.
0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35190140
Hi,

The "Allow Blocked Content" will be displayed only when you open the HTML locally.
What about SalesForce - try to copy jquery in the project rather than linking to an external source.

Sorry, but I'm not too common with Salesforce.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question