[enter image description here][1]Help!
I have two svg image buttons on my page. On the page load I am displaying one of the two buttons based on the value in the DB . and I have jquery to hide that button and show another one on button click from UI. I cannot show another button after hide.
both buttons are in a single span class.
The visibility property can't be block. You should use visible instead.
Have a look at the documentation for more about this property.
EDIT
If that can help... Here is an example showing both hidden and visible for the visibility attribute...
// That is executed on load.
$("#btnXX").css("visibility", "visible");
$("#btnYY").css("visibility", "hidden");
// Handler for the toggle button.
$("#toggle").on("click", function(){
$(this).toggleClass("active");
if($(this).hasClass("active")){
$("#btnXX").css("visibility", "hidden");
$("#btnYY").css("visibility", "visible");
}else{
$("#btnXX").css("visibility", "visible");
$("#btnYY").css("visibility", "hidden");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnXX">XX</button><button id="btnYY">YY</button><br>
<br>
<button id="toggle">Toggle it</button>
I figured it out. My back end code was using property btnXX.Visible = false, Changing it to display:none fixed my issue.
If you don't want to render the control at all in certain situations, set Visible="false". Since it keeps the control's HTML out of the page, slightly but if you want to show the control via Ajax/etc, this won't work and display:none css should be used
Related
In my application i have 3 panels corresponding anchor tags. Initially when the page is load first panel is visible rest of two panels is in disable state. when i click second anchor tag it is not displaying once it display in that when i click button data is not display properly i need to display when i click anchor tag corresponding panel data will be display
Remove following part from your code.
$("#<%= btnGetAct.ClientID %>").click(function () {
$("#<%= pnlPw.ClientID %>").hide();
$("#<%= pnlAct.ClientID %>").show();
$("#<%= pnlUserdetails.ClientID %>").hide();
});
You are calling this Click from both side. From your client side as well as server side so I think it is creating conflict and because of that you're not getting your desired output.
You can remove the show/hide init of your panels in your $(document).ready function to prevent resetting to the initial state every time your page is loaded, for example when you're clicking your GET button.
You can set this initial state directly in your aspx code, setting a display:none to the panels you want to hide at start:
<asp:Panel ID="pnlAct" runat="server" Style="display:none;"> [...] </asp:Panel>
<asp:Panel ID="pnlUserdetails" runat="server" Style="display:none;"> [...] </asp:Panel>
Comment/remove theses lines in your JavaScript:
//$("#<%= pnlPw.ClientID %>").show();
//$("#<%= pnlAct.ClientID %>").hide();
//$("#<%= pnlUserdetails.ClientID %>").hide();
Then, your code should work properly.
I have a ASP.net page with Buttons,text boxes, anchor tags.
And I want to change font dynamically in entire web site.so i have added the code in master page at Page_Load event.
this.form1.Attributes.Add("style", "font-family:DilleniaUPC;");
But the font is working for all content except text boxes and Button controls.the textbox and button are asp.net controls.So i want to implement dynamic font in all controls including button and textbox.
can any one help me?
Add a css class like in your style.css which you might be referring to in your page. A more specific way will be to use a css class and apply that class to your form elements.
button, span, input
{
font-family:DilleniaUPC;
}
first one changes whole doc, second one to show changes only changes #font, all you need is
$('document').css('font-family','DilleniaUPC');
$('document').css('font-family','Georgia');
$('#font').css('font-family','Arial');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hello
<div id="font">Hello</div>
You can apply to entire page like this
<style type="text/css">
*{font-family:DilleniaUPC;}
</style>
In my page i have a
dropdown
Panel1
Panel2
Button to Move Next
onclick of dropdown data in Panel1 is displayed. and Panel 2 displays previously selected data.
When there is nothing selected indropdown Panel1 is set to invisible.
Now i want if there is nothing selected in dropdown.onclick of button an alert message to be displayed 'please select a data for panel1 and then move next'
earlier i had done this using javascript function with a custom validation function on Next button. but now i want to upgrade
it to Ajax.
Javascript Code:
function Validate(sender, args)
{
if (document.getElementById("ctl00_rightContainer_ContentTable1_Panel1").style.display == 'none') {
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
But after trying ajax function i used visible property and with that i get an error in javascript saying object not found since on load Panel1 is invisible. i hav upgraded my rest functions to ajax but i dont knw hw shal i do this.
If By AJAX you means Asp.net Update Panel then it is preet easy but i dont like it.
Put the Panel inside UpdatePanels
Dont forgot to add ScriptManager on top:
<asp:ScriptManager runat="server" id="sc1"/>
<asp:UpdatePanel ID="up1" runat="server">
</asp:UpdatePanel>
And for the dropdowns set AutoPostBack to true.
The dropdown will have a selectedIndex and in selectedindex check validations and show next panel or message
You can show message like this:
In Label
OR
Alert or some jQuery Popup
ScriptManager.RegisterStartUpScript(this.Page , typeof(Page) , "alertV" , "alert('Errors');" , true);
If you set Visible property of server control to false it won't render at all and you can't show it from client-side code. Try to set style="display:none;" instead. This way panel will be rendered but not displayed on a page and you can show it from JavaScript.
I want to pop up a panel when a "createbutton" is clicked, I am using a panel and adding some textbox and buttons inside the panel. I am able to make the pop up panel by designing it in the same page where the createbutton is present. can I make the pop up in a separate page and make it pop up when I click the createbutton
Gokul,
Yes, you can put the panel in a separate page and make it appear when you click the create button. Here's one alternative (not my favorite but it doesn't depend on anything extra besides standard javascript):
When you click the "create button" open a new browser window resized exactly to match the panel's size. This can be done with javascript easily as follows:
<
input onclick="javascript:window.open('page.aspx','title','status=0,toolbar=0,width=350,height=250');"
type="button" value="Create" />
On the page that you popped up containing the panel (pagecontainingPanel.aspx - according to my example), you can have code to close the window once you perform some action. For example, if you have a button that's supposed to save some data to the database and comeback to the parent page, you could do something like:
{
///Perform server side process. If successfully executed close this window.
protected void btnSubmit_Click(object sender, EventArgs e)
if(EverythingOK)
{
StringBuilder cstext2 = new StringBuilder();
cstext2.Append("<script type=\"text/javascript\"> function CloseMe() {");
cstext2.Append("window.close();} </");
cstext2.Append("script>");
cs.RegisterStartupScript(cstype, csname2, cstext2.ToString(), false);
}
}
Sure. You could create an iframe and then set the source as the panel you're creating.
Let's say you have two html pages panel.html and main.html
Your panel.html can simply be
<html>
<body style="background-color:red">
Hi!
</body>
</html>
and your main.html
<html>
<body style="background-color:yellow">
<iframe src="panel.html" style="height:300px;width:300px;border:0px;display:none;" id="myPanel"></iframe>
Show Panel
</body>
</html>
This should show a yellow page with a hyperlink of "Show Panel". When you click on Show Panel, it will show the iframe of your panel.html.
If you're using ASP.NET MVC, you can do this by creating a View that can be called down with some Ajax/JQuery code. If you're looking for something along that approach, I can post some code for that.
I have a label and a div called "menu" that is currently invisible. I want that when the user clicks the label. It will make the div visible. I thought of doing it through javascript, how do I make a control visible through javascript?
First, if you want to access controls on the client-side, they must be rendered as html. When you use Control.Visible it won't be rendered on the client and is only accessible on the serverside. Therefore you have to use CSS to toggle it's visibility on the clientside.
show the div:
document.getElementById('menu').style.display = 'inherit';
You could hide it with:
document.getElementById('menu').style.display = 'none';
You should keep in mind that the id of serverside-controls could change when it's inside of an other NamingContainer than the page(f.e. in a GridView or UserControl). So you should use Control.ClientID to get the correct ID that'll be generated from ASP.Net:
So this is better:
document.getElementById('<%= menu.ClientID %>').style.display = 'none';
In ASP.Net 4.0 it's possible to customize the ClientID. For further informations:
http://www.thereforesystems.com/working-with-client-id-in-asp-net-4/
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx