• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

jPopup, new jquery function I wrote

Question

Seahorsepip    610

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:

Share this post


Link to post
Share on other sites

Recommended Posts

  • 0
Depicus    946

Very nice :)

Share this post


Link to post
Share on other sites
  • 0
pqt    275

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:

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
10 minutes ago, 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:

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.

Share this post


Link to post
Share on other sites
  • 0
pqt    275

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.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
5 minutes ago, 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.

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().

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

Also I need to add support for 4 more positions before I forget: "topLeft", "topRight", "bottomLeft", "bottomRight".

Share this post


Link to post
Share on other sites
  • 0
Royalty    175

Wow, I love this thing here. I just love it. :)

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

Working on a new experimental feature:

 

OQBRVCh.gif

 

Yes madness :D I'm gonna call the feature popout.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
On 14-1-2016 at 0:27 AM, 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.

Still waiting for any suggestions/improvements.

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

Share this post


Link to post
Share on other sites
  • 0
TAZMINATOR    12,416
16 minutes ago, Seahorsepip said:

Working on a new experimental feature:

 

[img snipped]

 

Yes madness :D I'm gonna call the feature popout.

That's impressive. I was like WHOA!

Share this post


Link to post
Share on other sites
  • 0
pqt    275
3 hours ago, Seahorsepip said:

Still waiting for any suggestions/improvements.

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

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.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
2 hours ago, 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.

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?

Share this post


Link to post
Share on other sites
  • 0
pqt    275
17 hours ago, 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?

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

Share this post


Link to post
Share on other sites
  • 0
adrynalyne    12,315
5 minutes ago, 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

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

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
23 minutes ago, 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.

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

Share this post


Link to post
Share on other sites
  • 0
pqt    275
1 hour ago, 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.

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)/¯¯ 

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
9 minutes ago, 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)/¯¯ 

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.

Share this post


Link to post
Share on other sites
  • 0
adrynalyne    12,315
5 minutes ago, 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.

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

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
14 minutes ago, adrynalyne said:

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

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 ;)

Share this post


Link to post
Share on other sites
  • 0
adrynalyne    12,315
16 minutes ago, 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.

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. 

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
17 minutes ago, 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. 

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.

Share this post


Link to post
Share on other sites
  • 0
adrynalyne    12,315
6 minutes ago, 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.

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 :)

 

 

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
19 minutes ago, 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 :)

 

 

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

Share this post


Link to post
Share on other sites
  • 0
pqt    275

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.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
9 hours ago, 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.

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.