26 October 2008

BarCamp LA 6: for jQuery Introduction: Source Code

HTML

JavaScript

$(window.document).ready(function () {
    //jQuery('p:first').css({'font-size': 'large','border':'5px solid red'});
    // add .link to links

    $('#pagebody a').addClass('link');
    // add .pdf class to pdf links
    // add title text to pdf links saying
    $('a[href$=.pdf]').addClass('pdf').attr({'title': 'Download this PDF'}).css({fontWeight: 'bold'});
    // change text on a button
    // change lincoln with a button click
    $('#buttonA').attr({value: 'Change Lincoln'}).click(
        function () {
            $('#pagebody img').attr({
                src: 'images/lincoln-side.jpg',
                title: 'Lincoln from the side'
            })
        }
    )
    // bold paragraphs
    jQuery('p').css({fontWeight: 'bold'});

    /*
     $.ajax({
       type: "GET",
       url: "selectors.txt",
       //data: "name=John&location=Boston",
       success: function(stuff){
            $('#pagebody').html(stuff)
       }
     });
     */

    $('#buttonB').attr({value: 'Fade Lincoln'}).click(
        function () {
            $('#pagebody img').fadeOut('slow')
        }
    )
    $('#buttonC').attr({value: '1'}).click(
        function () {
            var x = $('#buttonC').attr('value');
            x = parseInt(x) + 1;
            $('#buttonC').attr({'value': x})
        }
    )
    $('#buttonD').attr({value: '-1'}).click(
        function () {
            var x = $('#buttonD').attr('value');
            x = parseInt(x) - 1;
            $('#buttonD').attr({'value': x})
        }
    )
    $('#buttonE').attr({value: '0'}).click(
        function () {
            var c = $('#buttonC').attr('value');
            var d = $('#buttonD').attr('value');
            x = parseInt(c) * parseInt(d);
            $('#buttonE').attr({'value': x})
        }
    )


});

SCSS

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) 50% 50% / 800px 100% repeat-y #ccc;
  display: flex;
  justify-content: center;
  align-items: center;

}

form {
  margin: 0;
  padding: 0;

  * {
    font-size: 1rem;
  }
}

#wrapper {
  max-width: 800px;
  padding: 0;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0 0 1rem;
}

#header {
  background-color: #cf3;
  margin: 0;
  padding: 1rem 1rem 1rem 4rem;
  border-bottom: 3px double #666;
  min-height: 5rem;
  line-height: 2rem;

  a {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    text-decoration: none;
    color: #666;
    margin-left: 3rem;
  }

  h1 {
    font-family: georgia, serif;
    margin: 0;
    padding: 0;
  }
}

#pagebody {
  padding: 1rem 2rem 1rem 4rem;

  img {
    width: 150px;
    height: 208px;
    float: right;
    margin: 0 0 1rem 1rem;
  }
}

#footer {
  clear: both;
  margin: 0;
  padding: 1rem 1rem 1rem 4rem;
  border-top: 3px double #666;
  color: #ccc;
  background-color: #000;
  min-height: 5rem;

  a {
    color: #fff;
    font-weight: bold;
  }

  img {
    float: left;
    margin: 0 1rem 0 0;
    height: 50px;
    width: 50px;
  }
}

.external,
.link {
  background-image: url(images/external.png);
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 2rem;
}

.pdf {
  background-image: url(images/icon-pdf.gif);
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 2rem;
}

Selectors

SAMPLE SELECTORS THAT ONE COULD
USE TO TARGET ELEMENTS ON THE PAGE
==================================
#wrapper
#header
h1
form
input
#buttonA
#buttonB
#buttonC
#buttonD
#buttonE
#header form
#pagebody
#pagebody h2
a[href^='http://']
a[href$='.pdf']
h2
img
#pagebody img
#pagebody p
#pagebody p img
p
span
span.date
#footer
#footer p
#footer a
.link
.pdf