I am currently using bootstrap date picker downloaded from eyecon.ro
On clicking the input field the datepicker popup opens, where i am showing the date.
However, on scrolling the browser's window, the datepicker's popup disappears. I have also created an issue for this in github but haven't got any answer yet. Can anyone help me with this, please ?
When you click in any location on windows the event "onblur" is fired, so this is not a bug. Otherwise you can modify this coding a event for onblur to not 'hide' the datepicker window.
Edit:
Ok, make this modification on bootstrap-datepicker.JS, on Datepicker prototype (line 88):
show: function(e) {
this.picker.show();
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
this.place();
var t = this;
$(window).on('resize', $.proxy(this.place, this));
$(window).on("scroll", this.place, function() {
t.show();
});
if (e ) {
e.stopPropagation();
e.preventDefault();
}
if (!this.isInput) {
}
var that = this;
$(document).on('mousedown', function(ev){
if ($(ev.target).closest('.datepicker').length == 0) {
that.hide();
}
});
this.element.trigger({
type: 'show',
date: this.date
});
},
I just include a trigger for 'scroll', below the trigger for 'rezise' (line 6 here).
Related
I'm new to Steroids and I'm trying to display a modal view with a button in the native navigation bar (will use it later for a side drawer).
Note: The use of a modal view doesn't require to override potential existing back button on the left side.
My view and its content are displayed normally with a nice NavigationBarButton "Filtres". But once the view is fully loaded the navigation bar is reloaded and the navigation bar button disappears.
Any idea why this happens and how fix it?
Here is the controller code:
angular
.module('profile-list')
.controller('IndexController', function($scope, supersonic) {
var drawerButton = new supersonic.ui.NavigationBarButton({
title: "Filtres",
onTap: function(){
supersonic.logger.debug("click");
}
});
var navigationBarOptions = {
buttons: {
left: [drawerButton]
}
};
supersonic.ui.navigationBar.update(navigationBarOptions);
});
Thanks
Try wrapping the navbar update like this:
supersonic.ui.views.current.whenVisible( function(){
var drawerButton = new supersonic.ui.NavigationBarButton({
title: "Filtres",
onTap: function(){
supersonic.logger.debug("click");
}
});
var navigationBarOptions = {
buttons: {
left: [drawerButton]
}
};
supersonic.ui.navigationBar.update(navigationBarOptions);
});
Also, you can test the button on the right side instead in case the overrideBackButton is somehow setting itself to true.
I have a simple JSFiddle here: http://jsfiddle.net/cvCWc/2/
The basic code looks like:
window.player = videojs("movie_container", { techOrder: ["html5", "slash"] }, function() {
videojs_player = this;
videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
videojs_player.on("click", function(event){
event.preventDefault();
alert('click');
});
videojs_player.play();
});
I am trying to capture all click events on the video for future processing, but I don't want the video to pause when clicked. Any ideas?
I found the answer for HTML5... but I don't get click events in the flash fallback. Updated jsfdl: http://jsfiddle.net/cvCWc/3/
window.player = videojs("movie_container", { techOrder: ["html5", "flash"] }, function() {
videojs_player = this;
videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
videojs_player.off('click');
videojs_player.on("click", function(event){
event.preventDefault();
console.log("click", event.clientX, event.clientY, videojs_player.currentTime());
});
videojs_player.play();
});
Just an alternative if someone drops to this. When you wanna bypass the stop play functionality when user clicks the stream(or view, whatever you call it), not the control bar, one can comment out somelines in videojs..
Player.prototype.handleTechClick_ = function handleTechClick_(event) {
// We're using mousedown to detect clicks thanks to Flash, but mousedown
// will also be triggered with right-clicks, so we need to prevent that
if (event.button !== 0) return;
// When controls are disabled a click should not toggle playback because
// the click is considered a control
if (this.controls()) {
if (this.paused()) {
//this.play(); // COMMENTED OUT
} else {
//this.pause(); // COMMENTED OUT
}
}
};
Control bar will still work...
I have an aspx page that contains a dialog box defined with JQueryUI
$('#dialog').dialog({
modal: true,
autoOpen: false,
minWidth: 500,
title: 'my dialog',
buttons: { Finished: function() { $(this).dialog("close"); }
}
});
Within the page I have a button which is supposed to open the dialog
<button class="button" id="dialogLoader">Open</button>
The JavaScript for opening the dialog is
$('#dialogLoader').live('click', function(event) {
event.preventDefault();
$('#dialog').dialog("open");
loadDialogContent();
});
In Chrome Firefox etc all is good but IE9 does not load the dialog, even though when debugging all code appears to execute fine.
Any Ideas
UPDATE
Still have this problem I have updated the code above to show that I am now utilising preventDefault(); which I thought was the cause of the problem (if the problem is indeed event bubbling). but I still have no remedy to this if this was plain HTML it would work but I fear the involvement of ASP has caused some irregularity in rendering, which unfortunately returns no error.
UPDATE
Could the fact that this button is within JQueryUI tabs be causing the issue in IE9?
as you wrote your debug info is clean, this is just one idea. I hope this helps a little bit. attachEvent for Explorer.
var button = document.getElementById('dialogLoader');
if (button.addEventListener) {
button.addEventListener('click', function() {
//action
}, true);
} else if (button.attachEvent) {
button.attachEvent('click', function() {
//action
}, true);
}
Simplemodal works perfectly but I dont know how to automatically close the Iframe after the form is submitted.
I have tried to get the event outside the modal options using js, but
if I close the modal window on the submit event, then the form is not submitted...
I have also added the class simplemodal-close to the input button, but it doest work in the form??
Any suggestions??
Here is my code
//Modal Window
modal.click(function(e){
e.preventDefault();
$.modal('<iframe src="' + this.href + '" height="480" width="525" style="border:0" >',{
containerCss:{
backgroundColor:"#fff"
},
overlayClose:true,
onShow: function (dialog) {
$("input",dialog.data).click(function (e) {
e.preventDefault();
alert('Here'); //Doesnt execute
$.modal.close();
parent.$.modal.close();
alert('Here');
});
}
});
Ok, I just did it.. I didnt use iframe because after parent.$.modal.close().. The js included in that iframe didnt execute anymore..
So I just did it this way..
//Modal Window
modal.click(function(e){
e.preventDefault();
$.get(this.href,function(data){
var resp = $('<div></div>').append(data); // wrap response
$(resp).modal({
overlayClose:true,
minHeight:450,
minWidth: 500,
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff"
},
onShow: function(dialog){
autocomplete();
}
});
});
});
If I use a div instead that an iframe,, when I submit, the modal closes otherwise it stays open....
It was easy, but I got confused..
Can anyone inform me how to maintain the jquery accordion active state panel when changing pages. Ideally i would like to change in the code-behind however really happy to just get it working.
developing in asp.net 3.5
Hope this helps
Thanks
Example here. If you select one of the accordion headers then refresh the page the last accordian panel you clicked is opened by default
I see this as a pure client responsibility. I would store the information in a cookie plugin here which you can read and pass to the accordion constructor.
I would prefer this over passing values to and from the server for no real benefit.
Something along these lines
//get persisted active accoridan index
var activeIndex = $.cookie('accordianActiveIndex');
//guard code here to check you have a valid activeIndex...
$('.selector').accordion({
active: activeIndex,
change: function(event, ui) {
//set cookie here to new active header (index)
$.cookie('accordianActiveIndex', ui.newHeader.prevAll().length)
}
});
For anyone with a similar problem getting cookies to work with jQuery UI Accordion, I've solved it by adding one line to redsquare's code.
The cookie value activeIndex needs to be parsed as an integer:
//get persisted active accoridan index
var activeIndex = $.cookie('accordianActiveIndex');
activeIndex = parseInt(activeIndex, 10);
//guard code here to check you have a valid activeIndex...
$('.selector').accordion({
active: activeIndex,
change: function(event, ui) {
//set cookie here to new active header (index)
$.cookie('accordianActiveIndex', ui.newHeader.prevAll().length)
}
});
And here's another way to save UI Accordion state using the cookie.js plugin:
(source)
var accordion = $("#accordion");
var index = $.cookie("accordion");
var active;
if (index !== null) {
active = accordion.find("h3:eq(" + index + ")");
} else {
active = 0
}
accordion.accordion({
header: "h3",
event: "click hoverintent",
active: active,
change: function(event, ui) {
var index = $(this).find("h3").index ( ui.newHeader[0] );
$.cookie("accordion", index, {
path: "/"
});
},
autoHeight: false
});
I Just use
$( ".selector" ).accordion({ navigation: true });
that maintains the status of the selected option