jReject: jQuery Browser Rejection
249 |250 | jReject is a simple, light-weight library designed to 251 | display a popup based on the browser, specific browser version, 252 | specific platforms, or rendering engine. Provides full customization 253 | of the popup, and uses a small CSS file. Can easily be used on page load 254 | or during a specific page event. Also provides a flexible way to beautifully 255 | and cleanly display custom browser alternatives in the popup. 256 |
257 | 258 |Requirements
259 | 260 | 261 |Makes Use Of
262 | jQuery Browser Plugin - Updated version included in default package. 263 | (View Original) 264 | 265 |Download jReject
266 |267 | Get Latest At GitHub 268 |
269 |270 | If you are a developer familiar with using jQuery, continue with the documentation below. 271 |
272 | 273 |274 | 275 |
Documentation
276 |278 | The object is called "reject", and can be invoked once the document 279 | is ready ($.reject() or jQuery.reject()). The first parameter 280 | contains all the options and configurations for the plugin. 281 |
282 | 283 |Default Options
284 |285 | Here are the default options for the first parameter of the reject 286 | object. You only need to specify those which you wish to override. 287 |
288 | 289 |290 | options = { 291 | // Specifies which browsers/versions will be blocked 292 | reject : { 293 | all: false, // Covers Everything (Nothing blocked) 294 | msie: 6 // Covers MSIE <= 6 (Blocked by default) 295 | /* 296 | * Many possible combinations. 297 | * You can specify browser (msie, chrome, firefox) 298 | * You can specify rendering engine (geko, trident) 299 | * You can specify OS (Win, Mac, Linux, Solaris, iPhone, iPad) 300 | * 301 | * You can specify versions of each. 302 | * Examples: msie9: true, firefox8: true, 303 | * 304 | * You can specify the highest number to reject. 305 | * Example: msie: 9 (9 and lower are rejected. 306 | * 307 | * There is also "unknown" that covers what isn't detected 308 | * Example: unknown: true 309 | */ 310 | }, 311 | display: [], // What browsers to display and their order (default set below) 312 | browserShow: true, // Should the browser options be shown? 313 | browserInfo: { // Settings for which browsers to display 314 | chrome: { 315 | // Text below the icon 316 | text: 'Google Chrome', 317 | // URL For icon/text link 318 | url: 'http://www.google.com/chrome/', 319 | // (Optional) Use "allow" to customized when to show this option 320 | // Example: to show chrome only for IE users 321 | // allow: { all: false, msie: true } 322 | }, 323 | firefox: { 324 | text: 'Mozilla Firefox', 325 | url: 'http://www.mozilla.com/firefox/' 326 | }, 327 | safari: { 328 | text: 'Safari', 329 | url: 'http://www.apple.com/safari/download/' 330 | }, 331 | opera: { 332 | text: 'Opera', 333 | url: 'http://www.opera.com/download/' 334 | }, 335 | msie: { 336 | text: 'Internet Explorer', 337 | url: 'http://www.microsoft.com/windows/Internet-explorer/' 338 | } 339 | }, 340 | 341 | // Pop-up Window Text 342 | header: 'Did you know that your Internet Browser is out of date?', 343 | 344 | paragraph1: 'Your browser is out of date, and may not be compatible with '+ 345 | 'our website. A list of the most popular web browsers can be '+ 346 | 'found below.', 347 | 348 | paragraph2: 'Just click on the icons to get to the download page', 349 | 350 | // Allow closing of window 351 | close: true, 352 | 353 | // Message displayed below closing link 354 | closeMessage: 'By closing this window you acknowledge that your experience '+ 355 | 'on this website may be degraded', 356 | closeLink: 'Close This Window', 357 | closeURL: '#', 358 | 359 | // Allows closing of window with esc key 360 | closeESC: true, 361 | 362 | // Use cookies to remmember if window was closed previously? 363 | closeCookie: false, 364 | // Cookie settings are only used if closeCookie is true 365 | cookieSettings: { 366 | // Path for the cookie to be saved on 367 | // Should be root domain in most cases 368 | path: '/', 369 | // Expiration Date (in seconds) 370 | // 0 (default) means it ends with the current session 371 | expires: 0 372 | }, 373 | 374 | // Path where images are located 375 | imagePath: './images/', 376 | // Background color for overlay 377 | overlayBgColor: '#000', 378 | // Background transparency (0-1) 379 | overlayOpacity: 0.8, 380 | 381 | // Fade in time on open ('slow','medium','fast' or integer in ms) 382 | fadeInTime: 'fast', 383 | // Fade out time on close ('slow','medium','fast' or integer in ms) 384 | fadeOutTime: 'fast', 385 | 386 | // Google Analytics Link Tracking (Optional) 387 | // Set to true to enable 388 | // Note: Analytics tracking code must be added separately 389 | analytics: false 390 | }; 391 |392 |
393 | 394 |
Optional Event Methods
395 | options.beforeReject()396 |
Called before rejection is determined.
397 | 398 | options.afterReject()
399 |
Called after rejection window has been created, for browsers that matched the rejection settings.
400 | 401 | options.onFail()
402 |
Called if the browser does NOT meet the rejection requirements
403 | 404 | options.beforeClose()
405 |
Called after close button is clicked, but before popup is actually closed.
406 | 407 | options.afterClose()
408 |
Called after rejection popup is closed
409 | 410 |
411 | Note: All callbacks can access and edit options by using this
412 | View Demo #8 as an example
413 |
Browser Plugin Options
416 | 425 | $.browser.className =426 | $.browser.name =
427 | $,browser.version =
428 | $.browser.versionX =
429 | $.os.name =
430 | 431 |
432 | 433 |
Example Usage
434 | 435 |Demo #1: Default Settings
437 | Run Demo438 | 439 |
440 | If nothing happened when you ran this demo, that is because you are not using IE6!
441 | By default (no settings specified) the reject function only rejects IE5 and IE6.
442 |
445 | $('#demo1').click(function() { 446 | $.reject(); // Default Settings 447 | return false; 448 | }); 449 |450 |
453 | 454 |
Demo #2: Customize Browsers To Reject
456 | Run Demo457 | 458 |
459 | In this example pretty much every browser should be rejected. 460 |
461 | 462 |463 | $('#demo2').click(function() { 464 | $.reject({ 465 | reject: { 466 | safari: true, // Apple Safari 467 | chrome: true, // Google Chrome 468 | firefox: true, // Mozilla Firefox 469 | msie: true, // Microsoft Internet Explorer 470 | opera: true, // Opera 471 | konqueror: true, // Konqueror (Linux) 472 | unknown: true // Everything else 473 | } 474 | }); // Customized Browsers 475 | 476 | return false; 477 | }); 478 |479 |
482 | 483 |
Demo #3: Customize Popup Text
485 | Run Demo486 | 487 |
488 | In this demo we use customized text in the popup window.
489 | This demo uses the following properties:
490 | header,
491 | paragraph1,
492 | paragraph2,
493 | closeMessage
494 |
495 | See Also closeLink
496 |
499 | $('#demo3').click(function() { 500 | $.reject({ 501 | reject: { all: true }, // Reject all renderers for demo 502 | header: 'Your browser is not supported here', // Header Text 503 | paragraph1: 'You are currently using an unsupported browser', // Paragraph 1 504 | paragraph2: 'Please install one of the many optional browsers below to proceed', 505 | closeMessage: 'Close this window at your own demise!' // Message below close window link 506 | }); // Customized Text 507 | 508 | return false; 509 | }); 510 |511 |
514 | 515 |
Demo #4: Customize Browsers To Suggest
517 | Run Demo518 | 519 |
520 | Using the display option, you can define 521 | which browsers to suggest, and the order in which to suggest them. 522 |
523 |524 | Default: ['firefox','chrome','msie','safari','opera'] 525 |
526 | 527 |528 | $('#demo4').click(function() { 529 | $.reject({ 530 | reject: { all: true }, // Reject all renderers for demo 531 | display: ['firefox','chrome','opera'] // Displays only firefox, chrome, and opera 532 | }); 533 | 534 | return false; 535 | }); 536 |537 |
540 | 541 |
Demo #5: Customize Your Own Browser Suggestion
543 | Run Demo544 | 545 |
546 | You can even add a customized browser to the list, and display it in any order you want. 547 |
548 |
549 | Note: To add your own icon, you need to create a 'browser_{browserName}.gif'
550 | file and place it in your imagePath directory with the other images.
551 | Image Dimensions: 100x100
552 |
555 | $('#demo5').click(function() { 556 | $.reject({ 557 | reject: { all: true }, // Reject all renderers for demo 558 | // Displays only custom "Konqueror" browser, firefox and opera. 559 | display: ['konqueror','firefox','opera'], 560 | browserInfo: { 561 | konqueror: { // Specifies browser name and image name (browser_konqueror.gif) 562 | text: 'Konqueror 4', // Text Link 563 | url: 'http://konqueror.kde.org/' // URL To link to 564 | } 565 | } 566 | }); 567 | 568 | return false; 569 | }); 570 |571 |
574 | 575 |
Demo #6: Display Once Per Session
577 | Run Demo578 | 579 |
580 | By using the closeCookie option, you
581 | can make the window only appear once per session.
582 |
583 | After it pops up the first time, this demo will not popup again
584 | until next browser session.
585 |
587 | Note: This requires the ability to close the window. 588 | If close is false the cookie will never be set. 589 |
590 | 591 |592 | $('#demo6').click(function() { 593 | $.reject({ 594 | reject: { all: true }, // Reject all renderers for demo 595 | closeCookie: true // Set cookie to remmember close for this session 596 | }); 597 | 598 | return false; 599 | }); 600 |601 |
604 | 605 |
Demo #7: Disable ability to close window
607 | Run Demo608 | 609 |
610 | The close option allows
611 | you to hide the closeLink
612 | or closeMessage elements from displaying.
613 |
614 | This prevents the user from closing the window. If you
615 | use this on a onLoad event, the user will never be able to use your site.
616 |
618 | Note: Testing this demo will require you to 619 | refresh the page to close out the popup window. 620 |
621 | 622 |623 | $('#demo7').click(function() { 624 | $.reject({ 625 | reject: { all: true }, // Reject all renderers for demo 626 | close: false, // Prevent closing of window 627 | paragraph1: 'You will not be able to close this window', // Warning about closing 628 | paragraph2: 'To exit, you must '+ 629 | '<a href="javascript:window.location=window.location.pathname;">refresh the page</a>' 630 | }); 631 | 632 | return false; 633 | }); 634 |635 |
638 | 639 |
Demo #8: Customize by Browser
641 | Run Demo642 | 643 |
644 | This example uses the beforeReject callback to change options by browser.
645 | In chrome, only FireFox and Opera options will be displayed. iPhone/iPad displays no browser options
646 |
649 | 650 | $('#demo8').click(function() { 651 | $.reject({ 652 | reject: { all: true }, // Reject all renderers for demo 653 | beforeReject: function() { 654 | if ($.browser.name === 'chrome') { 655 | this.display = ['firefox','opera']; 656 | } 657 | if ($.os.name === 'iphone' || $.os.name === 'ipad') { 658 | this.browserShow = false; 659 | this.paragraph2 = ''; 660 | } 661 | } 662 | }); 663 | 664 | return false; 665 | }); 666 |667 |