I have an ASP page, and I have a calendar which is shown (set to visible) on the page when an image button is clicked.
The problem is everytime the calendar is shown it moves other components on the page down, and when it's invisible components move back up again.
Could anyone give me an idea plz. Here is what i did finally: (Now its fixed)
<body>
<form id="form1" runat="server">
<asp:TextBox ID="CreationTimeTextBox" runat="server" ClientIDMode="Static">Creation Time</asp:TextBox><br />
<script>
AnyTime.picker("CreationTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:TextBox ID="EndTimeTextBox" runat="server" ClientIDMode="Static">End Time</asp:TextBox>
<script>
AnyTime.picker("EndTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:Button ID="btnResetSearchInput" runat="server" Text=" Reset search input" CssClass="resetBtn" Width="140px" OnClick="btnResetSearchInput_Click" />
To not moving the rest of the page down, the calendar must a correct style that allow him to show as pseudo-dialog on the page.
The main attributes on the css that must be correct and set is the position, top and left.
Here is an example:
.dialog {
position: absolute;
top:10px;
left:20px;
width: 140px;
height: 30px;
background-color:blue;
color:white;
}
.NotDialog {
width: 200px;
height: 30px;
background-color:blue;
color:white;
}
<div>Some other text before
<div class="dialog">open as dialog</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
<br><br><br>
<div>Some other text before
<div class="NotDialog">open by moving the text down</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
More to read
CSS OVERLAY TECHNIQUES
Related
I have an a web application which have a button that will open an iframe form windows.
open.aspx is the button click
supervisor.aspx is the page open using iframe
the open.aspx
<div style="vertical-align: middle; text-align: center; left: 500px; width: 122px; position: absolute; top: 560px; height: 50px; z-index: 126; right: 889px; font-size: 50pt; font-family: Calibri; font-weight: bold;" id="uncheckbutton">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="UNCHECK" />
//this is the onclick button to open the iframe
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">
<iframe style=" width:400px; height: 150px;" id="irm1" src="Uncheck popup.aspx" runat="server"> </iframe>
<asp:button Top="100px" id="button2" runat="server" text="CLOSE" />
</asp:Panel>
and this is the supervisor.aspx(the iframe)
<asp:TextBox ID="inputid" runat="server" Font-Size="14px" ></asp:TextBox>
<asp:Button ID="Button3" runat="server" Text="Uncheck" OnClick="btnCheck_Click" />
if the user enter the correct username, i want the iframe to automatically close.
this is my supervisor.aspx.cs
protected void btnCheck_Click(object sender,EventArgs e)
{
string uncheck = inputid.Text;
bool supervisor = Cls.GetUncheckSupervisor(uncheck);
if (supervisor==true)
{
this.ClientScript.RegisterClientScriptBlock(this.GetType(), "Close", "window.close()",
.true);
}
else
{
Show("Wrong ID!");
}
if the supervisor is true, how can I automatically closed the iframe? for now I use a button click to close and I want to avoid less clicking.
I have try using javascript but the iframe still won't close although the function works.
I following this link How to close window after iframe form submits and also Close iFrame from another webpage + asp.net
thanks
I got guide from Yongqing Yu ( https://forums.asp.net/members/Yongqing%20Yu.aspx ) from asp.net that suggest me to create a js method on the iframe page, call the parent layer of the iframe page, then hide the ModalPopupExtender control and panel control.
Here is the thread
https://forums.asp.net/p/2162174/6287081.aspx?Re+Close+iframe+from+another+page+in+code+behind
I do have a MVC5 C# View (razor as view engine) that sends and retrieves information from a database, it doesn't use jQuery, AJAX or JSOn to make the async calls so it refresh/reload the view every time it sends info to the database.
I want to show an image (sending image) to the user in order to let the user know that the page(MVC View) is working and that has wait, I do have jQuery code in the page and has tried this:
<script language="JavaScript" type="text/javascript">
$(window).load(function () {
$('#cargando').hide();
});
</script>
<style type="text/css">
#cargando {
width: 350px;
height: 70px;
clear: both;
background-color: #FFFF00;
color: #CC0000;
}
</style>
and has this div
<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
but doesn´t work, could you please tell me how to show the image before the view renders again from the actio' controller?
this is my view
<div class="section">
<div class="container">
<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
<div id="loading">
<br />
<div class="jumbotron">
<div class="container">
<img src="~/Imagenes/logo%logo.png" class="img-responsive" />
<div class="row well">
<div>
<img src="~/Imagenes/Portada.jpg" style=" height:40%; width:100%" /> <p style="margin-left: 10px">
#*<img src="~/Imagenes/Edificio.jpg" style="height:3%; width:100%" />*#
<h4>BIENVENIDO ...</h4>
<p>xxx permite ... </p>
</div>
</div>
</div>
</div>
It wont be possible without ajax because when you make a postback to your server it sends back a new HTML page and the browser processes that from scratch.
To show the user a loading image in between different pages or in between different postbacks of same page, you will have to use ajax request or you can use iframes which will complicate things more than ajax and are not preferred in such situations.
Following jQuery methods will be helpful:
$.load
$.ajax
$.get
If you want to display a "loading overlay" because your server round trip takes a while, you can do this with javascript. The new page load will re-hide the loading screen.
Place the "overlay div" outside of your main content, at the end of the page just before the </body> closing tag:
<div id="overlay" class="overlay">
<div class="loader"></div>
<!-- Alternatively you can have some text here -->
</div>
Your button would look like this:
<button id="mvc-action-button">
Some Action
</button>
Some CSS for the overlay:
html {
min-height: 100%;
}
body {
min-height: 100%;
margin: 0;
}
.overlay {
display: none;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,0.8);
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
Use the following JS to display the loading screen:
document.getElementById('mvc-action-button')
.addEventListener('click', function(e) {
document.getElementById('overlay').style.display = 'flex';
});
See it all together in this jsfiddle.
Note that I've used flexbox to center the content on the overlay page, this may not work on all browsers (though modern browsers should be fine).
Caveats: If your subsequent page load hangs or fails for whatever reason, the user will be stuck on the loading screen or a white screen and will have to refresh the page.
I have below code:
<fieldset id="preFacts">
<div id="divstructures" runat="server" style="width: 100%;">
<div id="divleft" runat="server" style="width: 48%; float:left">
<label>Desk:</label>
<asp:TextBox ID="txtDesk" runat="server"> </asp:TextBox>
<label>Desk2:</label>
<asp:TextBox ID="txtDesk2" runat="server"> </asp:TextBox>
</div>
<div id="divright" runat="server" style="width: 48%; float:right">
<label>Desk3:</label>
<asp:TextBox ID="txtDesk3" runat="server"> </asp:TextBox>
<label>Desk4:</label>
<asp:TextBox ID="txtDesk4" runat="server"> </asp:TextBox>
</div>
</div>
</fieldset>
CSS:
fieldset#preFacts label
{
width: 20em;
}
now in c# if condition = true i want to display divright(new controls) along with divleft(existing controls) or if condition = false then i want to display divleft(existing controls) always in center using above css(fieldset#preFacts label).
how can i set width: 10em;(fieldset#preFacts label) when the condition is true in c#(dynamically) so that both div's display properly left and right.
fieldset is not a control but an HTML tag. You can use
<fieldset id="preFacts" runat="server">
to make it visible to ASP.NET.
You could implement a multiview or set the CSS in your code-behind when the page is loaded.
Also, you could take divright in your code-behind and set its style to display:none; When your condition is met. See here https://www.google.com/url?sa=t&source=web&rct=j&url=https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.style(v%3Dvs.110).aspx&ved=0CB8QFjABahUKEwjptP3HlcfHAhWG1RoKHclpDV8&usg=AFQjCNEJS7adTj2Jh1eFqMPU0IcmOa8qNw
Yet, you might consider to move your intention away from server side code. Processing your requirements via client code is the better approach today.
First off, I'd avoid your inline styles. They will generally take precedence over any other class you apply, which makes it more difficult to work with. Also note that the IDs you're setting on server controls may change unless you also set ClientIDMode="Static", which might prevent your CSS from being applied correctly.
I'm not completely sure what you're trying to achieve, but here's one approach to make the 'left' side take up the whole fieldset if your condition is false, or half the width if true:
CSS:
Here, I'm setting a few classes, rather than depending on IDs.
.divstructures { width: 100%; }
.divfalse { width: 100%; }
.divleft { width: 48%; float: left; }
.divright { width: 48%; float: right; }
ASPX:
This is using an asp:Panel control instead of the inner divs. There are many other approaches you could take:
<fieldset id="preFacts">
<div id="divstructures" runat="server" style="width: 100%;">
<asp:Panel id="divleft" runat="server">
<label>Desk:</label>
<asp:TextBox ID="txtDesk" runat="server"> </asp:TextBox>
<label>Desk2:</label>
<asp:TextBox ID="txtDesk2" runat="server"> </asp:TextBox>
</asp:Panel>
<asp:Panel id="divright" CssClass="divright" runat="server">
<label>Desk3:</label>
<asp:TextBox ID="txtDesk3" runat="server"> </asp:TextBox>
<label>Desk4:</label>
<asp:TextBox ID="txtDesk4" runat="server"> </asp:TextBox>
</asp:Panel>
</div>
</fieldset>
C#:
Here the panel style and visibility is set based on your condition:
...
bool condition = true; // or whatever way you need to set this value
...
divright.Visible = condition;
divleft.CssClass = condition ? "divleft" : "divfalse";
...
You may need to tweak the CSS to get the exact effect you're looking for.
I wrote this code implemented in a much bigger solution. the point was to add an asp:ImageButton to an asp:GridView. Clicking this image button would trigger a javascript call to a JQuery dialog.
This dialog is bound to a div containing an asp:BulletedList.
Simple enough, and I got it to work, but when I click the button and the dialog opens, it shows up collapsed to only the title bar. I can resize and expand the window to show the contents but I'd like it to open to the right size from the get go.
Setting the Resizable option to false just blocks it in collapsed mode and I can't see the data anymore. Also, opening the source code from the rendered page in IE displays an empty div (the div used by the dialog) while the dialog is collapsed to the title bar, but after I expand the window and display my BulletedList data, displaying the source code by right clicking the bullet list still shows an empty div...
Here is the code, the gridview is a lot bigger and item templates are used because each column has a specific header and footer but I took out all the non-related stuff.
.ascx file
The Javascript:
function ShowReferedTasks() {
$('#litReferedTasks').dialog({
autoOpen: true,
modal: true,
minHeight: 150,
minWidth: 500,
resizable: true
});
}
The gridview containing the button that triggers the dialog:
<ext:GridView ID="gvTaskParameters" runat="server" AutoGenerateColumns="False" DataKeyNames="TaskParameterID"
ShowFooter="<%# _isAdmin %>" ShowHeaderWhenEmpty="True" ShowFooterWhenEmpty="True"
EmptyDataText="Aucun paramètre disponible" AllowPaging="True"
PagerSettings-Mode="NextPreviousFirstLast"
OnPageIndexChanging="gvTaskParameters_PageIndexChanging" OnRowCancelingEdit="gvTaskParameters_RowCancelingEdit"
OnRowEditing="gvTaskParameters_RowEditing" OnRowDeleting="gvTaskParameters_RowDeleting"
OnRowUpdating="gvTaskParameters_RowUpdating" OnRowCommand="gvTaskParameters_RowCommand"
OnRowDataBound="gvTaskParameters_RowDataBound"
OnDataBound="gvTaskParameters_DataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ibViewTasks" runat="server" CausesValidation="False" CommandName="ViewTasks"
ImageAlign="Middle" ImageUrl="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docs-info.gif" AlternateText="<%$ resources:resource, images_VoirTaches %>"
CommandArgument='<%# Eval("TaskParameterID") %>' />
<%--<input id="ibViewTasks" class="ui-state-default ui-corner-all" type="image" src="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docks-info.gif" value="button" />--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</ext:GridView>
The div bound to the dialog:
<div id="litReferedTasks" class="" title="Tâches Référées" style="background-color: White; position: absolute;">
<div style="padding-left: 25px; padding-bottom: 25px; padding-right: 25px;">
<asp:BulletedList ID="blReferedTasks" runat="server" DisplayMode="Text">
</asp:BulletedList>
</div>
</div>
Code Behind in C#:
else if (e.CommandName == "ViewTasks")
{
TaskParameterMapManager mgr = new TaskParameterMapManager(DatabaseConnection);
int id = Convert.ToInt32(e.CommandArgument.ToString());
var ts = mgr.GetTasks(id).OrderBy(t => t.TaskDescription);
this.blReferedTasks.DataSource = ts.ToList();
this.blReferedTasks.DataTextField = "TaskDescription";
this.blReferedTasks.DataBind();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Key_ShowReferedTasks", "ShowReferedTasks();", true);
}
The answer was, as #chris suggested, to remove the "position:absolute" style tag in the div used by the dialog.
I have successfully implemented image cropping solution with help of this article Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET. It work fine, but on page load, I want to show default cropping area. just like in below picture. I mean when page is opened that contained picture for cropping, it show default coordinates, however, user can edit these one.
I want to highlight 100x100 coordinates.
This is a closed solution http://jsfiddle.net/kLbVM/3/ In this example, when we click on button it highlights the coordinate, but I need the same thing, when page is loaded.
I am looking for same thing, just like in linkedin.com
Edit: Here is my page source...
<head runat="server">
<style>
#imgProfileImage
{
width: auto;
height: auto;
}
.jcrop-handle
{
background-color: #333;
border: 1px #eee solid;
font-size: 1px;
width: 7px;
height: 7px;
}
</style>
<link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.pack.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="imgProfileImage" runat="server" width="400px" height="400px" />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<br />
<asp:Button ID="btnCrop" runat="server" Text="Crop Picture" CssClass="accentheader"
OnClick="btnCrop_Click" />
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function () {
var jcrop_api;
jcrop_api = $.Jcrop('#imgProfileImage');
jcrop_api.setSelect([0, 0, 100, 100]);
jcrop_api.enable();
jQuery('#imgProfileImage').Jcrop({
onSelect: storeCoords
});
});
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
Now its....
Try these steps:
When you do 'Jcrop(element)', element should be an img, not a div or any other tag, so move your id="cropbox" attribute from div to img:
<div >
<!-- |________ -->
<!-- | -->
<img id="cropbox" src="..." />
</div>
Specify width and height on .jcrop-handle class:
.jcrop-handle{
background-color:#333;
border:1px #eee solid;
font-size:1px;
width:7px; //explicit width
height:7px; //explicit height
}
Enable resizing 'interactivity' handlers after setSelection:
jcrop_api.setSelect([0,0,100,100]); //default selection on page load
jcrop_api.enable(); //enable resize interactivity
Live demo
http://jsfiddle.net/kLbVM/4/
So you want it to set the default dimensions on page load.
$(function(){
jcrop_api.setSelect(getDimensions());
});
Put the code on the "Shown" event of the form, and it will do what you need. Assuming you are using a .Net form to show the page, that is.
I think that there is an event that is called after a document has finished loading, which can be used to put the code in, if you need to load the page from the internet, first.
At any case, and whatever the actual platform, since the code works in an event(button click) it will work in the respective Form/Document event after it has been loaded and before is shown. It will not work in a "Load" event.