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.
Related
I am displaying button on jquery page load event but it is not working. After the page is rendered, it is not visible.
It works fine if i set the visibility in code behind Page Load event.
Jquery
function pageLoad() {
$('#btnSwitchDistributor').css({ 'visibility': 'visible', 'display': 'inline-block' });
}
Html
<asp:Button ID="btnSwitchDistributor" runat="server" Text="Switch Distributor" Visible="false" />
According to MSDN, when you set Visible="false" in your server-side code then the element is not rendered to the client at all. Which means your button isn't "invisble" on the resulting page, it doesn't exist on the resulting page. No JavaScript code can interact with an element that isn't present.
It sounds like instead you want to apply a style to the control:
<asp:Button ID="btnSwitchDistributor" runat="server" Text="Switch Distributor" style="display:none;" />
Aside from that, there are two two potential issues here which I can't necessarily confirm from the content of the question, but which you'll want to check...
The ID value you're looking for is the server-side object's ID. This may not necessarily be the client-side id of the resulting HTML element. Examine the page source to see the client-side id. If it's different then you may need to set it explicitly using the ClientID property.
Do you ever call pageLoad() in your JavaScript code? If not then, well, you'd need to do that. I assume in the document.ready event handler? For jQuery that may be as simple as: $(pageLoad)
Just remove the visible html attribute and the JQuery css.
My question is that how to set a starting point for a webpage when it is loaded. I have some information in a content placeholder, when the form containing the content placeholder is loaded instead of displaying the information in the content placeholder it goes back to the top and i have to scroll down every time. Is there any way i can make the content place holder as the starting display point for my webpage?? Thanks in advance.
Assuming you are using asp.net web forms, you can use below snippet to set the focus on your placeholder/server control,
if (!IsPostBack)
{
Page.SetFocus(ContentPlaceHolderID);
}
Add an HTML anchor in the view where the you want to be scrolled down to. Then on page load use java script to move to the anchor. see How to scroll HTML page to given anchor using jQuery or Javascript?
Here is an example assuming you are using Razor with a section render
<a href="#contentAnchor">
#RenderSection("content")
</a>
<script type="text/javascript">
$(function() {
location.hash = "#contentAnchor";
});
</script>
I need to run my JavaScript Code on Page Start.
<body onload="document.getElementById('Label1').style.display = 'none';document.getElementById('Textbox1').style.display = 'none';">
Currently I'musing a Onload property in Body Tag and using the code in that. By using in this way the code is running after the total page is loaded and it takes some time to make the label and the textbox to disappear.
Is there any way to run this code before the page Loads??
Or some other way in which I can accomplish this ?
(I'm using another JavaScript function to make the Label and Textbox Visible and Invisible basing on a DropdownList SelectedIndex so if I use properties like style="display:none" I could not make them visible again using JavaScript)
You don't need to make your html elements invisible with javascript when the page is being loaded. You can set them invisible with css using visibility:hidden or display:none and then set them visible with javascript like this:
document.getElementById("someobject").style.display="block";
OR
document.getElementById("someobject").style.visibility="visible";
Also if you are using jquery you can use
$(document).ready(function(){
});
Use jquery's $(document).ready(function(){ this is my code; });
I have the following problem.
I have a div (id = "outline") on my page.
Now I would like it to be set visible="false when clicked on a button.
The catch is it is way outside the container-div.
I've thought about using a Panel and then the Panel.FindControl
but then what happens with the </div>?
Server Side
You dont mention if you want to do this on the server side or via jquery / javascript (client side).
If on the server side set your div to runat="server" and in the code behind set the visibility to false.
So your HTML becomes <div id="outline" runat="server"> and your button click event has a single line:
outline.Visible=false;
Client Side
If you want to do this via jquery (which you should) just give the div an id and use a selector:
http://api.jquery.com/hide/
$('.target').hide();
Or via javascript if you aren't using jquery:
document.getElementById('outline').style.visibility = 'hidden';
Add a onclick to the button with a javascript like this:
document.getElementById('outline').style.visibility = "hidden"
You can also use "display: none" instead:
document.getElementById('outline').style.display = "none"
you havent mentioned that do you want to show the container div while disabling the "outline" div?? If so separate them and then try it..is the simple answer.... if you can not separate - group the part you want to hide in to separate div ( which does not incldued "container" div ) and then hide that part only.
Wondering if there is a way upon clicking on a hyper link to set drop downlist to visible in code behind or asp?
<asp:HyperLink ID="HyperLink2" runat="server">View More Workout Programs ยป</asp:HyperLink>
If you have to do it in code-behind, then use a LinkButton instead of a HyperLink. Then it will have a click event just like any button and in that click event you can set the other element to .Visible=true.
However, does this need to be done in code-behind? Keep in mind the difference in "visibility" between server-side and client-side code:
If set to .Visible=false on the server-side, the content is not delivered to the client at all.
If set to display:none on the client-side, the content is present and can be viewed in the page source, it's just not displayed by the browser.
In some cases, the former is needed for security purposes. But if it's just a matter of user experience then I would recommend showing/hiding the content entirely on the client-side so as to avoid post-backs that do nothing more than change element display properties.
For example (assuming jQuery):
<a id="toggler" href="#">Show the content</a>
<div id="hidden" style="display:none;">Content</div>
<script>
$(document).ready(function(){
$("#toggler").click(function(){
$("#hidden").show();
});
});
</script>
Use an asp:LinkButton instead of a hyperlink and handle the OnClick event. In the OnClick event, toggle myDropDownList.Visible depending on whether you want to show it or not.
You should implement that kind of feature in the client (javascript code) to improve user experience.
Anyway, you can use a Panel with Visibility=false and put Visibility=true in code behind when link is clicked. You would need to adjust the position of that panel with css to look like a dropdown.
You can try with JQuery : http://www.jquery.com
It will be something like
<script type="text/javascript">
$(document).ready(function(){
$("#<% =HyperLink2.ClientID %>").click(function() {
$("#<% =DropDownList1.ClientID %>").toggle();
});
});
</script>
If you need to send form back to the server, use asp:LinkButton instead and handle OnClick event on the server side. If you need to show drop down list on the client side, use javascript function with onclick client event to show or hide any section you want.