I have created a magnifier plugin for jQuery 1.7 or above that zoom html elements.
If you need legacy support replace “on” with “bind” in the source code.
Webkit browsers get a square magnify window because it doesn’t clip content with border-radius and overflow:hidden.
Usage:
$(target).mnoZoom({
source: element | CSS query | jQuery object,
background:'#ffffff',
shadow:'0 0 10px rgba(0,0,0,.8)',
border:'1px solid #999',
magnifySize:300 // size in pixels
});
Our online newspapers have experienced chrome crashes when a user open multiple tabs. The crash is caused by Flash and it is a quite common problem
We have used -webkit-transform:translateZ(0); to turn on hardware acceleration in Webkit browsers, but hardware acceleration seams to work bad with Flash. Probably because Flash also use hardware acceleration and because Chrome opens a new process for each tab. Flash doesn’t run in multiple processes.
Removing the CSS-property fixes the problem.
Testing position fixed for iphone can be a problem. If created the following script to test for position fixed. It seams to work, but please provide feedback in the comments.
var IOS_FIXED_POSITION;
window.onload = function () {
if (typeof document.body.scrollIntoViewIfNeeded === 'function') {
(function () {
var runTest = false,
container = document.body,
el = document.createElement('div'),
originalHeight = container.style.height,
originalScrollTop = window.pageYOffset;
testScrollTop = 20;
el.style.cssText = 'position:fixed;top:0px;height:10px;';
container.appendChild(el);
container.style.height="3000px";
window.addEventListener('scroll', testScrollTop, false);
window.setTimeout(testScroll, 20);
window.scrollTo(0,testScrollTop );
function testScroll() {
if (IOS_FIXED_POSITION === undefined) {
el.scrollIntoViewIfNeeded();
if (window.pageYOffset === testScrollTop) {
IOS_FIXED_POSITION = true;
} else {
IOS_FIXED_POSITION = false;
}
}
window.removeEventListener('scroll', testScroll, false);
container.style.height=originalHeight;
container.removeChild(el);
window.scrollTo(0,originalScrollTop);
}
}());
} else {
IOS_FIXED_POSITION = false;
}
}
Some fonts in Firefox for Windows have jagged edges with cleartype turned on. This is a result of poor hinting.
The problem cannot be fixed by other than Mozilla, but we can improve the result a bit with svg-filters.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fake antialiasing in Firefox</title>
<link href='http://fonts.googleapis.com/css?family=Metrophobic' rel='stylesheet' type='text/css'>
<svg xmlns="http://www.w3.org/2000/svg" height="0">
<filter id="antialias">
<feMorphology operator="dilate" in="SourceAlpha" radius="1" result="expand" />
<feMorphology operator="erode" in="expand" radius="1" result="expand" />
<feGaussianBlur stdDeviation="1" in="SourceAlpha" result="blur"/>
<feComposite in2="blur" in="expand" operator="in" />
</filter>
</svg>
<style>
.fakeAntiAlias { filter:url(#antialias); }
h1 { font-family: 'Metrophobic', sans-serif;font-size:50px; font-weight:bold;}
</style>
</head>
<body>
<h1 class="fakeAntiAlias">Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>
</body>
</html>
Vi ønsker å bli bedre på “framsie” utvikling i Media Norge Digital (MND). Vi lager nye og spennende tjenester for avisene Aftenposten, Bergens Tidende, Fædrelandsvennen og Stavanger Aftenblad.
Har du en designer i magen, digger å jobbe med det som vises til brukerne og samtidig en glød for nyheter i alle kanaler (nå fokuserer vi mest på nett, mobil og nettbrett), så ta kontakt.
Har du innspill, spørsmål eller bare lyst til å snakke med oss som jobber i MND, ta kontakt med @mnobeta eller oss som skriver her, @torchestra eller @andrefoynb
Her er annonsen fra FINN:
Skjermdump fra FINN.no
Les mer hos FINN om stillingen
Har lagt ut presentasjonen fra JavaScript-kurset.
Virker kun i de nyeste nettleserne. Jeg regner med du vet hvordan du oppdaterer 
Oppdatert: Nå med video fra konferansen :
Mobilism Conference 2011 from Frank Zijlstra on Vimeo.
I 2 dager nå har vi deltatt på konferansen Mobilism i Amsterdam. Det var en lineup av mer eller mindre kjente folk fra mobil-frontend-verden. Her er konferansens program. Jquery kjendisen John Resig kunne desverre ikke komme, men det var store folk som Luke Wroblewski (Mobile First), Brian Leroux(PhoneGap), Steve Souders (Performance) og arrangert av Peter-Paul Koch (quirksmode.org)
Konferanse lokalet
Vi har lyst til å dele noen av de nyttige verktøyene som dukket opp under denne konferansen. Sliter dere med ytelse, caching eller kanskje DOM traversering på en device, kanskje vi kan hjelpe litt. Dette er ikke breaking news, bare litt folkeopplysning for mobil utviklere og utviklere nysgjerrig på mobil.
Vi skriver mye css og javascript, som er device avhengig. Hvilke features er det på den enkelte device, og hvordan funker css’en for dette. Verktøyet jeg bruker mest, er User Agent Switcher for Firefox med FireBug . Problemet er når det dukker opp på devicen, hva skjer egentlig med DOM’en og hvilken css kicker inn. Sjekk da ut Weinre. Det er en remote debugger for mobile devicer. Her kan du kjøre en remote test site, samtidig som du kan traverse CSS på DOM, og sjekke ferdig rendret HTML. Veldig nyttig.
Picture from: http://pmuellr.github.com/weinre/
Prøver du å finne hvilke css og html elementer som støttes i forskjellige nettlesere, så anbefales quirksmode.org sin kompatibilitets liste. I tillegg legger han ut nyttige slides på bloggen sin, bla. annet siste fra hans USA lectures
Steve Souders om ytelse på mobil
Kommer flere etterhvert
Sjekk ut hele twitter streamen om #mobilsm konferansen
Dette blogginnlegget vil bli oppdatert etterhvert som jeg får samlet sammen all info fra konferansen.
I recently found a strange webkit bug when I used a negative top margin to position a floated element.
I float an element to the left and gives the outer wrapper element a top margin of ex. 100px. Then I give the inner child wrapper a negative margin-top of 100px to push the floated element down. In most modern browsers this works, but in Chrome and Safari we can see a hole where the floated element would have been without the negative margins. The floated element further down looks fine.
[example] (test with a webkit browser)
The “fix” is a strange one. I insert an empty floated div before the inner child wrapper and the phantom float disappears.
Strange bug with Silverlight.
I have created a slideshow using the css transform property and translateX to move between the content items. If Silverlight is initialised without windowless = true, it disappears.
To show Silverlight after applying a css transform I had to use:
<param name="windowless" value="true" />
Hope this helps if anyone encounters the same bug.
UPDATE: Got the same problem with disqus. Applied position relative to disqus container and the problem is “fixed”
Nå blir det full fart på mobil og brett, og vi trenger folk!
Vi er på jakt etter 4 personer:
Vil du bli med på den mest spennende satsningen fra Media Norge Digital, så sleng inn en søknad nå.
Lurer du på hvordan det er å jobbe her eller vil du vite litt om hvilke teknologier vi driver med, ta kontakt med meg på twitter (@andrefoynb).
Andre spørsmål om stillingen kan tas til konserndirektør i Media Norge: Stig A. Waagbø
Her er stillingstekstene:
