Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: jQuery Codes Library >> highQuery >> highQuery-Dynamic-Ajax-Content


Code Snippet </> Info


Snippet Name: highQuery-Dynamic-Ajax-Content

Description: Load content using dynamic ajax content functionality. This framework works with: Internet Explorer (Windows 8) and many more, Opera, Chrome, Firefox, Safari, Mac OS X, Linux, iOS and Android.
Compatible Modern Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo
Get All Files: Download .zip File

Note: You will need to download all files contained in the .zip file link above.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2019-12-10 01:23:02

Language: html5

Highlight Mode: html

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!DOCTYPE html> <html> <head> <title>highQuery Load Dynamic Ajax Content | Web and mobile framework</title> <script src="javascript/jQuery.js" type="text/javascript"></script> <script src="javascript/ui.js" type="text/javascript"></script> <script src="javascript/core.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/jui.css"> <style> /* Begin highQuery Load Dynamic Ajax Content Function */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ *{margin:0; padding:0;} .row {clear:both; margin-bottom:20px; border-bottom:1px solid #EEE; padding-bottom:20px;} .half1 {display:inline-block; vertical-align:top; width:39.444%;} *html .half1{display:inline;} .btn { display:inline-block; vertical-align:top; margin:0 2px; border:1px solid #aaa; margin-bottom:2px; cursor:pointer; font-size:11px; font-weight:bold; padding:6px 14px; padding-top:5p; color:#666; font-family:Arial, Helvetica, sans-serif; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; text-shadow:0 1px 0 rgba(255,255,255,0.5); box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 -1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 -1px 2px rgba(0,0,0,0.2) inset; -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 -1px 2px rgba(0,0,0,0.2) inset; background:#DDD; } *html .btn {display:inline;} .btn.green { background-color:#00AA01; text-shadow:0 1px 0 rgba(255,255,255,0.3); border-color:Green; color:#000; } .btn.red { background-color:Red; text-shadow:0 1px 0 rgba(255,255,255,0.3); border-color:#A52A2A; color:#000; } .btn.hover { box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 -10px 12px rgba(0,0,0,0.2) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 -10px 12px rgba(0,0,0,0.2) inset; -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 -10px 12px rgba(0,0,0,0.2) inset; color:#000; text-shadow:0 0px 10px rgba(255,255,255,1); } h3 {width:auto; color:#2A94FE;font-weight:normal;margin-bottom:20px;margin-top:20px;padding:10px 10px; background-color:#EEE;font-family:Arial, Helvetica, sans-serif;font-size:19px;} p {font-family:Arial, Helvetica, sans-serif;font-size:12px; line-height:1.3em;padding:5px 10px;} #content {margin:100px 25px 0 15px;} </style> </head> <body> <h3>Load a dynamic ajax-content</h3> <div class="row"> <div class="half1" style="font-family:arial;font-size:12px;"> <div data-roll="btn" color="green" onclick="loadContent('#loadCo','./test.txt','');">Load Content</div> <div data-roll="btn" color="red" onclick="loadContent('#loadCo','./not_found.txt','a=1&b=2');">File Does Not Exist</div> <div style="padding:10px;" id="loadCo"> <strong>Content not loaded ...</strong><br> Please click "the load content button" ... </div> </div> </div> <p>Click on the red or green button to see the dynamic ajax content load.</p> <p>PS. In order to view this script in action it must be viewed from your server.</p> <div id="content"> <h3 style="background-color:#ccc;margin-bottom:1px;color:#000;">highQuery | Web and Mobile Framework</h3> <h3 style="margin-top:0;">Information</h3> <p>This framework works with: Internet Explorer (Windows 8) and many more, Opera, Chrome, Firefox, Safari, Mac OS X, Linux, iOS and Android. highQuery is open source - you can use and change for free - no license required. highQuery is based on jQuery, HTML5 and CSS3. jQuery and jQuery Ui are required. The framework can detect flash, browser-names, device-names and os-names. It's easy to use!</p> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library