Body Project –
//$ = jQuery;
$(document).ready(function() {
$(“.markerback”).mouseover(function() {
$(“.markerback”).removeClass(“blur”);
$(“.marker”).addClass(“blur”);
if ($(“#bodymap”).hasClass(“front”)) {
$(“#bodymap”).removeClass(“front”).addClass(“back”);
}
$(“.visible”).hide().removeClass(“visible”);
$(this).next().show().addClass(“visible”);
//$(“.addrBox”).show().addClass(“visible”);
});
$(“.marker”).mouseover(function() {
if ($(“#bodymap”).hasClass(“back”)) {
$(“#bodymap”).removeClass(“back”).addClass(“front”);
}
$(“.visible”).hide().removeClass(“visible”);
$(this).next().show().addClass(“visible”);
//$(“.addrBox”).show().addClass(“visible”);
$(“.markerback”).addClass(“blur”);
$(“.marker”).removeClass(“blur”);
});
$(“#closeXray”).click(function() {
$(“#bodymap”).removeClass(‘back’).addClass(‘front’);
$(“.marker.hidden”).removeClass(“hidden”);
$(“.addrBox”).hide();
});
});
//opposite = {front : “back”, back : “front”}
// <span class=”marker” side=”front”></span>
//$(“.genericMarker”).mouseover(function() {
// var side = $(this).attr(“side”);
//$(‘[side =”‘+side+'”‘).removeClass(“blur”);
// $(‘[side =”‘+opposite[side]+'”‘).addClass(“blur”);
//
Javascript for google analytics in footer of rc project
(tied to an image being used for a reservations button)
<script>
jQuery(“img[src=’http://ruthschris.net/wp-content/uploads/2012/06/reservation_button1.png’]”).click(function() {
reservationLocationIndex = {
“151048” : “Alpharetta”,
“1716”: “Sandy springs”,
“20932”: “Buckhead”,
“36301”: “Kennesaw”,
“20824”: “Huntsville”,
“20926”: “Birmingham”,
“14755”: “Columbia”,
“29266”: “Greenville”,
“19927”: “Myrtle Beach”,
“108805 “:”Chattanooga”,
“20929”: “Centinnial Park”
};
key = jQuery(this).parent().attr(‘href’).split(“restref=”);
console.log(“Telling google that someone wants a reaservation in “+reservationLocationIndex[key[1]]);
ga(‘send’, ‘event’, ‘reservations’, ‘Click’, reservationLocationIndex[key[1]]);
});
</script>
Javascript for Goldman design
custom slider:
<script type=”text/javascript”>
// Start Sandy custom for slider
$ = jQuery;
$(document).ready(function() {
$(“.triggers li”).mouseover(function() {
if(typeof hovered !== “undefined”) {
if(hovered !=( $(this).index()+1 )){
$(“.top”).removeClass(“top”);
$(“.active”).removeClass(“active”);
}
}
hovered = $(this).index() + 1;
$(this).addClass(“active”);
$(“.image”+hovered).addClass(“top”);
console.log(“.image”+hovered+” loaded!”);
} );
});
</script>
CSS CurrentColor
http://demosthenes.info/blog/908/The-First-CSS-Variable-currentColor
Instead, let’s do the following: define the text color just once, and let the other properties in the link inherit it via currentColor
p { color: #333; }p a {text-decoration: none;color: currentcolor;font-weight: bolder;display: inline-block;padding-bottom: .5rem;border-bottom: 1px dashed currentcolor;}There are absolutely ways to accomplish this without using currentColor (mostly by using inherit), but doing something like the following is impossible without it:
body { color: #f0f; }hr { height: 10px; background: currentcolor; }You can use currentColor in all kinds of unexpected places, such as gradients.
What would be really great is if we could say something like color: (currentcolor) 10% lighter; but manipulations like that aren’t yet possible in standard CSS: they remain the domain of preprocessors, at least for now.
I like the breakdown of these job descriptions.
http://css-tricks.com/job-titles-in-the-web-industry/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer541b4&utm_medium=facebook
Photoshop trick: Paste layer style without removing existing styles
http://blog.kam88.com/en/layer-styles-hidden-feature.html
HEAD————
HTML———————-
CSS ———————————-
/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {
/* nav-wrap */
#nav-wrap {
position: relative;
}
/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #ecebeb url(../images/menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon */
}
#menu-icon:hover {
background-color: #f8f8f8;
}
#menu-icon.active {
background-color: #bbb;
}
/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f8f8f8;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}
/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}
}
@media screen and (min-width: 600px) {
/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}
iphone tips
http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/
To use a pdf icon for your link:
a[href $=’.pdf’] {
padding-right: 30px;
background: transparent url(images/icon_pdf.gif) no-repeat center right;
}
REDIRECT PHP
header( ‘Location: http://www.yoursite.com/new_page.html’ ) ;
?>
or
header(“HTTP/1.1 301 Moved Permanently”);
header(“Location: http://www.New-Website.com”);
exit;
?>
Clear Cache
http://www.wikihow.com/Clear-Your-Browser%27s-Cache
Show Me Javascript
function showMe(id) { // This gets executed when the user clicks on the checkbox
var obj = document.getElementById(id);
if (obj.style.display==”none”) { // if it is checked, make it visible, if not, hide it
obj.style.display = “block”;
} else {
obj.style.display = “none”;
}
}
—
Wireless Telephone Service (Verizon or AT&T)
—
—
FLASH notes
Flash doesn’t like to import mp3, so use a 3rd party conversion to convert it to wav instead, let flash import it and use it’s own compression. Inside flash, double click on the sound file (orig) and use the import button to import sound ontop of the original sound.
—
CSS DropDown Menus
http://css3menu.com/elegant-dark-menu.html
