Skip to content

Instantly share code, notes, and snippets.

View Stevenlitton's full-sized avatar

Steven Litton Stevenlitton

  • Bournemouth
View GitHub Profile
HTML
<div class="select-style">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
@Stevenlitton
Stevenlitton / gist:f61ad22fd5f6c852c754
Last active July 13, 2016 09:28
Make smooth scroll animation to all anchors
$(function() {
$('a[href*=\\#]:not([href=\\#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
@Stevenlitton
Stevenlitton / stylesheet-switcher
Created November 2, 2013 22:45
Use jQuery to switch stylesheets using button clicks
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="day.css">
<style>
</style>
</head>
<body>
@Stevenlitton
Stevenlitton / responsive-thumbnail-slider
Created November 2, 2013 22:36
A Responsive Thumbnail Slider
window.resizetimeout = false;
function thumbnailSlider(){
var numOfThumbs = jQuery("#ul-moreviews").children("li").length,
sliderPosition = 0,
productBoxWidth = parseInt(jQuery(".product-info-box").width()),
listWidth = jQuery(".more-views #ul-moreviews li").css("width", productBoxWidth / 3 - 16 ),
moreViewsWidth = parseInt(jQuery("#ul-moreviews li").outerWidth(true) * 3),
@Stevenlitton
Stevenlitton / only-fire-function-window-size-is-less-than
Created November 2, 2013 22:29
On click this will check the window size and if it is smaller than 500px it will go to the modal page otherwise will show the popup
jQuery(".open-modal").click(function(){
if (jQuery(window).width() < 500) {
window.location = 'http://www.themodalpage.com';
}
else {
jQuery("#modal").fadeIn();
jQuery(".modal-overlay").fadeIn();
}
});
@Stevenlitton
Stevenlitton / load-page-at-top
Created November 2, 2013 22:23
Loads the page at the top, adding the second function will make it work on refresh
$(document).scrollTop(0);
$(function() {
window.location.href = "#topDiv";
});
@Stevenlitton
Stevenlitton / css-gradient-buttons
Created May 24, 2013 15:25
CSS Gradient Buttons
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;