• Sign in to Neowin Faster!

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

  • 0
Sign in to follow this  

jPopup v2.0.1

Question

Seahorsepip    610

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

Share this post


Link to post
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Depicus    942

v1 was great so looking forward to seeing this one :)

Share this post


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

Share this post


Link to post
Share on other sites
  • 0
Austin Paquette    268
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

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
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
});

 

Share this post


Link to post
Share on other sites
  • 0
Austin Paquette    268
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.

Share this post


Link to post
Share on other sites
  • 0
game_over    794

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?

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
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

Share this post


Link to post
Share on other sites
  • 0
game_over    794
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.

Share this post


Link to post
Share on other sites
  • 0
Austin Paquette    268

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

Share this post


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

Share this post


Link to post
Share on other sites
  • 0
Austin Paquette    268

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.

Share this post


Link to post
Share on other sites
  • 0
winlonghorn    103

Very nice plugin! I like it.

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.