2

I'm trying to add a css property to an element with the following command:

$(".pinned").css("left",colPositionLeft);

colPositionLeft is calculated when the page is loaded.

The problem is that the .pinned class is not present in the DOM when the page is loaded, pinned class is add to an element after the user had scroll. So, the command doesn't work.

How can I set the .pinned css property when the page is loaded but not present in the DOM?

UrsinusTheStrong
  • 1,239
  • 1
  • 16
  • 33
Majonsi
  • 384
  • 1
  • 4
  • 17
  • show the event handler code please (scroll one) – Yehia Awad Jul 17 '16 at 13:37
  • 1
    Where is the `.pinned` element? If you created it programatically then you can still apply CSS so long as you have a reference to the Node (assigned on creation), for example: `var pinned = $('
    ', {'className' : 'pinned'}); /* ... */ `pinned.css('left', colPositionLeft);`
     – David Thomas Jul 17 '16 at 13:38
  • if you want to add the class .pinned to an element in the DOM, you can do it with jqeury by writing : $(element).addClass("pinned"). – EddNewGate Jul 17 '16 at 13:41
  • You could still add a stylesheet instead BUT still not sure why would you need to add it before the element is set in the DOM – A. Wolff Jul 17 '16 at 13:43
  • Possible duplicate of [Modifying CSS class property values on the fly with JavaScript / jQuery](http://stackoverflow.com/q/7125453/1529630) – Oriol Jul 17 '16 at 13:55
  • If the element doesn't exist anywhere, you can't manipulate it with javascript. You could however do what @A.Wolff suggests, insert a stylesheet, as those styles will apply the second the element is inserted into the DOM anyway – adeneo Jul 17 '16 at 13:59

2 Answers2

5

You can dynamically add CSS rules via JavaScript:

document.styleSheets[0].insertRule('.pinned { left: ' + colPositionLeft + 'px; }', 0);

adds the the rule as the first rule. To add it as the last rule you can use

var styleSheet = document.styleSheets[0];
styleSheet.insertRule('.pinned { left: ' + colPositionLeft + 'px; }', styleSheet.cssRules.length);

Both examples add the rule to the first style sheet (included file or <style> tag in the document) which should usually be sufficient. You can of course use other elements in document.styleSheets to add it to another.

Note that if you try to do this with a cross-origin style sheet it will throw a SecurityError in at least some browsers.

Lazzaro
  • 191
  • 2
  • 7
  • Thanks! But when I use this command I get an error: SecurityError: The operation is insecure – Majonsi Jul 18 '16 at 11:42
  • 1
    I find the solution! Because i have different css files I must use "styleSheets[1]" instead of "styleSheet[0]". And you must add "px" after colPositionleft because the variable is an integer. So the command become: `document.styleSheets[1].insertRule('.pinned { left: ' + colPositionLeft + 'px; }', 0);` Thanks for your help! – Majonsi Jul 18 '16 at 11:52
  • 1
    You get the `SecurityError` when you try to add a rule to a style sheet that was loaded from another domain (e.g. when you include bootstrap from a CDN). And of course you're right about `px`, I missed that. – Lazzaro Jul 18 '16 at 14:58
0

You can use the jQuery on function to modify out for dynamic element that may not have been loaded yet. I often use this function and find it very useful when creating templates and dynamic pages.

$(document).on('scroll', '.pinned', function(){
   $(this).css("left",colPositionLeft);
});

I used this add a reference. jQuery scroll

Community
  • 1
  • 1
andre mcgruder
  • 1,120
  • 1
  • 9
  • 12