Eredmény: 1 - 4 (4) összesen

Téma: blogspot, blogger popup javascriptben

  1. #1
    Bölcs uniquevisitor logója
    Csatlakozott
    08-07-25
    Hozzászólás
    823
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás blogspot, blogger popup javascriptben

    sziasztok

    Találtam egy jó popup szkriptet a blogspothoz. Mit kellene átírni benne, hogy alapból úgy működjön, mint az első kattintásra? Az lenne a jó, hogy az oldal betöltése után később úszna be.

    köszönöm a segítséget, remélem másnak is hasznos lesz a szkript.

    Kód:
    <style type="text/css">
    #gb{
    position:fixed;
    top:10px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    
    
    .gbcontent{
    float:right;
    border:2px solid #A5BD51;
    background:#ffffff;
    padding:10px;
    }
    </style>
    
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    
    <div id="gb">
    
    <div class="gbtab" onclick="showHideGB()"> </div>
    
    <div class="gbcontent">
    
    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    .:[Click 2 times to close this ad]:.
    </a>
    </div>
    <center>
    
    Insert the ad code or image or anything you want here!
    
    </center>
    
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.center = (30-gb.offsetWidth).toString() + "px";
    </script></center></div></div>




  2. #2
    Tag
    Csatlakozott
    11-09-09
    Hozzászólás
    65
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: blogspot, blogger popup javascriptben

    Köszi szépen, ez nagyon jó!

    Hogy tudnám úgy pozicionálni, hogy az oldal közepén jelenjen meg?



  3. #3
    Törzsvendég zistvan logója
    Csatlakozott
    11-05-07
    Hozzászólás
    112
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: blogspot, blogger popup javascriptben

    Használjatok jQuery-t, egyszerűbb lesz az élet.

    Ha középre kell pozicionálni valamit, akkor én mindig úgy csinálom, hogy nem statikus pozicionálású legyen (tehát fix, absolute vagy relative). Majd left: 50%; a "margin-left" pedig negatív értékben a komplett szélesség (tehát padding és border és margin is) fele. Függőleges esetben ugyanígy, csak ott "top" és "margin-top".

    Kód:
    <html>
    <head>
    <style type="text/css">
    	#stuff{
    		position: fixed;
    		width: 300px;
    		height: 100px;
    		padding: 15px;
    		border: 1px solid yellow;
    		background: red;
    		left: 50%;
    		margin-left: -166px; /*(1 + 15 + 300 + 15 + 1) / 2*/
    		top: 50%;
    		margin-top: -66px; /* (1 + 15 + 100 + 15 + 1) / 2 */
    	}
    </style>
    
     
    </script> 
    
     
    </head>
    <body>
    	<div id="stuff"></div>
    </body>
    </html>
    Persze, ha nem tudod előre, hogy mekkora lesz a méret, akkor lekérdezed futási időben.



  4. #4
    Törzsvendég zistvan logója
    Csatlakozott
    11-05-07
    Hozzászólás
    112
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: blogspot, blogger popup javascriptben

    Idézet tiborg eredeti hozzászólása Hozzászólás megtekintése
    sziasztok
    Mit kellene átírni benne, hogy alapból úgy működjön, mint az első kattintásra? Az lenne a jó, hogy az oldal
    Nem szoktam hagyományos JavaScriptet bogarászni, csak ha nagyon muszáj. jQuery-t ajánlom, ahogy az előzőben is írtam. Egy nagyon kicsit átírtam a tiédet, csúnya megoldás, de nagyjából el tudsz vele indulni.

    Kód:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    
    <style type="text/css">
    #gb{
    position:fixed;
    top:-1000px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    
    
    .gbcontent{
    float:right;
    border:2px solid #A5BD51;
    background:#ffffff;
    padding:10px;
    }
    
    #button{
    	position: fixed;
    	width: 100px;
    	height: 100px;
    	background: orange;
    	top: 0px;
    	right: 0px; 
    }
    </style>
    
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    
    
    <script type="text/javascript" src="http://localhost:8080/BloggerUtils/js/other/PageRankChecker.js"></script>  
    <script type="text/javascript">  
    
     
    </script> 
    
     
    </head>
    <body>
    	<div id="button" onclick="showHideGB()"> </div>
    <div id="gb">
    
    <div class="gbtab" onclick="showHideGB()"> </div>
    
    <div class="gbcontent">
    
    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    .:[Click 2 times to close this ad]:.
    </a>
    </div>
    <center>
    
    Insert the ad code or image or anything you want here!
    
    </center>
    
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.center = (30-gb.offsetWidth).toString() + "px";
    </script></center></div></div>
    </body>
    </html>
    Most egy gombnyomásra működik úgy, mint a 2. kattintásra. Ezt átírhatod úgy, hogy a dokumentum legvégén meghívod a funkciót(showHideGB). A gombot csak azért tettem bele, hogy tesztelni tudd.

    Amit megváltoztattam:
    • új "button" elem, és hozzá style + eseménykezelés
    • a #gb top értéke -1000px, hogy ne látszódjon




    Utoljára módosítva: zistvan által : 2011-10-24 16:09

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •