JS i ascx :|

raindog · 03.01.2007

imam jedan problem a nisam dovoljno upucen u JS.
u ovom dolenavedenom kodu koristi se "expression" ali on nije podrzan od strane FireFoxa pa mi to pravi probleme:

Kod:

<div id="balloon" align="left" style="position:absolute; 
top: expression(<%=y%>+<%=imageId%>.offsetTop); 
left:expression(<%=x%>+<%=imageId%>.offsetLeft); width:<%=width%>; 
height:<%=height%>; z-index:1">

e sad kako da zamenim ovo sad nekom JS funcijom ili negde da napravim neku promenljivu pa da je napunim ili sta god samo da ne korsitim ovaj expression. dakle nesto kao:

top: mojaFunkcijaKojaVracaVrednost()

ili bilo koja sugestija je dobro dosla.

skipper · 04.01.2007

CSS standard za sada ne dozvoljava upotrebu nikakvog jezika pa čak ni prostih promenljivih prilikom definisanja vrednosti nekog svojstva. Majkrosoft je van svakog standarda omogućio upotrbu JavaScripta u CSS-u i zato to radi samo u IE 5.0+. To je ova sintaksa "top:expression(neki JS ovde);"
Dakle u Firefoxu, Operi, itd... ovo ne radi. Koliko vidim ovaj kod određuje poziciju prozora u
zavisnosti od pozicije slike(koja opet zavisi od rezolucije korisnika). Možda bi neko rešenje bilo klasičan pop-up prozor...

raindog · 04.01.2007

skipper je napisao(la):
CSS standard za sada ne dozvoljava upotrebu nikakvog jezika pa čak ni prostih promenljivih prilikom definisanja vrednosti nekog svojstva. Majkrosoft je van svakog standarda omogućio upotrbu JavaScripta u CSS-u i zato to radi samo u IE 5.0+. To je ova sintaksa "top:expression(neki JS ovde);"
Dakle u Firefoxu, Operi, itd... ovo ne radi. Koliko vidim ovaj kod određuje poziciju prozora u
zavisnosti od pozicije slike(koja opet zavisi od rezolucije korisnika). Možda bi neko rešenje bilo klasičan pop-up prozor...

moze li malo neko detaljnije objasnjenje kako da odraim to sa pop-up prozorom. ovaj kod inace pozicionira sliku text balona (kao u stripovima) na slici.

skipper · 05.01.2007

Sad znam šta tražiš....
Evo ga primer pokazivanja i skrivanja div tag-a(komentar).

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<style type="text/css">
.popup {
	position: absolute;
	background-color:#FFFF99;
        padding :10px;
	width :auto;
	display: none;
}
</style>
<script language="javascript">
function pokazi(id){
	document.getElementById(id).style.display='block';   
	}
function ukloni(id) {
	document.getElementById(id).style.display ='none';
	}
</script>
<a href="#" onmouseover="pokazi('komentar')" onmouseout="ukloni('komentar')">Test</a>
<div id="komentar" class="popup">Ovo je test</div>
</body>
</html>

Snimi kao *.htm pa pogledaj.Ovo gore možeš prepraviti lako za bilo koji tag (img).Ukoliko je potrebno da se pojavljuje u određenom delu, igraj se malo sa svojstvom top i left.

raindog · 05.01.2007

skipper je napisao(la):
Sad znam šta tražiš....
Evo ga primer pokazivanja i skrivanja div tag-a(komentar).

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <style type="text/css"> .popup { position: absolute; background-color:#FFFF99; padding :10px; width :auto; display: none; } </style> <script language="javascript"> function pokazi(id){ document.getElementById(id).style.display='block'; } function ukloni(id) { document.getElementById(id).style.display ='none'; } </script> <a href="#" onmouseover="pokazi('komentar')" onmouseout="ukloni('komentar')">Test</a> <div id="komentar" class="popup">Ovo je test</div> </body> </html>

Snimi kao *.htm pa pogledaj.Ovo gore možeš prepraviti lako za bilo koji tag (img).Ukoliko je potrebno da se pojavljuje u određenom delu, igraj se malo sa svojstvom top i left.

u ovom primeru ti ni ne koristis top i left?!

skipper · 05.01.2007

Mislio sam da u popup selektor ubaciš svojstvo top i left, znači ovako

Kod:

.popup {
	position: absolute;
        top:100px;
        left:50px;
	background-color:#FFFF99;
        padding :10px;
	width :auto;
	display: none;
}

Tada bi div tag "komentar" bio pomeren.Ovde je problem što je on tada statičan, tj. ne možeš ga pomerati.Uz malo JS može se i to popraviti..

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<style type="text/css">
.popup {
	position: absolute;
	background-color:#FFFF99;
        padding :10px;
	width :auto;
	display: none;
	
}
</style>
<script language="javascript">
function pokazi(id,top,left){
	with(document.getElementById(id)){
    style.display='block';   
	  style.top=top+"px";
	  style.left=left+"px";
	}
	}
function ukloni(id) {
	document.getElementById(id).style.display ='none';
	}
</script>
<a href="#" onmouseover="pokazi('komentar',100,50)" onmouseout="ukloni('komentar')">Test</a>
<div id="komentar" class="popup">Ovo je test</div>
</body>
</html>

Dakle sada pri pozivu funkcije pokaži prosleđuješ vrednosti za top i left(koje su u ovom primeru konstante), tako da se "komentar" javlja na različitim mestima zavisno od ovog "100" i "50".Naravno sada nije potrebno da u selektoru body imaš svojsvo top i left, njega dodaje JS.
Umesto vrednosti 100 i 50 mogu biti promenljive koje se izračunavaju na osnovu pozicije neke slike, dugmeta, pozicije miša.......

raindog · 14.02.2007

sorry sto dugo nisam pisao nije mi stigao mail o ovom postu a u medjuveremnu imao sam druge stvari.

meni je da budem tacan problem ovaj:
http://www.simplesite.com/tibord/6263582?i=6767676

kao sto vidis baloni su dole u levom donjem uglu kada se otvori i FF-a a preko IE-radi bas zbog tog expressiona

a ceo code od ascx stranice izlgeda ovako:

Kod:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="taleBobbel.ascx.cs" Inherits="elk.hp.templates.taleBobbel" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Import namespace="elk.hp.publicsite.logic" %>
<!--- Start bobbel --->
<!-- div id="balloon" style="position:relative; top:<%=y%>; left:<%=x%>; width:<%=width%>; height:<%=height%>; z-index:1" -->
<div id="balloon" align="left" style="position:absolute; top: expression(<%=y%>+<%=imageId%>.offsetTop); left:expression(<%=x%>+<%=imageId%>.offsetLeft); width:<%=width%>; height:<%=height%>; z-index:1">
<img name="balloonimage" id=balloonimage src="<%=((StandardPage)Page).appPath%>images/balloons/<%=shape%>-<%=size%>-<%=direction%>.gif" style="position:absolute; z-index:2" width="<%=width%>" height="<%=height%>">
<table id="balloontable" border=0 width=<%=width%> height=<%=height%> style="position:relative; left:0; top:0; z-index:3; table-layout:fixed" cellpadding=0 cellspacing=0>
	<tr height="<%=src.top%>">
		<td id=frontcell rowspan=3 width="<%=src.frontcell%>"></td>
		<td></td>
		<td id=backcell rowspan=3 width="<%=src.backcell%>"></td>
	</tr>
	<tr>
		<td valign=middle align=center>
			<!-- center -->
				<div id=balloontextplace>
					<%=text%>
				</div>
			<!-- /center -->
		</td>
	</tr>
	<tr height="<%=src.bottom%>">
		<td>
		</td>
	</tr>
</table>
</div>
<!--- End bobbel --->

meni ovaj java skript bas ne ide :wall: pa ako ti nije tesko please pomozi

skipper · 15.02.2007

Napisao sam ovo na brzinu......
Prepravi stranicu ovako

Kod:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="taleBobbel.ascx.cs" Inherits="elk.hp.templates.taleBobbel" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Import namespace="elk.hp.publicsite.logic" %>
<!--- Start bobbel --->
<!-- div id="balloon" style="position:relative; top:<%=y%>; left:<%=x%>; width:<%=width%>; height:<%=height%>; z-index:1" -->
<script language="javascript">
function postavi(){
	with(document.getElementById("balloon")) {
		style.position='absolute';
		style.top= <%=y%>+<%=imageId%>.offsetTop + "px";
		style.left= <%=x%>+<%=imageId%>.offsetLeft + "px";
		style.width= <%=width%> + "px";
		style.height= <%=height%> + "px";
		style.z-index = 1;
	}
}		
</script>
<div id="balloon" align="left">
<img name="balloonimage" id=balloonimage src="<%=((StandardPage)Page).appPath%>images/balloons/<%=shape%>-<%=size%>-<%=direction%>.gif" style="position:absolute; z-index:2" width="<%=width%>" height="<%=height%>">
<table id="balloontable" border=0 width=<%=width%> height=<%=height%> style="position:relative; left:0; top:0; z-index:3; table-layout:fixed" cellpadding=0 cellspacing=0>
	<tr height="<%=src.top%>">
		<td id=frontcell rowspan=3 width="<%=src.frontcell%>"></td>
		<td></td>
		<td id=backcell rowspan=3 width="<%=src.backcell%>"></td>
	</tr>
	<tr>
		<td valign=middle align=center>
			<!-- center -->
				<div id=balloontextplace>
					<%=text%>
				</div>
			<!-- /center -->
		</td>
	</tr>
	<tr height="<%=src.bottom%>">
		<td>
		</td>
	</tr>
</table>
</div>
<!--- End bobbel --->

Koristio sam px kao jedinicu, ako su u pitanju druga ti promeni..

skipper · 15.02.2007

Ispravka!

Bas sam zbrzao...Nisam ni js funkciju pozvao :lupko: .
Ispravka......

Kod:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="taleBobbel.ascx.cs" Inherits="elk.hp.templates.taleBobbel" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Import namespace="elk.hp.publicsite.logic" %>
<!--- Start bobbel --->
<!-- div id="balloon" style="position:relative; top:<%=y%>; left:<%=x%>; width:<%=width%>; height:<%=height%>; z-index:1" -->
<div id="balloon" align="left">
<script language="javascript">
<!--
	with(document.getElementById("balloon")) {
		style.position='absolute';
		style.top= <%=y%>+<%=imageId%>.offsetTop + "px";
		style.left= <%=x%>+<%=imageId%>.offsetLeft + "px";
		style.width= <%=width%> + "px";
		style.height= <%=height%> + "px";
		style.zindex = 1;
	}
//-->		
</script>
<img name="balloonimage" id=balloonimage src="<%=((StandardPage)Page).appPath%>images/balloons/<%=shape%>-<%=size%>-<%=direction%>.gif" style="position:absolute; z-index:2" width="<%=width%>" height="<%=height%>">
<table id="balloontable" border=0 width=<%=width%> height=<%=height%> style="position:relative; left:0; top:0; z-index:3; table-layout:fixed" cellpadding=0 cellspacing=0>
	<tr height="<%=src.top%>">
		<td id=frontcell rowspan=3 width="<%=src.frontcell%>"></td>
		<td></td>
		<td id=backcell rowspan=3 width="<%=src.backcell%>"></td>
	</tr>
	<tr>
		<td valign=middle align=center>
			<!-- center -->
				<div id=balloontextplace>
					<%=text%>
				</div>
			<!-- /center -->
		</td>
	</tr>
	<tr height="<%=src.bottom%>">
		<td>
		</td>
	</tr>
</table>
</div>
<!--- End bobbel --->

Ovo snimi pa probaj..

raindog · 15.02.2007

hvala evo cim stignem probam. javim kako proslo

raindog · 15.02.2007

sa ovim kodom ne radi dobro ni u IE ni u FF. tj u FF ima napredka jer vise nije zapucano u dole ali se ni ne nalazi tamo gde treba.

iz kog si grada? koliko godina? cime se bavis?

ako mi ovo sredis moram da te castim nekako pa makar poslao nesto postom

skipper · 17.02.2007

Strana za raindoga.....

raindog · 21.02.2007

u ovom kodu sem dole ispod komentara "ispravka" i naziva balona gore jesi nesto jos promenio?

raindog · 21.02.2007

jos jedno pitanje... zasto ako se pozove na kraju kao u tvom primeru prozicioniranje radi kako treba i u IE i u FF a kad se pozove tamo iz dela gde se pravi bubble nece da radi tj IE pobrljavi a FF ga pomeri za par cm u desno.

problem je sto mogu namestiti sve ali malo problematicno jedino ovo da stavim da ovaj kod stoji na kraju strane kao u ovom hardcoded primeru sto si prikacio.

ima li neki nacin da stoji tamo negde gde si prvi put napisao, dakle posle ili u blizini
<div id="balloon" align="left">

raindog · 24.02.2007

prekljuce sam sredio sve da radi. pa ako neko ima slican problem neka mi se obrati na pm rado cu pomoci

Pretraga

Pretraga

JS i ascx :|

raindog

Čuven

skipper

Čuven

raindog

Čuven

skipper

Čuven

raindog

Čuven

skipper

Čuven

raindog

Čuven

skipper

Čuven

skipper

Čuven

raindog

Čuven

raindog

Čuven

skipper

Čuven

Prilozi

raindog

Čuven

raindog

Čuven

raindog

Čuven