Skip to content
This repository has been archived by the owner on Nov 7, 2020. It is now read-only.

Commit

Permalink
new code from september class
Browse files Browse the repository at this point in the history
  • Loading branch information
Rebecca Murphey committed Sep 26, 2009
1 parent 9aa8e0d commit bb85712
Show file tree
Hide file tree
Showing 9 changed files with 485 additions and 42 deletions.
6 changes: 4 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 99,8 @@ <h2>Specials</h2>
</form>
</div>
</div>
<script src="js/jquery-1.3.2.min.js"></script>

<script src="js/jquery-1.3.2.min.js"></script>
<!-- <script src="js/solutions/specials.js"></script> -->
</body>
</html>
</html>
34 changes: 31 additions & 3 deletions js/solutions/js101.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 10,9 @@ var bim = foo && bar; // logical AND operator && returns the value of the last t

if (foo) {
// do something if foo is true
} else if (bar) {
} else if (
bar && baz && bim
) {
// do something if bar is true AND foo was false
} else {
// do something if both foo and bar were false
Expand All @@ -36,13 38,16 @@ foo.push('pear'); // add to an array when last index is not known
foo.length; // 4 -- that's better
foo; // ['apple', 'orange', 'banana', 'pear']

var foo = {
bar : 'baz'
};

/* objects */

var myObject = {
'property' : 'value',
'method' : function() {
alert('hello');
return 'hello';
}
};

Expand All @@ -57,13 62,36 @@ function myFunction() {
// do stuff
};

var myFunction = function() {
var myFunction = function(a, b) {
// do stuff
return (a b);
};

myFunction();

var foo = 'hello';

var myThing = (function() {
var myFn = function() {
alert(foo);
};
var foo = 'world';
return myFn;
})();

myThing();


// functions can be created and run without ever naming them
(function(arg) { alert(arg); })('hello'); // alerts 'hello'


(function($) {
$('p').text('hello');
})(jQuery);

$('p').text('hello');

// functions can receive 0 or more arguments;
// these arguments can be anything, including other functions!
var myFunction = function(a, b) {
Expand Down
44 changes: 44 additions & 0 deletions js/solutions/menus.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,44 @@
$(document).ready(function() {
var cache = {};

$('<div class="container"/>')
.css({
border : '1px solid #ccc',
padding : '5px'
})
.appendTo('#menus > li')
.hide();

$('#menus a').click(function(e) {
e.preventDefault();

var $a = $(this);
var $container = $a.closest('ul')
.siblings('div.container');

var href = $a.attr('href');
var hash = href.split('#')[1];
var url = 'html/' hash '.html';

var callback = function(html) {
if (!cache[hash]) {
cache[hash] = html;
}
$container.html(cache[hash]).show();
};

if (cache[hash]) {
callback(cache[hash]);
} else {
$.ajax({
type : 'get',
dataType : 'html',
url : url,
success : function(html) {
callback(html);
}
});
}

});
});
249 changes: 249 additions & 0 deletions js/solutions/sandbox.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,249 @@
/*
- get the third list item (hint: eq())
- change its color to red
- change the color of the rest of the list items to blue
- *without doing another selection*, find the div.module and remove the class "module"
*/

$(document).ready(function() {
var $li = $('li').eq(2);

$li.css('color', 'red')
.siblings()
.css('color', 'blue');

$li.parent().prev() // div.module
.removeClass('module');
});

/*
- get the h1
- store its text in a variable
- use the stored text as the text for the first list item
*/
$(document).ready(function() {
$('li:first').text( $('h1').text() );
});

/*
bonus points:
- change the background color of *every other* table row (hint: use :odd or :even)
*/
$(document).ready(function() {
$('tr:odd').css({ 'backgroundColor' : '#ccc' });
});

/*
example showing find() and not()
*/
$(document).ready(function() {
$('ul')
.addClass('rounded')
.find('li').not('.foo')
.css('color', 'blue');
});

/*
playing with list items
*/
$(document).ready(function() {
var $firstListItem = $('li:first');

$firstListItem
.addClass('current')
.siblings()
.removeClass('current');

var liColor = $('ul')
.css('border', '1px solid red')
.children()
.css('color', 'blue')
.css('color');

console.log(liColor); // 'blue'
});

$(document).ready(function() {
/* appending */
$('li')
.each(function(i) {
var $li = $(this);
$('<span/>')
.text(' number: ' i)
.appendTo($li);
})
.append('<span> hello</span>');

/* cloning and inserting */
$('li').each(function() {
var $li = $(this);
var $newLi = $li.clone();

$newLi.text('new ' $newLi.text());

$newLi.insertAfter($li);
});

var $newUl = $('ul').clone();

$('<div/>')
.insertAfter('h1')
.append($newUl);

});


/*
manipulation exercises
- add five new list items to the end of the unordered list (hint: for (i=0; i<5; i ) { ... } )
*/

$(document).ready(function() {
var $ul = $('ul');
var myListItems = [];

for (var i=0; i<5; i ) {
// $ul.append('<li>this is my list item</li>');
var text = 'this is my list item #' i;
myListItems.push('<li>' text '</li>');
}

var myNewHtml = myListItems.join('');
$ul.append(myNewHtml);
});


/*
- remove the odd list items (hint: .remove())
*/
$(document).ready(function() {
var $li = $('li:odd').remove();
});

/*
- add another h2 and another paragraph to div.module
*/
$(document).ready(function() {
var $module = $('div.module');

$module.append('<h2>new headline</h2>');
$module.append('<p>new paragraph</p>');
});


$(document).ready(function() {
/*
- add a new div.module to the page after the existing one; put a copy of the existing unordered list inside it.
*/
var $module = $('div.module');
var $newUl = $('ul').clone();

var $newModule = $('<div/>')
.addClass('module')
.append($newUl)
.insertAfter($module);

/* make list items clickable; mark the current one */
$('li').click(function() {
var $this = $(this);

$this.siblings().removeClass('current');

if ($this.hasClass('current')) {
$this.removeClass('current');
} else {
$this.addClass('current');
}
});
});

$(document).ready(function() {
/* toggle (event) */
$('td').toggle(
function() {
var $td = $(this);
$td.addClass('current');
},
function() {
var $td = $(this);
$td.removeClass('current');
}
);

/* mark a clicked <a>; log the href */
$('a').click(function(e) {
e.preventDefault();

var $a = $(this);
$a.addClass('clicked');

console.log($a.attr('href'));
});

/* hover */
$('li').hover(
function() {
$(this).addClass('current');
},
function() {
$(this).removeClass('current');
}
);

/* click on p, simulate click on <a> */
$('p:first').click(function(e) {
var href = $(this).find('a').attr('href');
window.location.href = href;
});

/* timeouts and intervals */
var myTimeout = setTimeout(function() {
alert('hi');
}, 5000);

var myInterval = setInterval(function() {
console.log('hello');
}, 1000);

$('p').click(function() {
clearTimeout(myTimeout);
clearInterval(myInterval);
});

/* animation */
$('h1').next('p').hide();

$('h1').click(function() {
$(this).next('p').slideToggle();
});

$('div.module h2').toggle(
function() {
$(this).next().slideUp();
},
function() {
$(this).next().slideDown();
}
);

$('div.module h2').click(function() {
$(this).next().slideToggle();
});

$('ul li')
.css('position', 'relative')
.toggle(
function() {
$(this).animate({
left : '20px'
}, 500);
},
function() {
$(this).animate({
left : '0px'
}, 500);
}
);

});
Loading

0 comments on commit bb85712

Please sign in to comment.