of scripting and web-coding

Articles

Affichage des articles associés au libellé jquery

Dynamic Read This list

I recently stumbled upon a news website with a catchy reading list, and I knew on the spot I needed to get down to work to replicate that effect. You can find a live example of the original concept at the URL below: http://www.thedailybeast.com/articles/2014/09/21/tea-leoni-isn-t-hillary-clinton-but-madam-secretary-may-be-her-benghazi.html In case the URL is no longer valid as you're reading this, here is a screenshot of it. Basically, there are 5 articles per page. As you scroll the page, the reading list updates so that you can see the progress of your reading and how much is left. Note that the whole pagelet (the "Read THIS.list" box) has a fixed position and thus moves with the scrolling of the page. What do we need? As usual, I recommend using jQuery (I've become addicted to it!) as it on the one hand highly simplifies development in JS, and on the second hand it will guarantee we can retrieve consistent height/offset values for all browsers at o...

HTML tables and auto-sizing cell heights : a workaround

Although this was common practice in the early days of the Web, working with HTML tables when it comes to building a webpage layout should be avoided as much as possible nowadays. CSS offers all the tools that are needed to create perfectly dynamic and flexible layouts, so you really should only rely on HTML tables to present actual data. This being said, it happens that you don't have the choice, and that this just what I've learned recently in my work. In the context of a client project, the framework I've had to use (Peoplesoft, an HRIS system) indeed generates HTML pages presenting a structure quite "2000"-ish, consisting in a complex nesting of HTML tables. Moreover, each time you add a component on the page (via the system itself, not when hardcoding it), a system TABLE is create to wrap the object. This can cause obviously a lot of problems, but in this case, my problem was quite specific. A few pages of the system use a well-defined table layout :...

Lightbox effect with jQuery (3) - ready-to-use library

I've been pretty busy with work over the past days, but I managed to finalize my lightbox javascript library still. Although I can't confirm it is 100% cross-browser, it seems to be running well under IE8/9, Firefox and Chrome. I reckon it should work as well on Safari, but you never know. The actual library and a sample HTML file can be found here: https://sourceforge.net/projects/delightbox/files/ How to use ? First, include jQuery and, needless to say, the library. Second, call the function init from dlb , once the DOM has been fully created and the page is ready. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./delightbox-latest.js"></script> <script> jQuery(document).ready(function(){ dl...

Lightbox effect with jQuery (2) - example

Down below is a fully working example of the lightbox (aka thickbox) effect described in the previous article. Note that the technique has even been improved, since the script now prevents by itself a link from being opened. As a result, you do not need to place the target URL as a custom attribute anymore. Just append a class to an anchor and the script is ready to be use d ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> jQuery(document).ready(function(){ ...

Lightbox effect with jQuery

Over the past few weeks, I have been in the process of finding the perfect way to create a lightbox effect of my own (both for professional and personal projects). You can obviously rely on a existing library (such as Litebox), but if you want to have a full control over the lightbox, you might want to create it from scratch. This being said, we will not reinvent the wheel and we will get some help from jQuery to ease the manipulation. First things first, for those who do not know...what is a lightbox? Here is what Wikipedia tells about it: "Lightbox is a JavaScript technique used to display images and other web content using modal dialogs" A lightbox effect is often used to enhance image galleries. Basically, suppose you display a series of thumbnails on your page. If the user wants to see the full-size picture, he has to click on the thumbnail, which will then open the image in a new tab or in a new window. This is quite unpractical, since it breaks the flow o...

jQuarax - a parallax plugin

This plugin is still in the making and complete documentation (as well as a downloadable package) will be available later. Sample code and quick variable explanation further below. jQuarax-latest.js: var jquarax = { load: loader }; function loader(){ jQuery(document).ready(function(){ // parallax script $(".jquarax-div-container").scroll(function(){ scrollPos = parseInt($(".jquarax-div-container").scrollTop()); scrollPosPC = (100/parseInt($(".jquarax-div-container").css("height")))*(parseInt($(".jquarax-div-container").scrollTop())); $(".jquarax-object").each(function(e){ var unit = $(this).attr("frmode"); if(unit=="%"){scrollPos=scrollPosPC;} var startIt = parseInt($(this).attr("frstart")); ...