OnClick we load a usercontrol in an asp:panel. That works fine. It appears as a modal popup. The question is (and I've looked high and low) is there a way to make this "draggable"?
The only thing I've found is by using this:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DragPanel/DragPanel.aspx
I'd rather not have to include the ajaxcontroltoolkit.
My ImageButton:
<asp:ImageButton ID="btnOpenBox" ImageUrl="~/images/open.gif" runat="server"
OnClick="btnOpenBox_Click" />
The Modal Popup Panel:
<asp:Panel ID="pnlMyModalBox" runat="server" Visible="false" HorizontalAlign="Left"
Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
<uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
</asp:Panel>
The codebehind:
protected void btnOpenBox_Click(object sender, ImageClickEventArgs e)
{
System.Web.UI.HtmlControls.HtmlGenericControl _body = (System.Web.UI.HtmlControls.HtmlGenericControl)this.Page.Controls[0].FindControl("Body1");
_body.Attributes.Add("class", "modalBackground");
mdJournalEntry.Visible = true;
pnlBody.Enabled = false;
pnlMyModalBox.Visible = true;
pnlMyModalBox.Height = Unit.Pixel(350);
pnlMyModalBox.Width = Unit.Pixel(800);
}
I used jquery with great results.
This is the official link with a couple of great examples
http://jqueryui.com/demos/draggable/
You should find everything you need there
EDIT
Download the jquery ui and include the following files in your project and this code in the page
<script src="../../jquery-1.4.4.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
//These include tags have to be in this exact order because the lower one depend on the first ones
<script type="text/javascript">
$(document).ready(function() {
dragAndDrop();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(dragAndDrop);
//this makes the javascript method execute after an ajax action on the page
});
function dragAndDrop() {
$( ".draggable" ).draggable();
}
</script>
Now simply add a class to your pannel like this
<asp:Panel ID="pnlMyModalBox" runat="server" class="draggable" Visible="false" HorizontalAlign="Left"
Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
<uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
</asp:Panel>
If everything is done correctly it should work
Making a panel (renders as a div) draggable can only be done in JavaScript. So check jQuery or Prototype/Scriptacolous or some other JavaScript library. These support this kind of operations
Add this to the head (sorry you'll have to do a search for the $asp function.. very useful!):
<script type="text/javascript">
$(document).ready(function() {
$asp("pnlMyModalBox").draggable();
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
Hope this helps someone else.
Related
Hi I have here a simple representation of the page I want to do.
I want to get the hidden field values of page2.aspx and pass it to the label of page1.aspx using c#.
Can you guys help me tnx :)
HTML
this hidden value is in page 2 that is in iframe
<input type="hidden" id="hdnpage2" runat="server" />
Javascript
on a button click or page load in Page 1 try to call this JS
var iframe = document.getElementById('iframebody');//id of your iframe
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var hdnvale = innerDoc.getElementById('hdnpage2');
alert (hdnvale.value);
You can get values from iframe and assigned to parent page.
basically every page is render as html irrespective of languages and technology, so i am using jquery to get the iframe value and assign to parent controls.
Iframe.aspx
<div>
<asp:Label runat="server" ID="lblInfo">This is Iframe : </asp:Label>
<asp:HiddenField ID="hidfld1" runat="server" Value="this is test hidden value." />
</div>
Parent.aspx
<header>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#uploadIFrame').load(function () {
var $currIFrame = $('#uploadIFrame');
var $hidval = $currIFrame.contents().find("body #hidfld1").val();
alert($hidval);
$("#MainContent_txtInfo").val($hidval);
});
});
</script>
</header>
<body>
<div>
<asp:TextBox runat="server" Text="test" ID="MainContent_txtInfo"></asp:TextBox>
<iframe id="Iframe1" scrolling="no" frameborder="0" style="border-style: none; margin: 0px; width: 100%; height: 40px;" src="IFRAME.aspx"></iframe>
</div>
</body>
once you got the hidden field value in textbox or label then you can user your c# code to process the value in code behind.
I am trying to get the text in a label to blink.This is the code that I am using:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="../jquery-1.3.2.min.js" language="javascript" type="text/javascript"> </script>
<script src="../jquery-blink.js" language="javscript" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('.blink').blink();
});
</script>
<div runat="server" id="blinkText">
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red">
</asp:Label>
</div>
</asp:Content>
In code behind:
lblMessage.Text = "You can not complete the test unless you solve all the questions";
blinkText.Attributes.Add("class", "blink");
The message appears at run time but it does not blink.Where have I gone wrong?Another information which might be useful is that this label lblMessage is inside an Update Panel.
your label id is lblMessage and you can add your class to it instead of blinkText
your code is :
lblMessage.Text = "You can not complete the test unless you solve all the questions";
blinkText.Attributes.Add("class", "blink");
change it as :
lblMessage.Text = "You can not complete the test unless you solve all the questions";
lblMessage.Attributes.Add("class", "blink");
and try ...
First of all, you are doing a Class selector there $('.blink')
So for that to work, you need to add that class to the Label
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" CssClass="blink" ForeColor="Red">
</asp:Label>
or what I would prefer is the normal Element selector via ID
$('<%=lblMessage.ClientID%>').blink();
When using MasterPages with ContentPlaceHolders you just add your contentplace holder ID before the element ID in the selector with underscore like so
$('ContentPlaceHolder1_lblMessage').blink();
//Just debug this, now and then it adds other characters like $ct01_ infront of the contentplaceholder part $('$ct01_ContentPlaceHolder1_lblMessage')
Edit
If you want to make the whole Div Blink,
use the following javascript/Jquery
$(document).ready(function()
{
$('#blinkText').blink();
});
else if you only want the elements to blink which has the blink class assigned to them, then assign the classes correctly as #Farrokh has mentioned in his answer
Using System.Threading, add an AJAX timer control and a ScriptManager to your aspx page.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:timer runat="server" ID="tmr1" Interval="300000" ontick="tmr1_Tick"></asp:timer>
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
in timer_tick event put the following codes:
protected void tmr1_Tick(object sender, EventArgs e)
{
lblMessage.Text = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss tt");
lblMessage.Visible = true;
Thread.Sleep(10000);
lblMessage.Visible = false;
}
OK dude,if your problem not solved yet try this:
place a span in your HTML and add class='blink' to it, then reload page to see what happened.
there are two result:
span was blinked, then your server side code had problem, we should to check it
span not blinked, then your client side code had problem and we should to correct it.
We're waiting for your answer ...
net , c#. I am calling a javascript by using following code . `
<script type="text/javascript">
$(function () {
$("[src='/pinterest/portals/0/Images/about-person3.jpg']").pinit();
$("[src='/pinterest/portals/0/Images/about-us-group.jpg']").pinit();
});
</script>
My c# code is
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<br />
<img ID="ImageZoom" runat="server" src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> ' style="display: inline; height:auto; left: 0pt; top: 0pt; width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ImageId") %> ' />
</ItemTemplate>
</asp:Repeater>`
if i add more images i should call javascript for all images .
You're question is vague at best, but I think this is what you're looking for:
Assign a class to the images that you want to call pinit() on.
Use jQuery's class selector to retrieve the appropriate objects.
<img ID="ImageZoom" class='pinitPlease' runat="server" ... />
$(function () {
$(".pinitPlease").pinit();
});
assuming you want to zoom images that are located in /pinterest/portals/0/Images/
you can adapt your jquery selector to select those imgages that start with that path
$("[src^='/pinterest/portals/0/Images/']").pinit();
All your images will have the word "ImageZoom" in their ID, so you can make a selector by that and find all images together.
$("[id*='ImageZoom']").pinit();
I am working on asp.net and ajax using c#. I am trying to create a new user registration where i am poping a updatepanel with loading image when an user clicks on submit button. and also i need to insert the data into database at the same time. I use the following code,
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"> </asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:Dropdownlist ID="drpCountries" runat="server" Font-Bold="True" ForeColor="#FF3300"></asp:Dropdownlist>
<br />
<asp:Button ID="btnLoad" runat="server" onclick="btnLoad_Click" Text="submit" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/avatarloading.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:25%;left:35%;" /><center><span style="color:White;font-weight:bolder;font-size:x-large;"><b>Loading...</b></span></center>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
and in my code behind file like,
protected void btnLoad_Click(object sender,EventArgs e)
{
//INsert the records into database
}
At first when user clicks on submit i am able to pop loading panel with loading gif image. after successful insertion i need to show some message like registration success in place of image on loading panel. please guide me.
You can bind endRequest event of asp.net ajax to get control after ajax request completed.
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequest);
function endRequest(sender, args) {
alert("After ajax request");
}
</script>
I'd create a panel which looks identical to the UpdateProgress markup (css classes) with a label in it. And on a successful operation you set the label text and switch the panels Visible property to true.
I've got a form that is displayed inside a jQuery colorbox. When the form is submitted, the fields within that form are not being posted back to the page. I modified the javascript to store the form fields into hidden fields on a submit and those DO post back. The problem is, since this is a login box, I really don't want to move the password around like that. The main form content is inside an update panel. Here is the code for my master page:
<form id="myform" runat="server" clientidmode="Static" method="post">
<asp:ScriptManager ID="ecommerceManager" runat="server" ClientIDMode="Static" EnableViewState="False" EnablePageMethods="True">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.6.1.min.js" />
<asp:ScriptReference Path="~/js/jquery.colorbox.min.js" />
<asp:ScriptReference Path="~/js/eCommerce.js" />
</Scripts>
</asp:ScriptManager>
<div style="width: 940px; margin-left: auto; margin-right: auto;">
<div align="left">
TOP OF THE PAGE
<asp:ContentPlaceHolder ID="bodyContent" runat="server" ClientIDMode="Static">
</asp:ContentPlaceHolder>
BOTTOM OF THE PAGE
</div>
</div>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(loadData);
</script>
</form>
Here is some of the code from my main default page that uses the master page:
<asp:Content ID="mainContent" ContentPlaceHolderID="bodyContent" runat="server">
<asp:UpdatePanel ID="ecommerceUpdate" runat="server" ClientIDMode="Static">
<ContentTemplate>
<asp:Panel ID="pnlEcomMain" runat="server" CssClass="ecom_main" ClientIDMode="Static">
<asp:HiddenField ID="statusField" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<asp:HiddenField ID="hdnUsername" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<div class="add_product">
<div class="add_product_menu text_12_bold">
<asp:Image ID="imgAddProducts" ImageUrl="~/images/ecom_icon_add_2.gif" CssClass="std_btn" AlternateText="Add Products" runat="server" ClientIDMode="Static" />Add Additional Products:<br /><br />
<asp:DropDownList ID="newproduct" runat="server" ClientIDMode="Static"
onchange="addProduct()">
</asp:DropDownList>
</div>
</div>
</asp:Panel>
<div class="clear"></div>
<!--- HERE IS THE COLORBOX POPUP CONTENT --->
<div style="display: none; visibility: hidden;">
<div id="inline_login">
<p><strong>User Login Details Go Here</strong></p>
User Name: <asp:TextBox ID="loginName" runat="server" ClientIDMode="Static" EnableViewState="False" ViewStateMode="Disabled" /><br />
Password: <asp:TextBox ID="loginPassword" runat="server" TextMode="Password" ClientIDMode="Static" /><br />
<input type="button" name="loginBtn" id="loginbtn" value="Login" onclick="javascript:validateLogin()" />
</div>
</div>
</asp:Panel>
<asp:Label ID="xmlContent" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The new product field properly posts, but the username and password doesn't UNLESS I copy it to the hidden fields before a post. I'm guessing maybe it's a conflict with the update panel? I was originally trying to get a Login Control working in the Update Panel but read in the forums that there is a known problem with this.
Any insight on this would very tremendously be appreciated. I'm using firebug and can confirm that the fields simply aren't in the post which is why ASP isn't finding them.
Apparently, despite being inside the form, the colorbox actually moves the content outside the form. I was able to resolve this by adding this line of code to my JavaScript submit function:
jQuery('#inline_login').appendTo('form');
Hope it helps someone else!
I have never used jQuery colorbox, but i had a similar problem with jQuery UI modal popup. What it was doing was, when i attached the popup it moved the content div outside of the asp.net form so the controls were not getting posted back.
Another option that worked for me in a particular .NET CMS (DNN) was to take Jack's fix and attach to the cbox_complete event. Posting in case someone else might find this useful.
$(document).bind('cbox_complete', function () {
$("#colorbox, #cboxOverlay").appendTo('form:first');
});
Just had a similar problem with colorbox & form, solved it this way. My problem was that the submit wasn't working since the fieldsets were stripped of the form tag; So if your form isn't posting in colorbox, try this, sending in the form id as the href for the colorbox content
$(document).ready(function () {
$('#login-trigger').click(function () {
$.colorbox({
inline: true,
href: "#login-form",
close: "×",
onOpen: function () { $('#login-content').css({ display: 'block' }); },
onClosed: function () { $('#login-content').css({ display: 'none' }); }
});
return false;
});