Posts

Showing posts from September, 2018

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