ansaurus

Question

Answer 1

+2 A:

The jquery css method lets you set css properties. If you set any properties you want to enforce on the window load, they should override what was set in the css files.

$(window).load(function () {
  $("#footer").css("visibility", "visible");
});

You might also look at using an !important rule, to trump the styles in the user editable style sheet.

vkit 2010-05-19 04:41:37

Ah, you beat me to it :) But they could use more than just visibility, they could use a negative `text-indent`, `display:none` or make the text color transparent or the same as the background.

fudgey 2010-05-19 04:43:15

These techniques require you to set every property you want to protect (which you probably don't want to do), and rely on specificity and !important, neither of which are reliable.Also, they rely on javascript, which you really don't need for a robust solution.

Beejamin 2010-05-20 12:14:16

Answer 2

A:

You could try two methods:

Use the !important flag in your CSS
Add the bar using script, which means you are adding it and its style after the page has loaded. But don't use an ID or class name, so they can't target it easily with CSS.

fudgey 2010-05-19 04:42:26

they can always figure out the structure of the page later on, and wouldn't necessarily need to target the bar directly using an id or class.

Anurag 2010-05-19 05:07:21

A smart enough person will ALWAYS be able to disable or hide any part of a page no matter what you do. Have you heard of Greasemonkey or Stylish addons for Firefox?

fudgey 2010-05-19 05:26:41

Also, I asked this question a while back about allowing users to add their own stylesheet... there are some security issues with which you should be aware: http://stackoverflow.com/questions/1534012/is-it-a-bad-idea-to-let-users-add-their-own-stylesheet

fudgey 2010-05-19 05:35:57

fudgey, it's not about smart people doing whatever they want on their own machine, but site pages that are globally accessible to all. you could hide/remove facebook wrappers, and have all apps run in full screen on your own machine, but if a script/css does it so the app is running full screen for all users, then facebook has a huge problem.

Anurag 2010-05-19 06:24:43

Neither of these techniques are very reliable.If you rely on !important, you need to define every style property you want to protect - !important may (partially) protect the styles you've set, but it can't protect the styles that aren't set.Elements added using scripts can be targeted with CSS whether you give them ID's and classes, or not. Besides, you want to be able to style the thing yourself, right?

Beejamin 2010-05-19 18:06:59

Answer 3

A:

Actually @Eber Freitas Dias, if you are familiar with jquery, there is a much easy solution to this

$(document).ready(function() {
   $('#divtohide').show();

   $('#btnclose').click(function() {
            $('#divtohide').hide();
   });

   $('#btnopen').click(function() {
            $('#divtohide').show();
   });
});

Now when you show it again or load your page, your style will be intact. Where as it will hide when user choose to close it

Starx 2010-05-19 04:58:45

Is this even an answer to this question?

Beejamin 2010-05-20 12:14:55

Answer 4

+1 A:

You could load the bar in an iframe.

Anurag 2010-05-19 05:10:59

Answer 5

+1 A:

If you modify the user-created CSS as you save it; adding descendant selectors to all their rules, you can limit the effect of their styles to an element of your choosing. If you take this HTML:

<html>
  <body>
    <div id="userEditableArea">
      <h2>Stylable</h2>
      <p>Users can style this section.</p>
    </div>
    <div id="footerBar">
      Users can't style this section.
    </div>
  </body>
</html>

The user creates the following stylesheet, trying to hide your footer:

h2 {font-size:2em;}
p {font-color:#333;}
#footerBar {display:none;}

When the user saves their styles, you parse through and add #userEditableArea to all of their rules, so they only work on elements inside <div id="userEditableArea">. This should be pretty easy to accomplish with a regex pass or two.

#userEditableArea h2 {font-size:2em;}
#userEditableArea p {font-color:#333;}
#userEditableArea #footerBar {display:none;}

Anything you don't want them to mess with, put outside of #userEditableArea.

This should be pretty robust - more so than using !important rules or high-specificity selectors, and doesn't require any JS.

Beejamin 2010-05-19 18:01:49

This is actually a very interesting solution! Thanks dude!

Eber Freitas Dias 2010-05-20 12:16:05

ansaurus

tags:

views:

answers:

Preserving CSS styles with Javascript

related questions