Skip to content

Instantly share code, notes, and snippets.

@infinitystylish
Last active December 22, 2015 11:19
Show Gist options
  • Save infinitystylish/6464979 to your computer and use it in GitHub Desktop.
Save infinitystylish/6464979 to your computer and use it in GitHub Desktop.
JS : Scripts principales
/*! http://mths.be/placeholder v2.0.7 by @mathias */
;(function(window, document, $) {
// Opera Mini v7 doesn’t support placeholder although its DOM seems to indicate so
var isOperaMini = Object.prototype.toString.call(window.operamini) == '[object OperaMini]';
var isInputSupported = 'placeholder' in document.createElement('input') && !isOperaMini;
var isTextareaSupported = 'placeholder' in document.createElement('textarea') && !isOperaMini;
var prototype = $.fn;
var valHooks = $.valHooks;
var propHooks = $.propHooks;
var hooks;
var placeholder;
if (isInputSupported && isTextareaSupported) {
placeholder = prototype.placeholder = function() {
return this;
};
placeholder.input = placeholder.textarea = true;
} else {
placeholder = prototype.placeholder = function() {
var $this = this;
$this
.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
.not('.placeholder')
.bind({
'focus.placeholder': clearPlaceholder,
'blur.placeholder': setPlaceholder
})
.data('placeholder-enabled', true)
.trigger('blur.placeholder');
return $this;
};
placeholder.input = isInputSupported;
placeholder.textarea = isTextareaSupported;
hooks = {
'get': function(element) {
var $element = $(element);
var $passwordInput = $element.data('placeholder-password');
if ($passwordInput) {
return $passwordInput[0].value;
}
return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
},
'set': function(element, value) {
var $element = $(element);
var $passwordInput = $element.data('placeholder-password');
if ($passwordInput) {
return $passwordInput[0].value = value;
}
if (!$element.data('placeholder-enabled')) {
return element.value = value;
}
if (value == '') {
element.value = value;
// Issue #56: Setting the placeholder causes problems if the element continues to have focus.
if (element != safeActiveElement()) {
// We can't use `triggerHandler` here because of dummy text/password inputs :(
setPlaceholder.call(element);
}
} else if ($element.hasClass('placeholder')) {
clearPlaceholder.call(element, true, value) || (element.value = value);
} else {
element.value = value;
}
// `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
return $element;
}
};
if (!isInputSupported) {
valHooks.input = hooks;
propHooks.value = hooks;
}
if (!isTextareaSupported) {
valHooks.textarea = hooks;
propHooks.value = hooks;
}
$(function() {
// Look for forms
$(document).delegate('form', 'submit.placeholder', function() {
// Clear the placeholder values so they don't get submitted
var $inputs = $('.placeholder', this).each(clearPlaceholder);
setTimeout(function() {
$inputs.each(setPlaceholder);
}, 10);
});
});
// Clear placeholder values upon page reload
$(window).bind('beforeunload.placeholder', function() {
$('.placeholder').each(function() {
this.value = '';
});
});
}
function args(elem) {
// Return an object of element attributes
var newAttrs = {};
var rinlinejQuery = /^jQuery\d+$/;
$.each(elem.attributes, function(i, attr) {
if (attr.specified && !rinlinejQuery.test(attr.name)) {
newAttrs[attr.name] = attr.value;
}
});
return newAttrs;
}
function clearPlaceholder(event, value) {
var input = this;
var $input = $(input);
if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
if ($input.data('placeholder-password')) {
$input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
// If `clearPlaceholder` was called from `$.valHooks.input.set`
if (event === true) {
return $input[0].value = value;
}
$input.focus();
} else {
input.value = '';
$input.removeClass('placeholder');
input == safeActiveElement() && input.select();
}
}
}
function setPlaceholder() {
var $replacement;
var input = this;
var $input = $(input);
var id = this.id;
if (input.value == '') {
if (input.type == 'password') {
if (!$input.data('placeholder-textinput')) {
try {
$replacement = $input.clone().attr({ 'type': 'text' });
} catch(e) {
$replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
}
$replacement
.removeAttr('name')
.data({
'placeholder-password': $input,
'placeholder-id': id
})
.bind('focus.placeholder', clearPlaceholder);
$input
.data({
'placeholder-textinput': $replacement,
'placeholder-id': id
})
.before($replacement);
}
$input = $input.removeAttr('id').hide().prev().attr('id', id).show();
// Note: `$input[0] != input` now!
}
$input.addClass('placeholder');
$input[0].value = $input.attr('placeholder');
} else {
$input.removeClass('placeholder');
}
}
function safeActiveElement() {
// Avoid IE9 `document.activeElement` of death
// https://github.com/mathiasbynens/jquery-placeholder/pull/99
try {
return document.activeElement;
} catch (err) {}
}
}(this, document, jQuery));
/*!
* jQuery corner plugin: simple corner rounding
* Examples and documentation at: http://jquery.malsup.com/corner/
* version 2.13 (19-FEB-2013)
* Requires jQuery v1.3.2 or later
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Authors: Dave Methvin and Mike Alsup
*/
/**
* corner() takes a single string argument: $('#myDiv').corner("effect corners width")
*
* effect: name of the effect to apply, such as round, bevel, notch, bite, etc (default is round).
* corners: one or more of: top, bottom, tr, tl, br, or bl. (default is all corners)
* width: width of the effect; in the case of rounded corners this is the radius.
* specify this value using the px suffix such as 10px (yes, it must be pixels).
*/
(function(e){function f(t,n){return parseInt(e.css(t,n),10)||0}function l(e){e=parseInt(e,10).toString(16);return e.length<2?"0"+e:e}function c(t){while(t){var n=e.css(t,"backgroundColor"),r;if(n&&n!="transparent"&&n!="rgba(0, 0, 0, 0)"){if(n.indexOf("rgb")>=0){r=n.match(/\d+/g);return"#"+l(r[0])+l(r[1])+l(r[2])}return n}if(t.nodeName.toLowerCase()=="html")break;t=t.parentNode}return"#ffffff"}function h(e,t,n){switch(e){case"round":return Math.round(n*(1-Math.cos(Math.asin(t/n))));case"cool":return Math.round(n*(1+Math.cos(Math.asin(t/n))));case"sharp":return n-t;case"bite":return Math.round(n*Math.cos(Math.asin((n-t-1)/n)));case"slide":return Math.round(n*Math.atan2(t,n/t));case"jut":return Math.round(n*Math.atan2(n,n-t-1));case"curl":return Math.round(n*Math.atan(t));case"tear":return Math.round(n*Math.cos(t));case"wicked":return Math.round(n*Math.tan(t));case"long":return Math.round(n*Math.sqrt(t));case"sculpt":return Math.round(n*Math.log(n-t-1,n));case"dogfold":case"dog":return t&1?t+1:n;case"dog2":return t&2?t+1:n;case"dog3":return t&3?t+1:n;case"fray":return t%2*n;case"notch":return n;case"bevelfold":case"bevel":return t+1;case"steep":return t/2+1;case"invsteep":return(n-t)/2+1}}var t=/MSIE/.test(navigator.userAgent);var n=document.createElement("div").style,r=n["MozBorderRadius"]!==undefined,i=n["WebkitBorderRadius"]!==undefined,s=n["borderRadius"]!==undefined||n["BorderRadius"]!==undefined,o=document.documentMode||0,u=t&&(!o||o<8),a=t&&function(){var e=document.createElement("div");try{e.style.setExpression("width","0+0");e.style.removeExpression("width")}catch(t){return false}return true}();e.support=e.support||{};e.support.borderRadius=r||i||s;e.fn.corner=function(n){if(this.length===0){if(!e.isReady&&this.selector){var o=this.selector,l=this.context;e(function(){e(o,l).corner(n)})}return this}return this.each(function(o){var l=e(this),p=[l.attr(e.fn.corner.defaults.metaAttr)||"",n||""].join(" ").toLowerCase(),d=/keep/.test(p),v=(p.match(/cc:(#[0-9a-f]+)/)||[])[1],m=(p.match(/sc:(#[0-9a-f]+)/)||[])[1],g=parseInt((p.match(/(\d+)px/)||[])[1],10)||10,y=/round|bevelfold|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dogfold|dog|invsteep|steep/,b=(p.match(y)||["round"])[0],w=/dogfold|bevelfold/.test(p),E={T:0,B:1},S={TL:/top|tl|left/.test(p),TR:/top|tr|right/.test(p),BL:/bottom|bl|left/.test(p),BR:/bottom|br|right/.test(p)},x,T,N,C,k,L,A,O,M,_,D,P,H,B;if(!S.TL&&!S.TR&&!S.BL&&!S.BR)S={TL:1,TR:1,BL:1,BR:1};if(e.fn.corner.defaults.useNative&&b=="round"&&(s||r||i)&&!v&&!m){if(S.TL)l.css(s?"border-top-left-radius":r?"-moz-border-radius-topleft":"-webkit-border-top-left-radius",g+"px");if(S.TR)l.css(s?"border-top-right-radius":r?"-moz-border-radius-topright":"-webkit-border-top-right-radius",g+"px");if(S.BL)l.css(s?"border-bottom-left-radius":r?"-moz-border-radius-bottomleft":"-webkit-border-bottom-left-radius",g+"px");if(S.BR)l.css(s?"border-bottom-right-radius":r?"-moz-border-radius-bottomright":"-webkit-border-bottom-right-radius",g+"px");return}x=document.createElement("div");e(x).css({overflow:"hidden",height:"1px",minHeight:"1px",fontSize:"1px",backgroundColor:m||"transparent",borderStyle:"solid"});T={T:parseInt(e.css(this,"paddingTop"),10)||0,R:parseInt(e.css(this,"paddingRight"),10)||0,B:parseInt(e.css(this,"paddingBottom"),10)||0,L:parseInt(e.css(this,"paddingLeft"),10)||0};if(typeof this.style.zoom!==undefined)this.style.zoom=1;if(!d)this.style.border="none";x.style.borderColor=v||c(this.parentNode);N=e(this).outerHeight();for(C in E){k=E[C];if(k&&(S.BL||S.BR)||!k&&(S.TL||S.TR)){x.style.borderStyle="none "+(S[C+"R"]?"solid":"none")+" none "+(S[C+"L"]?"solid":"none");L=document.createElement("div");e(L).addClass("jquery-corner");A=L.style;k?this.appendChild(L):this.insertBefore(L,this.firstChild);if(k&&N!="auto"){if(e.css(this,"position")=="static")this.style.position="relative";A.position="absolute";A.bottom=A.left=A.padding=A.margin="0";if(a)A.setExpression("width","this.parentNode.offsetWidth");else A.width="100%"}else if(!k&&t){if(e.css(this,"position")=="static")this.style.position="relative";A.position="absolute";A.top=A.left=A.right=A.padding=A.margin="0";if(a){O=f(this,"borderLeftWidth")+f(this,"borderRightWidth");A.setExpression("width","this.parentNode.offsetWidth - "+O+'+ "px"')}else A.width="100%"}else{A.position="relative";A.margin=!k?"-"+T.T+"px -"+T.R+"px "+(T.T-g)+"px -"+T.L+"px":T.B-g+"px -"+T.R+"px -"+T.B+"px -"+T.L+"px"}for(M=0;M<g;M++){_=Math.max(0,h(b,M,g));D=x.cloneNode(false);D.style.borderWidth="0 "+(S[C+"R"]?_:0)+"px 0 "+(S[C+"L"]?_:0)+"px";k?L.appendChild(D):L.insertBefore(D,L.firstChild)}if(w&&e.support.boxModel){if(k&&u)continue;for(P in S){if(!S[P])continue;if(k&&(P=="TL"||P=="TR"))continue;if(!k&&(P=="BL"||P=="BR"))continue;H={position:"absolute",border:"none",margin:0,padding:0,overflow:"hidden",backgroundColor:x.style.borderColor};B=e("<div/>").css(H).css({width:g+"px",height:"1px"});switch(P){case"TL":B.css({bottom:0,left:0});break;case"TR":B.css({bottom:0,right:0});break;case"BL":B.css({top:0,left:0});break;case"BR":B.css({top:0,right:0});break}L.appendChild(B[0]);var j=e("<div/>").css(H).css({top:0,bottom:0,width:"1px",height:g+"px"});switch(P){case"TL":j.css({left:g});break;case"TR":j.css({right:g});break;case"BL":j.css({left:g});break;case"BR":j.css({right:g});break}L.appendChild(j[0])}}}}})};e.fn.uncorner=function(){if(s||r||i)this.css(s?"border-radius":r?"-moz-border-radius":"-webkit-border-radius",0);e("div.jquery-corner",this).remove();return this};e.fn.corner.defaults={useNative:true,metaAttr:"data-corner"}})(jQuery);$(".button-services,.button,#button-presency,.model-box,#hire-unity,#satellite-hire-button,#form-button,.styled-select,.button-contact,.return-info,#button-customer,#customers-title,#customers-content").corner();
/*
* backgroundSize: A jQuery cssHook adding support for "cover" and "contain" to IE6,7,8
*
* Requirements:
* - jQuery 1.7.0+
*
* Limitations:
* - doesn't work with multiple backgrounds (use the :after trick)
* - doesn't work with the "4 values syntax" of background-position
* - doesn't work with lengths in background-position (only percentages and keywords)
* - doesn't work with "background-repeat: repeat;"
* - doesn't work with non-default values of background-clip/origin/attachment/scroll
* - you should still test your website in IE!
*
* latest version and complete README available on Github:
* https://github.com/louisremi/jquery.backgroundSize.js
*
* Copyright 2012 @louis_remi
* Licensed under the MIT license.
*
* This saved you an hour of work?
* Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
*
*/
(function($,window,document,Math,undefined) {
var div = $( "<div>" )[0],
rsrc = /url\(["']?(.*?)["']?\)/,
watched = [],
positions = {
top: 0,
left: 0,
bottom: 1,
right: 1,
center: .5
};
// feature detection
if ( "backgroundSize" in div.style && !$.debugBGS ) { return; }
$.cssHooks.backgroundSize = {
set: function( elem, value ) {
var firstTime = !$.data( elem, "bgsImg" ),
pos,
$wrapper, $img;
$.data( elem, "bgsValue", value );
if ( firstTime ) {
// add this element to the 'watched' list so that it's updated on resize
watched.push( elem );
$.refreshBackgroundDimensions( elem, true );
// create wrapper and img
$wrapper = $( "<div>" ).css({
position: "absolute",
zIndex: -1,
top: 0,
right: 0,
left: 0,
bottom: 0,
overflow: "hidden"
});
$img = $( "<img>" ).css({
position: "absolute"
}).appendTo( $wrapper ),
$wrapper.prependTo( elem );
$.data( elem, "bgsImg", $img[0] );
pos = (
// Firefox, Chrome (for debug)
$.css( elem, "backgroundPosition" ) ||
// IE8
$.css( elem, "backgroundPositionX" ) + " " + $.css( elem, "backgroundPositionY" )
).split(" ");
// Only compatible with 1 or 2 percentage or keyword values,
// Not yet compatible with length values and 4 values.
$.data( elem, "bgsPos", [
positions[ pos[0] ] || parseFloat( pos[0] ) / 100,
positions[ pos[1] ] || parseFloat( pos[1] ) / 100
]);
// This is the part where we mess with the existing DOM
// to make sure that the background image is correctly zIndexed
$.css( elem, "zIndex" ) == "auto" && ( elem.style.zIndex = 0 );
$.css( elem, "position" ) == "static" && ( elem.style.position = "relative" );
$.refreshBackgroundImage( elem );
} else {
$.refreshBackground( elem );
}
},
get: function( elem ) {
return $.data( elem, "bgsValue" ) || "";
}
};
// The background should refresh automatically when changing the background-image
$.cssHooks.backgroundImage = {
set: function( elem, value ) {
// if the element has a backgroundSize, refresh its background
return $.data( elem, "bgsImg") ?
$.refreshBackgroundImage( elem, value ) :
// otherwise set the background-image normally
value;
}
};
$.refreshBackgroundDimensions = function( elem, noBgRefresh ) {
var $elem = $(elem),
currDim = {
width: $elem.innerWidth(),
height: $elem.innerHeight()
},
prevDim = $.data( elem, "bgsDim" ),
changed = !prevDim ||
currDim.width != prevDim.width ||
currDim.height != prevDim.height;
$.data( elem, "bgsDim", currDim );
if ( changed && !noBgRefresh ) {
$.refreshBackground( elem );
}
};
$.refreshBackgroundImage = function( elem, value ) {
var img = $.data( elem, "bgsImg" ),
currSrc = ( rsrc.exec( value || $.css( elem, "backgroundImage" ) ) || [] )[1],
prevSrc = img && img.src,
changed = currSrc != prevSrc,
imgWidth, imgHeight;
if ( changed ) {
img.style.height = img.style.width = "auto";
img.onload = function() {
var dim = {
width: img.width,
height: img.height
};
// ignore onload on the proxy image
if ( dim.width == 1 && dim.height == 1 ) { return; }
$.data( elem, "bgsImgDim", dim );
$.data( elem, "bgsConstrain", false );
$.refreshBackground( elem );
img.style.visibility = "visible";
img.onload = null;
};
img.style.visibility = "hidden";
img.src = currSrc;
if ( img.readyState || img.complete ) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = currSrc;
}
elem.style.backgroundImage = "none";
}
};
$.refreshBackground = function( elem ) {
var value = $.data( elem, "bgsValue" ),
elemDim = $.data( elem, "bgsDim" ),
imgDim = $.data( elem, "bgsImgDim" ),
$img = $( $.data( elem, "bgsImg" ) ),
pos = $.data( elem, "bgsPos" ),
prevConstrain = $.data( elem, "bgsConstrain" ),
currConstrain,
elemRatio = elemDim.width / elemDim.height,
imgRatio = imgDim.width / imgDim.height,
delta;
if ( value == "contain" ) {
if ( imgRatio > elemRatio ) {
$.data( elem, "bgsConstrain", ( currConstrain = "width" ) );
delta = Math.floor( ( elemDim.height - elemDim.width / imgRatio ) * pos[1] );
$img.css({
top: delta
});
// when switchin from height to with constraint,
// make sure to release contraint on height and reset left
if ( currConstrain != prevConstrain ) {
$img.css({
width: "100%",
height: "auto",
left: 0
});
}
} else {
$.data( elem, "bgsConstrain", ( currConstrain = "height" ) );
delta = Math.floor( ( elemDim.width - elemDim.height * imgRatio ) * pos[0] );
$img.css({
left: delta
});
if ( currConstrain != prevConstrain ) {
$img.css({
height: "100%",
width: "auto",
top: 0
});
}
}
} else if ( value == "cover" ) {
if ( imgRatio > elemRatio ) {
$.data( elem, "bgsConstrain", ( currConstrain = "height" ) );
delta = Math.floor( ( elemDim.height * imgRatio - elemDim.width ) * pos[0] );
$img.css({
left: -delta
});
if ( currConstrain != prevConstrain ) {
$img.css({
height:"100%",
width: "auto",
top: 0
});
}
} else {
$.data( elem, "bgsConstrain", ( currConstrain = "width" ) );
delta = Math.floor( ( elemDim.width / imgRatio - elemDim.height ) * pos[1] );
$img.css({
top: -delta
});
if ( currConstrain != prevConstrain ) {
$img.css({
width: "100%",
height: "auto",
left: 0
});
}
}
}
}
// Built-in throttledresize
var $event = $.event,
$special,
dummy = {_:0},
frame = 0,
wasResized, animRunning;
$special = $event.special.throttledresize = {
setup: function() {
$( this ).on( "resize", $special.handler );
},
teardown: function() {
$( this ).off( "resize", $special.handler );
},
handler: function( event, execAsap ) {
// Save the context
var context = this,
args = arguments;
wasResized = true;
if ( !animRunning ) {
$(dummy).animate(dummy, { duration: Infinity, step: function() {
frame++;
if ( frame > $special.threshold && wasResized || execAsap ) {
// set correct event type
event.type = "throttledresize";
$event.dispatch.apply( context, args );
wasResized = false;
frame = 0;
}
if ( frame > 9 ) {
$(dummy).stop();
animRunning = false;
frame = 0;
}
}});
animRunning = true;
}
},
threshold: 1
};
// All backgrounds should refresh automatically when the window is resized
$(window).on("throttledresize", function() {
$(watched).each(function() {
$.refreshBackgroundDimensions( this );
});
});
})(jQuery,window,document,Math);
$(function(){
/** Example how to use placeholder ***/
$('input, textarea').placeholder();
/** Example how to use backgroundSize ***/
$(selector).css({backgroundSize: "cover"});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment