I have a messaging tool within the website I am currently working on. The idea is to have a header div and a details div (display="none") for each message.
Ideally, if javascript enabled, I have just the header showing and when the user clicks on it, the details div slide open.
This is fine but how should I work it if javascript is disabled? I was thinking of expanding all messages if disabled, but I don't want a flicker briefly when the page loads of all images open and, if javascript enabled, they collapse.
I'm using ASP.NET and was thinking of checking javascript status of the browser server side but i found out that it can't be done cleanly.
Any suggestions on how to achieve this?
One option is to place this in your head (after the defined styles):
<noscript>
<style type="text/css">
#mydivid {display: block;}
</style>
</noscript>
EDIT: Ive actually posted a better answer, which works off a correct default state.
Actually, the most semantically correct way that you could do this is to append another stylesheet to the head via javascript containing styles that will be implemented if javascript is enabled.
In your example, you will retain the default display for the elements in question.
Then you will create an additional stylesheet (js-enabled-styles.css for example), and place your display:none within that.
Then, in a script tag in your head you will append an additional stylesheet. Using jquery this would be:
$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />');
You are right the server can only tell you if the browser has JavaScript, it has no clue if it is enabled or not.
Things you can try is do not use onready or onload, just put the lines at the bottom of your JavaScript to hide the content. You might even want to place it directly after the elements on the page.
<div id="foo">
asdf
</div>
<script type="text/javascript">
jQuery("#foo").css("display","none");
</script>
One side note, sounds like you should be using a definition list instead of two divs. Would make probably more sense to a person using a screen reader.
I believe you're looking for the <noscript> tag.
You could achieve the result you describe in one of several ways, but here's a fairly straightforward one. Define your default style for the divs to be the following:
<style type="text/css">
div.details
{
display: none;
}
</style>
And after this style tag, use a noscript block to override the default (JavaScript enabled) style, as such:
<noscript>
<style type="text/css">
div.details
{
display: block;
}
</style>
</noscript>
Related
So, the lightbox works on my page but it doesn't respond to any changes made in the stylesheet file, lightbox.css. Yet, when I remove reference to the file, the lightbox stops working, so it's clearly being called to.
In the page's code, the stylesheet is being called with:
<link href="../css_javascript/lightbox.css" rel="stylesheet">
And the jquery is being called with:
<script src="../css_javascript/lightbox-plus-jquery.js"></script>
Truly have no idea what to do from here. I'm really just trying to get rid of the Image # count, and calling to lightbox.option in the page's code doesn't work either.
Not sure what information is best needed to put me on a solution path.
Thanks!
If you want to hide the "image 1 of 4" text, it is not done in the CSS but in the javascript options for Lightbox.
Add this to your page after <script src="../css_javascript/lightbox-plus-jquery.js"></script>:
<script>
lightbox.option({
'showImageNumberLabel': false
})
</script>
Also, your Lightbox.css file is not loading the navigation images, the loading and close images used by the light box.
body:after {content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
display: none;
}
They need to be in a folder, images, one level up from your "css_javascript" folder.
I have a pop up window for signing up for our mailing list. I need it to overlay everything. Currently the css menu sits on top of the pop up. The menu is 9999 on the z index. Where in the pop up code (see below) do I add z index info.
This is the code from Mail Chimp:
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L)
{
L.start({"baseUrl":"mc.us9.list-manage.com","uuid":"56eb37539d1e217bbc3a2ea22","lid":"d8e88803f2"})
})
</script>
You really need to post your HTML and CSS to get a definitive answer on this, but you can try the following:
Make sure your popup overlay has a classname or ID. For example:
<div id-"mailing-list-overlay">
mailing list form goes here...
</div>
Now try adding this CSS rule somewhere in your markup:
<style>
#mailing-list-overlay {
z-index: 10000 !important;
}
</style>
If that works, great! Now try removing the '!important' and see if that works. (Make sure your browser cache is cleared when you reload.) If that works, then try moving the css rule to the proper stylesheet.
If none of these things work, it's possible you have a different issue -- for example, the overlay might not be in the same layer stack as the content you want to overlay. But that would impossible to troubleshoot without being able to see a more complete picture of the HTML and CSS. I can help you if you post your code on pastebin or jsfiddle.
My site is in asp.net 4 / vb. I'm trying to figure out the best way to make a printer-friendly page that only includes our logo at the top and pertinent information, but omits things like navigational bars and other things that aren't necessary. I have a click-to-print icon and it works fine in all browsers, but it doesn't always print out printer-friendly.
I've read things on this site about making a print.css stylesheet, but I'm unsure as to how I'd code the stylesheet, or if I have to assign div attributes to things I want omitted -- and the posts were older posts. Is it recommended that I omit the navigational links, etc., and if so, what is the best way to go about doing this? Thank you for your help!
You can use CSS #media types.
<p> this should be part of the printed page </p>
<div id="navigation_bar_that_should_not_be printed" class="noprint">.....</div>
A simplistic style sheet for the above would be:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
In the above, the <div> with the class="noprint" will be displayed on screen as usual, but it will not be printed.
Update:
The "C" in CSS stands for "cascading" - meaning the "last" or closest instruction wins. I can only assume that the <span class="bodycontent"... (being the last or closest) is overriding the div.
ASP.Net Controls have a CssClass property, that's how you'd define it:
<asp:HyperLink NavigateUrl="http://www.google.com" runat="server" CssClass="noprint" Text="foo" />
You can even directly type class="noprint" (instead of using CssClass) in any ASP.Net tag - VS may complain but it should be ok:
<asp:HyperLink NavigateUrl="http://www.google.com" runat="server" class="noprint" Text="foo" />
You don't need to actually add additional elements to wrap stuff that you don't want to show when printing. The best way to do a print stylesheet is to apply a class (maybe call it print_hide) on elements you want to hide when your page is printed. For example:
<div>Text</div>
<img class='print_hide' src='some_huge_image.png'/>
In your print.css stylesheet, you would do:
.print_hide {
display: none;
}
To apply the stylesheet, add this to your head:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
The div would still print, but the image would not.
This is, of course, in addition to whatever other style changes you want, like removing background images, changing colors, fonts, etc.
Adding that class to stuff to hide at print is a relatively minimal change to existing code.
The other option is to create a separate printer friendly version of all of your pages, and if your pages are really complicated, this might be the way to do it. That being said, the benefit of print.css (in addition to being less work) is that users don't need to explicitly select Printer friendly version, of course.
Apparently adding <link rel="stylesheet" ... in the document body is considered a bad practice by W3C standards. The same for adding <style> blocks in the body...
So are there any standard-compliant solutions to add CSS outside of the <head> tag? Like at the end of the document.
If you only want to include your CSS styles on a specific events, there's nothing stopping you from doing so at the head:
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here
document.head.appendChild(linkElement);
This has the added benefit of adding your stylesheet in an async way, which doesn't block the browser from downloading anything else.
One way to solve that issue is to load the CSS with .get() and, appending it to the head tag only when needed:
JQUERY
var css = "foobar.css";
var callback = function() {
alert("CSS is now included");
// your jquery plugin for a navigation menu or what ever...
};
$.get(css, function(data){
$("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
callback();
});
The callback function is useful to allow script code that depends on the CSS file to be properly formatted, to run only after the CSS as been added!
Only HTML5 allows it with the scoped attribute, but make sure you declare the DOCTYPE correctly.
<style type="text/css" scoped>
.textbox {
color: pink
}
</style>
I think this standard gets largely ignored by most once you start doing things like server side programming or DHTML.
For static HTML files, you definitely can/should follow the rule of only including CSS within the HEAD tag but for conditional output and interactivity it can sometimes simplify things to have conditional styling as well. Consider that in the end, this convolutes the resulting document. Even though browsers may render it just fine, if you yourself were to look at the source, it's just plain easier to read if all the styles defining the layout/display were within the HEAD. There are, of course, a number of other examples and reasons as to why it's bad practice.
The HTML standard exists apart from things like server side scripting and DHTML i.e. it's not the HTML/SSS/JavaScript standard.
If you are talking about an external css sheet, then the correct way is as follows:
<link href="....link to your style...." rel="stylesheet">
If you want to include an inline css, then you just need to do as follows:
<style>
....Your style here...
</style>
I need to override some <style> elements within my Razor page so I've inserted the styles immediately after the opening code block:
#{
ViewBag.Title = "New Account";
Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
#main
{
height: 400px;
}
</style>
The page renders correctly in the browser but Visual Studio green squiggles at <style> complaining that:
<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>
I've doublechecked the master page - no problems highlighted there.
What's Visual Studio expecting at this point? What's the correct way to override styles on a page by page basis? Via jQuery?
The style element cannot be nested under the <body> or child elements of the <body>, instead it should go to the <head> element of the page.
If you try to override the styles like this, they get inserted into the default section of your layout page by #RenderBody(), which I assume is inside the <body> of the layout page, while the default styles still stay in the <head>.
The proper way to override some part of the layout page from the content page would be something along these lines, using Razor sections:
_layout.cshtml
<head>
#if (IsSectionDefined("Style"))
{
#RenderSection("Style");
}
else
{
<style type="text/css">
/* Default styles */
</style>
}
</head>
<body>
#RenderBody()
...
page.cshtml
#{
Layout = "layout.cshtml";
}
#section Style
{
<style type="text/css">
#main
{
height: 400px;
}
</style>
}
<!-- Body content here -->
...
Now if the Style section is defined on the content page, its contents will override the defaults from the layout page.
I suggest you read more on Razor layouts and sections. A nice article on this by ScottGu can be found here.
Regarding Visual Studio markup validation warnings
Visual Studio has a problem when markup that makes up a single page is being split up between different files like this. In most cases there is no way for Visual Studio (or any such IDE for that matter) to know how the different page fragments will be dynamically put together in the end. So usually you can't avoid some of these warnings on a project.
Personally I would ignore the warnings if I know what I'm doing and the resulting pages pass the markup validation (http://validator.w3.org/).
If you really want to hide the warnings, you need to disable the appropriate validation options in Visual Studio. E.g. for HTML in Visual Studio 2012 this can be done in Tools > Options > Text Editor > HTML > Validation.
This appears to be a quirk of using Razor. The validator can't "see" the overall HTML because it's scattered across multiple files using Razor logic to piece it all back together again.
The trick I just figured out is to "hide" the <style> and </style> from the validator. Instead of:
<style>
use:
#MvcHtmlString.Create("<style type\"text/css\">")
And instead of:
</style>
use:
#MvcHtmlString.Create("</style>")
The validator doesn't understand these lines are generating <style> and </style>, so it stops complaining about them.
Make sure you're using a #section XXX around the <style> element where "XXX" is referencing a #RenderSection(name: "XXX", required: false) in a master file that is within the HTML <head> element. This is necessary to make sure the <style> element gets inserted in the <head> element where it belongs.
I've seen this happen on my projects as well. Fortunately, when you run the program, it figures itself out and everything should render as expected.
Due to the separation of content at design time, I believe a few of the warnings from razor pages can be safely ignored.
If the CSS isn't actually being recognized, make sure to add that to the question, but if all you're doing is trying to get a perfect no warnings build, then you might just have to set VS to ignore parser errors such as these.
I think you should be set style in HeadContent
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.hideGridColumn {
display: none;
}
</style>
</asp:Content>
That good for me.
The style tag should be in the head tag, not in the body tag.
You should make a region in the head tag in your layout, and put the style tag in that region.
If you ViewSource one the page as it appears in the browser have you got
<style type="text/css">
//some other style stuff, then
<style type="text/css">
#main
{
height: 400px;
}
</style>
</style>
As that's what the validator implies.
If the page passes a W3 validation test, just ignore VS. I think it struggles a bit with Razor.