Priesvitny ramcek z vrchu stranky po nacitani

**it47** · 27.01.2012 13:10

Ahojte,

viete mi prosim poradit, ako najefektivne spravit priesvitny ramcek so sirkou na 100%,
tak ze sa zobrazi hned po nacitani stranky a bude tam aj moznost krizika, cim sa
ramcek zrusi?

Posielam ukazku, ako by som si to predstavoval:
http://imageshack.us/photo/my-images...yramcek01.png/

Dakujem velmi pekne za pomoc.

it47

Schenk poptává: Vytvoření internetového katalogu
Ondra21 poptává: Vytvoření publikačního rozhraní pro Facebook
Vencacb poptává: Joomla - Virtuemart

**800XE** · 27.01.2012 13:36

Třeba takhle:

Kód:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Test
        </title>
        <meta charset="utf-8" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(function() {
                $('#info .close').on('click', function() {
                    $(this).parent().fadeOut(250);
                });
            });
        </script>
        <style>
            #info {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                border: 1px solid #000000;
                line-height: 18px;
                font-size: 14px;
                background: rgba(255, 252, 207, 0.9);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -o-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            }
            
            #info .content {
                padding: 4px;
                margin-right: 26px;
            }
            
            #info .close {
                position: absolute;
                top: 5px;
                right: 5px;
                width: 16px;
                height: 16px;
                background: #000000;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="info">
            <div class="content">
                Bla bla bla bla bla bla bla bla bla bla bla bla
            </div>
            <div class="close"></div>
        </div>
    </body>
</html>

Ikonu křížku už si musíš sehnat sám.

**it47** · 27.01.2012 14:02

Původně odeslal 800XE

Třeba takhle:

Kód:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Test
        </title>
        <meta charset="utf-8" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(function() {
                $('#info .close').on('click', function() {
                    $(this).parent().fadeOut(250);
                });
            });
        </script>
        <style>
            #info {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                border: 1px solid #000000;
                width: 100%;
                line-height: 18px;
                font-size: 14px;
                background: rgba(255, 252, 207, 0.9);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -o-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            }
            
            #info .content {
                padding: 4px;
                margin-right: 26px;
            }
            
            #info .close {
                position: absolute;
                top: 5px;
                right: 5px;
                width: 16px;
                height: 16px;
                background: #000000;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="info">
            <div class="content">
                Bla bla bla bla bla bla bla bla bla bla bla bla
            </div>
            <div class="close"></div>
        </div>
    </body>
</html>

Ikonu křížku už si musíš sehnat sám.

Dakujem velmi pekne, velmi si mi pomohol.

Este by som mal zopar otazok:

1.) da sa nejako jednoducho spravit to, ze ked ten ramcek zrusim krizikom, tak pri dalsom nacitani stranky sa mi uz neotvori, ale bude tam moznost zakliknut ze otvorit a az vtedy otvori? Asi nejaka cookies by sa hodila, ale to netusim ako spojit s JS. A mozno existuje este nieco lepsie.

2.) ta priesvitnost nefunguje v IE 7 ;-((( Je to asi CSS3, a teraz v IE je ten ramcek biely. Neda sa to nejako osetrit? Pripadne, nech v IE nie je priesvitny, ale nech je aspon zlty.

Dakujem, velmi si to vazim.

**800XE** · 27.01.2012 14:24

1) Stáhni si nějaký plugin pro cookies a po zavření nastav cookie jako identifikátor, že už si uživatel info přečetl. Pro #info nastav display: none; a do JS přidej funkci pro otevření infa, která zkontroluje, jestli už info není otevřené($('#info').is(':visible')) a pokud ne, tak ho zobrazí(třeba pomocí $('#info').fadeIn(250);). Po načtení stránky zkontroluj, jestli je natavená cookie a jestli ne, tak zavolej funkci pro zobrazení. Tu samou funkci ale už bez kontroly cookie volej i po kliknutí na tlačítko pro otevření infa.

2) Buď místo rgba použij background: #fffccf; opacity: 0.9; a pro starší IE filter: alpha(opacity=90); nebo si stáhni pie.htc a do stylů pro #info přidej -pie-background: rgba(255, 252, 207, 0.9); behavior: url(pie.htc);.

**it47** · 27.01.2012 17:53

Původně odeslal 800XE

1) Stáhni si nějaký plugin pro cookies a po zavření nastav cookie jako identifikátor, že už si uživatel info přečetl. Pro #info nastav display: none; a do JS přidej funkci pro otevření infa, která zkontroluje, jestli už info není otevřené($('#info').is(':visible')) a pokud ne, tak ho zobrazí(třeba pomocí $('#info').fadeIn(250);). Po načtení stránky zkontroluj, jestli je natavená cookie a jestli ne, tak zavolej funkci pro zobrazení. Tu samou funkci ale už bez kontroly cookie volej i po kliknutí na tlačítko pro otevření infa.

2) Buď místo rgba použij background: #fffccf; opacity: 0.9; a pro starší IE filter: alpha(opacity=90); nebo si stáhni pie.htc a do stylů pro #info přidej -pie-background: rgba(255, 252, 207, 0.9); behavior: url(pie.htc);.

vies odporucit nejaky plugin pro cookies? vopred vdaka.

**800XE** · 27.01.2012 18:03

Kód:

cookies = {
  
    /**
     * Nastaví cookie
     *
     * @param name       Jméno
     * @param value      Hodnota
     * @param expiration Počet dní pro uchování cookie (nepovinný)
     */
    set: function(name, value, expiration) {
        var date = new Date();
        date.setDate(date.getDate() + expiration);
        expiration = !expiration ? '' : ';expires=' + date.toUTCString();
        document.cookie = name + '=' + escape(value) + expiration;
    },
  
    /**
     * Vrací hodnotu cookie
     *
     * @param name Jméno
     */
    get: function(name) {
        if (document.cookie.length) {
            var start = document.cookie.indexOf(name + '=');
            if (start != -1) {
                start += name.length + 1;
                end = document.cookie.indexOf(';', start);
                if (end == -1)
                    end = document.cookie.length;
                return unescape(document.cookie.substring(start, end));
            }
        }
        return null;
    }
};

Nastavení hodnoty:

Kód:

cookies.set('jméno', hodnota);

Zjištění hodnoty:

Kód:

cookies.get('jméno')

**it47** · 27.01.2012 18:10

ok, a tak cookies bude pristupna na vsetkych domenach? teda ked to nastavim na www.domena1.sk, pojdeto aj na www.domena2.sk?
Totizto, tak by som to potreboval.

**800XE** · 27.01.2012 18:18

ok, a tak cookies bude pristupna na vsetkych domenach? teda ked to nastavim na www.domena1.sk, pojdeto aj na www.domena2.sk?

Ne, takhle to nefunguje.

**it47** · 27.01.2012 18:38

A exituje nejake riesenie mojho problemu?

**800XE** · 27.01.2012 18:56

Dalo by se to řešit tak, že cookies budeš ukládat jenom na jedné doméně a z ostatních posílat dotazy.

**it47** · 28.01.2012 21:54

to pie.htc funguje tak, ze ked tam pred vsetky tagy v CSS "-pie-" tak to pojde aj v IE? Pojde to aj v ostatnych prehliadacoch, co nepodporuju CSS3?

Vopred vdaka.

**800XE** · 28.01.2012 22:09

to pie.htc funguje tak, ze ked tam pred vsetky tagy v CSS "-pie-" tak to pojde aj v IE?

Co vím, tak ten prefix je potřeba jenom pro background, u ostatních vlastností jako border-radius nebo box-shadow ho psát nemusíš. Takže by to mělo vypadat takhle:

Kód:

#info {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border: 1px solid #000000;
    line-height: 18px;
    font-size: 14px;
    background: rgba(255, 252, 207, 0.9);
    -pie-background: rgba(255, 252, 207, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    behavior: url(pie.htc);
}

Pojde to aj v ostatnych prehliadacoch, co nepodporuju CSS3?

PIE je určený pro IE6/7/8 a částečně pro IE9.

Priesvitny ramcek z vrchu stranky po nacitani

Nástroje témat

Co se právě děje na Webtrhu?

Podobná témata

Najnovšie na vrchu

Nacitani hesla do Cronu

Test rychlosti nacitani stranek