Best Html, Css, jquery tutorials, Best jquery plugins, cool effects with jquery examples, demo, demos for beginners, designers, developers. jQuery Plugin Tutorial with example. On www.htmluse.com
<link rel="stylesheet" type="text/css" href="./components/bootstrap/dist/css/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="bs.sm.css"> <script type="text/javascript" src="./components/jquery/dist/jquery.js"></script> <script type="text/javascript" src="./components/bootstrap/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bs.sm.js"></script>2. HTML
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">[...]</div>
<div class="modal-body">
<!-- Your Sub Modal, requires sub-modal class -->
<div class="modal submodal">[...submodal content...]</div>
<p>[parent modal content]</p>
</div>
<div class="modal-footer">[...]</div>
</div>
</div>
</div>
<a href="#my-submodal" class="btn" data-toggle="submodal">Open Submodal</a>
<a href="#my-submodal" class="btn" data-dismiss="submodal">Close Submodal</a>
// Open
$('#my-submodal').submodal('open');
// Close
$('#my-submodal').submodal('close');
// Toggle
$('#my-submodal').submodal('toggle');
4. EVENTS// Before submodal is shown
$('#my-submodal').on('beforeShow', fn);
// After submodal is shown
$('#my-submodal').on('show', fn);
// Before submodal is hidden
$('#my-submodal').on('beforeHide', fn);
// After submodal is hidden
$('#my-submodal').on('hide', fn);
$('#my-element').setFocus(options);
Focusable.setFocus($('#my-element'), options);
Focusable.refresh();
Focusable.hide();
Focusable.getActiveElement();
Focusable.getOptions();
###### Options
Property | Value | Default | Description
------------ | ------------- | ------------- | -------------
fadeDuration | Number | 700 | Duration of the overlay transition (milliseconds).
hideOnClick | Boolean | false | Hides the overlay when the user click into it.
hideOnESC | Boolean | false | Hides the overlay when the user press Esc.
findOnResize | Boolean | false | Refind the element in the DOM in case that the element don't still exists.
###### Runing tests
* `npm install`
* `grunt`
* See the result of testsuite in [http://localhost:9092](http://localhost:9092)
###### Dependencies
- jQuery
###### Contributing
0. Check [open issues](https://github.com/zzarcon/focusable/issues)
1. [Fork it](https://github.com/zzarcon/focusable/fork)
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request
###### Author
You can follow me on Twitter - https://twitter.com/zzarcon
<link href="css/custom-radio-checkbox.css" rel="stylesheet" type="text/css" media="screen" /><script src="js/jquery.custom-radio-checkbox.js"></script> |
<form method="post" action="" id="form"> <div class="fl w200 mr10"> <h2>Radio group 1</h2> <p> <label for="yes"> <input type="radio" name="radioGroup1" id="yes" value="Yes" />Yes </label> </p> <p> <label for="no"> <input type="radio" name="radioGroup1" id="no" value="No" />No </label> </p> <p> <label for="maybe"> <input type="radio" name="radioGroup1" id="maybe" value="Maybe" />Maybe </label> </p> </div> <div class="fl w200"> <h2>Radio group 2</h2> <p> <label for="uno"> <input type="radio" name="radioGroup2" id="uno" value="Uno" />Uno </label> </p> <p> <label for="dos"> <input type="radio" name="radioGroup2" id="dos" value="Dos" />Dos </label> </p> <p> <label for="tres"> <input type="radio" name="radioGroup2" id="tres" value="Tres" />Tres </label> </p> </div> <div class="separator"></div> <!-- checkbox --> <p> <label for="checkbox1"> <input type="checkbox" name="Checkbox" id="checkbox1" value="1" />Checkbox 1 </label> </p> <p> <label for="checkbox2"> <input type="checkbox" name="Checkbox" id="checkbox2" value="2" />Checkbox 2 </label> </p> <p> <label for="checkbox3"> <input type="checkbox" name="Checkbox" id="checkbox3" value="3" />Checkbox 3 </label> </p> <div class="separator"></div> <p id="submit"><input type="submit" value="Show result" /></p></form>
<link href="css/jquery-valid-lightbox-v1_1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery-valid-lightbox-v1.1.js"></script>2. HTML
<form name="demo_form" method="POST" action="javascript:void(0)" onsubmit="return checking('success.html');">
<div class="item">
<h6><label>First Name</label></h6>
<div class="input_panel"><input type="text" id="firstname" name="firstname"></div>
</div>
<div class="item">
<h6><label>Last Name</label></h6>
<div class="input_panel"><input type="text" id="lastname" name="lastname"></div>
</div>
<div class="item">
<h6><label>Age</label></h6>
<div class="input_panel">
<select id="age" name="age">
<option value=""> - Please select the range -</option>
<option value="0">0-18</option>
<option value="19">19-35</option>
<option value="36">36-50</option>
<option value="50">50-90</option>
<option value="100">>100</option>
</select>
</div>
</div>
<div class="item">
<h6><label>Gender</label></h6>
<div class="input_panel">
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female
</div>
</div>
<div class="item">
<h6><label>Service you like</label></h6>
<div class="input_panel">
<input type="checkbox" name="service" value="Bike">bike<br>
<input type="checkbox" name="service" value="Car">car
</div>
</div>
<div class="item">
<h6><label>Where to know us</label></h6>
<div class="input_panel">
<input type="checkbox" name="where_from" value="newspaper">newspaper<br>
<input type="checkbox" name="where_from" value="friend">friend<br>
<input type="checkbox" name="where_from" value="internet">internet
</div>
</div<
<input id="submit" type="submit" value="Submit form" >
<br /><br />
</form>
3. JAVASCRIPTvar config = {
"form_name" : "demo_form", //Your form name, not id name
"submit_form" : true, //"true" is submit form, "false" would pop-up an error message.
"title-message" : {
"success_title" :"Validation Success", //Lightbox title when validation was success.
"error_title" :"Error!" //Lightbox title when validation was fail.
},
"success-message" :"Your application is submittted.", //Lightbox content when validation was succes.
"error-message" : [
{"name" :"firstname", //1st input field name (name bt not id)
"err_msg" :"Title 1 is empty"}, //Related error (1st input field) if validation was incorrect.
{"name" :"lastname" , //2st input field name
"err_msg" :"You have fogotten fill in Title 2"}, //Related error (2st input field) if validation was incorrect.
{"name" :"age", //3st input field name
"err_msg" :"Which is the range of your age"}, //Related error (3st input field) if validation was incorrect.
{"name" :"gender", //4st input field name
"err_msg" :"Please select your gender"}, //Related error (4st input field) if validation was incorrect.
{"name" :"service" , //5st input field name
"err_msg" :"Which service you like most ?"}, //Related error (5st input field) if validation was incorrect.
{"name" :"where_from" , //6st input field name
"err_msg" :"You havn't fill in where to know us."} //Related error (6st input field) if validation was incorrect.
],
"footer_close_btn_text" :"Close", //Close button tex on the bottom-right corner of pop-up message box
"close_btn_icon" :"X", //Close button icon on the top-right corner of pop-up message box
};
4. OPTIONS| value | Default demo value e.g. | Description |
| form_name | demo_form | Your form name |
| submit_form | true | “true” is submit form, “false” would pop-up an error message. |
| title-message.success_title | Validation Success | Lightbox title when validation was success. |
| title-message.error_title | Error! | Lightbox title when validation was fail. |
| success-message | Your application is submittted. | Lightbox content when validation was succes. |
| error-message.name | gender | Your form name, not id name |
| error-message.err_msg | Please select your gender | Your form name, not id name |
| footer_close_btn_text | Close | Close button tex on the bottom-right corner of pop-up message box |
| close_btn_icon | X | Close button tex on the bottom-right corner of pop-up message box |
<!-- Include jQuery --><script src="path/to/jquery.min.js"></script><!-- Include jQuery Sidebar --><script src="path/to/jquery.sidebar.min.js"></script> |
<div class="sidebar left">Hello World</div><div class="sidebar right">I am on right!</div><div class="sidebar top">I am on top!</div><div class="sidebar bottom">I am on bottom!</div> |
// Sidebar on left (default)$(".sidebar.left").sidebar().trigger("sidebar:open");// Sidebar on right side$(".sidebar.right").sidebar({side: "right"});// Sidebar on top side$(".sidebar.top").sidebar({side: "top"});// Sidebar on bottom side$(".sidebar.bottom").sidebar({side: "bottom"}); |
$(".my-sidebar").sidebar({...});
$(".my-sidebar").trigger("sidebar:open");
$(".my-sidebar").trigger("sidebar:close");
$(".my-sidebar").trigger("sidebar:toggle");
$(".my-sidebar").on("sidebar:opened", function () {
// Do something on open
});
$(".my-sidebar").on("sidebar:closed", function () {
// Do something on close
});
<script src="js/jquery.min.js"></script><script src="js/jquery.tweetParser.min.js"></script> |
<p class="tweets">This is my awesome text only tweet ! #web #twitter @twitter http://www.twitter.com/ !!</p> |
//basic usage$("p.tweets").tweetParser();//With parameters$("p.tweets").tweetParser({ urlClass : "tweet_link", //this is default userClass : "tweet_user", //this is default hashtagClass : "hashtag", //this is default target : "_blank" //this is default}); |
| Parameters | Type | default | description |
|---|---|---|---|
| urlClass | String | tweet_link | css Class used for url in the tweet |
| userClass | String | tweet_user | css Class used for @user profil url in the tweet |
| hashtagClass | String | hashtag | css Class used for hashtags url in the tweet |
| target | HTML attribute for anchor tags | _blank | target used for all generated |
<script src="/path/to/jquery.js"></script><!-- jQuery is required --><script src="/path/to/formcache.js"></script> |
<form id="form"></form> |
$('#form').formcache(); |
[ 'select', 'textarea', 'input' ]
| Params | Type | Default | Description |
|---|---|---|---|
| index | Number | 0 | Cache index |
$().formcache('getCache')
$().formcache('getCache', 1)
getCaches()$().formcache('getCaches')
setCache([index, ]data)| Params | Type | Default | Description |
|---|---|---|---|
| index | Number | 0 | Cache index |
| data | Object | Cache item |
$().formcache('setCache', {})
$().formcache('setCache', 1, {})
setCaches(data)| Params | Type | Description |
|---|---|---|
| data | Array | Cache items |
$().formcache('setCaches', [{}])
$().formcache('setCaches', [{}, {}])
removeCache([index])| Params | Type | Default | Description |
|---|---|---|---|
| index | Number | 0 | Cache index |
$().formcache('removeCache')
$().formcache('removeCache', 1)
removeCaches()$().formcache('removeCaches')
outputCache([index])| Params | Type | Default | Description |
|---|---|---|---|
| index | Number | 0 | Cache index |
$().formcache('outputCache')
$().formcache('outputCache', 1)
serialize()var cache = $('form').formcache('serialize');
$('form').formcache('setCache', cache);
$('form').formcache('setCaches', [cache, cache]);
store()
<script type="text/javascript" src="jquery.js"></script> <script type='text/javascript' src='js/notifIt.js'></script> <link rel='stylesheet' type='text/css' href='css/notifIt.css'>2. JAVASCRIPT
notif({
msg: "<b>Oops!</b> A wild error appeared!",
type: "error",
position: "center"
});
3. OPTIONS| Variable name | Type | Posible values | Default |
|---|---|---|---|
| type | String | success, error, warning, info | default |
| msg | String | Message | |
| position | String | left, center, right, bottom | right |
| width | Integer-String | Number > 0, ‘all’ | 400 |
| height | Integer | Number between 0 and 100 | 60 |
| autohide | Boolean | true, false | true |
| opacity | Float | From 0 to 1 | 1 |
| multiline | Boolean | true, false | false |
| fade | Boolean | true, false | false |
| bgcolor | String | HEX color | #444 |
| color | String | HEX color | #EEE |
| timeout | Integer | Miliseconds | 5000 |
| zindex | Integer | The z-index of the notification | null (ignored) |
| offset | Integer | The offset in pixels from the edge of the screen | 0 |
| callback | Function | Function | null (ignored), |
| clickable | Boolean | true, false | false |
<link rel="stylesheet" href="../src/jquery.skidder.css"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="../src/jquery.skidder.js"></script> |
<div class="slideshow" style="display: none;"> <div class="slide"><img src="1.jpg"></div> <div class="slide"><img src="2.jpg"></div> <div class="slide"><img src="3.jpg"></div></div> |
$('.slideshow').skidder(); |
$('.slideshow').each( function() {
var $slideshow = $(this);
$slideshow.imagesLoaded( function() {
$slideshow.skidder();
});
});
| Option | Description |
|---|---|
| slideClass | Default: ‘.slide’ |
| scaleImages | Scales widest image to maxSlideWidth. Adjusts slideshow height accordingly. Requires images! Default: false |
| maxSlideWidth | Scale widest image to this width if scaleImages == true. Default: 800 |
| paging | Creates a clickable and stylable paging dot for each slide. Default: true |
| swiping | Enable swiping on touch device. Default: true |
| leftaligned | Set to true if you don’t want your slideshow centered. (true = buggy!) Default: false |
| cycle | Set to false if you don’t want your slideshow to wrap around (false = buggy!).Default: true |
| jumpback | In non-cycling mode jumpback will display a ‘return to first slide’ arrow at the last slide. Default: false |
| speed | Transition speed. Default: 400 |
| autoplay | _Default: false |
| interval | Autoplay interval _Default: 4000 |
| afterSliding | Define if you need a callback function |