I'm in the process of deciding how to implement "selects" on a site, and am strongly considering mobiscroll, there's just one little thing that's annoying me, and that's the "extra click" (compared to an old-fashioned dropdown) of the "set" button that's required after choosing an option.
My question is, is there a way to close the scroller and set the value when an option is chosen via click or touch, but not if a new option is "chosen" because of dragging the scroller or using the mousewheel?
This is my code:
<script type="text/javascript">
$('#myScroller').mobiscroll({
preset: 'select',
theme: 'android-ics',
mode: 'mixed',
display: 'bubble',
rows: 7,
inputClass: 'subtleDropdown',
onChange: function(val, inst) {
//I would think this is where it's supposed to go, no luck thus far though!
console.log(this);
},
});
</script>
Cheers!
In the end, we decided not to use mobiScroll (too little info on it available), so I'm closing this question.
Related
I'm using free jqgrid and implemented column chooser to show hide columns, the functionality is working as expected but the popup that shows up doesn't have a proper rendering of UI.
I tried searching a lot and went through the documentation of free jqgrid but I don't know what am I doing wrong.
I was able to reproduce the error in demo in below url.
If any one has faced similar issue please help. Note I am using bootstrap theme.
$("#sampleGrid").navButtonAdd('#sampleGridPager',{
caption: "",
title: "Choose Columns",
buttonicon: "fa fa-table",
onClickButton: function () {
$("#sampleGrid").jqGrid('columnChooser');
}
});
https://jsfiddle.net/1vk5ku2y/2/
One needs to add jQuery UI CSS to the demo because it's required for columnChooser. You should add some jQuery UI theme, which corresponds Bootsrap CSS theme. For example
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css
After that one get already much better results https://jsfiddle.net/OlegKi/1vk5ku2y/4/. You need to add minor CSS fixes to have the final solution.
I have a plugin which need to show a (Modal) dialog each time the user double click on a word.
Detecting double click is no problem, but the exact fields/values in the dialog depends on exactly which word the user clicked on, and some mutable global state. So I can't create the dialog until the moment before I need to show it. And here is the problem: How do I do that?
Right now I use this code:
var dialogName="uniqueDialog" + counter++;
CKEDITOR.dialog.add(dialogName,function(editor) {
// Creating dialog here.
});
CKEDITOR.instances.editor.openDialog(dialogName);
This works, but having to add a uniquely named dialog, just to show it once and then newer use it again seems really really wrong. Also I fear this will keep using resources since the dialogs are newer removed(I could not find any remove method).
So my question is: Is there a better way to dynamical create and show a "one use" dialog?
Update:
If bootstrap is not allowed then maybe an addFrame version of the dialog is acceptable. This could then refer to a html file that can load from parameters.
NB: The plunkr only works, if you fork and edit it, otherwise it will give you a 404 for the template.
Here is a quick plunkr:
plunky
And here is the plugin in question:
CKEDITOR.plugins.add( 'insertVariable', {
requires: ['iframedialog'],
icons: 'insertvariable',
init: function( editor ) {
editor.addCommand( 'varDialog', new CKEDITOR.dialogCommand( 'varDialog' ) );
CKEDITOR.dialog.addIframe('varDialog','varDialog','sample.html?var='+item,500,400);
editor.ui.addButton( 'insertVariable', {
label: 'Insert Variable',
command: 'varDialog',
icon: this.path + '<insert gif>'
});
}
});
Obviously you are not creating dialogs anymore with different content, but you are referring to another piece of html, that can change. I've kept the bootstrap thing in there as well for reference.
I made one final edit, that will show the current contents. So I think that is roughly what you want. Check it out.
Previous Answer
If you are prepared to use bootstrap, then you can do no worse than check out their modal dialog, which can be just be shown and hidden at will.
http://getbootstrap.com/javascript/#modals
It's simple and cuts down any need to keep creating your own dialog. The dialog won't be one use type, but you will set the defaults as necessary. The varying content link is here:
http://getbootstrap.com/javascript/#modals-related-target
That would be the quickest way to get this going. It all depends on whether you want to use this framework. As CKEDITOR is already using JQuery it is an option worth considering.
(Disclaimer) I have read threads that this can't be done, and this can be done so i'm kind of confuse weather it can or not. These threads were also somewhat old so i'm asking again to see if the answer has been found by a different audience. If i annoy someone by asking this question again, i truly apologize. This was never my intention.
I have a website that sends you an email to confirm your information. When you click the link in the email, a new tab opens with a form that has your information filled out and some check boxes to agree or disagree to the terms. Once you check all the requirements, there is a button at the bottom that says agree. Right now if you click it, it submits the page, resets the fields you clicked on and i think this is a bit confusing to the end user.
I was wanting to close the page for them once they click the agree button. so now i have a jQuery dialog box pop up asking if they want to stay or leave the page. if they click leave the page, it will close that tab for them. This works in IE(surprisingly), Chrome, Safari, and Opera. Firefox is another story.
Can someone please help me or tell me if this can be done in Firefox?
This was my referance. http://www.yournewdesigner.com/css-experiments/javascript-window-close-firefox.html
And here is the code i have:
$(document).ready(function () {
$("##agree").dialog({
autoOpen: false,
resizable: false,
height:230,
width:400,
modal: true,
buttons: {
"Leave this page": function() {
$("##VerificationForm").submit();//nothing to do with closing tab
open(location, '_parent','').close();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("##agreebtn").click(
function checkAndSubmit(action) {
if(validateForm()&&validateAgreement(action)) {//nothing to do with closing tab
$("##agree").dialog('open');
return false;
}
}
);
});
The threads stating that it can be done were right at one point, but they aren't now. FireFox has patched that exploit out.
You cannot close a tab or window in FireFox that your script didn't open in the first place.
You can go into your FireFox:config and change the values around to your liking, but for security reasons, it's defaulted to "false".
There's this website I'm developing which can be found here. It's a photography website and my client asked for me to implement something that would allow her to move the photos around and change the order of which they appear. They come from a MySQL database and are displayed with jQuery Masonry.
I thought instantly of jQuery UI Sortable, and I've been trying to implement it with absolutely no luck at all.
How can I achieve this? Can someone point me in the right direction, please?
Thanks in advance!
I am struggling with the same issue, so far my answer has been to change classes with jquery's sortable start, stop, change and sort events. Like so:
$('#sortable').sortable({
start: function(event, ui) {
console.log(ui);
ui.item.removeClass('masonry');
ui.item.parent().masonry('reloadItems')
},
change: function(event, ui) {
ui.item.parent().masonry('reloadItems');
},
stop: function(event, ui) {
ui.item.addClass('masonry');
ui.item.parent().masonry('reloadItems');
});
Here is a working example and a JS Fiddle on the subject. It's a start.
However, this is not a 'presto' solution, this examples work with older versions of masonry, the latest version has a few bugs implementing it since the "reload" method was replaced with layout() and reloadItems().
Or... you can use the old masonry versions, if it works for you.
Alternatively you can use jQuery.Shapeshift(), which does basically what you're looking for.
I'm using S5 Accordion Menu on my Joomla site.
http://jalousie.al-soft.ru/o-programme
What I need is to make it not slide down, when I reload page. It needs to work like accordion only when you click on it items, but not when the page reloads.
However it will be great, if it will be possible to save its open state for current page, but without accordion effect when page loads, just load it opened.
Sorry for my english. Let me know if you have any ideas.
Here is the source
http://jalousie.al-soft.ru/modules/mod_s5_accordion_menu/js/s5_accordion_menu.js
if you use the Accordion class that ships with mootols/more/FX just use the initialDisplayFx option to disable the initial animation. Something like the following code should work.
var s5_accordion_menu = new Accordion($('s5_accordion_menu'),
'h3.s5_am_toggler',
'div.s5_accordion_menu_element', {
opacity: true,
allowMultipleOpen: true,
display: s5_am_openElement,
alwaysHide: true,
initialDisplayFx: false
});
The signature of the class you use does not match the "official" one but maybe it is just a wrapper otherwise the answer is not, you can't disable the effect