Is it ok to hide any thing temporarily or forever using display:none? in dynamic site where many component of page coming from different plugins etc and many time if client doesn't want any thing on page then i use dispaly:none to hide things from page . I do not remove thing from actual source because client can come back ask to enable that thing again.
so what are pros and cons to keep things hide from display:none if i keep any element hide using Display:none forever?
is there any cons in terms of SEO, Screen reader, Accessibility etc?
If the client wants it removed, then create a backup of the page, and post a page that actually has it removed. Don't substitute CSS for actually removing an item. If they decide they want it in the future, then go in and swap your backup for your live copy. If you're dealing with dynamic output (in the case of PHP or a comparable technology) you could stop that particular output with comments so they're never included in the response.
Pros: Very easy to do
Cons:
You are still loading the components on the server side and the client will download them. The browser will simply not "show" them.
Anyone using "view source" will be able to see the values that are "hidden". so never use it to hide sensitive information.
You can simply "comment" these section server side to save a lot of processing on the server, bandwidth, etc.
It's probably also worth mentioning here that some search engines (Google for example) do take stock of hidden content.
Hiding huge amounts of text using display:none; is one of the things many search engines pick up on as keyword spamming.
:)
It makes sense to hide/show stuff with 'display:none' when you do client-side Ajax. This way you can switch views/tabs without doing server round-trip.
It is needed to actually remove something from the page markup when there are security implications. If a user doesn't have the right to see some sensitive information, it shouldn't be there when they click "Display source".
display: none is good to hide things you want visible when people turn css off or use browsers that doesnt support css.
As far as accessibility goes, there is a strong chance that something hidden with "display: none;" will NOT be read by a screen-reader. This may be acceptable if you intend for it to be that way.
A possible alternative to hiding content for screen-readers/css-offers only is to use this class:
.offscreen {
position: absolute;
left: -9000px;
width: 0;
overflow: hidden;
}
And the following HTML:
<h3 class="offscreen">Site Navigation</h3>
For full information on hiding techniques:
http://www.access-matters.com/2005/04/23/screen-reader-test-results/
Related
I would like to confirm what effect this CSS code has on the homepage of a wordpress website.
.lazy { display: none !important; }
Many thanks for explanations.
I have noticed images in the homepage are being blocked from being displayed which is why im asking this question.
The CSS code itself, prevent any element which has it from being displayed on the screen.
Due to its name, it may be used to enable something called lazyload (you can read about it here).
lazyload is usually used for several reasons:
Remove the pressure of loading many images at first; sometimes images are placed at the end of the page so the client won't see it at the top of the page, with lazy loading trick it. You can prevent those images from being loaded, and force them to load only the moment your client reach them by scrolling or other events so it cause page loading improvements (because the page is now lighter)
For making some visual effects; almost everywhere you need the image to be hidden and after some juggling or some specific events it is shown (like wp-admin and sub-menus, which will be shown if you hold your mouse on or click them)
etc
Recording to the reasons; I guess your kind of codes (which will be handled in client-side and client browser) does not fit the first reason and may be used for the second one because for the first reason it is better (and I guess it must) implemented on server-side. Why? Because in your code, the image is loaded and be will there and just not shown because of the CSS code
This was all I know but if you want a more specific answer you have to say where you saw it in WordPress, in a plugin, wp-admin, template, etc...
Hope the answer becomes handy for you
I have some pages that are loaded with a hash/anchor in the url. When we do this it screws up the padding/margin of the document. Without it, it works fine.
What's even stranger is if I use the browser tools to get to the css and disable the margin and padding and then reenable it, it looks fine. We are using a third party web site to serve our site which means we're kind of locked into a CMS type of service and our hands are tied to a certain extent as to how much we can customize our pages. So, therefore, we have multiple css files referenced and so forth.
If you look at the two urls below you'll see the issue in the one with the #company_settings appended to the end of the url. If you then use inspect element in chrome to look at the header and disable and reenable the custom.css:2 for margin and padding, you'll see it then fixes the problem. Any idea why this is happening and if there's something I can do in css to fix this? Thanks.
http://www.patriotsoftware.com/patriot-pay-help-center-payroll-settings
vs
http://www.patriotsoftware.com/patriot-pay-help-center-payroll-settings/#company_settings
Using a hash in the URL signals the browser to scroll to a specific location of the document.
And the browser is exactly doing so.
If you can edit skin.css (which sounds so by it's name), go into line 6:
#foxboro_header {width:100%;overflow:hidden;}
Change it, remove the overflow rule:
#foxboro_header {width:100%;}
This should make it work.
BTW if it's a block element, the width is automatically set to 100%. Setting it would be redundant then.
Next to that the code of the page is full of validation errors, deal with them otherwise you might run into more and more problems.
I had a similar issue using hash.
There is/was a some bug with display: table and hash url. I changed it to display: block and it was working correctly afterwards.
Hope it helps someone.
I use display advertising on my site and I noticed certain expandable ads (ads that expand when you roll over them) changes some of the elements on my page by adding the code "visibility: hidden" as inline CSS. This results in text boxes and other content disappearing when the ad loads. Other than simply disabling the offending ad (not a good solution since I never know what other ads might be causing problems or not), is there a way to block ads from injecting CSS instructions into my site like this? Any advice appreciated!
It's likely the flash add is using the ExternalInterface feature in flash to pipe javascript to your page:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html
The easiest way to make sure this doesn't happen is to set allowScriptAccess to false on your object tag where the ad is embedded:
http://kb2.adobe.com/cps/164/tn_16494.html
If you need the functionality that require allowScriptAccess (navigateToUrl comes to mind) then things get a little bit more complicated :-)
How to Disable print, print screen, right click using asp.net
You cant. You cannot avoid content being copied from your pages.
Disabling Right Click is possible, but it doesnt solve your 'problem'. The user could still copy your image, by disabling javascript or just inspecting the source.
And even if you could disable those keys, the user could still just make a photo of his monitor. Good luck disabling that!
Short answer: You don't. You are writing a web application; features of the underlying platform are outside your scope, and you have no business trying to fiddle with them.
Long answer: You can try to capture those keys using javascript, and override the default behaviour, which will somewhat stop very naïve users, but all it takes to disable this "security" is to turn off javascript. Even if you come up with more sophisticated "protection", the essence remains: You are sending content to the client, and once it gets there, it is out of your hands. Given suitable tools (wget is enough for most things), anyone can copy and modify your content in any way they like. Similarly, whatever can be shown on the screen inside a browser can be captured and saved. There is no way around it. If you don't want your content copied, don't send it.
Forget about it. You will irritate your end users who will find a way to con you and do what you didn't want them to do. Forbidden fruit is always the sweetest. By telling them explicitly "you cannot do this", they will wonder why do you want to guard your content and they might try even harder to do stuff you otherwise wouldn't want them to do.
Psychology and technology are against you in this case.
Printing
You could disable printing (well sort of - it's not 100% effective) using a "print" style sheet.
I have not tried it myself, but here is a link that could get you started: http://webdesign.about.com/od/advancedcss/qt/block_print.htm
Print screen
Print screen is something that is typically controlled by the operating system not the browser nor webpage. So you are unlikely to be able to stop this. However, casting my mind back I remember a time (perhaps a long long time ago), where you couldn't take screen shots in Windows (maybe Windows 98) of videos... so if your really in need of disabling print screen - perhaps you could perhaps encode your content in a video... but this will have many many downfalls - namely accessibility, search engine optimisation and it being a royal pain to do... so I wouldn't recommend it under any circumstance.
Right screen
Right click you can disable, but not using a server-side technology (such as ASP.net) instead in a client-side technology such as javascript. A quick search in your favourite search engine will find some help. But disabling right click is rudimentary to get around, so it is not full proof.
An alternative to protect your content is to possibly investigate "rights" in PDFs. I believe you can disable the "right" to print.
However none of these solutions are going to be full-proof. As long as you are making your content available to an end-user on their own computer, there is always going to be a way around your restrictions.
I have implemented for disabling printing using window.onbeforeprint()
Refer this Answer
I am developing an ASP.NET application for an online quiz test. The set of questions would be randomly selected from a pool of questions. The application works fine, but I want to hide the browser menu option (so that user cannot save or print the test) when the quiz page is shown. I do not want to open a new popup window. So how do I do this for the active window.
The application consists of around 5 web pages, and the test is on pages 3 and 4. So I want the menu to be hidden only on pages 3 and 4. Is this possible and how do I do this?
Thanks in advance
This isn't possible. You can only hide the menu bar in a popup window.
Either way, though, the user can always right-click and select Print, or use a shortcut like Ctrl + P. And even if you could hide the menu, they could just disable JavaScript. If they really want to print/save the quiz, you won't stop them. I suggest finding another workaround.
I don't think it is possible to do what you are asking.
And remember that there are other ways to print than using the menu of the browser : Ctrl+P generally does that , it's also possible to "save the page" from the right-click menu or using Ctrl+S -- and, of course, there is always print-screen ;-)
The best "protection" you can probably have is defining a correct license (which means you might need a lawyer, to get something solid), that explicitly forbids re-distribution of questions : this way, your users can re-use the questions for them -- you cannot prevent that, anyway -- but can't re-distribute them.
Of course, this is probably only worth it if you are developping some quizz with questions that you are going to sell.
Once the page is rendered to the screen the ultimate control goes to the user. He can turn off javascript and do the necessary job or he can capture the page and so many ways.
Better not to try doing this.
As long as the data is in the user's computer he may access it in one way or another, and i'm not sure its worth the hassle.
If you want to deny printing, you may try using some special CSS media types (like definning some styles with display:none or color:#fff).
http://www.w3schools.com/CSS/css_mediatypes.asp
But even like this the user might simply press PrntScr :)
You may also intercept ctrl+P keystrokes, by using an onKeyDown event on the whole HTML body and stop the bubling, but it may not work the same cross-browser.
You may also deny right-clicking on the page by handling the onContextMenu event ( http://msdn.microsoft.com/en-us/library/ms536914%28VS.85%29.aspx )
Also, the questions should be rendered as images, or deny selecting text from the page so the user wont be able to copy/paste the questions in an email (http://www.dhtmlcentral.com/forums//archive/index.php/t-18008.html mmight help)