suppose i want to use javascript to add the following css
p:before{content:"Q: "}
how can that be done? I tried the following but they don't work.
myEle.style.:before='content: "Q: "';
myEle.style.content="Q: ";
in general, how do change the value of css pseudo-selectors? such as a:visited, a:link.
The Pseudo-Selectors can't be changed directly and they are not intended to be changed.
If you want to add content before every element of certain kind, you will have to find all of these elements with javascript and insert this content using the dom functions. This requires a lot code, but there are a lot of helping frameworks like jQuery.
With JQuery you can do that by:
$('p').before('Q: ');
I'm not sure why you'd have a need to set an a:visited with javascript, but jQuery will do you worlds of good for easily selecting pretty much anything you need:
http://api.jquery.com/category/selectors/
Related
I am new to jQuery. I recently develop a plugin bu using jQuery UI widget factory. It is working fine. I was using inline styling. But It will get complex for large files.
For the large project I have the option to use classes. But when if someone wants to use my plugin he'll simply copy the link and use it. But If he has same name of classes on his page then its page will be destroys because my of my styles. Can anyone please guide me how to avoid this.
I hope you get the point.
Thanks
Some things to consider:
If you make a selector that is too specific, like
$("ul > li > .foo ~ .bar");
it may break by any changes on the markup.
However, if you don't, it will break your user's style.
As commented, the easier way to fix this would be adding an prefix on the class, like
<div class="my-plugin-container">
<span class="my-plugin-span"> "Hello World" </span>
(OR) <button class="my-plugin button"> </button>
</div>
If you could post any code we could be able to help you further. I'll edit it according when you do.
Best of luck
I was wondering if it's possible to edit Liferay Portal's HTML code, add a couple of <br> to have more space between portlets. Or even add some Javascript to it?
Is this possible? If so, how?
Thanks
You can create your own theme, extending another theme (e.g. classic, _styled, etc.) and adding the 'diff' files, aka the ones you want to extend. In that case, you could extend a default css files, adding a rule like:
#content .portlet-layout .portlet-column-content {margin: 10px;}
Another quicker but less flexible approach is to use the
'Insert custom CSS that will be loaded after the theme.'
feature. This can be found at: Manage Pages > Look & Feel > CSS
The Theme answer has already been given - if you just want to change the appearance (e.g. linebreaks) this is the way to go instead of your original question to change HTML output.
If you literally need to change the HTML code - e.g. add something to or remove something from the page, you should read about Hooks, particularly those that can override jsps. This is exactly what they've been built for.
Seems like to me there should be an option for that but i can't seem to find it.
This question was asked many times but only workarounds were answered and that's not what i'm looking for.
I am changing my css incode and i want to load the original css back instead of coding it myself, how can that be achived?
I don't wanna reload the entire file, just load some div or class css.
See this post for a solution.
Based on that you can do something like this:
$("#fix").click(function(e) {
e.preventDefault();
$("div").removeAttr("style");
});
Note: This assumes you are using JQuery to change the styles in the first place
Here is a working example
if you're using jQuery apply
$(selector).removeAttr('style')
to your elements
I want to load the original css back instead of coding it myself
This is not necessary. You are trying to reload a resource that should just continue to exist. Once it's loaded, you don't need to load it again. If you need to override a style, apply a class to it. To revert to original, remove the class. That's how cascading style sheets work.
If there is a particular reason the css needs to be dynamic, you can try loading css into the Document via the DOM (document.createElement("style") etc.), but support for this is a bit sketchy I believe.
if you want to reset the WHOLE style and not only divs' you'd better use the all selector
$('*').removeAttr('style');
I'm sure there is a way to set a JavaScript variable to any HTML element with a certain class attached to it? I'm just not sure how to write it. Can anyone help me out?
The best way would be to use a framework, such as jquery, that makes an easy use of (css) selectors, e.g, to select all elements with class my-class do
$('.my-class')
and then apply any code to the list of those elements
edit: don't forget to use the $(document).ready wrapper
you could simply go var x = document.getElementById('somediv'); for example. Now whatever style class pertains to somediv will of course still obtain unless you change it programatically in your javascript.
Hope that helps -- might be able to be more helpful if you give a broader context of what you are trying to accomplish.
To do this without document.getElementsByClassName('myclass') nor $(.'myclass') would be difficult and require some advanced tactics. You would have to recursively generate a list of all DOM objects from the document. While generating the list, every element touched would have to be tested for .className = 'myclass'. This is essentially what jquery does behind the scenes, although I believe on page load it caches the whole DOM for easier querying.
This is a follow-up question for In jQuery is it a bad idea to use name=X for all selectors?
I am using Backbone and decided that I wanted a way to differentiate between HTML elements that were bound and those that were not.
So I would write (in HAML):
.container
.title(name='title')
.separator
As you can see it's clear that the dynamic element is title.
The reason for this was so I could mess around with the style and rename classes without worrying about breaking the app. It also means in the template I can tell what the dynamic elements are without needing to go back and forth with the Backbone View.
My question now is, without using the [name] selector, does anyone have a code convention to keep track of which HTML elements are referenced from JS.
I have considering:
Using a common prefix on class names (e.g. class=bind-title)
Using some sort of custom HTML element (
Thanks!
FYI: I'm using CoffeeScript, Backbone and haml_coffee templates.
Updated jsperf to test all suggestions:
http://jsperf.com/class-or-name-attr-lookup/3
I would consider using a class to indicate that it is dynamic.
I'm not sure if you are aware of this but you can have multiple classes on one element. Like so:
.container
.dynamic.title(name='title')
.separator
This works in traditional HAML but I have not tried it with haml-coffee. If it doesn't work, you might have to specify the class like .title{:class => "dynamic"}(name='title').
I prefer this over a prefix on the class name because it's more semantically meaningful, which is how HTML should be used.
I am using data-view attribute on elements being set when rendering my Views.
This helps me to then show a tooltip in a browser window when I hover over View(s).