jPopup, new jquery function I wrote

[Seahorsepip Veteran]

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

 

 

_{*Yes I even made sure it works on very old useless browsers} 

[pqt]

  On 31/01/2016 at 15:23, Seahorsepip said:

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.

Expand  

How interested are you in using an asset manager?

[Seahorsepip Veteran]

  On 01/02/2016 at 22:17, Mur said:

How interested are you in using an asset manager?

Expand  

Never used one, I used mostly less css in projects since it gave me the ability to have css variable which I could change on the fly with js.

 

Personally I don't see the need for an asset manager in this case, the files aren't big enough and it's our goal to keep them that way

 

I'm currently working on a resize option and width/height/minWidth/minHeight/maxWidth/maxHeight options.

[pqt]

  On 01/02/2016 at 23:20, Seahorsepip said:

Never used one, I used mostly less css in projects since it gave me the ability to have css variable which I could change on the fly with js.

 

Personally I don't see the need for an asset manager in this case, the files aren't big enough and it's our goal to keep them that way

 

I'm currently working on a resize option and width/height/minWidth/minHeight/maxWidth/maxHeight options.

Expand  

It's not necessarily about the size of the file as much as it is the organization of certain things. Albeit functions or certain parameters, I use it in my personal site design in a way of partials as seen on github; the design is still a major wip but you can easily see how it would be a lot easier to sort things in this particular case. I've got that project followed and actively watching it, whenever I see an opportunity to hop in and help out I will. As you start to get more familiar with GitHub I can give you a bit of an insight of how I (personally) do project management so that you can scale up projects pretty easy in the future.

 

Already started using jPopup on my personal site, still have to tweak it a bit to do exactly as I want it to do but it's a really, really solid project and I love it. Well done.

[Seahorsepip Veteran]

  On 01/02/2016 at 23:57, Mur said:

It's not necessarily about the size of the file as much as it is the organization of certain things. Albeit functions or certain parameters, I use it in my personal site design in a way of partials as seen on github; the design is still a major wip but you can easily see how it would be a lot easier to sort things in this particular case. I've got that project followed and actively watching it, whenever I see an opportunity to hop in and help out I will. As you start to get more familiar with GitHub I can give you a bit of an insight of how I (personally) do project management so that you can scale up projects pretty easy in the future.

 

Already started using jPopup on my personal site, still have to tweak it a bit to do exactly as I want it to do but it's a really, really solid project and I love it. Well done.

Expand  

Tweak it? What did you change? My goal in jPopup is to make it as versatile as possible.

[pqt]

  On 02/02/2016 at 00:14, Seahorsepip said:

Tweak it? What did you change? My goal in jPopup is to make it as versatile as possible.

Expand  

Not to the design (sorry should have specified) it'll be used to display all of the case-study articles I public regarding the various development jobs I have.

 

I don't like the way the unordered list is presented, the library thus far has been perfect.

 

[Seahorsepip Veteran]

  On 02/02/2016 at 00:17, Mur said:

Not to the design (sorry should have specified) it'll be used to display all of the case-study articles I public regarding the various development jobs I have.

 

I don't like the way the unordered list is presented, the library thus far has been perfect.

 

Expand  

Unordered lists and other html content are not styled, only the basic html elements are styled. Any additional styling can be done by adding additional css to the default css file of the website(not jpopup).

 

Example:

var neowin = new jPopup({
	title: "<h1>Neowin case studies</h1>",
	content: "<p class=\"hello\">Hello world</p>",
	buttons: [
		text: "Close"
	]
});
neowin.addClass("popup_case_studies").open();

Then you can add case studies specific css to the popup:

.popup_case_studies .popup ul li {
	/*Do whatever you want for case studies list items */
}

Also if you want to add a click handler to the hello world text you can do the following:

neowin.popupContent().children(".hello").click(function() {
	//Do something
});

So yeah I need to make a proper documentation with examples.

 

And I'm considering to add check and radiobox styling and also list styling.