0

so what I'm trying to do is apply either of the clear-fix or micro clear-fix with jquery. The reason is I don't have access to the CSS so I've been using jquery to make all of my classes and other css related needs. This is really the one thing I haven't been able to do so I need some help.

both methods: clearfix

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

and micro clearfix

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

use psuedo techniques and I'm not sure how to apply this with jquery. I have been doing 

var small_h = {
    "font-size":    "10.4px",
    "margin-left":  "7px"  
};

$(".small_h").css(small_h);

for my css traditionally, but because I don't have access to teh style sheets I need to define these using Jquery only. Certainly doesn't have to be like that if you can think of a clever way to do this, strange request I know, but it's a work restriction, thanks in advance for your help.

loriensleafs
  • 2,205
  • 9
  • 37
  • 71

2 Answers2

0

To inject CSS into the page, use:

var css = '.clearfix:after ......... ';
$('<style type="text/css">' + css + '</style>').appendTo('head');

Then, to apply the class:

$(".small_h").css(small_h).addClass('cf');
N Rohler
  • 4,595
  • 24
  • 20
  • I tried this and for some reason the content management system turns style into div and breaks it, so that's why I had been doing everything like this var small_h = { "font-size": "10.4px", "margin-left": "7px" }; $(".small_h").css(small_h); – loriensleafs Oct 10 '12 at 17:23
  • _"the content management system turns style into div and breaks it"_ >> This means that your CMS is either modifying jQuery itself or the browser-level DOM methods. This jQuery code is only calling DOM methods to add a ` – N Rohler Oct 10 '12 at 17:28
  • so is there a way to apply the clearfix with the jquery using the method I had been using instead? Cause that's been working consistently. – loriensleafs Oct 10 '12 at 17:45
  • Instead of using a CSS fix, use an element fix: `$(".small_h").css(small_h).after('
    ');`     – N Rohler Oct 10 '12 at 20:17
0

You could append a style block directly into to head.

For example:

$('head').append('<style type="text/css"> .c{ color:red; } .c:after{ content:\' :)\'; } </style>');​

http://jsfiddle.net/xgYYP/

Andy
  • 29,707
  • 9
  • 41
  • 58
  • I tried this and for some reason the content management system turns style into div and breaks it, so that's why I had been doing everything like this var small_h = { "font-size": "10.4px", "margin-left": "7px" }; $(".small_h").css(small_h); – loriensleafs Oct 10 '12 at 17:23
  • @loriensleafs that's really strange. have you tried appending it to the body maybe? – Andy Oct 10 '12 at 17:35
  • I don't think it's the append that's not working, it's that the word style gets changed to div. Any way to add it using the method I had been using or a different method? – loriensleafs Oct 10 '12 at 17:46