• 0

jPopup v2.0.1


Question

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

 

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.

  • Like 3
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
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.

Link to comment
Share on other sites

  • 0
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 :wacko:

 

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

Link to comment
Share on other sites

  • 0
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 :wacko:

 

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

 

Link to comment
Share on other sites

  • 0
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.

Link to comment
Share on other sites

  • 0

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?

Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

  • 0
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.

Link to comment
Share on other sites

  • 0
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 :p

 

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 :cry:...

 

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.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

This topic is now closed to further replies.