I want to Set the Horizontal Scrollbar slider to the right without using css direction:"ltr" or dir="ltr" or an asp:Panel direction="rightToLeft"....
i just want to access the object that controls the Horizontal scrollbar slider to give it the position.
from aspx page or the aspx.cs.
aspx page :
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/BeginScrollFromRight.js"></script> . . .
<body id="body" style="overflow:auto; height:100%;width:100%;"> . . . </body>
js page :
function BeginScrollFromRight()
{
$("#body").scrollLeft($(window).width());
}
I need to have the same effect for the direction:rtl but only for the horizontal scrollbar because other object are not supported when using direction:rtl
<td id="tdView" runat="server" dir="ltr" align="center">
<table onclick="hideMenusComplex();" oncontextmenu="hideMenusComplex();" id="tblView" runat="server">
<tr>
<td>
<asp:Label ID="lblView" runat="server" ForeColor="#5E82D6" Visible="false"><%= translate("View : ") %></asp:Label>
</td>
<td>
</td>
<td>
<cc1:Combobox AlignContainer="Center" ID="ddlViews" runat="server" OnClientChange="onChangeValue()"
FolderStyle="../EsStyles/ComboXpBlue" AutoPostbackEnable="false" Width ="200">
</cc1:Combobox>
</td>
<td>
<asp:Label ID="lblViewArabic" runat="server" ForeColor="#5E82D6" Visible="false"><%= translate("View : ") %></asp:Label>
</td>
</tr>
</table>
</td>
This is the code and the ddlViews is the dropdown list that is opening in a wrong way, the dropdown list is not opening under the control is opening on the left of the control.
For languages the read right-to-left, direction: rtl is really the only way that will work well, in the end.
If you just want to scroll all the way to the right, jQuery JavaScript like:
$("#YourContentDiv").scrollLeft($("#YourContentDiv").width());
or:
$(window).scrollLeft($(window).width());
will do it.
.
In case you are new to jQuery, you can add it to your page, like this.:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function jQueryMain ()
{
$("#YourContentDiv").scrollLeft($("#YourContentDiv").width());
$(window).scrollLeft($(window).width());
}
$(document).ready (jQueryMain);
</script>
.
PS: jQuery takes most of the cross-browser hassle out of JavaScript like this.
Related
I'm trying to get the id of the second iframe which is iframe2 in the codebehind to add some css styling. This is my html:
<body>
<form id="Form1" method="post" runat="server">
<table id="Table1">
<tr>
<td>
<iframe id="iframe1">
</iframe>
<uc1 id="uc1"></uc1>
</td>
</tr>
<tr>
<td>
<asp:Panel id="Panel">
</asp:Panel>
<uc1 id="uc2">
</uc1>
</td>
<td>
<iframe id="iframe2">
</iframe>
</td>
</tr>
</table>
</form>
</body>
For some reason I'm not able to get the iframe id in C#. How can I do that please?
Accessing the Iframe
Ensure that you add the runat="server" attribute to the <iframe>:
<iframe id="iframe2" runat="server"></iframe>
This will enable to to access it in your code-behind via the FindControl() method:
// Access your iframe
var iframe = FindControl("iframe2");
iframe.Style.Add("border", "2px solid red");
Or directly by using its assigned id:
iframe2.Style.Add("border", "2px solid red");
Regarding Styling
You mention that you are explicitly trying to style this element. If that is the case, you should likely be using CSS as opposed to setting inline styles on the <iframe> element itself.
For instance, you could apply styles as such to target that element:
<style type='text/css'>
#iframe {
/* Place your styles here (i.e. border: 4px solid red, etc.) */
}
</style>
It's worth noting that actually styling an <iframe> is going to only style the element itself, as the content that is rendered within it is essentially "sandboxed" within the element and won't be affected by some of the assigned styles.
Change the IFrame to have runat="server" you can then get to it on the server side.
<iframe ID="MyIframe" src="" runat="server"></iframe>
You can set set items in C#.
MyIframe.Attributes["src"] = Page.ResolveClientUrl("~/ThisOtherPage.aspx");
MyIframe.Attributes.Add("style", "cursor:pointer;");
I am trying to create a basic video and text chat web site.In the room page I have the video as flash and a textbox(multiline) which shows all the messages sent to the room and one textbox for users to type and send by clicking the button beside it
<tr>
<td>
<asp:UpdatePanel ID="UpdtPnlMesajlar" runat="server" EnableViewState="true">
<ContentTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="TxtBxOdaMesajlari"
runat="server" ReadOnly="true"
TextMode="MultiLine"
Width="475" Height="100" >
</asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TxtBxMesaj" runat="server"
Width="412"></asp:TextBox>
<asp:Button ID="BttnGonder" runat="server"
Text="Gönder" Width="55"
OnClick="BttnGonder_click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
Above is my code, all those controls are in an UpdatePanel so when user clicks BttnGonder that no flickers happens.
When user presses the button what he typed is concataned to TxtBxOdaMesajlari in the below method called BttnGonder_click.
protected void BttnGonder_click(object sender, EventArgs e)
{
string uyeId = Session["UyeId"].ToString();
string mesaj = uyeId + " : " + TxtBxMesaj.Text;
TxtBxOdaMesajlari.Text = TxtBxOdaMesajlari.Text + Environment.NewLine + mesaj;
ScriptManager.RegisterStartupScript(this, this.GetType(), "txtbxmesajlarslide", "buttonClicked();", true);
}
Well after a number of messages scrollbars appear TxtBxOdaMesajlari can be seen , however the new messages cannot be seen because TxtBxOdaMesajlari does not slide/scroll down automatically.I searched about this and found this example Multi User Chat Room Using ASP.NET 2.0 and AJAX it uses Javascript's scrollIntoView() so I decided to use it but the page gets flickered and scrolling does not work at all.Maybe I am using the wrong control or the wrong way to do is.
I am using ASP.NET 4.0 if that matters a lot.
On aspx file
<script language="javascript" type="text/javascript">
function buttonClicked() {
$get("TxtBxOdaMesajlari").scrollIntoView("true");
}
</script>
I am using ScriptManager.RegisterStartupScript because the controls are in an UpdatePanel as it was suggested and worked fine at Accepted answer by user:3742 of JavaScript function is not working.
scrollIntoView is used to scroll the textbox itself into view, not its contents.
In order to scroll to the end of the textbox, you can use:
function buttonClicked() {
var textBox = $get("TxtBxOdaMesajlari");
textBox.scrollTop = textBox.scrollHeight;
}
I want to hide the textboxes in the Updatepanel according to the user's choice in the Combo boxes. It works well outside of the UpdatePanel but it stops working and no longer hiding textboxes when I put inside the UpdatePanel. Could you please help me about this? Thanks.
My Codings are as follow:
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(BindControls);
$().ready(function () {
BindControls();
$("#<%= ddlType.ClientID %>").change();
});
function BindControls() {
$("#<%= ddlType.ClientID %>").change(function () {
ShowHideCalendars();
});
}
function ShowHideCalendars() {
$("#trDates").toggle($("#<%= ddlType.ClientID %>").val() == "T1");
}
</script>
<asp:UpdatePanel runat="server">
<contenttemplate>
<asp:DropDownList runat="server" id="ddlType" AutoPostBack="True"
onselectedindexchanged="ddlType_SelectedIndexChanged">
<asp:ListItem>T1</asp:ListItem>
<asp:ListItem>T2</asp:ListItem>
</asp:DropDownList>
<table>
<tr>
<td>Row 1</td>
</tr>
<tr id="trDates">
<td>From: <asp:TextBox ID="TextBox1" runat="server" CssClass="dtpicker"></asp:TextBox> To: <asp:TextBox ID="TextBox2" runat="server" CssClass="dtpicker"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Literal ID="ltStatus" runat="server" Text="You haven't selected."></asp:Literal></td>
</tr>
</table>
</contenttemplate>
</asp:UpdatePanel>
Usually, it's safer to use live() jQuery method when adding handlers for controls inside updatepanel
However, I'm not sure whether it will solve your problem
What happens is as follows - you are toggling the textboxes visibility in the client side, but then a postback occurs. When the textboxes are inside an UpdatePanel, they are being rendered again and that toggling action is lost.
Two things you can do:
1) If you all you are doing when the drop-down value is change is toggling the textbox visibility, you can lose the AutoPostBack="True" and the OnSelectedIndexChanged event.
2) If you are doing more than that and need the server side call, you can set the textbox visibility in the server side event.
i have web page it has a page header content like main menu,logo and so..on..
and in iframe i am loading the side menu and content. while loading the web page i am using an empty home page to display. after some time in mid of some page while refresing the page it reloads the home page. But i need to display the page that i am using as a current page
code is
<form id="form1" runat="server">
<div>
<table>
<tr>
<td style="vertical-align: top; width: 100%" height="115px">
<div>
<uc1:MainMenu ID="ucMainMenu" runat="server" />
</div>
</td>
</tr>
<tr>
<td>
<iframe src="HomePage.aspx" runat="server" width="1250px" height="675px" id="ifSideMenu"
frameborder="0"></iframe>
</td>
</tr>
</table>
</div>
</form>
in that iframe deafult page is Homepage.aspx,it is empty page. When i clicked the sub menu it loads the content like AddMaster.aspx. When i refresh the page it loads Homepage.aspx, but i need to display AddMaster.aspx
help me
this code will help u to refresh the iframe only.. not the whole web page. but., i dont understand your que clearly brother.
<IFRAME id="frame1" src="http://www.google.com/" runat="server">
<script type="text/javascript">
function refreshiframe()
{
parent.frame1.location.href="http://www.google.com/"
setTimeout("refreshiframe()",3000);
}
</script>
<body onload="refreshiframe();">
I finally found the answer for this question.
It may help for others.
Add the below code in HomePage.aspx and other pages that are going to load in the iframe
Session["CurrentPage"] = Request.RawUrl.ToString().Replace(Request.ApplicationPath.ToString() + #"/", "");
in Main Page in page load event.
if (Session["CurrentPage"] == null)
Session["CurrentPage"] = "Exit_Tracker.aspx";
ifSideMenu.Attributes["src"] = Session["CurrentPage"].ToString();
I have a simple form. Its got one field and a submit button.
I hide the submit button. The submit button is actually triggered with an anchor
tag that calls a javascript method that uses jQuery to get the element and execute
a click(). This works fine, the form posts and record is successfully written into the DB.
So now I added xVal for validation. I am trying to add in the simple client side validation.
It doesn't work when I click the anchor tag. However, if I un-hide the submit button and try posting the form with that instead of using the anchor tag that's calls the js method, it does work. So basically I am trying to figure out why it doesn't work when I use the js method to trigger the click of the submit button.
Any grande ideas? Thanks much!
Heres some code...
<div id="manufacturerButtons" class="moduleRow">
<%= Html.ActionImage(Url.Content("~/Content/Icons/bullet_go_back.png"), "Back To Admin", "Admin", "Admin")%>
| <a class="actionImage" href="javascript: addManufacturer();">
<img border="0" src="<%= Url.Content("~/Content/Icons/accept.png")%>"> <span>Add
Manufacturer </span></a>
</div>
<div class="moduleContent">
<div id="manufacturerContainer">
<div class="moduleRow">
<h3>
New Manufacturer</h3>
</div>
<div class="moduleRow">
<% Html.BeginForm("NewManufacturer", "Admin", FormMethod.Post); %>
<table class="noBorder" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 125px">
<h6>Name:</h6>
</td>
<td>
<%= Html.TextBox("Name") %>
</td>
</tr>
<tr style="display: none;">
<td>
</td>
<td>
<input type="submit" id="btnAdd" name="btnAdd" />
</td>
</tr>
</table>
<% Html.EndForm(); %>
<%= Html.ClientSideValidation<EquipmentManufacturer>() %>
</div>
</div>
Javascript:
function addManufacturer() {
//$('form').submit(); // doesnt work when trying to validate either
$('#btnAdd').click();
return true;
}
What you need to do is trigger the jQuery validation on your form. Try:
$('form').validate();
To submit the form upon successful validation, try:
$('form').validate({ submitHandler: function(form) { form.submit(); } });
Note that 'form' should be a valid jQuery selector for your form...