jPopup v2.0.1

[Seahorsepip Veteran]

http://jpopup.seapip.com/

 

Finally finished with v2.0.0 release of my popup plugin, since there wasn't any proper jQuery plugin for popups that just worked I decided to make my own. Now I've made a complete rewrite which is more advanced then ever before

 

The demo button doesn't work yet on the website, thinking of a nice demo at this moment, all the other documentation demos work though.

[pqt]

Should change the download link to always pull from the GitHub master branch.

 

> https://github.com/seahorsepip/jPopup/archive/master.zip

 

I look forward to seeing the Demo

[Depicus]

v1 was great so looking forward to seeing this one 

[Seahorsepip Veteran]

3 hours ago, Mur said:

Should change the download link to always pull from the GitHub master branch.

 

> https://github.com/seahorsepip/jPopup/archive/master.zip

 

I look forward to seeing the Demo

Nah the download link is generated using the github api to always pull the latest release. So it will never show a download link for a work in progress version.

 

I also plan to include sass css in the next update. Also a lightbox plugin is in the works. And a width and height option will be added later.

[pqt]

On 9/4/2016 at 1:43 PM, Seahorsepip said:

Nah the download link is generated using the github api to always pull the latest release. So it will never show a download link for a work in progress version.

Typically you'd handle that with branches in the Git Repo? I don't really follow how you generated one with the GitHub API either 

 

For code documentation as well, you might be able to leverage what Slate has to offer

[Seahorsepip Veteran]

17 minutes ago, Mur said:

Typically you'd handle that with branches in the Git Repo? I don't really follow how you generated one with the GitHub API either 

 

For code documentation as well, you might be able to leverage what Slate has to offer

There's a releases option for release versions in github.

And I generate a download button for the latest release by using the json api:

$.get("https://api.github.com/repos/seahorsepip/jPopup/releases/latest", function(data) {
	$("#download").append(data.tag_name); //Add version number to download button string
	$("#download").attr("href", data.zipball_url); //Get url for latest version zip
});

 

[pqt]

6 hours ago, Seahorsepip said:

There's a releases option for release versions in github.

And I generate a download button for the latest release by using the json api:

$.get("https://api.github.com/repos/seahorsepip/jPopup/releases/latest", function(data) {
	$("#download").append(data.tag_name); //Add version number to download button string
	$("#download").attr("href", data.zipball_url); //Get url for latest version zip
});

 

Fair enough.

[game_over]

Demo button doesn't work.

 

[edit] The try it yourself buttons work, but the 'Demo' button doesn't do anything.

 

When a button is clicked the page scrolls back to the top, is this intended?

[Seahorsepip Veteran]

3 hours ago, game_over said:

Demo button doesn't work.

 

[edit] The try it yourself buttons work, but the 'Demo' button doesn't do anything.

 

When a button is clicked the page scrolls back to the top, is this intended?

The demo button is work in progress as stated in the OP. The page scroll up issue is a bug when a popup button is clicked more then once(double click), I've just fixed that and create a bug fix release (v2.0.1) in a moment. Also what browser did you use? I had issues with scroll positions in the past with a few browsers.

 

Edit:

 

Bugs should be fixed in version 2.0.1

[game_over]

3 hours ago, Seahorsepip said:

The demo button is work in progress as stated in the OP. The page scroll up issue is a bug when a popup button is clicked more then once(double click), I've just fixed that and create a bug fix release (v2.0.1) in a moment. Also what browser did you use? I had issues with scroll positions in the past with a few browsers.

 

Edit:

 

Bugs should be fixed in version 2.0.1

Maybe I should read properly

 

I tested it in Safari and Chrome.

[pqt]

What was the solution for the scrolling issue in the 1.0 version? You never pushed that update.

[Seahorsepip Veteran]

3 hours ago, Mur said:

What was the solution for the scrolling issue in the 1.0 version? You never pushed that update.

The freeze function is the following:

_freeze: function() {
	var top = $(document).scrollTop();
	var left = $(document).scrollLeft();
	if(window.innerWidth > document.documentElement.clientWidth) {
		$("html").css("overflow-y", "scroll");
	}
	$("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top, "left": -left});
}

In the past var top was:

var top = $("html").scrollTop();

But sadly some browsers returned 0 instead of the actual scrollTop.

 

So I fixed it by changing it to:

var top = $("html").scrollTop() || $("body").scrollTop();

 

Later on (during v2 development) I changed it to:

var top = $(window).scrollTop();

Since that seems to work on even more devices (Hello IE6).

 

But it seems that didn't work in some browsers on some systems as reported today so in v2.0.1 that's changed yet again to:

var top = $(document).scrollTop();

 

The top variable will be later used in the unfreeze function to set the scrollTop back again and guess what when the top variableis 0 instead of the value it should be... the page jump to the top.

 

 

And yes it's absurd and crazy that such a simple thing reports different values in all browsers lol.

 

Also the IE6+ support plugin even makes sure that the animations work smoothly in IE6 which is kinda absurd too but I thought if I were to add IE support I should at least support all versions

 

And excerpt from the IE6+ plugin:

//Insane code for an insane browser
this._vars.fakeScrollbar = $("<div>");
this._vars.fakeScrollbar.html("<div style=\"position:absolute;top:expression(document.documentElement.scrollTop);right:0;bottom:0;margin-left:-200px;width:0;overflow-y:scroll;height:expression(document.documentElement.clientHeight);z-index:9999999;\"></div>");
this._vars.fakeScrollbar = this._vars.fakeScrollbar.children();

It has so much horror in the code, firstly the following didn't work in IE6 so I had to use above sort of 'hack':

this._vars.fakeScrollbar = $("<div style=\"position:absolute;top:expression(document.documentElement.scrollTop);right:0;bottom:0;margin-left:-200px;width:0;overflow-y:scroll;height:expression(document.documentElement.clientHeight);z-index:9999999;\"></div>");

Then secondly, css expressions ...

 

And at last,

Q: why a fake scrollbar in the first place?!

A: The original freeze function doesn't work since IE6 doesn't support position: fixed; so to freeze the page I used the rather simple overflow: hidden; instead. But then it doesn't show the disabled scrollbar and the page content jumps horizontally, so that's fixed by adding padding-right: *scrollbarwidth*; and a fake scrollbar.

 

This way it looks exactly the same to the user in IE6 and the latest chrome release.

[pqt]

Props to you for dealing with IE6. It makes sense. I use a css-only hack for not scrolling the DOM but I will probably reference this when it comes to countering the scroll bar on windows devices.

[winlonghorn]

Very nice plugin! I like it.