• 0

jPopup v2.0.1


Question

Seahorsepip

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 post
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Depicus

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

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

 

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

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

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

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

Link to post
Share on other sites
  • 0
pqt

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

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

Link to post
Share on other sites
  • 0
winlonghorn

Very nice plugin! I like it.

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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Get this Interactive Learn to Code Bundle at 73% off for just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.


      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Win Your Dream 2020 Tesla Model 3 Giveaway
      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

      running costs.

    • By News Staff
      Save 73% off the Interactive Learn to Code Bundle - now just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Pay What You Want for this Coding 101 Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for the Coding 101 Bundle. It's never too late to go back to school: Get ten courses on Python, JavaScript, jQuery, and more.



      What's the deal?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked item:

      jQuery for Beginners
      Study JavaScript & jQuery—The Web's Most Essential Language & Framework

      or beat the average price to get the following items:

      HTML & CSS for Beginners
      Lay the Foundation for Building Amazing Web Pages

      PHP/MySQL for Beginners
      Start Developing Web Apps Like a Pro

      JavaScript for Beginners
      Learn to Craft Dynamic & Interactive Browsing Experiences

      GitHub Fundamentals
      Organize Your Code & Process Smarter

      Python for Beginners
      Dip Your Toes Into Programming with This Beginner-Friendly Language

      Ruby on Rails for Beginners
      Get Familiar with An Increasingly Popular Web Development Tool

      Intro to Web Development
      Discover the Basics of Building Websites from Scratch

      Java Programming for Beginners Part 1
      Pick Up a Valuable New Skill by Learning One of the World's Most Popular Programming Languages

      Java Programming for Beginners Part 2
      Dive Deeper with the Language That Powers Amazon & Facebook

      What's the benefit?
      The bundle represents an overall retail value of $1,990 But you can Pay What You Want for the unlocked course (as little as $1) Beat the average price and you'll take home the entire bundle. Qualify for the giveaway!
      Beat the Leader's price and get entered into the epic giveaway - plus get featured on the Leaderboard!

      >> Pay What You Want for the Coding 101 Bundle <<
      See other Pay What You Want deals. This is a time-limited deal.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software for Private Internet Access and NordVPN deals.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.

    • By rajibkd
      I am very new to web development and trying to develop a web application. I am kind of stuck at a point. The page let the user insert through a form in mysql database and display the values in a display table on the same page. The display table has edit link for each row , when edit link is clicked then the insert form should display the values based on the id and let the user to edit the values and save the new values in the database.And the display table should be updated to after updating the form.
       
      <div class="main-bod">
          <h1>District Entry Form</h1>
          <div class="row">
              <div class="col-md-6">
                  <form action="<?php echo($config["url"]["actions"]."district-entry.php") ?>" method="post" class="entry-form">
                      <label>District ID:</label>
                      <input type="text" name="id" value="" readonly>
                      <label>Name of District:</label>
                      <input type="text" name="name" autofocus required>
                      <center>
                          <button type="submit"><i class="fa fa-check"> </i> Save</button>
                          <button type="reset" name="reset"><i class="fa fa-undo"> </i> Reset</button>
                      </center>
                  </form>
              </div>
              <div class="col-md-6">
                  <table class="settings-table">
                      <thead>
                          <tr>
                              <th>District ID</th>
                              <th>Name of District</th>
                              <th>Action</th>
                          </tr>
                      </thead>
                      <tbody>
                          <?php
                              $conn = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
                              
                              if ($conn->connect_error) {
                                  die("Connection failed: " . $conn->connect_error);
                              } 
                              $sql = "SELECT id, name FROM district";
                              $result = $conn->query($sql);
                                               if ($result->num_rows > 0) {
                                  while($row = $result->fetch_assoc()) {
                                      echo "<tr><td>".$row["id"]."</td><td>".$row["name"]."</td><td><a href=\"".$_SERVER['REQUEST_URI']."/" . $row["id"] . "\"><i class=\"fa fa-edit\"> </i> Edit</a></td></tr>";
                                  }
                              }
                              $conn->close();
                          ?>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
      <script>
          $("input[name=id]").val(parseInt($("tr:last").find("td:first-child").html())+1);
      </script>
    • By Copernic
      Java Runtime Environment (JRE) 8.0.221
      by Razvan Serea



      Java technology allows you to work and play in a secure computing environment. Java allows you to play online games, chat with people around the world, and view images in 3D, just to name a few. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers. Upgrading to the latest Java version improves the security of your system, as older versions do not include the latest security updates.

      The Java Runtime Environment (JRE) is what you get when you download Java software. The JRE consists of the Java Virtual Machine (JVM), Java platform core classes, and supporting Java platform libraries. The JRE is the runtime portion of Java software, which is all you need to run it in your Web browser.

      Download page: Java Runtime Environment (JRE) 8.0.221
      View: Java Website | Version History

      Get alerted to all of our Software updates on Twitter at @NeowinSoftware