I have a search bar where the user enters a keyword, and I would like the keywords to be enclosed in a bubble with a cross on end to delete it as soon as he user presses space to enter another keyword. Something like whats done at the Pinterest search bar as shown in this image below.
I can make bubble in CSS around texts, but how to draw them from inside the input box is where I am stuck at.
It is worth checking out the Select2 library which has the tagging option, You can see it in action here (Under "Tagging support" section).
Alternatively you can checkout the below CodePen link on the tag based search
http://codepen.io/jonahvsweb/pen/LGVRaX
Hope this helps!.
Check friends list here: http://terrainformatica.com/formation/demo1.htm
I've made simple jQuery plugin for it while ago: http://terrainformatica.com/formation/js/jquery.list-input.js
Check harvestHQ Chosen plugin:
https://harvesthq.github.io/chosen/
Select2 and Chosen were both good alternatives but I found Selectize.js to best fit my use case (highly customizable). Its easier to use, extendable with few dependencies.
Related
Hi I had come across a question how to achieve suggestions in the input field while typing for example (in browser url bar while we typing first 3 to 4 letters it give suggestion if the url is correct we go with it else with single delete key press remove the suggested content). This need to be done with input field. Is this scenario is possible? Thanks.
There's a big range of possibilities here.
If the contents of the list are static or easily generated via code, you can use a native HTML <datalist> element.
If you are wanting autocomplete in the form using the user's previously-provided data, you can just enable via the <input autocomplete> attribute
If you're wanting far more customization, it's going to have to be some JavaScript that does the dirty work for you. Stack Overflow is not a good forum for getting library suggestions, but you should survey what's available in your current development stack.
This is absolutely achievable, have a look at - typehead.js
It's a javascript project for doing exactly what you're asking, I believe it's compatible with boostrap too.
Autocomplete suggestions are a very common Web Component. If you are using jQuery, you might want to try this component published by Materialize. If you are using, say, Polymer, you might want to try paper-autocomplete. If you are using vanilla javascript, you could try typeahead, or something like this autocomplete library. Most other modern web frameworks will have some alternative. I wouldn't really recommend making one from scratch.
I am creating a select box with a video thumbnail. This could be done either through javascript or jquery. Is there an example for creating a custom html select box that can also show a video thumbnail?
I think your answer will much like this http://videolightbox.com/rq/select-thumbnail-for-embedding-video-in-html-2q.html
http://videolightbox.com/#demo shows many demos also with free download
And also http://visuallightbox.com/wordpress-lightbox-catalyst.html also has cool stuff,that you will be interested in. :)
It sounds like you want a custom dropdown menu. You can't do that with the current tag, unless the jquery plugin in replacing it entirely with its own css and markup.
Check out http://codecanyon.net/item/fh-mega-menu-jquery-bootstrap-3-mega-menu-plugin/6943538?ref=designingmedia
Cost $4 but might be worth it. Their demo has a video in it.
I'm no affiliated in anyway. You might find a free one somewhere online. Just search "jquery css dropdown plugin"
More specifically I am trying to implement a wufoo form in a joomla article, but I need to add text, in addition to the code. I tried to just paste the code the article but all I get is the code as text. What am I missing? If it helps I have installed jCode, but I cannot find a way to add text as well in addition to the form.
I am open to other ways as well to solve this issue.
Joomla by default doesn't allow you to import code like PHP or Javascript through articles. For this, a plugin need to be used. I see you've tried using jCode, I've never used this before so can't provide any documentation on it.
I would strongly recommend using Sourcerer as a plugin for importing Javascript and PHP through your articles. It's free, well documented, well supported and easy to use. Once you've installed it, enable the plugin. Then in your article, you can use something like the following:
{source}
<script type="text/javascript">
alert('Hello world');
</script>
<?php
echo '<p>Hello world</p>!';
?>
{/source}
There will be a small button under the article textarea for Sourcerer which will bring up a popup window for you to enter all your code in.
Hope this helps
Alternate options are for your problem
If you are an admin user Remove filter option for article.
Go to article section -> Options -> Text Filter Options -> Choose your user group -> Apply no filter.
Another option is to create a module and assign that module to your article like below.
Create a module that have your forms. For module development tutorial
And create an article and set the module inside that like.
{loadposition contact_form_pos}
Inside your article just mention the module position like above
for more
Hope it make sense..
What is my goal: When I click on a certain word (not in paragraph), I want a speech bubble full of info to appear.
So, I already have this bubble, I've made it using a "class" and CSS 3.
Can I, using some basic JavaScript, make my dream come true? I have no knowledge of JavaScript at all.
Is there a way of somehow putting my "bubble class" into "onclick"?
Thanks in advance.
Everything is an option as long as it works on IE =)
There are many plugings for fulfill your requrement. This is a only a one solution.
download bubbletip
You can see a demo here and some instruciton too
you really no need to click the word instead just hover is enough.
Check out JQuery Tools. Their page on tooltips has some samples: http://jquerytools.org/demos/tooltip/dynamic.html
Disclaimer: I am not affiliated with JQuery Tools in any way, just found this doing some quick searching based on user's needs.
First, if you have several bubbles, you should give each of them a separate id attribute. The following javascript will make the bubble appear:
document.getElementById("id_of_the_bubble").style.display = "none";
The following will make a bubble reappear:
document.getElementById("id_of_the_bubble").style.display = "block";
Note: if you have the bubbles be by default with a different display other than block, then you should put it as that display instead of block.
Twitter Bootstrap framework
http://twitter.github.com/bootstrap/javascript.html#popovers
I want to do something as simple as emulate the buttons as can be seen here—albeit in jQuery and Django.
I have scoured the net and found nothing, which surprises me, but I figure it is because I am not using the right terminology.
Right now, I want to include inline tags like strong, em, and code and more tricky things like links and images (using Markdown and HTML syntax).
I figure that there are two to three different states for jQuery to act on:
Some text has been selected; the text is decorated.
Nothing has been selected; jQuery prompts the user to enter the text to be decorated.
The script can discern between highlighted text and a highlighted URL to decide for when it needs to produce a valid link.
I have already done some jQuery stuff, so the basics of it should be manageable (any potential JS regex aside); I just have no idea to which extent jQuery supports this.
You can utilize a Rich Text editor to perform your tasks. This blog post lists some of them -
http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
I have used TinyMCE and it is also very good. Apart from that I have used EphoxEdit Live( http://editlive.com/what-new ) and that is pretty good(though not a jQuery plugin) for heavy usage like content editing.
What you are looking for is a WYSIWYG(What You See Is What You Get) editor.
tinymce comes to mind.
or you can search the jQuery Plugins Page
This might be a good place to start: jQuery WYSIWYG Plugin