lecar-red / bootstrapx-clickover Goto Github PK
View Code? Open in Web Editor NEWBootstrap Extension for Click managed popovers
Bootstrap Extension for Click managed popovers
Suppose i have some content i DOM which will be inserted dynamically (more element with class .toolbox-ajax-popover). How do I make them clickoverable?
$('.toolbox-ajax-popover').clickover({
});
When opening the clickover, you add an event via this.tip().on('click', '[data-dismiss="clickover"]', $.proxy(this.clickery, this));
please also remove it afterwards via this.tip().off('click', '[data-dismiss="clickover"]', $.proxy(this.clickery, this));
otherwise every time i try to close the same clickover, the clickery method is called one more time
cheers
Peter
Not sure how to do a pull request from my fork, but here is the commit with the new feature:
FYI the quckstart.html gives error:
Failed to load resource file:///S:/Downloads/lecar-red-bootstrapx-clickover-38cd220/lecar-red-bootstrapx-clickover-38cd220/docs/css/bootstrap.css````
it would be nice, if there will be a hover option!
the popover should be stay some time after hoverout or when mouseover another element that fires the popover.
in clickery if you add a console.log as in below you can see that it appears to be called once for each time the popover anchor was clicked. once you click on another popoever element it resets itself
// provide callback hooks for post shown event
typeof this.options.onShown == 'function' && this.options.onShown.call(this);
console.log('click over triggering shown');
this.$element.trigger('shown');
Hi ,
I create a edit form in clickover. I would like save change in data-content.
Example : and i change the value , i would like save this change in data-content
It's possible ?
Thx
Michael
For those who got it working can you share? I download the latest bootstrap and then use this clickover. wont work
thanks
How can I achieve content loaded with ajax with no issues? Something like..
$('.list-ajax-popover').popover({"trigger": "manual", "html":"true"});
$('.list-ajax-popover').click( function() {
var el = $(this);
$.ajax({
type: 'POST',
url: '/lists/ajax_index',
dataType: 'html',
data: {resource_id: el.data('resource-id')},
cache: false,
success: function(data) {
el.attr('data-content', data);
el.clickover();
},
error: function(data) {
alert('err');
el.attr('data-content', data);
el.clickover();
}
});
});
Need to add docs on:
Currently, to remove the title you have to set the
.popover-title {
display: none;
}
An option in your lib might be good.
when you click on a clickover nothing happend and you see a error in the console:
Uncaught TypeError: Cannot read property 'currentTarget' of undefined
Tooltip.toggle
$.extend.clickery
e.extend.proxy.g
f.event.dispatch
f.event.add.h.handle.i
, toggle: function (e) {
var self = $(e.currentTarget)this.type.data(this.type)
Uncaught TypeError: Cannot read property 'currentTarget' of undefined
selfself.tip().hasClass('in') ? 'hide' : 'show'
}
auto close works, but not the click outside clickover. Previous patches I've read here don't apply to 3.0.1 bootstrap code.
http://www.leecarmichael.com/bootstrapx-clickover/examples.html
The option to set as class to its main parent element is called "class_name", not "class" - the website needs update.
I'd like to disable a clickover while the thing containing the clickover is being dragged. Is there a way to do this? I've tried removing some (almost all!) of the data- attributes from the link that triggers the clickover, but it keeps coming up. Is there a way to do this?
I have setup a jsfiddle http://jsfiddle.net/bababalcksheep/Wbnj2/15/
I am re-editing my issue to make it more clear.
If you have 2 button that have same clickover call attached to them via rel attribute lets say(see above fiddle).
If you click any of first button, clickover opens, and while it is open, if you click on second button, first clickover closes and second opens but actions defined on 2nd clickover which are actually same as first don't work.
This works in following way.
Click first button, click anywhere except 2nd button to close it and then click on 2nd button.
But then whats the point in using clickover ?:( Kindly suggest a fix for this as this is very annoying.
This statement doesn't seem to be firing in an iphone:
"$('body').on( this.attr.click_event_ns, function(e) {..."
So, an open clickover remains open when the body is clicked (or 'touched').
This may be a Safari mobile bug/feature : click events don't bubble all the way up to body.
Is there a solution (or even a hack)?
Steps:
If you have multiple clickover elements on the screen, click on one then click on another.
Expected Behavior:
First click over disappears, second one appears
Actual Behavior:
First click over does not disappear, leaving multiple click overs appearing
Hello
$("[rel='clickover']").clickover();
When i click close button on popup, it closed and then open fast and then close popup.
any help me? thanks
Here's a sample.
<script>
function test_close(){
$('#mybutton1').clickover('hide');
}
function test_show(){
$('#mybutton1').data().clickover.show();
//$('#mybutton1').clickover('show');
}
$(function() {
$('#mybutton1').clickover();
})
</script>
<button onclick="test_close()" onclick="test_close();">hide</button>
<button onclick="test_show()" onclick="test_close();">show</button>
<a href="#" id="mybutton1" class="btn btn-secondary" data-content="Hello World">dummy</a>
Click the button "show", the popup appears correctly. However, now click outside it, it should close. But doesn't. This doesn't happen if the button "dummy" is clicked -- everything works correctly. Note: after every experiment with this page, refresh it to reset the state.
The reason for this bug is that clickery() function is never called when manually showing.
the 'onHidden' handler and other parts are not properly run when clickover is closed using either body click, auto close or data-dismiss element.
Hey,
I have a problem adding the select2 plugin (http://ivaynberg.github.io/select2/) into the clickover. It seems that it doesn't want to bind the select2 to the select element within the clickover.
Does anyone know how to do this ?
Thank you !
This plugin is exactly what I have been looking for as I needed to have a button in the popover.
Do you have any plans to include a hover trigger instead of a manual trigger? I changed line 42 to be 'mouseover" instead of 'click'. The only problem with this is that if you mouseover again, it hides the popover. I also am not sure how well this would degrade for mobile devices.
Thanks
If you have a Bootstrap style of close button in the clickover (e.g. ร), it will scroll the page to the top because of the href="#". This does not happen with Bootstrap controls.
This can be fixed by adding a return false:
ร
However, would be nice to not have to remember it, if it can be easily fixed in the bootstrapx-clickover code.
This issue does not occur if closing the clickover box by clicking outside, or on the original element.
Lee,
Thanks for this. It looks very useful.
Have you put any thought into controlling the width of the popover?
Regards,
Francisco
see pull request #11
Hi,
great plugin, it helped me a lot.
Here is how I use it, I have bunch of popups in my page. Each popup has a form in it. Those forms are jquery ajax forms, and when I get a response from server I call clickover('hide') to hide that popup. But when I click on a button to open that popup again it is not shown.
I found out when I call clickover('hide') and remove attribute 'data-clickover-open' everything is ok.
So maybe you should just add a remove of 'data-clickover-open' when calling hide.
I might be using it in a incorrect way, but I wanted to inform you :)
Thanks again, awesome plugin just what I've needed ๐
In the source code of clickover, class_name is used to add a class to a clickover.
In the docs 'class' is mentioned as an option.
http://www.leecarmichael.com/bootstrapx-clickover/examples.html#
Add class of 'clickover' on clickover widgets
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library lecar-red/bootstrapx-clickover
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "lecar-red/bootstrapx-clickover",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hi there,
I have a bit of a strange problem, and of course the culprit is IE9 (isn't it always?). I am using the clickover to show a navigational component. As I understand it, the clickover destroys itself whenever it is closed, so I am using the onShown and onHidden handlers along with jQuery .detach() and .append() commands to "save" the navigational component to an invisible div whenever the clickover is not visible.
This all works great on Firefox, Chrome, iOS Safari and even IE10. But in IE9, it seems that my navigational component is already destroyed by the time the onHidden handler is called. Would anybody know of any reason why this is, and what could be done to get around the problem?
Hi,
Sometime you may want to hide the Clickover after some action other than global click or timer and the default
I have hacked my way little bit to add another option 'forcehide' and intercept it:
Line 188:
if (typeof option == 'string') {
if (option === 'forcehide') data.clickery();
else data[option]();
}
This is just a work around for me to get it done :)
Cheers,
Hugh
selector option doesn't seem to work for me:
$('body').clickover({selector: '[rel=clickover]'});
It is a nice option to have when you have clickover triggering elements rendered by ajax after the page load.
Am I doing something wrong, or is this currently not supported?
Thanks.
When resizing the page the clickover doesn't move properly with trigger element.
hi,
I'm trying to set 'width' and it doesn't seem to work as expected. I'm on bootstrap 2.2.2, I don't know about older versions.
Currently these options are set on the inner container 'popover-inner':
this.options.width && this.tip().find('.popover-inner').width( this.options.width );
but the problem is bootstrap sets a fixed width of 236px on the parent div 'popover' [0]
I'm proposing changing the 'width' attribute directly on the parent div like the following:
this.options.width && this.tip().width( this.options.width );
fyi 'height' seems to work fine, but I'd apply the same fix just to have some consistency
also, you should really link to the github/issues page from the examples it helps a lot :)
forgot to say thanks for this awesome plugin! ;)
[0] https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css#L5298
I hate to bother you with what is probably a mistake on my part, but I can't figure out what's missing. The click over is functioning fine for the most part but the click anywhere else to close is not wanting to work here.
If you put tip_id as an option, the this.options.tip_id is correct, but by the tip the popover renders, the tip_id is randomly generated.
Thus -- it isn't possible to set the id of the popover (at all)
I have some pages that don't have a lot of content. The clickover button is 20% from the top. If i click anywhere above the button link the clickover will close. Clicking anywhere below the button or end of content it will not close.
just fyi
when initializing 2-3 clickovers like this
$('[rel="clickover"]').clickover();
the name space for each of them could get the same timestamp from Date() i.e this.attr.click_event_ns could be same.
Hence with allow_multiple option to 0, we miss $(body) click events because the previous hide will "off" the same namespace on body click event.
I just put a hack around with this.
this.attr.click_event_ns = "click." + this.attr.me + "." + element.id; // Adding the elements id to distinguishing the namespace.
Not the right solution but works for me.
see:
http://jsfiddle.net/tingwang/K48Gh/1/
the button tag is quoted.
Hello,
We have just add bootstrapx-clickover to twittstrap resources list
http://twittstrap.com/resources/details/bootstrapx-clickover
Under : Components
Regards
In Bootstrap 2.1, both the .popover-inner and the .popover itself need the width set, or things go terribly awry. I hacked a solution by adding 1 line after these:
// set popover's dim's
this.options.width && this.tip().find('.popover-inner').width( this.options.width );
this.options.height && this.tip().find('.popover-inner').height( this.options.height );
// new line
this.options.width && this.tip().width( this.options.width );
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.