byanjankar.sujan Blog


Animated dropdown menu with CSS

Animated dropdown menu with CSS

CSS nav{ background: #333; height: 50px; color:#eee; border-radius:5px; } #menu{ list-style: none; margin: 0 5px; padding: 0; } #menu > li{ float:left; padding: 0 15px; line-height: 50px; display: inline; position: relative; cursor: pointer; }...

html & css

Shake element with CSS

.shakeit { display:inline-block; position:relative; } .shakeit { -webkit-animation-name: shaker; -webkit-animation-duration: 1s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @-webkit-keyframes shaker { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg);...

Loading animation with CSS

Loading animation with CSS

HTML <div id="loading"></div> CSS #loading { border: 4px solid #f3f3f3; /* Light grey */ border-top: 4px solid #3498db; /* Blue */ border-radius: 50%; width: 16px; height: 16px; animation: spin 2s linear infinite; } @keyframes...

Duplicate Table

Duplicate Table

Assuming we have a table named ‘table_old’ Duplicate table structure of ‘table_old’ along with all the data CREATE TABLE table_copy AS SELECT * FROM table_old; Duplicate table structure only without data CREATE TABLE table_copy...

HTTP Response Code

HTTP Response Code

Informational 1xx 100 = Continue 101 = Switching Protocols Successful 2xx 200 = OK 201 = Created 202 = Accepted 203 = Non-Authoritative Information 204 = No Content 205 = Reset Content 206 =...

Add page break in web page

Add page break in web page

Web pages are generally viewed in browsers. But sometimes we may need hard copies of those web pages like forms, notes, reports, etc. But the length of the web page/content varies than that of...

html5

HTML5 Basic Page Struture

HTML (Hyper Text Markup Language) is the markup language used for structuring and presenting the content in World Wide Web. HTML5 is the fifth and current version of the HTML standard published on October...

jQuery

Create An Animated Scroll To Top Button With jQuery

<a href="#" class="scrollToTop"></a> CSS <style type="text/css"> .scrollToTop{ width:50px; height:50px; padding:5px 10px; text-align:center; text-decoration: none; position:fixed; line-height: normal; bottom:40px; font-size: 10px; right:40px; display:none; background: url('./images/arrow_up.png') no-repeat center; background-size: 40px 40px; color: transparent; border-radius: 3px; }...

jQuery

Get content of iframe in parent window

We can get the content of an iframe to its parent window as follows: Define iframe with some source (say src=”abc.html”) <iframe src="abc.html" width="300" height="150"></iframe> In abc.html, <div id="someid">So nice words.</div> Now, in parent.html, var iframeContent...