I create this <div/> to have my article inside. However, my nit picking product manager finds the width of this block is a little different between Internet Explorer 6 and Firefox. Can you help me to fix this weird bug?
In Internet Explorer, the width is 500px.
In Firefox 3, the width is 522px.
Can you help to correct my attached file so that the page is identical in different browsers? It would be great if you can tell me why so that I won't do that stupid thing again. And if you have spare time, please style the page for me since I am so lazy. ^^』』
First of all, the problem of weird width is because older IE browser has different explanation in CSS box model.
Product manager asks me to make a horizontal toolbar for our website.
Even if user scrolls, toolbar will always stay at the bottom of page. Another requirement is that all modern browsers are compatible with this new feature. (Internet Explorer 6 - 8, Firefox, Opera, Google Chrome, and Safari) After making a prototype I find it's really difficult. Please teach me how to do that.
The CSS { position: fixed } attribute can build the toolbar in same position whenever scrolling. So the solution is:
#toolbar { position: fixed ; bottom:0; width:100%; }
Unfortunately, our old IE6 friend doesn't support it.
Again, search for some hack at web, we found 2 approaches:
1. JavaScript approach: which auto re-assigns position when event called.
2. CSS approach:
Using CSS expression or, Using wrapper
I use wrapper method because it's the simplest to me.
Normally, the { position:absolute } attribute will anchor the element according root element. Therefore we can set another element outside to be the root and have height equal to the screen. So the { position:absolute } attribute can place toolbar in right position. And by set the {overflow:hidden} attribute, we can hide the content outside the root element.
When assign css attribute, IE will active the element. So we can active the <html> element to be the wrapper, <body> to be the content,
CSS example:
#toolbar {position: fixed; bottom: 0; width: 100%;}
//css for ie6
* html{ overflow-y: hidden; } //hide the wrapper scroll
* html body{
padding:0px;margin:0px; // reset
overflow-y: auto; //set scroll
height: 100%;
}
* html div#toolbar
{
position: absolute;
width:98%; //fix the problem that toolbar over scroll
}
Dear Candidate,
We front-end engineers are always busy at switching between browsers. Each engineer has three browsers installed on their notebook. They are Internet Explorer 6, Internet Explorer 7, and Firefox 3. It's really confusing to identify which browser is using. As an engineer with some repute, you want facilitate others by showing icon.
1. we need to set CSS sprite for browser picture
I try to build CSS class with background-position attribute:
.firefox{ background-position:0 0 }
.ie7{ background-position:0 -75px }
.ie6{ background-position:0 -150px}
2. JavaScript to detect browser and parse userAgent string and replace picture for right browser.
using library from here: http://www.quirksmode.org/js/detect.html
window.onload = function(){
// get the DOM object by ID
var browserPic = document.getElementById("browsers");
//detect browser and set correct class
if(BrowserDetect.browser == "Firefox"){
browserPic.className = "firefox";
}
if(BrowserDetect.browser == "Explorer"){
if(BrowserDetect.version == "6")
browserPic.className = "ie6";
if(BrowserDetect.version == "7")
browserPic.className = "ie7";
}
};
(but it turn outs that using css hack * for ie6, _ for firefox is a far more simpler solution)int[] a = [0,1,2,3,4]
for (int i = 0 ; i < 5 ; i++){
print(a[i]);
}
// 01234
in scheme you have to define a for-each loop like this and pass the function: (define each (lambda (list proc)
(if (not (null? list))
(begin
(proc (car list)) ; car : get first element of list
(each (cdr list) proc) ; cdr : get the rest of list except the first element
)
)))
(each '(0 1 2 3 4) write) ; pass the function "write" to execute on each element
; 01234
print(db.read());
(print (read db ))
(define last (lambda (list)
(if (> (length list) 1)
(rac(cdr list))
(car list)
)))
fibonacci: (define fib (lambda (level)
(if (< level 2)
level
(+ (fib(- level 1)) (fib (- level 2)) )
)))
; dynamic programming version
(define (fib-dym level)
(let fib ((base0 0) (base1 1) (n level))
(if (< n 1)
base0
(fib base1 (+ base0 base1) (- n 1)))))
quick sort: (define (partition pivot num-list)
(if (null? num-list) '(()())
(let ((split-of-rest (partition pivot (cdr num-list)))) ;split of rest is a 2 way list:((first...) ( second...))
(if (< (car num-list) pivot)
(list (cons (car num-list) (car split-of-rest)) ;put x into first list
(cadr split-of-rest))
(list (car split-of-rest) ;put x into second list
(cons (car num-list)(car (cdr split-of-rest))))
))))
(define (quicksort num-list)
(if (<= (length num-list) 1) num-list
(let ((split (partition (car num-list) (cdr num-list))))
(append (quicksort (car split)) ;smaller
(list (car num-list)) ;pivot
(quicksort (cadr split) ;larger
)))))
(define test (lambda (case expr )
(begin
(if (eqv? expr #t)
(write (cons case "complete" ))
(write (cons case "failed" ))
) (newline)
)))
;execute testCase:
(test "fib is fibonacci function:" (equal? (fib 8) 21) )
Bresenham's circle algorithm, also called midpoint circle algorithm, is an algorithm used to determine the points needed for drawing a circle.
The reason of using this algorithm is, when drawing circle, we need to calculate the floating point numbers of each coordinate points, which may be slow when processing multiple objects.
This method provides a simplified way to draw the circle by estimating the midpoint of arcs.
so, we can calculate the distance from M to circumference by the formula:
Rd = r - Rm
if Rd < 0, M is outside the circle,
if Rd > 0, M is inside the circle.
from x^2 + y^2 = r^2,
we can know that
Xm^2 + Ym^2 - Rm^2 = Xm^2 + Ym^2 - (r - Rd)^2 = 0
therefore, we can Defined D(M) = Xm^2 + Ym^2 - r^2 = Rd^2 - 2Rd = Rd(Rd -2)
because midpoint will be close to the circle, we can ignore the case when Rd > 2.
So if D(M) > 0,Rd < 0 ,M is outside the circle , NW should be chooses
if D(M) < 0,Rd > 0 ,M is inside the circle , N should be chooses
We can get the algorithm as below in javascripts:
var drawCircle = function(ctx , x , y , r){
var cx = r;
var cy = 0;
//init draw 4 points on top,right,left and bottom.
init(ctx,x,y,r);
//we only need to calculate 1/8 of the arcs,
//that is when angle = 45degree, cx = xy
while(cx > cy){
if(cx*cx + cy*cy -r*r > 0){ // D(M) , if D(M) > 0, NW(x-1,y+1) is chooses
cx--;
}
cy++;
//draw point and mirrow the points to other 7 places on circle
mirrowing(ctx,x,y,cx,cy);
}
}
The algorithm is fast now and without any floating points,
but we can optimize more by simplify the calculation of D(M)
for each D(M) = D(x-1/2,y) = x^2 - x +1/4 + y^2 -r^2
the next D(M
so we can get the difference of each level of D(M), dy = 2y + 1
let D(M
also, don't forget when the D(M) > 0 , we should move x too,
so D(M
= D(M) -2x +2 +2y +1
so we can get the difference when x moved: dx = -2x +2
for the optimize above we can get the new algorithm:
var drawCircle = function(ctx, x, y, r){
// d start from D(M) = r^2 - r^2 + r-1/4 = r- 1/4 , but we can ignore constant because r>1/4
var d = r;
var dx = (-2) * r; //dx = -2x +2 , constant move to loop
var dy = 0; //dy = 2y + 1 , constant move to loop
var cx = r; //starting point:
var cy = 0;
init(ctx,x,y,r);
while(cx > cy){
if(d > 0){
cx--;
d += (-2)*cx + 2;
}
cy++;
d += 2*cy + 1;
mirrowing(ctx,x,y,cx,cy);
}
}