☰

» »

JS efekt: prikazovanje skritega diva

JS efekt: prikazovanje skritega diva

PrimozBo ::

Kako bi naredil tak efekt kot je na strani od jquery-a. Sepravi se zapeleš čez nek element in nad njim se naredi okenček z dodatnimi informacijami ?

Sam bi rad isto dosegel da ko se zapelješ čez celico tabele, da pokaže dodatne informacije. Sedaj imam tkole, kaj moram dodati da bi tisti div plaval čez celico ? 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
	   		$("td").mouseover(function() {
	     		$(this).children().css("display","block")
	   		});
	 	});
		</script>
	</head>
	<body>
		<table border="2px" cellpadding="10px">
			<tr>
				<td>
					Ena
					<div class="skrit" style="display: none;">
						<p>Skruta vsebina 1</p>
					</div>
				</td>
				<td>
					Dva
					<div class="skrit" style="display: none;">
						<p>Skruta vsebina 2</p>
					</div>					
				</td>
				<td>
					Tri
					<div class="skrit" style="display: none;">
						<p>Skruta vsebina 3</p>
					</div>					
				</td>
			</tr>
		</table>
	</body>
</html>


Hvala in Lp

HardFu :: 

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
		<style type="text/css" media="screen">
			td {position:relative;}
			.skrit{position:absolute; border:1px solid red; background:#f1f1f1;}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
	   		$("td").mouseover(function() {
	     		$(this).children().css("display","block")
	   		});
			$("td").mouseout(function() {
	     		$(this).children().css("display","none")
	   		});
	 	});
		</script>
	</head>


Takole nekako (zamenjal sem se charset)
http://codeable.io

Zgodovina sprememb…

  • spremenil: HardFu ()

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Slo-Tech userscripts

Oddelek: Izdelava spletišč		175174 (2626) jype
»

[jQuery] Zamenjava sličic pri različnih stanjih miške

Oddelek: Programiranje		111449 (1096) kornilov
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč		8711268 (10006) lisjak
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61845 (1725) jonystar
»

Jquery toolptip ne deluje :(

Oddelek: Izdelava spletišč		132301 (2130) PrimozBo

Več podobnih tem