Posts

right side toggle by js, toggle from ride side by js, toggle js for website, form toggle from right side js, js for form toggle from right side

By -
<!DOCTYPE html> <html lang="en-US"> <head itemscope="" itemtype="https://schema.org/WebSite"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> .floating-form {     max-width: 280px;     padding: 20px 20px 10px;     font-size: 13px;     font-family: "Open Sans", sans-serif;     background: #F9F9F9;     border: 1px solid #ddd;     right: -320px;     position: fixed;     box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);     -moz-box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);     -webkit-box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);     z-index: 9999 } .contact-opener {     position: absolute;     left: -80px;     top: 100px;     padding: 9px;     color: #fff;     cursor: pointer; } .floating-form.open {     right:0px; } .floating-form-heading {     font-weight: 700;     font-style: italic;     border-bottom: 2px solid #ddd;     margin-bottom: 10px;     font-size: 15px;   
Post a Comment
Read more

height increase or decrease by click by calling custom class on div

By -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .actual-height {     background-color: red;     width: 300px;     height: 20px;     overflow:hidden; } </style> </head> <body> <button>Change size!</button> <div class="box actual-height"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!Lor
Post a Comment
Read more

div fixed on scroll, scorll js, js for fixed div when scroll

By -
JS:- <script>             jQuery(function($) {   function fixDiv() {     var $cache = $('#getFixed');     if ($(window).scrollTop() > 147)       $cache.css({         'position': 'fixed',         'top': '0px',         'display': 'block'       });     else       $cache.css({         'position': 'relative',         'top': 'auto',         'display': 'none'              });   }   $(window).scroll(fixDiv);   fixDiv(); });         </script> HTML:- <div class="col-md-12" id="getFixed" style="display:none; z-index: 99; background-color: rgb(255, 255, 255); left: 0px; right: 0px; width: 100%;"> </div>
Post a Comment
Read more

Website Color Palettes: The Palettes of 50 Visually Impactful Websites to Inspire You Css Zilla

By -
Did you know that Facebook is blue because Mark Zuckerberg is red-green color blind? “Blue is the richest color for me; I can see all of blue” says Zuckerberg. While this choice of color doesn’t seem very scientific, it’s still proves that a lot of thought is put into the choice of color. As Buffer writes, over 90% of our assessment of a product is made on color alone, so it makes sense that color should be considered with care for every design decision, particularly on websites. Chances are, if we don’t like the color palette, we’re not going to stay on the site for very long. To get you started on your own palette, we’ve gathered 50 beautiful websites with versatile color schemes you can take inspiration from. So without further ado, let’s get knee-deep in some beautiful colors. 01. Fun and Professional <img width="700" height="404" src="https://designschool.canva.com/wp-content/uploads/sites/2/2016/01/Palette_1.jpg" class="attac
Post a Comment
Read more