I would like to implement a pop-up window on mouse over to display a basic thumbnail displaying all the info about said entry.
Below is my index view:
Below is the thumbnail window I would like to display when the mouse hovers over any of the Software Name's.
Any help is appreciate, thank you in advance!
Assuming popup is the ID of your "description box":
HTML
<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>
</div>
JavaScript
var e = document.getElementById('parent');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
Alternatively you can get rid of JavaScript entirely and do it just with CSS:
CSS
.parent .popup {
display: none;
}
.parent:hover .popup {
display: block;
}
What you could do is iterate through all the <tr> </tr> with JQuery and append a html element in which you add your thumbnail. Something like:
$('#table tr').each(function (i, obj) {
$(obj).mouseenter(function () {
$('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>");
$('#hoveringTooltip').html("your thumbnail");
$('#hoveringTooltip').css({
"top": (obj.getBoundingClientRect().top + 20),
"left": obj.getBoundingClientRect().left,
"background-color": "white",
"border": "1px solid black"
});
});
$(obj).mouseleave(function () {
$('#hoveringTooltip').remove();
});
})
As you can see I apply some css to the div apended in order to show it near the mouse location.
Related
I am displaying a PDF in an <iframe> using a jQuery modal popup on button click. This is works fine in all browsers except IE10, where the displayed PDF hides the modal dialog.
Dropping IE10 support is not an option.
I tried using z-index. In this jsfiddle, the modal is outside of the body but nothing works. I could hide the pdf on popup or change the position of it, but my client don't want that. Also I tried var text = prompt("Alert", "textbox's intial text"); - old javascript, but client don't like that look. My TL don't want to use iframe in modal. Isn't anyway I can take pdf behind HTML?
HTML:
<body>
<div id='ClickMe'>Click here!</div>
<br/>
<div>This is more than likely an Adobe issue where it thinks it should be in front all the time no matter what, however it is very annoying that you can't open a dialog over a PDF. Click on the 'Click here!' text above to see this issue occur. Interesting enough if you click the Discuss button in JSFiddle it does the same thing.</div>
<br/>
<iframe src="http://www.ccc.commnet.edu/faculty/sfreeman/cst%20250/jQueryNotes.pdf" style="width:100%; height:700px;" frameborder="1"></iframe>
</body>
jQuery:
var $Dialog_div;
function fnOpenDialog() {
var str = '<div id="dialog" style="display: none;height:60%;" title="On Hold Reason" align="center">'+'<br />'+'<textarea id="messageTextBox" cols="32" rows="3" style="resize:none"></textarea>'+'<div class="row" align="center">'+'<br />'+'</div>'+'<br />'+'</div>';
$Dialog_div = $(str).prependTo('body');
// $Dialog_div = $('<div id=\'ThisDialog\'>Hello</div>').prependTo('body');
$Dialog_div = $('#dialog').dialog({
autoOpen: true,
draggable: true,
resizable: true,
title: 'Dialog',
modal: true,
stack: true,
height: ($(window).height() * 0.95),
width: ($(window).width() * 0.9),
buttons: {
'Yes': function() {
alert($('#messageTextBox').val());
$Dialog_div.dialog('close');
},
'No': function(){
alert('No');
$Dialog_div.dialog('close');
}
}
});
}
$('#ClickMe').click(fnOpenDialog);
How can I prevent the PDF from covering the modal? (I am using ASP.NET MVCC 5(C#))
I have created a solution that supports IE10 and below. You can view the fiddle here.
The solution detects if the browser is IE <= 10 and inserts the dialog into an iframe - rather than directly into the current page - which is then displayed over the pdf document. It then hooks up a close function to the existing close X function of the dialog, which removes the frame when the dialog is closed.
var showDialog = function() {
// Determine the height and width of the dialog
var height = $(window).height() * 0.55;
var width = $(window).width() * 0.75;
var paddedHeight = height + 20;
var paddedWidth = width + 20;
// Template
var dialogTemplate = $("#modalDialogTemplate").html();
var dialog = undefined;
var dialogFrame = undefined;
var resizable = true;
var draggable = true;
// Use a frame if IE <= 10
var agent = navigator.userAgent.toLowerCase();
var useFrame = true;//(agent.indexOf('msie') != -1 && parseFloat(agent.split('msie')[1]) <= 10);
if(useFrame)
{
dialogFrame = $("#dialogFrame").css({
position: "absolute",
background: "#efefef",
width: paddedWidth + "px",
height: paddedHeight + "px",
top: "50%",
left: "50%",
marginLeft: (-1 * (paddedWidth / 2)) + "px",
marginTop: (-1 * (paddedHeight/ 2)) + "px",
display: "block"
});
// Slight limitation of the frame
resizable = false;
draggable = false;
// Insert the template into the frame
var dialogFrameDoc = dialogFrame[0].contentWindow.document;
dialogFrameDoc.open();
dialogFrameDoc.write(dialogTemplate);
dialogFrameDoc.close();
dialog = dialogFrame.contents().find("#dialog");
} else {
// Use the dialog container
dialog = $("#dialogContainer").html(dialogTemplate).find("#dialog");
}
// Close action
var close = function() {
// Close the dialog
dialog.dialog("close");
dialogFrame.remove();
};
dialog.dialog({
autoOpen: true,
draggable: resizable,
resizable: draggable,
title: 'Dialog',
modal: true,
stack: true,
height: height,
width: width,
buttons: {
'Yes': function() {
alert($('#messageTextBox').val());
close();
},
'No': function(){
alert('No');
close();
}
}
});
// Frame dialog fixes
if(useFrame)
{
// Hide the overlay
$(dialogFrameDoc).find(".ui-widget-overlay").hide();
// Position the dialog
$(dialogFrameDoc).find(".ui-dialog").css({ position: "absolute", top: "5px", left: "5px" });
// Setup the close action
$(dialogFrameDoc).find(".ui-dialog-titlebar-close").click(close);
}
};
showDialog();
The HTML:
<iframe id="dialogFrame" src="about:blank" style="z-index: 1000; display: none; background: transparent;" frameborder="0" allowTransparency="true"></iframe>
<div id="dialogContainer"></div>
<div id="pdfContainer" style="position: relative; width: 100%; height: 700px;">
<div style="position:absolute;z-index: 2;height: 100%; width: 100%">
<object data="http://www.ccc.commnet.edu/faculty/sfreeman/cst%20250/jQueryNotes.pdf" type="application/pdf" style="width: 100%; height: 100%; z-index=1"></object>
</div>
</div>
<script type="text/template" id="modalDialogTemplate">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<div id="dialog" style="display:none; height:60%;" title="On Hold Reason" align="center">
<br /><textarea id="messageTextBox" cols="32" rows="3" style="resize:none"></textarea>
<div class="row" align="center"><br /></div><br />
</div>
</script>
Internet Explorer 9 with dialog above PDF:
Internet Explorer 10 with dialog above PDF:
I had this same problem, and came up with a simple solution. It might not be applicable in all cases, but in my case, it was acceptable to simply hide the PDF when the modal was opened. I used something like the following:
$('.modal').on('show.bs.modal', function () {
// IE pdf embed plugin sits above modals
if (isIE()) {
$('body').addClass('hide-iframes');
}
}).on('hidden.bs.modal', function () {
if (isIE()) {
$('body').removeClass('hide-iframes');
}
});
with
body.hide-iframes iframe {
visibility: hidden;
}
Add Below Line Inside Dialog Will Resolve your issue
<iframe id="splitFaxFrame" frameborder="0" marginwidth="0" marginheight="0" style="width:100%;height:60em"></iframe>
Found this answer that may help
Embedded pdf for IE
<div id="pdf">
<iframe src="pdf.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
pdf.html code
<body>
<object data="lorem.pdf" type="application/pdf">
<p>It appears you don't have Adobe Reader or PDF support in this web browser. Click here to download the PDF. Or click here to install Adobe Reader.</p>
<embed src="lorem.pdf" type="application/pdf" />
</object>
</body>
I have a 2 pages.
Master Page
Default page (inherited from master page)
I have a menu in the master page & I need to click some menu item & when it's clicked I need some element (span) to be visible in default page.
There's no error in below code, but the expected result did not happen.
MasterPage:
<li id="lgbtn" style="float:right">Login</li>
<script>
$('#lgbtn').live('click', function (e) {
$('span4').show();//<-- this span is in Default page
});
</script>
Default.aspx:
<div class="span4" style="visibility:hidden">
<form name="form-area" class="form-area" runat="server">
//Some content here
</form>
</div>
In JQuery if you want to get element based on class then you have to write syntax like below
$('.ClassName')
and to get element based id then
$('#ControlId')
Jquery's .show is the same as saying display: block;
In order to solve this you could change it using
$('.span4').css("visibility" , "visible");
Or you could change the html to be as follows:
<div class="span4" style="display: none;">
<form name="form-area" class="form-area" runat="server">
//Some content here
</form>
</div>
1)you missed dot for class
2)you visiblity style so show didn't work in that case so please use css style visibility visible
$('.span4').css("visibility" , "visible");
try this
$('#lgbtn').live('click', function (e) {
if($('.span4').is(":visible")){
$('.span4').css("visibility" , "hidden");
}
else{
$('.span4').css("visibility" , "visible");
}
});
another way
<div class="span4" style="display:none">
$('#lgbtn').live('click', function (e) {
if($('.span4').is(":visible")){
$('.span4').show();
}
else{
$('.span4').hide();
}
});
simplest way to do you also change in html
<div class="span4" style="display:none">
$('#lgbtn').live('click', function (e) {
$('.span4').toggle();
});
first you know about what is the difference between visibilty and display in css
visibility: hidden hides the element, but it still takes up space in
the layout.
display: none removes the element completely from the document. It
does not take up any space, even though the HTML for it is still in
the source code.
You can see the effect of these style properties on this page. I
created three identical swatches of code, and then set the display and
visibility properties on two so you can see how they look.
Try to use that code:
$('#lgbtn').live('click', function (e) {
$('.span4').show();//<-- this span is in Default page
});
use
like
<script>
$('#lgbtn').live('click', function (e) {
$('.span4').css("visibility" , "visible");
});
</script>
DEMO
UPDATED DEMO WITH toggle()
For toggle() use
toggle
html
<li id="lgbtn" style="">Login</li>
<div class="span4" style="display:none">asds</div>
JS
$( document ).ready(function() {
$( "#lgbtn" ).click(function() {
alert("clicked");
$('.span4').toggle();
});
});
I need the browser to scroll my ASP.NET page to the top when the user
clicks on a server-side link or button at the bottom of the page.
<div id="box" style=" position: fixed; bottom:5px;">
<a href="#top" >Back to up<img height="40" src="../images/btnup.png" /></a>
I use this code for it:
$(document).ready(function () {
$('a[href=#top]').click(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
I want to show this button when the scroll position is at the bottom of the page and don't want to show this when the scroll position is at the top of the page.
How to view this button when the scroll position is at the bottom of the page?
I use this code. it is useful for me.
<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>Top</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
Add a scroll listener and manage your button visibility by checking if the main container (could be body) scrollTop is max value:
var $elem = $('#mainContainer');
var $button = $('#top');
$(window).scroll(function(){
if ($elem[0].scrollHeight - $elem.scrollTop() == $elem.outerHeight()) {
// We're at the bottom.
$button .show();
}
else
$button .hide();
});
More example : http://www.yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/
I have a < div> with < asp:ListView>- with results of searching. I want to hide this div, and show it when ListView will be full (or better - when this part of code will be completed)
lvSearchResult.DataSource = getSearchResult();
lvSearchResult.DataBind();
How can I do this? Meanwhile when this < div> with listview will be not visible, I want to show another div with information "Loading". When ListView will be ready, < div> with results will show up, and < div> with "loading" will be hidden.
If you are using an Update panel you can acheive with code similar to below. This will show a modal panel over the page while it is updating.
You could modify the start and end request methods to also hide / show the div containing the list view
note this uses jQuery.
<div id="workingDialog" style="display: none" title="Please wait">
<p>
Loading Data
</p>
</div>
<div id="listViewDiv" style="display:none">
//List View
</div>
<script>
var _workingDialog;
//Page Load event
function pageLoad(sender, args) {
//Register events
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
_workingDialog = $('#workingDialog');
}
function beginRequest(sender, args) {
$(_workingDialog).dialog({ modal: true });
$('#listViewdiv').hide();
}
function endRequest(sender, args) {
$(_workingDialog).dialog('close');
$('#listViewdiv').show();
}
</script>
http://wraithnath.blogspot.co.uk/2011/12/showing-modal-dialog-while-page-is.html
Declare your divs like:
<div id="searchResultDiv" runat="server" visible="false">...</div>
<div id="loadingDiv" runat="server">...</div>
The runat="server" makes them accessible in your asp.net code behind.
Then in your code you can change their properties, in this instance change the Visibility:
lvSearchResult.DataSource = getSearchResult();
lvSearchResult.DataBind();
searchResultDiv.Visible = true;
loadingDiv.Visible = false;
depending on your list you can make a method that ads 2 css classes, one for when the list is full and one for the other case. so in one css you will have display: none; and in the other display: inline-block;
From my understanding you could use css? and set display:none and when your condition is met change display to block/show?
Hope this helps: http://webdesign.about.com/od/dhtml/a/aa101507.htm
add runat="server" to the div, then you can set visible = false/true
Use runat="server" attribute in your div
Then depending on any condition you can show or hide div
<div runat="server" id="myDiv">
var result = getSearchResult();
if(result!= null){
myDiv.Visible = true;
lvSearchResult.DataSource = result;
lvSearchResult.DataBind();
}
Use AJAX with UpdatePanel , no? that will work..
Trying to find Id of a ASP.Net control in JavaScript but it says ID not found, I looked at different other related question but they are all in a ASP form or alike, however here I am using DIV tags, and its giving me error on page,
Code :
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<div id="divConfMessage" style="BORDER-RIGHT:black thin solid; BORDER-TOP:black thin solid; DISPLAY:none; Z-INDEX:200; BORDER-LEFT:black thin solid; BORDER-BOTTOM:black thin solid; background-color:white;">
<br />
<br />
<div style="BACKGROUND-COLOR: white;TEXT-ALIGN: center" id="confirmText"></div>
<div style="Z-INDEX: 105;HEIGHT: 22%;BACKGROUND-COLOR: white;TEXT-ALIGN: center"></div>
<div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button>
</div>
</div>
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript" language="JavaScript" src="CustomDialog.js"></script>
<script type="text/javascript" language="JavaScript">
function ShowMessage()
{
DisplayConfirmMessage('Do you really want to delete this decision?',480,120);
document.getElementById('<%=btnConfOK.ClientID%>').focus();
//SetDefaultButton('btnConfOK');
return false;
}
</script>
<asp:Button ID="btDelete" runat="server" CausesValidation="False" CssClass="gradientbutton"
UseSubmitBehavior="False"
OnClientClick="this.disabled=true;this.value='Please Wait...';ShowMessage();"
Text="Delete" Width="200px" />
EDIT:
I made the changes and the Dialog box comes up and disappears then :|, I think I need to add the control to DOM but got no clue how i gonna do that in this context :|
here's the tutorial link i followed
Dialog box tutorial
js script
var divWidth = '';
var divHeight = '';
var txtFirstButton = 'OK';
var txtSecondButton = 'Cancel'
function DisplayConfirmMessage(msg,width,height)
{
// Set default dialogbox width if null
if(width == null)
divWidth = 180
else
divWidth = width;
// Set default dialogBox height if null
if(height == null)
divHeight = 90
else
divHeight = height;
// Ge the dialogbox object
var divLayer = document.getElementById('divConfMessage');
// Set dialogbox height and width
SetHeightWidth(divLayer)
// Set dialogbox top and left
SetTopLeft(divLayer);
// Show the div layer
divLayer.style.display = 'block';
// Change the location and reset the width and height if window is resized
window.onresize = function() { if(divLayer.style.display == 'block'){ SetTopLeft(divLayer); SetHeightWidth(divLayer)}}
// Set the dialogbox display message
document.getElementById('confirmText').innerHTML = msg;
}
function SetTopLeft(divLayer)
{
// Get the dialogbox height
var divHeightPer = divLayer.style.height.split('px')[0];
// Set the top variable
var top = (parseInt(document.body.offsetHeight)/ 2) - (divHeightPer/2)
// Get the dialog box width
var divWidthPix = divLayer.style.width.split('px')[0];
// Get the left variable
var left = (parseInt(document.body.offsetWidth)/2) - (parseInt(divWidthPix)/2);
// set the dialogbox position to abosulute
divLayer.style.position = 'absolute';
// Set the div top to the height
divLayer.style.top = top
// Set the div Left to the height
divLayer.style.left = left;
}
function SetHeightWidth(divLayer)
{
// Set the dialogbox width
divLayer.style.width = divWidth + 'px';
// Set the dialogbox Height
divLayer.style.height = divHeight + 'px'
}
function SetDefaultButton(defaultButton)
{
// Set the focus on the Cancel button
document.getElementById(defaultButton).focus();
}
If I remove "UseSubmitBehavior="False", It works fine, except when I click on Yes, it doesn't closes the Dialog box
getElementById takes a string, so you need to quote the id, like this:
document.getElementById('<%=btnConfOK.ClientID%>').focus();
You have to put the output in quotes:
document.getElementById(<%=btnConfOK.ClientID%>)
should be
document.getElementById("<%=btnConfOK.ClientID%>")
You missing the syntax document.getElementById("<%=btnConfOK.ClientID%>").focus();
Read more about document.getElementById
Edit
function ShowMessage()
{
DisplayConfirmMessage('Do you really want to delete this decision?',480,120);
document.getElementById("<%=btnConfOK.ClientID%>").focus();
//SetDefaultButton('btnConfOK');
return false;
}
If your delete button doing the post-back, use event.preventDefault on delete button click.