Posts

Jquery noConflict()

-
JQuery No-Conflict / Use Different Versions Of jQuery in one page <!DOCTYPE html> <html lang="en"> <head>   <title>Jquery noConflict Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     <script>      var jQuery190 = $.noConflict();    // $ ==> shorthand of Jquery       </script>     <script src="https://code.jquery.com/jquery-1.10.2.js"></script>   <script>       var jQuery1111 = jQuery.noConflict();     </script>     <script src="https://code.jq...
Post a Comment
Read more

Animated Number Counter From Zero To Value - jQuery (Javascript Animation)

-
<div id="shiva"><span class="count">200</span></div> <script> $('.count').each(function () {     $(this).prop('Counter',0).animate({         Counter: $(this).text()     }, {         duration: 4000,         easing: 'swing',         step: function (now) {             $(this).text(Math.ceil(now));         }     }); }); </script>
Post a Comment
Read more

Add line break in css using class / injecting a line break in css

-
Image
Injecting a Line Break I had a little situation where I had a header with a span in it, and I wanted to make sure to put a line break before the span. For the record, there really isn't anything wrong with just chucking a  <br>  tag before it (and in fact the ability to show/hide that is very useful). But... it always feels a little weird to  have  to use HTML to achieve a layout thing. So let's take a journey. A journey in which we say "But..." a lot. < h1 class = " one " > Break right after this <!-- <br> could go here, but can we do it with CSS? --> < span > and before this </ span > </ h1 > # A block level element would do it Rather than a  <span> , we could use a  <div> , and we'll get that break just by virtue of the div being a block-level element. But we're using a span on purpose, because of the design. The text after the break should be inline...
Post a Comment
Read more

Toggle Switch with show and hide div or content

-
<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> Css for the toggle switch==> <style> .switch {   position: relative;   display: inline-block;   width: 60px;   height: 34px; } .switch input {display:none;} .slider {   position: absolute;   cursor: pointer;   top: 0;   left: 0;   right: 0;   bottom: 0;   background-color: #ccc;   -webkit-transition: .4s;   transition: .4s; } .s...
Post a Comment
Read more

Display Loader and disable page while waiting for ajax request

-
  I have a project in which I use MVC C#, with Bootstrap and FontAwesome. My objective is to show a spinner and disable the page while waiting for an ajax request. So far, I have successfully acomplished this goal with the following code: HTML: <div id = 'ajax_loader' style = " position : fixed ; left : 50% ; top : 50% ; display : none ; " > <img src = "~/Images/ajax-loader.gif" > </div> JS: function blablabla () { //show spinner, disable page var modal = $ ( '<div>' ). dialog ({ modal : true }); modal . dialog ( 'widget' ). hide (); $ ( '#ajax_loader' ). show (); $ . ajax ({ type : "Get" , url : url , success : function ( result ) { alert ( "success! " + result ); }, error : functi...
Post a Comment
Read more

li bullet list with different format

-
ol {   margin:0 0 1.5em;   padding:0;   counter-reset:my-badass-counter; } ol>li {   margin:0;   padding:0 0 0 2em;   text-indent:-2em;   list-style-type:none;   counter-increment:my-badass-counter; } ol>li:before {   display:inline-block;   width:1.5em;   padding-right:0.5em;   font-weight:bold;   text-align:right;   content: counter(my-badass-counter, lower-roman) "."; } ol>li>ol>li:before{     content: counter(my-badass-counter, upper-roman); }
Post a Comment
Read more

How to Include links or link directory in wordpress

-
you can easily link your directory in wordpress. Example:- <?php bloginfo('template_url'); ?>/css/bootstrap.min.css
Post a Comment
Read more