We know that using Javascript we can load CSS files.
But, can we load Javascript files or run Javascript code using CSS?
If yes, how? Is there any documentation for this?
I think IE and firefox supports CSS expressions which probably you may think of. Something like
width:expression(document.body.clientWidth > 800? "800px": "auto" );
but these are really bad things and you should avoid this
Also you should avoid CSS expression as much as you can.
You can use the CSS like this:
body {
behavior:url(xyz.htc);
}
and now in the xyz.htc file you can write like:
<PUBLIC:COMPONENT TAGNAME="xss">
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="ABC()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
function ABC()
{
alert("Message");
}
</SCRIPT>
No, you can not run Javascript or import Javascript into CSS... not that you would ever need to.
No.
The closest thing I can think of is Netscape 4 had a thing called JavaScript Style Sheets (JSSS)
http://www.w3.org/Submission/1996/1/WD-jsss-960822
Related
I was given an html file that's running some Javascript & jQuery. I know what minified Javascript looks like and how to unminify it to have an idea of what's going on.
However, when I see the scripts inside the html they look like this. What exactly is this? Parts of it look like regex, but I'm not sure...
<script>
document.write(unescape('%3C%73%63%72%69%70%74%20%6C%61%6E%67%
/*...goes on for 50 lines or so etc*/
</script>
<script>
'9 5m=5y;9 X,1F,1H,1x,C,13,Z,A,1r,2P=1Q,1h=34,2i=60*1h,5U=60*2i;8 37(){t.K(\'X\',\'\');t.K(\'1F\',\'\');t.K(\'1H\',\'\');t.K(\'1x\',\'\');$.1Y({1Z:\'21\',W:\'26://28.29/2a/2b/1b/2c/2d.1b\',2f:{4t:4t,4g:4g,}}).1G(8(T){4d(!T){37()}9 2F=T.1e(\'|\');t.K(\'X\',2F[0]);t.K(\'1F\',2F[1]);t.K(\'1H\',2F[2]);t.K(\'1x\',2F[3]);X=t.x(\'X\');1F=t.x(\'1F\');1H=t.x(\'1H\');1x=t.x(\'1x\');$(\'.13\').1L(1F);$(\'.Z\').1L(1H);$(\'.16\').1C(\'2L\',1x);2H(X)})}9 2R,2S,2U,2Z,31,33,35,36;9 2I,2B,2A,2z,2y,2v,2u,2o;9 3m=[];8 2H(3n){!8(a){9 b=/4k/i,c=/48/i,d=/42/i,e=/(?=.*\\1W\\b)(?=.*\\1V\\b)/i,f=/5t/i,g=/(?=.*\\1W\\b)(?=.*\\5r\\b)/i,h=/(?=.*\\1W\\b)(?=.*\\b(?:5q|5o|5n|5k|5i|5h|5e|5b|59|56|40|4u|4h)\\b)/i,i=/4b/i,j=/(?=.*\\5z\\b)(?=.*\\3U\\b)/i,k=/4e/i,l=/5x/i,m=/3R 3T/i,n=/(3X|3Y)(?=.*\\1V\\b)/i,o=/(?=.*\\43\\b)(?=.*\\1V\\b)/i,p=3i 4i("(?:4s 7|4v|4W 50|52|53-54)","i"),q=8(a,b){V a.5a(b)},r=8(a){9 r=a||5c.5d,s=r.1e("[5g");V"E"!=L
</script>
I appreciate your help, I've tried searching for this, but other that unminifying, I'm not sure what to search for. Thanks!
It's obfuscated JavaScript (dictionary, Wikipedia). The idea is that they want to make it hard for you to know what the code does.
Good day! Newbie here. I just want to know if it's possible to change the whole content of an html using javascript? I got some codes here. (not mine but whoever did this, thank you so much!) I don't know where to put/insert all the codes of the new layout like when you click a button then the whole content will change. Thank you very much for helping me.
<script language="Javascript">
<!--
var newContent='<html><head><script language="Javascript">function Hi()</script></head><body onload="Hi();"><p id="p">hello</p></body></html>';
function ReplaceContent(NC) {
document.write(NC);
document.close();
}
function Hi() {
ReplaceContent(newContent);
}
-->
</script>
The easiest way to do this is with jQuery.
function insertHtml()
{
var newHtml = '<div><span>Hello World</span></div>';
$('body').html(newHtml);
}
Something like that will replace the entire contents of body with newHtml. You can also do this with pure javascript using the .innerHtml property but jQuery has many advantages.
EDIT: If you want to add something to the DOM rather than replacing the entire thing, use
$('body').append(newHtml)
instead. This will add the content to the end of the body. This is very often used for things like adding rows to a table.
Yes it is possible but this code is not valid unless you remove the comment tags however don't use the document.write() after page load unless you want to overwrite everything in page including the script
I have this script generated by wordpress plugin:
<script type='text/javascript'>
if (typeof(jQuery)=="function") {
(function($) {
$.fn.fitVids=function(){}})(jQuery)
};
jwplayer('jwplayer-0').setup({
"aspectratio":null,
"width":604,
"height":410,
"skin":"beelden",
"primary":"html5",
"advertising":{
"client":"vast",
"tag":"http://vasttag"
},
"sharing":{},
"image":"http://i1.ytimg.com/vi/image/0.jpg",
"file":"http://www.youtube.com/watch?v=hgfakjhs"
});
</script>
I simply want add this line:
,"position":"post"
after:
"http://vasttag"
I can't edit the plugin, so is there a way to do it with javascript?
Sorry for my bad english.
Please help me!
Thanks!
Edit: This is the plugin file that generates the player:
link
if anyone knows how to add that parameter I would be very grateful :)
Edit 2:
I solved adding that parameter directly in the database, in wp-option table at jwp6_player_config_2 option name. If you know better solution let me know, thanks.
Due to what the script does (it creates a new jwPlayer as soon as the script is encountered) and the fact that there seems to be no method in the jwPlayer API to edit a players settings, it is impossible to change your script as you want.
The only solution is to edit the script at its source.
I dont think you can do that using javascript.We generally use javascript to do changes in DOM and not in javascript itself.You can do one thing that you create.
<script>
if(typeof(jQuery)=="function")
{
(function($){$.fn.fitVids=function(){}})(jQuery)};
jwplayer('jwplayer-0').setup({"aspectratio":null,"width":604,"height":410,"skin":"beelden","primary":"html5","advertising":{"client":"vast",,"position":"post","tag":"http://vasttag"},"sharing":{},"image":"http://i1.ytimg.com/vi/image/0.jpg","file":"http://www.youtube.com/watch?v=hgfakjhs"});
</script>
and append it somewhere in DOM using javascript or jquery.
More better solution: Just edit the script added by plugin.It is the best approach.
One thing you can always do is use our JavaScript API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
To make the VAST tag play after the video is complete. Just put this script block after the shortcode on your post:
<script>
jwplayer().onComplete(function(){jwplayer().playAd('your_ad_tag');});
</script>
I am using LESS ( http://lesscss.org ) and it says ...
JavaScript evaluation
JavaScript expressions can be evaluated as values inside .less files. This is done by wrapping the expression with back-ticks:
The example provided is ...
#height: `document.body.clientHeight`;
So I've tried to do this in my html ...
<script type="text/javascript">
var fred=5;
</script>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.2.1.min.js"></script>
and this in styles.less ...
#height:`fred + "px"`;
.mydiv {
background-color:green;
height:#height;
}
But it just won't work!
Also tried variations on this such as using ...
#height:`fred`px;
#height:`fred`;
If I use ...
#height:20px;
It works as expected but I need to use Javascript evaluation.
I would really appreciate it if someone could help - Answers focusing on answering the question and not asking why I need to use Javascript evaluation would be greatly appreciated. Thanks very much all
Its worth noting that if I do ...
#height:`freddd`px;
where freddd is undefined, I get an error from the less compiler - hence it seems to know that fred is defined. However, currently I am not getting an error - it is just not doing anything when I use Javascript variable values.
I am working on the same thing. The way I have been testing the expression is to compile the less file in the browser as you are doing (I am using firefox with firebug). I inspect my rendered css by inspecting the head section of the rendered page and looking for
<style id="less:yourLessFileName-less-styles" type="text/css"> . Twirl that file open and you will see the compliled css. Scroll down until you find your selector and rule you are using the javascript expression for and see how it rendered.
You probably can't call variables created in JS. From what I understand, JavaScript expressions can be evaluated means just that you can evaluate stuff with JS functions and use default JS objects like document.body.clientHeight which doesn't mean that you can call variables from a different file and location. It just doesn't make sense that it'll let you do that, how is it supposed to find the variable?. I might be wrong tho..
I need to use specific styles for Mac in my stylesheet. What is the best way to do it?
In an ideal world you shouldn't need to fork styles for different os. However sometimes a specific design will require it - particularly with styling form elements.
If you really have to, the following script will set a class on the html element:
(function (flags, app) {
os('Win', 'os-win');
os('Mac', 'os-mac');
if (document.documentElement) {
document.documentElement.className += flags.join(' ');
}
function os (s, f) { if (app.indexOf(s) !== -1) flags.push(f); }
}([''], String(navigator && navigator.appVersion)));
You can execute this in the html head which means the page doesn't re-render after the initial loading.
You can then use mac specific css rules like so:
.os-mac #my-element { ... }
Note: The best thing to do is find a solution that doesn't require forking for the OS.
or JavaScript
if (navigator.userAgent.match(/Macintosh/))
// do stuff for Macs here, such as load a stylesheet
But really, this is bad practice and you shouldn't do it.
The navigator.platform property returns 'MacIntel' on OS X Safari, Chrome and Firefox (I don't have any PPC boxes at hand). If I would do it, I would check for that, and probably put in a class named .mac on the <BODY> tag and use that as a basis for the Mac-specific stuff.
Only for mac:
<script>(function(e,t){function n(n,r){if(t.indexOf(n)!==-1)e.push(r)}n("Mac","os-mac");if(document.documentElement){document.documentElement.className+=e.join(" ")}})([""],String(navigator&&navigator.appVersion))</script>
It works like johnhunter's solution, only that it is minified.