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
Related
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.
I am looking for some assistance with acceptance testing of the Selectize jQuery plugin using the Capybara test framework.
We are having a problem with the way Selectize lays out the HTML it generates, there is no definitive link between the select dropdown and the values contained within the dropdown
As you can see from my jsfiddle here : http://jsfiddle.net/et4t20wz/
$('.test').selectize({
create: false,
dropdownParent: 'body'
});
Viewing the source code, the containing div has the 3 selects within it and the values for the dropdown are contained within the body tag.
I need a way for our test team to be able to create a 1 - 1 connection between the two elements. So far we have come up with a rather weak connection, as we know the first Selectize values will be stored in the first div.selectize-dropdown we can use this logic to map to the first div.selectize-control
This is rather flimsy and probably not the best approach, but the best we can come up with thus far. We have found a few solutions on the web, but sadly they appear to be out dated or reliant on different DOM structures.
For example: http://climber2002.github.io/blog/2014/09/22/capybara-integration-tests-with-jquery-selectize/
Hopefully we are not the only ones to have come in contact with this problem and someone can offer some assistance / advice
Thanks in advance.
I believe the link is just positional in the html, the two divs that make up a a selectize control are inserted immediately after the select element that is converted. Therefore if you know the id of the original select you should be able to get the associated divs using the sibling selectors
page.find(:css, '#test + div.selectize-control + div.selectize-dropdown')
or
page.first(:css, '#test ~ div.selectize-dropdown')
if you've already clicked on the div.selective-control (or maybe the input in it) then the elements in the .selectize-dropdown should be visible and you can click on them
So we managed to fix this problem using a solution I found here :
Capybara integration tests with jquery.selectize
The code didn't really work, however. So I ended up using this script I wrote.
var selectize = jQuery('#key').selectize()[0].selectize;
jQuery(selectize.setValue(selectize.search('#value').items[0].id));
I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
I found some really awesome link detection regex that works unbelievably great. It takes only the main part of a link and displays it as the body of the anchor tag and the whole link as the href. In example http://somesite.com/index.php?some=var will simply look like somesite.com. Which is just pure awesomeness, but then again it has its down side as well because someone might pass some variables that you might not necessarily want to send for some reason and I figured I need to display the whole url in the anchor body. Sadly I don't want to just give up on beautiful anchors and I decided I should display full link upon some event and thus came the trouble.
First I thought I should go for mouse hover (jquery's mouseenter) to display full link and then use mouseleave to make it beautiful again. Unfortunately that was unsuccessful due to short site names at the end of a line with a bunch of parameters. Example: If there is an anchor with body site.com and href http://site.com/some/params at the end of a line, after expanding it will go to the next line which would trigger the mouse leave and thus compressing it, which would by it self return the link to the original line and trigger the expand function creating an infinite loop.
Second idea was to have a right-click expand the link. Obviously the context menu on links that are to be expanded has to be disabled. Unfortunately, again, having the same link at the end of a line would cause a context menu to show up because after expanding the right click is also triggered at the blank space where the short link used to be.
I seem to have run out of ideas, does anyone have any?
Without breaking layout, you can use the native title property to display the full URL or, for something more customizable, a plugin such as jQuery UI's tooltip widget.
<a href="http://www.shorturl.com/?param=notSoShortUrl"
title="http://www.shorturl.com/?param=notSoShortUrl">shorturl.com</a>
Provided the title attribute is outputted in the initial markup, this solution works even with JS disabled. And if you feel like, jQuery UI tooltip may help customizing it for JS-enabled users.
If anyone is interested in how to patch the line-breaking issue described in the OP, here's my original solution to achieve non-line-breaking extensible links:
aaaaaaaaaaaaaaaaaa.com
$('a').hover(function(e) {
$(this).text(e.type == 'mouseenter' ? this.href : $(this).data('shorturl'));
}).each(function() {
$(this).css({
width: this.offsetWidth,
whiteSpace: 'nowrap',
display: 'inline-block'
}).data('shorturl', $(this).text());
});
Demo
Though, this is mostly a CSS hack and link text may leak outside of the container (and obviously, won't work if the container has overflow:hidden), so it is not very good for layout purposes. Better stick with title or the tooltip plugin.
I recently started learning JavaScript and I've been a frequent user of jsfiddle since then. Although it's pretty simple, I still have one problem understanding its events. ex: no wrap (head), onDomReady
What are these events for and what are the differences between them? Can someone please do a decent explanation?
Thank you very much and happy new year!
This dropdown specifies where jsFiddle should put your Javascript code in the generated HTML.
The first two options put it in a raw <script> block in the <head> or <body>.
The last two options put it in a Javascript event handler.
You can see how this works by viewing the source of the generated page.
(or without jQuery)