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.
Related
I'm working with a redactor editor that uses several default buttons and a number of plugin buttons (e.g. 'fontfamily', 'fontcolor', 'fontsize'). I'd like to re-order the buttons so that the plugin buttons can be placed before (i.e. to the left of) the default buttons. This does not appear to be natively supported by the redactor API. How can I do this?
You will need to edit the plugin code, here is a very basic example of a plugin:
if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.custombutton = function()
{
return {
init: function()
{
var button = this.button.add('custom-button', 'Add Button');
this.button.addCallback(button, this.custombutton.show);
},
show: function()
{
console.log('myplugin show');
};
};
You need to tweak this line (below), it will be within the init method.
var button = this.button.add('custom-button', 'Add Button');
this.button.add insert the button at the end of the toolbar by default. You can read more about the other options here http://imperavi.com/redactor/docs/api/button/
But to add at the start you will want addFirst:
var button = this.button.addFirst('custom-button', 'Add Button');
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).
I have an infoBox that opens when clicking on a google maps marker. Inside the infoBox there is a button '#open-popup' that when clicked should to open a magnificPopup modal window but nothing happens.
As a test I have put the same button outside the div containing the google map, which opens the modal window but only on the second click! What is going on?
I have tried all sort of things for days but all have worst side effects.
Any help will be much appreciated.
HTML for button inside infoBox:
<div style=...>
<centre>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
</center>
</div>
HTML for button outside google maps div:
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
JS:
myapp.triggerClick = function (){
google.maps.event.trigger(gmarkers[id],"click")
};
var infoboxOptions = {
content: ''
,disableAutoPan: false
,alignBottom: true
,maxWidth: 0
,pixelOffset: new google.maps.Size(0, 0)
,zIndex: 1000
,boxStyle: {
background:''
,opacity: 0.9
}
,closeBoxMargin: "4px 4px 0 0"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1,1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(infoboxOptions);
function createMarker(latlng, html, id) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map
//zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
ib.setContent(contentString);
ib.open(map,marker);
});
gmarkers[id] = marker;
}
$(document).on('click', '#open-popup', function () {
$(this).magnificPopup({
items: {
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
},
type: 'image' // this is default type
});
});
Try placing your jQuery click event inside a map event listener, that is set to fire when an infobox is clicked. A map event listener is needed because click events inside a google map are handled by the Google Map API.
So for you, something like:
window.google.maps.event.addListener(ib, "domready", function () {
$('#open-popup').on('click', function () {
$(this).magnificPopup({
items: {
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
},
type: 'image' // this is default type
});
});
});
Notice that I updated the selector for your on click event also. You may want to play around with that as the usual on selector syntax wouldn't work in my case, e.g. $('.preExistingElementSelector').on('click', '.dynamicElementSelector', function(){});
The infobox is dynamically added and removed from the dom every time it is shown and
closed. So what the function above is essentially doing is, after the new infobox instance has been added to the dom (i.e. is visible), add this new click event to it. Once you close that infobox, it is removed from the dom which also means that the event handler you attached to it is gone also. Which is why we add a new one each time.
I'm sure there's probably a neater solution out there, I just haven't had time to find one!
Also, make sure to keep enableEventPropagation: false in the infobox options so that the click event doesn't get swallowed by Google maps.
UPDATE
Here is a working example: http://jsfiddle.net/gavinfoley/4WRMc/10/
What you really need to be able to open the magnific popup through the API. So the only change I made was changing
$(this).magnificPopup({...});
to
$.magnificPopup.open({...});
And that solved it.
window.google.maps.event.addListener(ib, "domready", function () {
$('.open-popup').on('click', function () {
// Open magnificPopup through API
// See http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type
$.magnificPopup.open({
items: {
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg/180px-0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg'
},
type: 'image' // this is default type
});
});
});
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);
}
I am using a jquery dialog, but the dialog.open() does not display the dialog. (The site only works with IE 7 & 8, so I cannot see if the dialog is in fact displayed.)
I have ensured that these dependencies are available:jquery-ui.css; jquery-ui-1.8.16.custom.min.js; https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
In the markup: I creates the dialog in the document ready method:
var $dialog;
$(document).ready(function () {
$dialog = $("#dialog")
.dialog({
autoOpen: false,
title: 'My Modal Dialog',
position: 'center',
modal: true,
closeOnEscape: true,
buttons: [{ text: "Close", click: function () { $(this).dialog("close"); } }]
});
});
Another javascript function contains these lines to "open' the dialog. When I inspect the dialog, it is an Object, but I never see it.
function showDialog() {
$dialog.html("Hello World");
$dialog.dialog('open');
}
The code looks sound, and in another project I've worked on, works without a hitch. So that leaves me to think that it IS opening, but I can't see it for some reason. Has anyone encountered this, or found a solution to this?
Thank you for any help you can provide.
Have you created parent element:
<div id="dialog">..
in document ?