- Fill in the body of the sortByFoo function below. Executing the code should display true three times in your browser.
function
sortByFoo(tab)
{
// TODO: Fill in the code here, using Array.sort.
return tab;
}
// Sort by .foo attribute
console.log(sortByFoo(
[{foo: 5}, {foo: 7}, {foo: 4}, {foo: 3}, {foo: 2}, {foo: 1}, {foo: 6}]
)[5].foo === 6);
// Does not crash on an empty array
console.log(sortByFoo([]).length === 0);
// For objects without a `foo` attribute, its value should be considered equal to '0'
console.log(sortByFoo([{foo: 42}, {bar: 7}, {foo: -5}])[1].bar === 7);
{
// TODO: Fill in the code here, using Array.sort.
return tab;
}
// Sort by .foo attribute
console.log(sortByFoo(
[{foo: 5}, {foo: 7}, {foo: 4}, {foo: 3}, {foo: 2}, {foo: 1}, {foo: 6}]
)[5].foo === 6);
// Does not crash on an empty array
console.log(sortByFoo([]).length === 0);
// For objects without a `foo` attribute, its value should be considered equal to '0'
console.log(sortByFoo([{foo: 42}, {bar: 7}, {foo: -5}])[1].bar === 7);
Tested sortByFoo.js
with firebug.
function
sortByFoo(tab){
// TODO: Fill in the code here, using Array.sort.
tab.sort(function(elem1, elem2){
var foo1 = elem1.foo || 0,
foo2 = elem2.foo || 0;
return foo1 > foo2 ? 1 : foo1 === foo2 ? 0 : -1;
});
return tab;
}
// Sort by .foo attribute
console.log(sortByFoo(
[{foo: 5}, {foo: 7}, {foo: 4}, {foo: 3}, {foo: 2}, {foo: 1}, {foo: 6}]
)[5].foo === 6);
// Does not crash on an empty array
console.log(sortByFoo([]).length === 0);
// For objects without a `foo` attribute, its value should be considered equal to '0'
console.log(sortByFoo([{foo: 42}, {bar: 7}, {foo: -5}])[1].bar === 7);
// TODO: Fill in the code here, using Array.sort.
tab.sort(function(elem1, elem2){
var foo1 = elem1.foo || 0,
foo2 = elem2.foo || 0;
return foo1 > foo2 ? 1 : foo1 === foo2 ? 0 : -1;
});
return tab;
}
// Sort by .foo attribute
console.log(sortByFoo(
[{foo: 5}, {foo: 7}, {foo: 4}, {foo: 3}, {foo: 2}, {foo: 1}, {foo: 6}]
)[5].foo === 6);
// Does not crash on an empty array
console.log(sortByFoo([]).length === 0);
// For objects without a `foo` attribute, its value should be considered equal to '0'
console.log(sortByFoo([{foo: 42}, {bar: 7}, {foo: -5}])[1].bar === 7);
References
http://www.siteduzero.com/forum/sujet/corps-de-la-fonction-20209
http://www.siteduzero.com/forum/sujet/tableau-foo-5-foo-7-10308
https://gist.github.com/1121755/0f6e5eee6dc437912fb937f5db481235e1837b7e
http://www.opendebug.com/article/321245
http://bbs.csdn.net/topics/380207906
http://www.andhrafriends.com/topic/340334-javascript-solutions-helpp/Finish the code below:
<html><head>
<script>
document.body.innerHTML = '
<div id="42" onclick="clicked(event)">1</div>
<div id="43" onclick="clicked(event)">2</div>
<div id="44" onclick="clicked(event)">3</div>';
function clicked(event)
{
// TODO: Fill in here. Use event.target.
// TODO: Display an alert containing the id of the clicked div
}
</script>
</head>
<body></body>
</html>
<script>
document.body.innerHTML = '
<div id="42" onclick="clicked(event)">1</div>
<div id="43" onclick="clicked(event)">2</div>
<div id="44" onclick="clicked(event)">3</div>';
function clicked(event)
{
// TODO: Fill in here. Use event.target.
// TODO: Display an alert containing the id of the clicked div
}
</script>
</head>
<body></body>
</html>
Tested by firefox
<html><head>
<script>
document.body.innerHTML = '<div id="42" onclick="clicked(event)">1</div><div id="43" onclick="clicked(event)">2</div><div id="44" onclick="clicked(event)">3</div>';
function clicked(event)
{
// TODO: Fill in here. Use event.target.
// TODO: Display an alert containing the id of the clicked div
var obj = event.srcElement || event.target;
alert(obj.id);
}
</script>
</head>
<body></body>
</html>
- Rewrite the code below using DOM or jQuery calls instead of using innerHTML. If using jQuery, it will be considered accessible in the $ variable.
<html><head>
<script>
document.body.innerHTML = '
<div id="42" onclick="clicked(event)">1</div>
<div id="43" onclick="clicked(event)">2</div>
<div id="44" onclick="clicked(event)">3</div>';
function clicked(event)
{
// TODO: Fill in here. Use event.target.
// TODO: Display an alert containing the id of the clicked div
}
</script>
</head>
<body></body>
</html>
<script>
document.body.innerHTML = '
<div id="42" onclick="clicked(event)">1</div>
<div id="43" onclick="clicked(event)">2</div>
<div id="44" onclick="clicked(event)">3</div>';
function clicked(event)
{
// TODO: Fill in here. Use event.target.
// TODO: Display an alert containing the id of the clicked div
}
</script>
</head>
<body></body>
</html>
Tested by firefox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:24; font-weight:bold; color: red;}
</style>
<body>
<ul class="nav">
<li class="first"><a href="#">item 0</a></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</body>
</html>
- Write a jQuery module that provides the following methods for setting CSS border properties:
$('#foo').border('1px solid blue');
$('#foo').border({width: '2px', color: 'red', radius: '1px'});
$('#foo').border(null);
$('#foo').border(); // Returns the value of the border property
$('#foo').border({width: '2px', color: 'red', radius: '1px'});
$('#foo').border(null);
$('#foo').border(); // Returns the value of the border property
Tested by firefox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
A:link {font-size:24; font-weight:bold; color: red;}
</style>
</head>
<body>
<table>
<th>
<ul>
<li><a href="#">Bullet 1</a></li>
<li><a href="#">Bullet 2</a></li>
<li><a href="#">Bullet 3</a></li>
</ul>
</th>
<tr>
<td><p>test1</p></td>
<td><p>test2</p></td>
<td><p>test3</p></td>
<td><p>test4</p></td>
</tr>
</table>
</body>
</html>
- Code a slideUpAndOut(elem) javascript function that makes an element disappear by sliding upwards and out of the page, without altering the layout and positioning of other elements in the page.
Tested by firefox
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type="text/javascript">
function slideUpAndOut(elem){
if($("#" + elem).is(":hidden"))
$("#" + elem).slideDown('slow');
else
$("#" + elem).slideUp('slow');
}
</script>
</head>
<body>
<div id="slide-text">
<p>paragraph will disappear by sliding upwards and out of the page </p>
</div>
<button onClick="slideUpAndOut('slide-text')">Slide Paragraph</button>
</body>
</html>
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type="text/javascript">
function slideUpAndOut(elem){
if($("#" + elem).is(":hidden"))
$("#" + elem).slideDown('slow');
else
$("#" + elem).slideUp('slow');
}
</script>
</head>
<body>
<div id="slide-text">
<p>paragraph will disappear by sliding upwards and out of the page </p>
</div>
<button onClick="slideUpAndOut('slide-text')">Slide Paragraph</button>
</body>
</html>
- In an XHTML document, when should you use class vs id attributes?
IDs can be used once
but classes can be used multiple times.ID is more specific. You can
use multiple classes to style an HTML element but you can only use
one ID when styling an HTML element.Classes are useful to apply
similar declarations to a variety of elements.
Should you use ID or class?
http://css.maxdesign.com.au/selectutorial/advanced_idclass.htm
The Difference Between ID and Class
http://css-tricks.com/the-difference-between-id-and-class/
When should I use a class and when should I use an ID?
http://css-discuss.incutio.com/wiki/Classes_Vs_Ids
- Explain what the following code means:
a:hover { font-weight: bold; }
A:hover
Defines the style for hovered links. A link is hovered when the mouse moves over it. font-weight: bold is used for font formatting.
Defines the style for hovered links. A link is hovered when the mouse moves over it. font-weight: bold is used for font formatting.
- In CSS2, how would you select all of the text fields of a form? What do you need to do for it to work in IE6?
This can be used.
input[type=text]
{
//css
rules
}
To comply with IE6.
IE7.js is a
JavaScript library to make Microsoft Internet Explorer behave like a
standards-compliant browser. It fixes many HTML and CSS issues and
makes transparent PNG work correctly under IE5 and IE6.
http://code.google.com/p/ie7-js/
Is there a way in CSS to select all input elements of type text?
http://stackoverflow.com/questions/5789975/select-all-text-boxes-in-css
http://stackoverflow.com/questions/4113965/css-selector-for-text-input-fields
- What differences are there between absolute and relative positionings?
Absolute positioning
This is a very
powerful type of positioning that allows you to literally place any
page element exactly where you want it. You use the positioning
attributes top, left bottom and right to set the location. These
values will be relative to the next parent element with relative (or
absolute) positioning
Relative positioning
A relative
positioned element is positioned relative to its normal position. The
content of a relatively positioned elements can be moved and overlap
other elements, but the reserved space for the element is still
preserved in the normal flow.
What are the differences between absolute and relative positioning?
http://www.phpmind.com/blog/2010/09/what-are-the-differences-between-absolute-and-relative-positioning/
- Write the code for a javascript-less CSS menu interface. The interface (a “menubar” of sorts) will have two menus, the first with 3 elements, the second with 10 elements. It must work in Google Chrome or any webkit based browser. The choice of presentation is open, but must be well argued.
Tested by google chrome and
safari
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 24px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 2px 2px 0px #666666;
-webkit-box-shadow: 2px 2px 0px #666666;
-moz-box-shadow: 2px 2px 0px #666666;
background: #8B8B8B;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
border: solid 0px #6D6D6D;
}
#menu-bar li {
margin: 0px 6px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 12px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 8px 20px 8px 20px;
margin: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-shadow: -20px -20px 0px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
background: #0399D4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #444444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #0399D4 !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
</style>
</head>
<body>
<ul id="menu-bar">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#"> Sub Menu 1</a></li>
<li><a href="#"> Sub Menu 2</a></li>
<li><a href="#"> Sub Menu 3</a></li>
<li><a href="#"> Sub Menu 4</a></li>
<li><a href="#"> Sub Menu 5</a></li>
<li><a href="#"> Sub Menu 6</a></li>
<li><a href="#"> Sub Menu 7</a></li>
<li><a href="#"> Sub Menu 8</a></li>
<li><a href="#"> Sub Menu 9</a></li>
<li><a href="#"> Sub Menu 10</a></li>
</ul>
</li>
</ul>
</body>
</html>
- What does the following code mean? What does it display, and why?
<html><head><style>
#foo {
position:
relative; overflow: hidden; background-color: red;
top: 10px;
left: -50px; width: 100px; height: 100px;
}
div.bar {
position:
absolute; background-color: blue;
height:
50px; width: 75px; bottom: 0px; right: -30px;
}
.foo {
float:
right; background-color: green;
width: 30px;
height: 30px; margin: 10px 0 30px;
}
span {
background-color: black; width: 50px; height: 400px;
}
</style></head>
<body>
<div id=”foo”>
<div
class=”bar”></div><div
class=”foo”></div><span></span>
</div>
</body></html>
In IE9 page spans
black block on the left side of the web page.In mozilla chroma and
safari page is blank
I tested like below
<div id=”foo”>
<div
class=”bar”>test1</div>
<div
class=”foo”>test2</div>
<span>test3</span>
</div>
Aim is to
position div tags side by side.
