Overlay div med jquery

Tyckte koden var väldigt lätt... och tycker fortfarande att det uppfyller de krav du skrev i första posten. Men men.. måste väl ha missförstått vad du är ute efter..

Rapportera Redigera

Citera flera Citera

2010-03-04 21:38

Permalänk

azoapes

Medlem

Plats: Göteborg
Registrerad: Jun 2004

●

Detta ska fungera i alla riktiga webbläsare:

<div id="overlay">
    Lägg inte innehållet här, opacity går inte ärva bort
</div>

#overlay {
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: black; /* eller #fff för vitt */
    opacity: 0.6; filter: alpha(opacity=60); /* IE */
    z-index: 10; /* behövs ev. beroende på struktur */
}

Varför ska du stödja IE6, är det ett intranät som ska köras på WinXP och IT-avdelningen orkar inte uppdatera, eller? Det finns ingen anledning längre att stödja IE6, de flesta stora sajter såsom Google, YouTube, Facebook etc. har släppt stödet. Säg det till kunden, och ta rejält med extra betalt för att stödja IE6.

Hur som helst, lösningen för IE6 är att byta ut fixed mot abolute, vilket dock inte fungerar om man scrollar sidan nedåt. Den petitessen går att lösa med JS/jQ, men då blir sidan långsammare för IE6-användaren än vad användaren tjänar på att man har löst det.

Varför blanda in jQuery i rubriken? Det spelar ingen roll om det är med JS eller ett JS-ramverk du aktiverar lagret med. Det enda jQuery hjälper dig med är att manipulera HTML och CSS, det kan inte magiskt skapa ett lager. jQuery använder du såhär i denna situation iaf:

$('#overlay').show();
$('#overlay').hide();

Visa signatur

På SoundCloud | Fästmöns galleri

Rapportera Redigera

Citera flera Citera

2010-03-04 23:41

Permalänk

CyberVillain

Avstängd

Plats: Stockholm
Registrerad: Dec 2003

●

Citat:

Ursprungligen inskrivet av azoapes
Det enda jQuery hjälper dig med är att manipulera HTML och CSS, det kan inte magiskt skapa ett lager.

Det vet jag väll, men det finns många snippets för jquery, samt att ska man få det att funka i IE6 måste man använda JS samt att javascriptklassen detta ska implementeras i är redan skriven i jquery.

Visa signatur

Min blogg

Rapportera Redigera

Citera flera Citera

2010-03-05 08:43

Permalänk

BlueEyes

Medlem

Plats: Västerås
Registrerad: Jun 2005

●

Citat:

Ursprungligen inskrivet av azoapes
Varför blanda in jQuery i rubriken? Det spelar ingen roll om det är med JS eller ett JS-ramverk du aktiverar lagret med. Det enda jQuery hjälper dig med är att manipulera HTML och CSS, det kan inte magiskt skapa ett lager.

Tycker nog att du är ute på lite djupt vatten nu och vet inte vad du pratar om.

Du kan mycket väl skapa exakt samma CSS kod och koppla ihop den med ett element på en sida med hjälp av jQuery.

ta en titt på CSS relaterade metoderna i jQuery.

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-03-05 10:25

Permalänk

azoapes

Medlem

Plats: Göteborg
Registrerad: Jun 2004

●

Citat:

Ursprungligen inskrivet av BlueEyes
Tycker nog att du är ute på lite djupt vatten nu och vet inte vad du pratar om. Du kan mycket väl skapa exakt samma CSS kod och koppla ihop den med ett element på en sida med hjälp av jQuery.

Du räknar alltså hellre med att jag inte vet vad jag pratar om, än att du inte har förstått mig? Jag är inte ute på djupt vatten; förutom att jag jobbar dagligen med JS som webbutvecklare är jag anställd som konsult för att ta fram kursinnehållet för en ny utbildning i gbg, titulerad front-end-utveckling. När den startar kommer jag kanske hålla i ett par kurser.

Javisst, man kan starta med tom <body> och skapa upp hela DOM för sidan med jQ, samt applicera inline-CSS på elementen med jQ. Och detta även med vanlig JavaScript. Men oavsett hur du vrider och vänder på jQuery kommer du aldrig kunna göra mer än att manipulera DOM (förutom några interna finesser såsom data() och AJAX-hantering). jQ ändrar bara inline-CSS i DOM och kan ta bort/lägga till element i DOM.

Poängen är att vad man än ska göra i jQ måste man veta hur man gör detta i HTML och CSS. Vet man inte det, har man heller ingen nytta av jQ. Att manipulera DOM med jQ är inte detsamma som att anropa en funktion createDarkLayerForMe(); Och anledningen till att jag tog upp det i denna tråd var att trådskaparen frågade hur man gör detta "i jQuery", när det han egentligen frågade efter var HTML och CSS för ett bakgrundslager. Sen kanske han iofs behöver hjälp med själva implementeringen, det återstår att se.

Visa signatur

På SoundCloud | Fästmöns galleri

Rapportera Redigera

Citera flera Citera

2010-03-06 19:38

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Boxy är kompatibelt med IE6 och kan användas till de flesta scenarion med overlays, dock har den problem med PNG i själva popuprutan för IE6, annars har jag inte haft några problem med denna eminenta plugin.
http://onehackoranother.com/projects/jquery/boxy/

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-03-10 22:45

Permalänk

CyberVillain

Avstängd