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
Related
<div><p> </p></div> - These tags has been added to my code because of a wysiwyg editor that I can't tweak or change. How can I remove it ideally using CSS or if not jQuery as it messes my layout.
Here is the structure generated by the wysiwyg and I need to clean it up. I can't change the wysiwyg editor because there are already lots of articles written using that editor. Only solution I can think of right now is purely frontend. By the way the platform is Rails
Thanks!
In your HTML
<div class="tempDiv" style="display:none"></div>
And then some jQuery:
var crappyString = "<div><p> </p></div>";
$(".tempDiv").html(crappyString);
var sanitisedString = $(".tempDiv").text();
Related to an issue I've encoutered in the past: When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND
can't tweak or change
Sometimes it helps when you can talk to other devs: TinyMCE- Get plain text
For SEO is better to get out wysiwyg and take by hand every article and clean it. I get same situation in Joomla, and I do same. Is hard to make a good css/js selector to clear just div, div > p, div + br with no text. The default wordpress editor make text more clean, try to see if is free on the market and add it on your app.
I'm trying to make something similar as in stackoverflow where you add keywords.
I'm just stuck with the HTML part or javascript?
When a keyword is found an clicked, how do i make it fixed in the input field? Like in stackoverflow it becomes blue with a remove button next to it.
Currently the results are being showed underneath the <input>, in a new <div>.
<fieldset>
<label for="title">Add keyword<label>
<input class="input" type="text" size="30" onkeyup="searchFunction()" onkeydown="searchFunction()">
</fieldset>
<div id="livesearch"></div>
It's not a real <input> element. It's just looks like input. You should use regular <div> and append (for example) stylised <span> to it.
Try out this plugin for jQuery https://github.com/xoxco/jQuery-Tags-Input .
You can use jQuery.autocomplete.
I'm using this plugin in production and it's ok.
Look back at this SO question:
jQuery autocomplete tagging plug-in like StackOverflow's input tags?
the dude that answeres suggested
(demo) https://github.com/aehlke/tag-it
and much more. check it out you might find a solution that suites you the best!
There is no "easy" way to do it, you will need more then just a <input> to achieve this kind of behavior.
However, there are some good plugins using jQuery (don't know any made with plain javascript) which already made this:
TextExt
TokenInput
VisualSeach
Little late to the party but I created one as a React component. The underlying code is plain javascript (no jQuery), so should be easy to decipher.
sterlingwes/react-taginput
See the taginput.jsx file for an idea how it works.
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.
I have searched around but wasn't able to find a solution.
What I want to find out is a way to edit the tinyMce link plugin (or make an edited copy of it) to work in a way that adds specific styling within the link tag, and the ability to specify in the initialization of the plugin what style to add, so that it can be done dynamically. So that I can have result like this(for example):
<a style="color:#00FFFF" href="www.google.com">Google</a>
Any solutions for this? Or a point in the best general direction?
Thanks
In this case i think the best is to wait until the link has been inserted and then do the following action assuming your color has been set in the tinymce init like my_link_color: 'green',
$(ed.getBody()).find('a').attr('style','color:'+ed.getParam("my_link_color"));
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/