Skip to content

Instantly share code, notes, and snippets.

View achudars's full-sized avatar
🥔
every challenge is an opportunity

Aleks achudars

🥔
every challenge is an opportunity
48 followers · 93 following
View GitHub Profile
@achudars
achudars / web-snippet-001 ( Perfectly centered DIV using CSS )
Last active December 16, 2015 19:50
Perfectly centered DIV using CSS. Perfectly centred DIV using CSS.
div {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
margin-left: -200px;
margin-top: -200px;
}
@achudars
achudars / web-snippet-002 ( Fully scaled DIV using CSS )
Last active December 16, 2015 19:50
Fully scaled DIV using CSS
DIV {
position: absolute;
background-color: #333333;
bottom:0;
top:0;
right:0;
left: 0;
}
@achudars
achudars / web-snippet-003 ( Perfectly centered FLEXBOX using CSS )
Last active December 16, 2015 19:50
Perfectly centered FLEXBOX using CSS with a 10% margin. Perfectly centred FLEXBOX using CSS with a 10% margin.
body {
position: absolute;
background-color: #333333;
bottom:0;
top:0;
right:0;
left: 0;
}
#blueDiv {
position:absolute;
@achudars
achudars / web-snippet-004 ( Slightly transparent container in CSS )
Last active December 16, 2015 19:50
Slightly transparent container with rounded corners and shadow. Looks beautiful as a container for a search box or upload area.
.lead {
background: rgba(255, 255, 255, 0.2);
width: 60%;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 40%;
height: 35px;
left: 20%;
border: 1px solid #000000;
@achudars
achudars / web-snippet-005 ( Filtering out all small values using JavaScript Array filter method )
Last active December 17, 2015 00:19
Filtering out all small values using JavaScript Array filter method
function isBigEnough(element, index, array) {
return (element >= 10);
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
@achudars
achudars / web-snippet-006 ( Date display for common use in JavaScript )
Last active December 17, 2015 00:19
Date display for common use in JavaScript in the format: Sunday, August 18, 2013
var now = new Date();
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
@achudars
achudars / web-snippet-007 ( JavaScript Back Button )
Last active December 17, 2015 00:19
JavaScript Back Button
<form>
<input type="Button" value="Previous Page" onClick="history.go(-1)">
</form>
@achudars
achudars / web-snippet-008 ( Breakpoints for responsive design for CSS using JavaScript )
Last active December 17, 2015 00:19
Breakpoints for responsive design for CSS using JavaScript
function isBreakPoint(bp) {
// The breakpoints that you set in your css
var bps = [320, 480, 768, 1024];
var w = $(window).width();
var min, max;
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0;
max = bps[i];
break;
@achudars
achudars / web-snippet-009 ( Count clicks using jQuery )
Last active December 17, 2015 00:19
Count clicks using jQuery
$(element)
.data('counter', 0) // begin counter at zero
.click(function() {
var counter = $(this).data('counter'); // get
$(this).data('counter', counter + 1); // set
// do something else...
});
@achudars
achudars / web-snippet-010 ( Semantic association in HTML5 )
Last active December 17, 2015 00:19
Semantic association of captions with their image counterparts using HTML5
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>