• 0

jPopup, new jquery function I wrote


Question

I wrote my own popup function since none of the currently existing functions fullfilled the needs of my projects.

https://github.com/seahorsepip/jPopup

 

It supports IE7+* and is fully responsive. It's dynamic, all popup properties can be changed even after the popup has been opened.

 

Example popup code:

 

var example = new jPopup({
	title: "<h2>Hello world!</h2>",
	content: "<p>Sudo make me a sandwich?</p>",
	buttons: [{
		text: "Sure!",
		value: true
	}, {
		text: "Nope",
		value: false
	}],
	draggable: true
});
example.open(function(r) {
	alert("Value of clicked button: "+r);
});

 

A webpage and complete documentation are in the making. 

 

Let me know what you think about it and if you have any suggestions or ideas :D

 

 

*Yes I even made sure it works on very old useless browsers :shiftyninja:

Link to comment
https://www.neowin.net/forum/topic/1285784-jpopup-new-jquery-function-i-wrote/
Share on other sites

Recommended Posts

  • 0

The UX of it wasn't the best (I can't put my finger on to why specifically yet though, I'll get back to you about that when I can gather my thoughts on it and test it a bit more).

 

The interface though is clean and concise, love it.

 

All around a very solid piece of code you've posted here :woot:

  • 0
  On 14/01/2016 at 23:02, Mur said:

The UX of it wasn't the best (I can't put my finger on to why specifically yet though, I'll get back to you about that when I can gather my thoughts on it and test it a bit more).

 

The interface though is clean and concise, love it.

 

All around a very solid piece of code you've posted here :woot:

Expand  

UX?

How do you mean? The properties and functions don't seem too complicated to me.

 

The interface is just some visual styling, the popups even work without adding any styles, though I'd recommend adding some styles at least to make it work properly.

 

I'll add a "stretch" option in the next update that will replace the "top", "bottom", "left" and "right" classes.

Also I'll add "popup_position_*position variable*" as a class to the popupwrapper and "popup_stretch" when stretch is true.

  • 0

UX (User Experience) meaning the experience of using - the 'thrill' in a sense, there's something that takes away from the usage of the demo itself. Again I don't have proper words for it yet, I have to sit down and really think about it, you've got a really good item here for sure. It's something minor but I can't put my finger on it.

  • 0
  On 14/01/2016 at 23:27, Mur said:

UX (User Experience) meaning the experience of using - the 'thrill' in a sense, there's something that takes away from the usage of the demo itself. Again I don't have proper words for it yet, I have to sit down and really think about it, you've got a really good item here for sure. It's something minor but I can't put my finger on it.

Expand  

Hmm the plugin has support for all the interface elements I can imagine, the demo of course is just a quick thing I wrote. The actual homepage with the demos will be more clear and visually appealing. I'll showcase how dynamic the plugin is, it can be easily made into a lightbox as example since the content and buttons can be changed at any moment with content()  and buttons().

  • 0
  On 14/01/2016 at 23:27, Mur said:

UX (User Experience) meaning the experience of using - the 'thrill' in a sense, there's something that takes away from the usage of the demo itself. Again I don't have proper words for it yet, I have to sit down and really think about it, you've got a really good item here for sure. It's something minor but I can't put my finger on it.

Expand  

Still waiting for any suggestions/improvements.

Check my last post about a new experimental feature I'm working on.

  • 0
  On 16/01/2016 at 22:32, Seahorsepip said:

Still waiting for any suggestions/improvements.

Check my last post about a new experimental feature I'm working on.

Expand  

Sorry! Got caught up with a new client at work so that's where about 90% of my time has been going (other ~10% to sleep I guess?)

 

zXjKclX.png

 

On the "nope" option you're forced to give feedback, instead of an option to close it (I don't know if this is mean't to be an explicit action) but forced (surprise) feedback is a good way to get a lot of "asdasd" entries.

 

You're also not able to close the main popup interface, another forced action is required (again not sure if this is explicit)

 

3RZHcTT.png

 

Those were the two things I couldn't quite put my finger on. Overall though it's a really, really solid setup.

  • 0
  On 17/01/2016 at 02:07, Mur said:

Sorry! Got caught up with a new client at work so that's where about 90% of my time has been going (other ~10% to sleep I guess?)

 

zXjKclX.png

 

On the "nope" option you're forced to give feedback, instead of an option to close it (I don't know if this is mean't to be an explicit action) but forced (surprise) feedback is a good way to get a lot of "asdasd" entries.

 

You're also not able to close the main popup interface, another forced action is required (again not sure if this is explicit)

 

3RZHcTT.png

 

Those were the two things I couldn't quite put my finger on. Overall though it's a really, really solid setup.

Expand  

Looooooooooooooool

Those popups were just quick total random demos not meant to mean anything or to be taken serious ^^ You didn't see the joke :P?

I'll make a project page soon with actual demos that make sense.

 

What do you think about my new popout feature?

  • 0
  On 17/01/2016 at 04:54, Seahorsepip said:

Looooooooooooooool

Those popups were just quick total random demos not meant to mean anything or to be taken serious ^^ You didn't see the joke :P?

I'll make a project page soon with actual demos that make sense.

 

What do you think about my new popout feature?

Expand  

Oh no, I understand the joke dialogue, but there should be a way to skip it still. The only option is to enter into a required field (I get the satire don't worry! :p )

 

I'll take a look at the popout feature in a quick while

  • 0
  On 17/01/2016 at 22:55, Mur said:

Oh no, I understand the joke dialogue, but there should be a way to skip it still. The only option is to enter into a required field (I get the satire don't worry! :p )

 

I'll take a look at the popout feature in a quick while

Expand  

I think you miss the point.

 

If I am building something that requires info to be entered, I'd never want them to be able to skip it.

  • Like 1
  • 0
  On 17/01/2016 at 23:01, adrynalyne said:

I think you miss the point.

 

If I am building something that requires info to be entered, I'd never want them to be able to skip it.

Expand  

Indeed it was showcasing the optional checkForm feature with a textarea that had the required attribute :D

  • 0
  On 17/01/2016 at 23:01, adrynalyne said:

I think you miss the point.

 

If I am building something that requires info to be entered, I'd never want them to be able to skip it.

Expand  

Agreed. However, there's effectively an option that's given:

 

a) do something

b) opt out

 

b -> leads into asking "why" you don't want to. This should be optional in my opinion. Making a required field in a form is one thing, but I don't feel like this is the most appropriate case.

 

That said though, since @Seahorsepip is making a function I feel like it should have those options since it's a very possible use-case. ¯¯\(°_o)/¯¯ 

  • 0
  On 18/01/2016 at 00:56, Mur said:

Agreed. However, there's effectively an option that's given:

 

a) do something

b) opt out

 

b -> leads into asking "why" you don't want to. This should be optional in my opinion. Making a required field in a form is one thing, but I don't feel like this is the most appropriate case.

 

That said though, since @Seahorsepip is making a function I feel like it should have those options since it's a very possible use-case. ¯¯\(°_o)/¯¯ 

Expand  

The demo showing the function is just total random madness that shouldn't be making sense, it was an attempt at humor :p

Anyway I'm working on the landing page that will have humor that actually makes sense.

  • 0
  On 18/01/2016 at 01:07, Seahorsepip said:

The demo showing the function is just total random madness that shouldn't be making sense, it was an attempt at humor :p

Anyway I'm working on the landing page that will have humor that actually makes sense.

Expand  

Does it halt all execution like an alert when waiting for a response?

  • 0
  On 18/01/2016 at 01:13, adrynalyne said:

Does it halt all execution like an alert when waiting for a response?

Expand  

A popup is opened with open() and the function inside open() is called with the button value as return value and the form also as return value when a button in the popup is clicked.

new popup({
    title: "Example",
    buttons: [{
        text: "Example button",
        value: "something"
    }]
}).open(function(r) {
    alert("value of the clicked button: "+r);
});

It does not halt any js code below open(). If you want that as feature lemme know and I'll add it as an option.
The code I'll probably use:

function popup() {
    this.open = function() {
        //Open the popup
        var popupClosed = false;
        while (!popupClosed) {
            //We do absolutely nothing except halt any code after open() since js keeps thinking that open() is still running :P
        }
    };
    function close() {
        //Closes popup
        //Cleanup browser events
        popupClosed = true;
    }
}

Keep in mind pausing code execution in js is a messy thing and not something that's meant to be ;)

  • 0
  On 18/01/2016 at 01:25, Seahorsepip said:

A popup is opened with open() and the function inside open() is called with the button value as return value and the form also as return value when a button in the popup is clicked.

new popup({
    title: "Example",
    buttons: [{
        text: "Example button",
        value: "something"
    }]
}).open(function(r) {
    alert("value of the clicked button: "+r);
});

It does not any js code below open(). If you want that as feature lemme know and I'll add it as an option.

Expand  

Well what I mean is that I've run into issues where I need a complete halt on all code execution ( even if not part of the current function) when an alert is active. This is possible with a native JS alert (and I really dislike alert). All the jQuery solutions I've found so far don't do this. 

  • 0
  On 18/01/2016 at 01:45, adrynalyne said:

Well what I mean is that I've run into issues where I need a complete halt on all code execution ( even if not part of the current function) when an alert is active. This is possible with a native JS alert (and I really dislike alert). All the jQuery solutions I've found so far don't do this. 

Expand  

Hmm it seems after some experimenting with while() etc and some research that's not possible, anyting besides alert prompt etc is part of the browser thread which means the browser can also not register events when it's thread is paused. This is no problem for alert since it's not part of the browser dom but any html popup is part of the dom that has just been paused.

 

So instead of thinking about pausing the thread consider changing the code design. I can't imagine that pausing the whole code execution is the only simple solution.

  • 0
  On 18/01/2016 at 02:44, Seahorsepip said:

Hmm it seems after some experimenting with while() etc and some research that's not possible, anyting besides alert prompt etc is part of the browser thread which means the browser can also not register events when it's thread is paused. This is no problem for alert since it's not part of the browser dom but any html popup is part of the dom that has just been paused.

 

So instead of thinking about pausing the thread consider changing the code design. I can't imagine that pausing the whole code execution is the only simple solution.

Expand  

I think I worked around it last time with building a call back into my function. I was just wondering if you found a way around that limitation. 

 

Thanks for checking :)

 

 

  • 0
  On 18/01/2016 at 02:52, adrynalyne said:

I think I worked around it last time with building a call back into my function. I was just wondering if you found a way around that limitation. 

 

Thanks for checking :)

 

 

Expand  

Seems there might be a away with javascript 1.7 async js but that's making things only more complex :/

  • 0

Started to contribute to the Github Repo :) I actually find this to be super useful and really look forward to working on it with you in the future!

 

Do you use asset managers at all? I converted your CSS to SCSS but didn't want to pull your project in a direction you didn't like so I didn't prepare a full asset-management setup.

  • 0
  On 31/01/2016 at 06:11, Mur said:

Started to contribute to the Github Repo :) I actually find this to be super useful and really look forward to working on it with you in the future!

 

Do you use asset managers at all? I converted your CSS to SCSS but didn't want to pull your project in a direction you didn't like so I didn't prepare a full asset-management setup.

Expand  

I use less css mostly but if a project uses something else I'm also fine with it. I used css in this case since it requires no compiling for the user, it's ready to be used.

 

It might be a good idea to add a scss or less file and a css file so it can be used directly without any trouble(css) and developers can modify/learn from the scss/less file.

 

I'm currently looking into optimizing the js code, it can de reduced quite a bit I hope. Also There's a bug for IE8, buttons can have a "class" property that causes errors, to fix this I'll change it to buttonClass.

This topic is now closed to further replies.
  • Posts

    • I really hate it that I can't access the historical changes in my notes and if I accidentally delete large portions of the text which happens more often than not, sometimes, there's no recovering. There should always be a way to go backwards in time, simply because we have iCloud. And why is there no normal export capability? There should be a historical-change-back up and export capability.
    • SeaMonkey 2.53.21 by Razvan Serea The SeaMonkey project is a community effort to develop the SeaMonkey all-in-one internet application suite. Such a software suite was previously made popular by Netscape and Mozilla, and the SeaMonkey project continues to develop and deliver high-quality updates to this concept. Containing an Internet browser, email & newsgroup client with an included web feed reader, HTML editor, IRC chat and web development tools, SeaMonkey is sure to appeal to advanced users, web developers and corporate users. Under the hood, SeaMonkey uses much of the same Mozilla source code which powers such successful siblings as Firefox, Thunderbird, Camino, Sunbird and Miro. Legal backing is provided by the Mozilla Foundation. SeaMonkey 2.53.21 changelog: Unable to load JSON Bookmarks file, Open/Cancel do the same thing bug 1940204. Move replaceVars helper into menu-manager.js for cZ bug 1937379. Remove dumpObject helper from utils.js in cZ bug 1937380. Remove toOpenWindowByType helper from utils.js in cZ bug 1937382. Fix makeLogName helper to not encode twice in prefs.js in cZ bug 1937387. Remove use of escapeFileName helper and tidy up pref_mungeName helper in cZ bug 1937395. Add helper to file-utils.js for ensuring an nsIFile is returned in cZ bug 1937397. Remove unused http.js file from cZ bug 1937890. Remove unused IRC tests from static.js in cZ bug 1937896. Switch from deprecated escape/unescape in cZ bug 1938933. Tidy up use of prefBranch outside of pref-manager in cZ bug 1938935. Make use of pref fallbacks in pref-manager in cZ bug 1938937. Remove unused edit context menu from cZ bug 1939929. Use XPCOMUtils.generateQI in connection-xpcom in cZ bug 1939930. Merge menus.xul, popups.xul and scripts.xul into chatzilla.xul bug 1939958. Make use of toSOutputStream and toSInputStream helpers in DCC code in cZ bug 1939965. Stop hard-coding commandkey for reloadui in cZ bug 1939968. Use suite's FillInHTMLTooltip helper instead of having own version in cZ bug 1939969. Split custom-away from other away/back commands in cZ bug 1942655. Remove ChatZilla Homepage link from Help menu and about command in cZ bug 1942916. Re-arrange toolbar menus in cZ bug 1943783. Remove ChatZilla Homepage link from about and prefs dialogs in cZ bug 1943844. Use custom controller for userlist and tidy up some controller use in cZ bug 1945325. Make use of observes for show/hide elements in cZ bug 1945378. Don't dynamically create focus-input key element in cZ bug 1947028. Remove unused toolbar creation code in cZ bug 1947030. Remove unused updateMenus code from cZ bug 1947031. Clean up whitespaces in cZ package manifest bug 1947040. Remove unused uninstallKeys code from cZ bug 1950002. Use node.remove(), especially instead of node.parentNode.removeChild(node) in cZ bug 1951250. Remove __cz_condition from cZ bug 1951253. Remove outputWindowURL pref from cZ bug 1951256. Remove unused JS tests in cZ bug 1951297. Use includes, startsWith and endsWith instead of indexOf and substr in cZ bug 1951302. Use {} and [] instead of new Object() and new Array() in cZ bug 1951303. Fixup function naming for lint in cZ bug 1955141. Fixup method naming for lint in cZ bug 1955767. Remove old Mozilla 1.0 code from updateAppMotif in cZ bug 1955771. Use throw Components.Exception in cZ bug 1955774. Migrate output-window from HTML to XHTML to make localisation more standard in cZ bug 1955825. Merge munger.js into mungers.js in cZ bug 1956373. Remove unused tagName from mungers.js in cZ bug 1956374. Flatten directory structure in cZ bug 1956375. Tidy up about dialog page in cZ bug 1956376. Add helper to commands.js for sending CTCP commands in cZ bug 1956377. Migrate to standard menus for menu toolbar in cZ bug 1957763. Install plugin dialog broken in cZ bug 1961599. cZ change nick menu not working bug 1962112. Away status isn't reflected correctly in all channels in cZ bug 1962234. Fix dark motif userlist in cZ bug 1967072. SeaMonkey Composer adds moz-do-not-send attribute for links and images bug 1827146. Use menu_Toolbars overlay for navigatorOverlay and console bug 1945335. Remove defunct 2.53 prerelease builds from debugQA extension bug 1947043. Handling of MOZ_LANGPACK_CONTRIBUTORS in defines.inc files should be less custom bug 1951101. Control + U shortcut for underlined text is not working bug 1872514. Context menu search (with default search engine) does not work in the content area of a message compose or SM-Composer window bug 1062092. The following bugs were fixed in our branch of the Gecko source code only: on FreeBSD sqlite3 fails to link for missing math functions bug 1944954. Expand init.configure to use version_package.txt to set MOZ_PKG_VERSION bug 1952757. Change supported msvc Compilers for SeaMonkey 2.53 bug 1954176. SeaMonkey 2.53.21 contains (among other changes) the following major changes relative to SeaMonkey 2.49.5: The Bookmarks Manager has switched its name to Library, and now also includes the History list. When History is invoked, the Library will be shown with the History list selected. The extensive modifications were needed because of Mozilla Gecko platform API changes. Download Manager has been migrated to a new API. Although it looks pretty much the same as before, the search option is missing and some other minor details work differently. The previous downloads history is removed during the upgrade. The layout panel was added to the CSS Grid tools. TLS 1.3 is the default SSL version now. Support for all NPAPI plugins like Flash, Java and Silverlight has been removed. For displaying pdf files in the browser you can use pdf.js-seamonkey from Isaac Schemm. SeaMonkey now uses a new api for formatting regional data like time and date. Default is to use the application locale of the current SeaMonkey build. If you use a language pack or a different OS formatting this is usually not desired. You can change the formatting from the application locale to the regional settings locale (OS) in the preferences dialog under "Appearance". SeaMonkey 2.53.21 uses the same backend as Firefox and contains the relevant Firefox 60.8 security fixes. Download: SeaMonkey 64-bit | Portable SeaMonkey 64-bit ~60.0 MB (Freeware) Download: SeaMonkey 32-bit | Portable SeaMonkey 32-bit View: SeaMonkey Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • It doesn't work for the view, but the music gets me every time:  
    • I remember when it first came about and the rubbish that was on it, and I did have a look now and again to see if it improved, and it really did not. I have never downloaded anything from it. Even on my Mac I tend to avoid the store, i prefer to download from source.
    • Are there any others that are as good?
  • Recent Achievements

    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
    • Week One Done
      CHUNWEI earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      428
    2. 2
      +FloatingFatMan
      206
    3. 3
      snowy owl
      194
    4. 4
      ATLien_0
      190
    5. 5
      Xenon
      141
  • Tell a friend

    Love Neowin? Tell a friend!