How to make div visible & not visible after clicking button in MVC3.
You could also check the status of the div, whether is hidden or visible, and use the same button to show or hide it. In addition, you can change the caption of the button accordingly:
$('#button1').click(function() {
if ($('#id1').is(':hidden')) {
$('#id1').show();
$('#button1').val('hide');
} else {
$('#id1').hide();
$('#button1').val('show');
}
});
Visible/Invisible and at the same time removing the space that the element occupies in the page
$('#someid').toggle(); // to toggle between visible/invisible
or $('#someid').show(); and $('#someid').hide();
If you want to make visible/invisible but maintain the space the element occupies then use $('#someid').css({visibility:'hidden'}); and $('#someid').css({visibility:'visible'});
But the most correct way in both cases is to create a css class and add that class or remove it from the element
CSS rule
.hidden{ display:none; }
and use $('#someid').addClass('hidden') and $('#someid').removeClass('hidden')
Asp.net-MVC uses jQuery be default, so this is the jQuery version:
$('#buttonId').click(function(){
$('#divId').toggle();
});
Better do it in client side with Javasctipt
//to hide element
document.getElementById("MyElement").style.display = "none";
//to show element
document.getElementById("MyElement").style.display = "inline";
// where MyElement is id of your div
Related
I programatically create li elements, however I need some of them disabled, so far I have:
HtmlGenericControl htmlLi = new HtmlGenericControl("li");
htmlLi.InnerText = row["name"].ToString();
tab_content.FindControl("tab_content_" + row["stars"].ToString()).Controls.Add(htmlLi);
Is it possible to disable them? If not, is their any alternatives?
An <li> element can't be disabled, as there's no input to prevent.
You can however hide the elements you don't want to be displayed.
You can either hide them from the code-behind:
htmlLi.Visible = false;
or you can add some styling to it so that it is put into the DOM, but made invisible by the CSS (so that you can make it visible again with javascript, should you want to):
htmlLi.Attributes.Add("style", "display: none");
or
htmlLi.Attributes.Add("class", "SomeInvisibleCssClass");
I need to check if Javascript is enabled or not. If it is disabled I need to hide a placeholder. In this placeholder is a widget that is based on JS (jQuery).
When Javascript is disabled the user can only see a white box with wasted space.
I found out that I can use the <noscript> Tag to display content (for example a <p> with an ID to identify this state) when JS is disabled but I don't know how to implement a function that checks if this ID is shown to the user or not.
When the ID is shown it should hide the placeholder. Is there any solution for doing this with C#?
Thanks for any help.
You can set a CSS class on your body tag (or any appropriate parent tag) when you render the markup, and then use Javascript to change that class. When the class changes you can set different CSS stylings, including hiding markup:
Initial html:
<body class="no-js">
<div class="placeholder"></div>
</body>
Then some jQuery:
$( document ).ready(function() {
//Remove the no-js class and replace it with js
$(".no-js").addClass('js');
$(".no-js").removeClass('no-js');
});
And some CSS:
.no-js .placeholder{
display: none;
}
This way your CSS rule will default to hiding the placeholder, but jQuery will turn it back on again.
EDIT: jQuery is a little bit case sensitive ;)
You can do that with JavaScript as well. Sounds weird but yes.
You even don't have to check for an ID if it's shown or not. Just hide the placeholder initially with CSS. Then, if JavaScript is enabled, show the placeholder.
hi i am applying css to one of my list elements which is inside a tag which is in a master page. so when i click this link the style is getting applied but the page reloads and then the applied style is again reset to default this is my code can somebody help me with this? please?
function SelectThis(ctrl) {
debugger;
var list = document.getElementById("myslidemenu").getElementsByTagName('a');
for (i = 0; i < list.length; i++) {
list[i].style.color = "white";
list[i].style.background = "#414141";
}
ctrl.style.background = "black";
ctrl.style.color = 'yellow';
}
but since i am clicking on a hyper link. the master page reloads and the selected styles are lost
Since it is a hyper link is residing inside the <li> use
e.preventDefault(); will stop the default action of the <a> tag
Update:
list[i].addEventListener('click',preventReload);
function preventReload(e){
e.preventDefault();
}
Add this code inside the for loop, which will stop the default functionality of the hyperlink i.e., stops the page from reloading.
If you need the page to reload, because it's a menu to sub pages then the way I do this is to:
Define a class for the style
Compare the current page url to the a href url (various ways to do this and various levels of matching)
If they match apply the class to that element
I would do this server side, not with javascript.
Another option is to use a cookie/session variable, not sure on the C# syntax, I did this recently in PHP and used AJAX to set a session variable after filtering some data to remember the current state when clicking down to the next level.
I a have a web form with few textboxes,dropdowns and finally towards the end of the page is 4 custom ajax editors. So on page load the focus is always inside the last editor and no way it comes to the first text box or top of page.On each page load the cursor goes inside the last editor control.How to bring the focus inside the first text box?
Below are the few methods i tried
1.<body onload="document.body.scrollTop = 0;">
2. void Page_Init(object sender, EventArgs e)
{
SetFocus(txtReqtitle);
}
for the above while loading the page i could see the focus goes to the desired text box and then it comes to the last custom control.
3. if(!Page.ClientScript.IsStartupScriptRegistered("scrFocus"))
{
string strScript="var txtBox=document.getElementById('" + txtReqtitle.ClientID.ToString() +"');txtBox.focus();";
ClientScript.RegisterStartupScript(this.GetType(),"scrFocus", strScript,true);
}
4.
function setFocus() {
document.getElementById("txtReqtitle").focus();
}
5. ScriptManager.GetCurrent(this.Page).SetFocus(txtReqtitle);
Any ideas? Thanks..
Seems focus property is not working in load event because of ajax editors
Please add txtReqtitle.Focus() in Page Prerendercomplete() event and let me know whether it works
found the solution which worked for me .would like to share it .. its simple ..just make the autofocus=false for the control.
using jquery
$(document).ready(function(){
$('#<%= txtReqtitle.ClientID %>').focus();
});
I have a label in a master page (sample.master) called lblHeading.
I want to dynamically change the text of the label when I load the content page.
I need to do this because I want to change the heading to something meaningful but only after I know about the content of the page.
Is this possible?
yes, you can in this very simple way........
((Label)Master.FindControl("lblHeading")).Text = "your new text";
Yes.
You want to create a strongly-type master page and you can then access it's properties from your content page during Page_Load or wherever else.
Yes, it is possible. MasterPage behaves just like UserControl in your page.
Possible steps to implement this:
Create a property or method on the MasterPage that enables you to make changes to the Label. E.g.:
public void ChangeLabel(string label) {
lblHeading.Text = label;
}
From your Page, get the reference to the MasterPage by using the Page.Master property.
Call the method defined in step 1 to change the MasterPage contents.
Additional info: You may need to cast Page.Master into your MasterPage type, try Coding the Wheel's link for instructions on how to do that.
Do as stated above. Then, e.g., from your page do this (master page has label with ID="Label_welcome"):
Label mpLabel = (Label)Page.Master.FindControl("Label_welcome");
if (mpLabel != null)
{
mpLabel.Text = "Welcome Fazio!";
}
You can create a public property in the masterpage that will change the label.
public string Heading
{
set
{
lblHeading.text = value;
}
}
It also depends on how deep your controls inside the Master page are. In my case, I had a Label control inside a ContentPlaceHolder control... so I had to do this...
Label myLBL = this.Master.FindControl("HeaderContent").FindControl("myLabel") as Label;