Packaging plugins for npm etcetera?
Hi folks, I've built a number of jQueryUI plugins for creating special purpose interactive scientific visualizations here https://github.com/AaronWatters/jp_doodle I'd like advice on the right way to package the plugins in "state of the art" Javascript idioms so people can use `npm install ...` to install the package or similar. A pointer to a good example repository which is packaged well would also be helpful. Thanks! -- Aaron Watters
Variables are being shared across instances
Hi. I'm making a image slider plugin which is working fine with single instance but when I have multiple instances on the page, the variables are being shared across these instances. How do I sandbox them and keep the instances isolated? Here's the code: var slider = $('.slider').mySlider(); ;(function ($) { var defaults = { auto: false, delay: 4000, controls: true, controlsPosition: 'inside', //inside, outside, neighbors prevHtml: '<i class="material-icons">chevron_left</i>',
Prevent event overlap in custom jQuery image carousel
I am working on a custom image carousel, using jQuery and CSS. My aim is to make it really lightweight but with (just) enough features: "bullets", auto-advance, responsiveness. The slider had a bug (described in detail HERE): when I clicked 2 bullets in rapid succession, the transition would overlap, instead of "standing in line". The fix I found is making all the bullets except the active one non-responsive to clicks, instead of queueing the clicks : var $elm = $('.slider'), $slidesContainer
How do I return a promise from my plugin
Hello. Ihave written a jQuery plugin and want to return a promise once it has finishedloading so that I can do some other stuff. I found a useful link here and tried to replicate the code but to no avail. Please can you help - I am pretty new to both plugins andpromises. The code I use to initiate the plugin is: The cut down version coded for the plugin is: (function() { // custom workflow class $.fn.stats = function(options) { var def = $.Deferred(); var stat; var defaults = { //my defaults go here
Creating my own select navigation plugin
Hello, I've stopped developing websites many years ago but want to pick up my old hobby again. Please take a look at the following code: <button><</button> <select name="fontsize"> <option value="8px">8px</option> <option value="10px">10px</option> <option value="12px">12px</option> <option value="14px">14px</option> <option value="16px">16px</option> <option value="20px">20px</option> <option value="24px">24px</option> </select> <button>></button> I want to create a plugin that changes the select-option
Am I in the right way to build a special ui plugin ?
Hello All, My purpose is to build a singular UI plugin for a commercial purpose. This is a simple bill manager. (with its display later) 1/ My datas description is like this : _product:{ name:"", price:0, quantity:0, taxId:"0" }, _taxRow:{ name:"notax", rate:1 }, _footer:{}, _defaults:function(){ return { bill: { taxRows:{"0":this._taxRow}, header:{ billID:"0", billDate:Date() }, rows:{'0':this._product}, footer:this._footer } } } 2/ Purposes : - Data defaults must not be changed by
Image slider plugin: simulating a click on window load does not work after updating the jQuery library
I am building an image slider plugin with Next and Previous buttons and an auto advance feature. The auto advance happens by triggering clicks on the Next button at equal intervals: $(window).on('load', function() { autoAdvanceInterval = setInterval(function() { $('#next').trigger('click'); }, settings.pause); // When a control or dot is clicked by user // stop autoadvance by clearInterval method $('.controls a,.bullets li').click(function(event)
jQuery v3.2.1: Uncaught TypeError: a.indexOf is not a function at r.fn.init.r.fn.load
I had made a plugin a while ago, it used jQuery v2.1.1. It worked fine. Since using the modern 3.2.1, the console shows this error: Uncaught TypeError: a.indexOf is not a function at r.fn.init.r.fn.load I have a piece of code like this: function responsiveSlides() { var percentageSlidesWidth = (1 / slidesLen) * 100 + '%'; $slides.width(percentageSlidesWidth); } $(window).on('load',responsiveSlides()); The last line above seems to cause the error. But what is the fix? Thank you!
About getting the method's properties in treetable
Hi: I try to enclose treetable into my library, but there comes a problem about how to invoke each function in treetable individually. The main code snippet is as following: $.fn.treetable = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { return $.error("Method " + method + " does not exist
HTML + REST SERVICE PLUGIN
Hello everyone, I have created a plugin to integrate HTML with JSON REST services and facilitate the work of front end and back end programmers. Who wants to know just access: https://github.com/fabiano-miranda/miranda-js Tips and suggestions are very welcome. Hug to everyone!
I created one process in Jquery, I want to make it as plugin
Anyone knows that? How to create a jquery plugin?
Why do I have to interact with widgets this way?
When I try to call a widgets method why do I have to call it like this... var myWidget = $('#foo').MyWidget(); myWidget.MyWidget('addRow'); Why cant I just do the following? Or maybe I can and my widget is just wrong? var myWidget = $('#foo').MyWidget(); myWidget.addRow(); Below is my code: (function ($) { $.widget( "MY_NAMESPACE.MyWidget", { addRow: function() { console.log("Foo"); } }); })(jQuery); // ............. $(document).ready(function() { var myWidget = $('#foo').MyWidget();
Widget function not being overridden by options
My widget function isn't getting overridden by the options I pass in. What am I doing wrong? And PS: Do you think my Base Framework should be a widget at all? Or am I just trying to force my design to meet the JQuery UI design? Any recommendations of how I should change it? (function ($) { /* Design Widget */ $.widget( "MY_NAMESPACE.design", { _create: function () { if (!this.options.framework) this.options.framework = $('<div></div>')
Instantiating Widgets: do the elements have to exist/be in body?
When instantiating a widget do I have to 'apply' it to an element already attached to the body element? Ie, like the following... var myWidget = $('#foo').MyWidget({option1: 'foo'}) // Must add the element to the body to get it to function correctly (am I correct?) myWidget.appendTo($('body')); Or can I just instantiate one like so... var myWidget = new MyWidget({option1: 'foo'});
Create an AJAX Powered Data Driven App
When I type in an artist and I click the button, I should get a nice list of their songs in a format that is aesthetically pleasing. My error is: Nothing is returns whenever I press the button, I don't know why that is. **HTML File** <!DOCTYPE html> <html> <head> <title>Songs</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
ecosystem:jquery wrongly mentioned in NPM guide?
In instructions for publishing your plugin to npm along with "jquery-plugin" keyword for package.json the "ecosystem:jquery" keyword is mentioned as a second one. But seems there is no such plugins with this keyword so far (except of mine). Have I misunderstood the instructions and is there a need for such keyword at all? Thanks, Sasha (xml4jQuery plugin)
elevateZoom Plus - Screen Mode help needed!
Hi guys! I'm using elevateZoom Plus plugin from Igorlino GitHub user! (the original plugin is from elevateWeb GitHub user) I'm trying to implement a Screen Mode Image Zoom workaround, as you can see in this link! (html code) There are some issues I want to fix: - the scrolling is inverted (wheel up = zoom out \ wheel down = zoom in), I want the otherwise! - if (image width\height < screen width\height), the image is positioned to the top\left screen (I want it centered instead) - the "zoom in"
SlideIn Plugin - Feedback Welcome
I tried my hand at developing a plugin - a slide-in panel that works from all four sides. The panel overlays your main page and can be slid in on a mouse-click or mouse-hover. There are lots of other options for customization such as a grab handle, slide speed, opacity, peeking-in etc. The plugin is great for housing user options which are only for occasional use, especially overlaid on to whole screen UIs that demand the entire screen real estate. https://github.com/pete-rai/jquery-slidein Here
How to control the spinning wheel result
I am creating a fortune wheel using jquery $( document ).ready(function() { var prices = [0, 26, 3, 35, 12, 28, 7, 29, 18, 22, 9, 31, 14, 20, 1, 33, 16, 24, 5, 10, 23, 8, 30, 11, 36, 13, 27, 6, 34, 17, 25, 2, 21, 4, 19, 15, 32]; setInterval(function () { var $r = $('.roulette').fortune(prices); $r.spin().done(function(price) { $('.price').text(price); $('.result_number_circle').text(price); }); // $('.roulette').animate({rotate: '+=10deg'},
jQuery plugin browser compatibility an issue?
Hi I am trying to decide how to start with a browser plugin, I have no experience from plugin development. Firstly I am concerned with browser compatibility. I have also looked at MDN:s WebExtensions API, that should be very "cross-browser", however, it is under critic from many developers for being very restricted. Then I now find this, jQuery plugin alternative! Is there a problem with browser compatibility here, I mean, do I have to create separate plugins for Chrome, Mozilla, Safari etc..? What
can I have a feedback of my first plugin ..
Hello, I've write my first plugin , a jQuery UI Widget - Carousel Carousel-Widget please take a look ! I appreciate any feedback .. thank's so much all the best Noel
Hello !
I had a problem using the Bootstrap Paginator that was developed by Yun Lai. When I tried to op The reason for this discussion post is about this member's plugin that is located on the JQuery Plugin Registry. However, when you try to access the page the user is presented with a warning page telling the user that their computer is infected with a virus and to please call some number. In addition, they have continual pop ups that's flashing with the suspicious information. I feel that no one knows
Change Each order of my plugin? $("#id3,#id1,#lid2).myPlugin()
Hi guys, I've wrote a plugin - and it works great for what I need - except I've noticed today that: return this.each(function() { Puts the elements in the order they appear in the DOM. So on my html page, I have this... <div id="id1"></div> <div id="id2"></div> <div id="id3"></div> But I want to change the divs in the order I provide the plugin. Like this... $("#id3,#id1,#lid2).myPlugin() The each function changes the order to how the elements appear on the page - 1,2,3 But this is no good. Please
Access Widget instance from within nested map/object
I have a really annoying scope issue for my JQuery Widget. Essentially I need to access the widget instance (this) inside of my map/object `options`. Is it possible to do this? Any advice how I can achieve this? See this JSFiddle for a demo of the problem. $.widget( "my.myWidget", { // Below 'this.defCallback' will be undefined // How can I store 'this' (the widget instance) in a variable?? options: { //accessObjectParent: this.instantiator, isUndefined:
Jquery PJAX full blown function
I'm trying to build a function that can be built upon for ___X___ (generic) with PJAX, and was wondering how exactly I can finish building it out this is the github function: var pjax_e=0; function swapContent(href, url_data, target, loads) { $.ajax({ type: 'GET', cache: false, url: href+'?' + url_data, //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data success: function (data) { // this param name was confusing,
How do you keep current, paginated-items on refresh/reload?
I am trying to figure out if there is a way to keep the current, paginated items on the page after refresh/reload, i.e. if I were on the 2nd paginated-section, keep the data after page reload. So far, I have the list of entries & pagination installed onto the HTML page: <div class="blog-entry blog-post" style="display: block;"></div> <div class="blog-entry blog-post" style="display: block;"></div> <div class="blog-entry blog-post" style="display: block;"></div> <div class="blog-entry
Does jQuery.validate.js has internationalization or localization options ?
Does jQuery.validate.js has internationalization or localization options ? If yes, how can we achieve that? If no, still Is there any other tools or pugin or anything which helps me to achieve that through jQuery.validate.js ?
Custom plugin who accepts parameters for showing results from api
Hello to all, can someone please help me to do jquery plugin. I have an assignment to do plugin to use like $('element').customPlugin({'showResults': 10}). Default is 10 but it can be changed. I made my plugin but i don't know how to limit results. My plugin looks like $.fn. customPlugin = function(opts) { var defaultOptions = { showResults: 10 }; var opts = $.extend({}, defaultOptions,opts); $.ajax({ url: 'http/someurl', dataType:'json', success:function(data){ },
would you recommend some plugins to me for learning
hello guys i want to find some plugins which is small and have followed the best practice i want to study the source code of them would you please recommend me some
Feedback for Vaadin Charts 3.0 preview
I'd like some feedback on this preview version of Web Component enabled charting library: Vaadin Charts 3.0 https://vaadin.com/charts-for-jquery Please try it out and tell me what you think about it. I work for Vaadin and we are extending our open source Java and Web Components offerings to commercial products including this very versatile chart library. You can get an evaluation license for free. The development is still ongoing and feedback is greatly appreciated.
how to list my own plugin in plugins.jquery.com
Hi der, I uploaded my plugin in NPM.. Is that any way to list my plugin in plugins.jquery.com.. Thanks..
building an MVC framework
Trying to stir some interest and find others who might be passionate about having an SPA framework tailored to usage with jQuery. I've been working very hard on this: https://github.com/r3wt/jqMVC It doesn't chain you to anything. You are free to implement your own Views and Models libraries, so long as they conform to the interface. I'm looking for someone who knows Qunit.
Disabling a javascript
Hi how can i remotely disable my own developed js component after some one has used it in his,her website ? how can we protect our js code in general ??? any guides ??
Widget Factory: private methods vs outside-widget functions for large amounts of code
I'm developing an application-specific widget toolkit using the jQuery UI Widget Factory. The idea is to have a set of widgets which handle various aspects of working with simulation models: displaying model diagrams, plotting simulation results, etc. Most widgets therefore require a fair bit of code (100s of lines) for handling their specific task. My problem is that I'm not sure where the relevant functions should go within the file holding the widget script. Some guides on the Widget Factory
Best structure
I just build my first more complex plugin that transforms an empty table to an extended data list with edit, filter, sorting, deleting, inserting and more functionality. All works fine and as expected, but on the way i found out that some of my design patterns are not the best for my solution, so i was wondering if there are any articles available about building complex plugins that cover the structure and design of these plugins. I did found some pretty ok articles but they are years old and i was
.done() and chaining capabilities at the same time – possible?
I am working on a jQuery plugin and some of its methods should have chaining capabilities, but also the .done method should work on them. According to the tutorial on learn.jquery.com chaining is accomplished by having all jQuery object methods return the original jQuery object again meaning the method has to end with return this;, as far as I understand. Now some methods return data and the user should be able to use the .done() method in this case. It is implemented via $.Deferred(), resolve() and return
jQuery pop up plugin does not work for all elements
The pop-up plugin works fine if it is called on a single element. But stops working when i call it on multiple items - via classes. I have also enclosed the "plugin function" within a "return this.each(function() {})" But it is not worken. Can some one please help me figure out what's going wrong. Thanks http://codepen.io/TheEnd/pen/BNGmbx
jQuery truncate plugin not working
For "min_StrLength", my plugin is supposed to truncate and replace the string with a substr till the min_StrLength. But the returned value seems to be less than what is specified in the plugin settings. Can some one please guide me as to what is going wrong? http://jsfiddle.net/cmgroh3h/2/ Thanks
an evolution of jQuery tabs? a new way of visualizing multiple "pages"?
I use jQuery tabs often, and really like the easy transformation they offer, from a list of divs to a set of visually separate tabs in one window. I wonder if anyone has experimented with an all-in-one-view (page) rendering of a list of divs, in which in the summary view, each div is rendered equally scaled down, as a thumbnail, perhaps with a readable title superimposed upon selection (and equivalent to raising the selected table) the selected div expands to take most of the page; the unselected
Browser testing for javascript plugin , in independant versions of each browser
I am building 3d gallery plugin , a pretty simplistic one , something that uses CSS-3 properties, now as it is , not all browsers support 3d transforms, so obiously i have to write code to accomodate browsers that don't have access to css-3 at all, as a matter of fact, I need to write almost, i need to write a whole set of different functionality for older browsers. Well there are a few solutions to this i see , Write code to check if browser supports. Use a library like modernizer, and make your
Next Page