Is it possible in my css file to do something like that?:
.myclass:after{
content:"click me";
onclick:"my_function()";
}
I want to add after all instances of myclass a clickable text, in the css style sheet.
Is it possible in my css file to do something like [see code above]?
No
The important question to ask is why.
HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model.
CSS has control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.
JavaScript has control of the interactions within the webpage, and has hooks to any and all DOM nodes. It's the Controller.
Because of this MVC structure: HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files.
CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.
If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.
jQuery makes this very simple:
$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);
Well,
using expression it might actually be possible for internet explorer only.
Otherwise:
No. Not at all, that's not what css is made and intended for.
If something can be done with jQuery, then it is sure that it is possible to do it without that. Lets see a data model:
<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>
We need some stylesheet:
<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>
And a code:
<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");}; }
</script>
Use jQuery's After:
http://jsfiddle.net/PCRnj/
Related
I would like to generate something to display that looks like the Facebook app previews using plain javascript. I already have the image url, title, and description data. However, I have no idea where to start with rendering exactly like the following:
google maps preview
Usually, how do you accomplish this in javascript? Do you have to manually specify the CSS? I'd really appreciate any advice and resource suggestions. I'm very new to javascript and UI.
So our goal is something like:
<div class="containerDiv">
<img src="blah blah">
<div>
<div class="urlDiv">my.url.com</div>
<div class="titleDiv">My title</div>
<div class="descriptionDiv">My description</div>
</div>
</div>
You will of course need to style a bit. Your page typically loads a lot of css style sheets. To one of them, you can add the css that will style your new "component". As an example:
<style>
.containerDiv {
display:flex;
align-items:center;
border:solid 1px gray;
/* etc... */
}
.containerDiv > img { /*...style for the image...*/ }
/*...more styles...*/
</style>
My answer will not include the correct css. Learning css in depth by is itself long proccess, so be patient. Follow a good CSS tutorial in case you need it.
Let's go on. The next step is to render the above markup with js.
To achieve this with plain js, use the native functions:
1) document.createElement to create a new element. This returns a js object containing the html element representation. This is not appended yet to the document. It is not visible, not yet a part of the page.
2) You can manipulate this object using: setAttribute(). Attribute is everything that follows your tag name. For example, to set the src of an image call:
const myImg = document.createElement("img");
myImg.setAttribute("src", "https://my.cool/image.png"); //the image is still not visible, because we did not yet append it into the DOM...
3) We use innerHTML property and/or append child to add elements within other elements (you typically start by creating the outer most element, create each child one by one and call appendChild of the parent to add each child).
4) Once you are ready creating your whole element, append it anywhere you like in the document, and it will become visible:
const myCoolElement = document.createElement("div");
//do stuff
document.body.appendChild(myCoolElement); //this will put it at the end of the page
//or, alternativelly
document.querySelector(".myElement > #thatWillHost .my .newComponent").appendChild(myCoolElement); //to append it somewhere else.
As a side note, querySelector and querySelectorAll will be also useful functions to you. Using querySelector, you can append your new element anywhere in the page that you like.
As a conclusion, you can react and manipulate the document through js by using tha mentioned (and many more) functions that are available out-of-the-box in every browser.
I want to apply the more css class directly to inline style tag dynamically, I tried like below not working (In my situation I can't able to create a class)
It is working for tag but not work for
<script type='text/javascript'>
function CommonClassCreateFunction()
{
var css_cls="{color: #900;margin-top:20px;}:hover {margin-top:0px;}";
return css_cls;
}
</script>
-----
-----
<script type='text/javascript'>
var css_cls=CommonClassCreateFunction();
$('#iiffrraammee').contents().find('#newtxtid').css(css_cls);
</script>
-----
-----
<textarea class="expand close" id="newtxtid" name="ta" wrap="hard" spellcheck="false"></textarea>
CSS
.txtClass{ color: #900; margin-top:20px;}
.txtClass:hover{ margin-top:0px;}
JQuery
$('#iiffrraammee').contents().find('#newtxtid').addClass('txtClass');
Demo:
http://jsfiddle.net/qx2QY/
jQuery allows you to change the css with it's .css() function. You do this by passing the css rules as arguments:
$('#iiffrraammee').contents().find('#newtxtid').newtxtid.css({
'color': '#900',
'margin-top': '20px',
});
$('#iiffrraammee').contents().find('#newtxtid:hover').newtxtid.css({
'margin-top': '0px'
});
Check out the .css() function documentation.
You can`t do this, inline style supports only proprieties, what you have to do is define the class proprieties in a .css file or between tags and add this class to the DOM.
Exemple:
CSS
<style>
.NewClass{ color: #900; margin-top:20px;
}
.NewClass:hover{ margin-top:0px;
}
</style>
jQuery:
$('#iiffrraammee').contents().find('#newtxtid').addClass('NewClass');
Javascript runs as soon as it appears in the html source. In your example the javascript is located above the html it wants to modify, this results in an error.
Having all the HTML download and display un-formatted and then applying CSS will cause the browser to render the un-formatted html and then change it. The site will appear to many as broken and the reformatting will be distracting and create the feeling that the site is slow. It is not a good user experience.
jquery basicly changes the tags inline property.
:hover is a pseudo-selector, which is used in a stylesheet. It is not impossible to use javascript to create a stylesheet but it is impractical ... How to write a:hover in inline CSS? ... but for the sake of the user I would not recommend the practice.
Note: inline pseudo-selectors were considered in the working draft, http://www.w3.org/TR/2002/WD-css-style-attr-20020515 But they were never adopted and do not work in modern browsers.
I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...
$("button").click(function(){
$("p").css("color","red");
});
As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).
What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.
I didn't found any way in JS to call an specific stylesheet for modify any .class or #id
So my HTML had the following definitions:
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">
But when I try to update custom jQuery CSS with a script like this
$('#red').click(function(){
$('.contextMenuPlugin').css({'background-color': 'white'});
.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).
I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:
https://github.com/joewalnes/jquery-simple-context-menu
I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:
http://pastebin.com/u/27GRiS (4 files)
I hope someone help me clarify this, thanks in advance,
Federico.
The problem is that you think that
$('.contextMenuPlugin').css({'background-color': 'white'});
creates a stylesheet with
.contextMenuPlugin { background-color: white }
But it's not like this.
$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.
That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.
Then, you can:
Make sure that your target element exists when you use the code
Create a stylesheet with the desired CSS
Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.
You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.
Then, on clicking the button you can call addClass to add it to the appropriate elements.
Take your <script> code out of the <head> and put it at the end of the <body>.
Also you don't need this:
$(function() { ... })
if you already have this:
$(document).ready(function() { ... })
In other words, remove line 29 and line 27 (the $(function() { and });) from this file
In my website, the users have to enter markdown in a textarea, for which I am using a markdown editor. The problem is: it uses icomoon font, and my websites too. Both uses the same class to define the fonts, but not both uses the same icons. The question is simple: is there a way to define the editor.css for a special div?
Like that:
<div css="editor.css"></div>
Give the DIV a Class and then add a CSS file like this:
.markdown
{
color: red;
}
If you import a new css dynamic, the old styles will be overwritten.
Some help, for dynamic css loading: How to apply inline and/or external CSS loaded dynamically with jQuery
Namespace your editor styles
You can add a selector that namespaces your editor and allows you to style it:
<div class="editor-style">
<div id="cool-custom-editor">...</div>
</div>
In your css:
.editor-style .icon-thumbs-up { color: green; }
Using Scoped Styles (needs polyfill)
As mentioned in #adeneo's comment below your question there is the option of using scoped style tags.
Supposing your editor looks like this:
<div id="cool-custom-editor">...</div>
You can apply a specific style using the scoped attribute like so:
<div>
<style scoped>#import url(editor.css);</style>
<div id="cool-custom-editor">...</div>
<div>
Caveats
According to can I use the scoped attribute is only natively supported by Firefox 26+.
If you want to use it you will have to polyfill:
Plain JavaScript polyfill
jQuery scoped plugin
Further Reading
HTML5 Doctor - The scoped attribute
CSSTricks - Saving the day with scoped styles
HTML5Rocks - A new experimental feature - Scoped Styles
You dont need multiple files. You can give the div an id or class like so
<div class="div1">
<span></span
...
</div>
and now in you css you do this
.div1 span{
font:(whatever font);
}
I don't think so, no. At least not without using any js workarounds. The best solution would be to use kind of namespace for user-specific css classes.
No you can't do that.. I think you should solve the conflit by changing the icomoon class names in this file.
OK solved: renaming the classes in editor for icomoon was a lot easier than I dared tough.
not a good way but it can help:
$("[css]").each(function(i){
var elm = $(this);
$.when($.get(elm.attr("css"))).done(function(response) {
var newresponse=response.replace(/(.+{)/gi,".customCss"+i+" $1");
elm.addClass("customCss"+i);
elm.before('<style>'+newresponse+'</style>');
});
});
My website has an external widget that displays a table.
The widget comes with some inline CSS. Is there a way to remove this CSS before appending the widget to my page, so that only my css file rules will apply?
The markup looks like this:
<div id="widgetContainer">
<script language='javascript' src='http://www.esake.gr/scripts/create_widget.php?pw=1&maw=242&fof=Verdana&tifs=14&tic=3A3A3A&tibc=FFFFFF&dafs=12&dac=3A3A3A&dabc=FFFFFF&ces=0&cep=1&langid=gr'></script>
</div>
You can do this using jQuery,
Assuming you'd have a parent container for your widget, you could do the following,
$("#parentContainer").children().removeAttr("style");
Just created a quick mockup here: http://jsfiddle.net/j3GPL/
your best bet will be to override the css. e.g.
td { background: #f00!important;}
see here for an example.