blogspot, blogger popup javascriptben

**uniquevisitor** · 2011-09-10, 09:43

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>

Hasonló témák:

**ToNick** · 2011-10-23, 22:32

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

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

**zistvan** · 2011-10-24, 14:48

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.

**zistvan** · 2011-10-24, 15:06

tiborg eredeti hozzászólása

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

Téma: blogspot, blogger popup javascriptben

Téma eszközök

Display

blogspot, blogger popup javascriptben

re: blogspot, blogger popup javascriptben

re: blogspot, blogger popup javascriptben

re: blogspot, blogger popup javascriptben

A téma címkéi:

Könyvjelzők

Könyvjelzők

Hozzászólás szabályai