Форум

Data.BG Форуми: Често искани и полезни скриптове - Data.BG Форуми

Прехвърляне към съдържание

  • (3 Страници) +
  • 1
  • 2
  • 3
  • Вие не можете да започнете нова тема
  • Вие не може да отговаряте на тази тема

Често искани и полезни скриптове

#21
Потребителят е неактивен   abozhilov 

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
Три колонен табличен лейаут, без таблици.

Първият вариант е само със CSS и html, желаният ефект се постига като се слага една снимка за бекграунд, която се повтаря по вертикалата в контейнъра който съдржа трите колони.
Ето това е снимката която е необходима.
На контейнъра се задават следните стилове:

	.container {

		width: 600px;

		overflow: auto;

		background: url('http://www.abozhilov.data.bg/images/three_column.
jpg') repeat-y;

	}

Първо се задава широчина колкото е широчината на снимката.След това overflow: auto; е за да може контейнъра да си разшири височината спрямо най-високата колонa вътре в него, сщият ефект може да се постигне и без overflow: auto; като се направи един елемент след последната колона в html кода, който има стилове:

clear: both;

И накрая естествено се поставя снимката за бекграунд.
Ето го и всичкия код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Table Layout</title>

		<style type="text/css">

			.container {

				width: 600px;

				overflow: auto;

				background: url('http://www.abozhilov.data.bg/images/three_column.
jpg') repeat-y;

			}

			.left_column {

				float: left;

				width: 128px;

			}

			.center_column {

				float: left;

				width: 293px;

			}

			.right_column {

				float: left;

				width: 179px;

			}

		</style>

	</head>

	<body>

		<div class="container">

			<div class="left_column">

				left column

			</div>

			<div class="center_column">

				center column

			</div>

			<div class="right_column">

				right column

			</div>

		</div>

	</body>

</html>

Сложете подобаващо количество тагове <br> в някоя колона за да ви се изясни напълно примера.

Вторият вариант е с JavaScript и CSS, raccoon наскоро беше писал пример и аз реших да го подобря малко като спестявам намирането на най-високата колона.
Тук са почти идентични стиловете на контейнъра само не се поставя въпросната снимка за бекграунд.
Ето това е кода който ви е необходим:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Table Layout</title>

		<style type="text/css">

			#container {

				width: 600px;

				overflow: auto;

			}

			.left_column {

				float: left;

				width: 128px;

				background-color: red;

			}

			.center_column {

				float: left;

				width: 293px;

				background-color: blue;

			}

			.right_column {

				float: left;

				width: 179px;

				background-color: green;

			}

		</style>

	</head>

	<body>

		<div id="container">

			<div class="left_column">

				left column

			</div>

			<div class="center_column">

				center column<br><br><br><br>

			</div>

			<div class="right_column">

				right column

			</div>

		</div>

		<script type="text/javascript">

			var obj=document.getElementById('container');

			var columns=obj.getElementsByTagName('div');

				for (i=0;i<columns.length;i++) {

					columns[i].style.height=obj.offsetHeight+'px';

				}

		</script>

	</body>

</html>


Ако има неясности, моля не пишете тук а ми пишете на ЛС.
0

#22
Потребителят е неактивен   abozhilov 

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
Вертикално центриране

Напоследък във форума много хора се интересуват как се постига вертикално центриране на блоков елемет, и аз реших да напиша няколко примера които аз лично ползвам.

Първият вариант е със CSS и абсолютно позициониране.Тук има известни недостатъци, защото трябва предварително да си зададете височина на елемента, което прави статичен лейаута.Този метод на центриране не е добър когато имате елемент на който височината ще се променя спрямо съдржанието което има в него.
Това са стиловете на елемента:

	.container {

		width: 200px;

		height: 300px;

		border: 1px solid black;

		position: absolute;

		top: 50%;

		margin-top: -150px;

	}

Тук се задава абсолютна позиция на елемента top: 50%; след което се задава отрицателен margin-top:, височината на елемента/2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Vertical Centering</title>

		<style type="text/css">

			.container {

				width: 200px;

				height: 300px;

				border: 1px solid black;

				position: absolute;

				top: 50%;

				margin-top: -150px;

			}

		</style>

	</head>

	<body>

		<div class="container">

			text goes here

		</div>

	</body>

</html>


Вторият вариант е подобен на този но можете да го използвате за елемент който ще си разширява височината, но трябва да знаете че този вариант е приемлив когато максималната височина на елемента няма да надвишава височината на body.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Vertical Centering</title>

		<style type="text/css">

			#container {

				width: 200px;

				position: absolute;

				top: 50%;

				border: 1px solid black;

			}

		</style>

		<script type="text/javascript">

			function VerticalCentering() {

				var obj=document.getElementById('container');

				obj.style.marginTop=-(obj.offsetHeight/2)+'px';

			}

		</script>

	</head>

	<body>

		<div id="container">

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

		</div>

		<script type="text/javascript">

			VerticalCentering();

		</script>

	</body>

</html>


Третият вариант е доста по универсален от предишните два, но тук за сметка на това се използва таблица за постигането на центрирането.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Vertical Centering</title>

		<style type="text/css">

			html, body {

				height: 100%;

				margin: 0;

				padding: 0;

			}

			table {

				width: 100%;

				height: 100%;

			}

			.container {

				width: 200px;

				border: 1px solid black;

			}

		</style>

	</head>

	<body>

		<table cellpadding="0" cellspacing="0">

			<tr>

				<td>

					<div class="container">

						text goes here<br>

						text goes here<br>

						text goes here<br>

						text goes here<br>

						text goes here<br>

						text goes here<br>

						text goes here<br>

					</div>

				</td>

			</tr>

		</table>

	</body>

</html>


Четвъртият вариант също като примера с таблицата е универсален, но тук се използва JavaScript за постигане на центрирането на елемента.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Verical Centering</title>

		<style type="text/css">

			body {

				margin: 0;

				padding: 0;

			}

			#container {

				width: 200px;

				border: 1px solid black;

			}

		</style>

		<script type="text/javascript">

			function VerticalCentering() {

				var obj=document.getElementById('container');

				var doc_height=(window.ActiveXObject) ? document.documentElement.clientHeight : innerHeight;

				var result=doc_height-obj.offsetHeight;

					if (result>0) {

						obj.style.marginTop=result/2+'px';

					}

			}

		</script>

	</head>

	<body>

		<div id="container">

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

			text goes here<br>

		</div>

		<script type="text/javascript">

			VerticalCentering();

		</script>

	</body>

</html>


Последният вариант отново е постигнат само чрез CSS и е универсален но за сметка на това версийте на ИЕ преди 7 имат проблеми с интерпретирането на кода.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Vertical Centering</title>

		<style type="text/css">

			html, body {

				height: 100%;

				width: 100%;

				margin: 0;

				padding: 0;

			}

			html {

				display: table;

			}

			body {

				display: table-cell;

				vertical-align: middle;

			}

			.container {

				width: 300px;

				height: 300px;

				border: 1px solid black;

			}

		</style>

	</head>

	<body>

		<div class="container">

			text

		</div>

	</body>

</html>




raccoon каза:

Още едно вертикално центриране.
Центрира се блоков елемент в друг блоков елемент, като височините са динамични, т.е. не са дефинирани в CSS-а.

Тук се използва факта, че Firefox 3 и IE8 вече потдържат display: inline-block. Така с малко хакване за IE6, IE7 и Firefox 2 нещата се нагаждат. Предполагам, че след време, когато тези браузъри умрат, това ще е един от най-лесните начини за вертикално центриране.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Inline Block example</title>



<style type="text/css">



.wrapper{

	margin:auto;

	padding:10px;

	text-align:center;/* centers inline-blocks*/

	border:1px solid black;

}

.wrapper div {

	display:-moz-inline-box; /* Firefox 2 and under*/

	display:inline-block; /* FF3, Opera, Safari */

	vertical-align:middle;

	border:1px solid black;

}

* html .wrapper div{

	display:inline

}

*:first-child+html .wrapper div{

	display:inline

}



.wrapper div p{

	width:120px

}



</style>



</head>

<body>



	<div class="wrapper">

		<div>

			<p>

				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.

			</p>

		</div>

	</div>



</body>

</html>


PS: Някой модератор да бутне кода при останалите начини за вертикално центриране и да ми изтрие поста, за да е по-подредено.

0

#23
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Друг начин за вертикално центриране е определяне на padding или margin - в зависимост.
<html>

	<head>

		<title></title>

		<style type="text/css">

			div.parent {

				padding: 5em 0em;

				text-align: center;

				border: 1px solid green;

			}



			div.child {

				width: 100px; height: 100px;

				background: #77ffa4;

				margin: auto;

			}

		</style>

	</head>



	<body>

		<div class="parent">

			<div class="child">

				Блок 1

			</div>

		</div>

	</body>

</html>
Този трик може да се постигне за картинка или не повече от 1 ред текст с line-height свойството. Но това вече е един вид нагаждане. abozhilov даде обща представа за вертикалното центриране.
0

#24
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Slideshow Скрипт

<html>

	<head>

		<title></title>

		<script type="text/javascript">

			var preload=new Array();

			var interval=1; // Интервал (в секунди)

			var cimg=0;



			var pics=new Array(

				"http://thistlegirldesigns.com/Freebies/ColoringPages/
snowman1_sm.gif",

				"http://thistlegirldesigns.com/Freebies/ColoringPages/
xmastree1_sm.gif",

				"http://thistlegirldesigns.com/Freebies/ColoringPages/
pumpkin2_sm.gif"

			);



			for(var i=0; i<pics.length; i++) {

				preload[i]=new Image();

				preload[i].src=pics[i];

			}



			function slide() {

				if(cimg>=pics.length) cimg=0;

				document.images['slide'].src=pics[cimg];

				cimg++;



				window.setTimeout('slide()',interval*1000);

			}



			window.onload=slide;

		</script>

	</head>



	<body>

		<img src="http://thistlegirldesigns.com/Freebies/ColoringPages/
pumpkin2_sm.gif" name="slide" alt="" />

	</body>

</html>

0

#25
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Произволен банер
<html>

	 <head>

		   <title>Random Banner</title>

		   <script type="text/javascript">

				 // Списък с банери

				 var banners=new Array();

				 banners[banners.length]={

					   pic:"http://forums.bgdev.org/style_images/IPB_(
Bul-465/logo.gif",

					   url:'http://forums.bgdev.org',

					   alt:'BG Developer'

				 }

				 banners[banners.length]={

					   pic:"http://www.oreillynet.com/images/javascript/
header_web_devcenter.gif",

					   url:'http://www.oreillynet.com',

					   alt:'O'Reilly'

				 }

				 banners[banners.length]={

					   pic:"http://www.google.com/intl/en_ALL/images/logo.
gif",

					   url:'http://www.google.com',

					   alt:'Google'

				 }



				 // Създаваме банера

				 function PickBanner() {

					   var banner=document.getElementById('banner');

					   var rand=Math.floor(Math.random()*banners.length)
;



					   var cban=banners[rand];



					   var url=document.createElement('A');

					   url.href=cban.url; url.target='_blank';



					   var pic=document.createElement('IMG');

					   pic.src=cban.pic; pic.alt=cban.alt;



					   url.appendChild(pic);

					   banner.appendChild(url);

				 }



				 // Принтиране на банера

				 window.onload=PickBanner;

		   </script>

	 </head>



	 <body>

		   <span id="banner"></span>

	 </body>

</html>

0

#26
Потребителят е неактивен   faicheto 

  • All I Want All I Need
  • Група: Потребители
  • Мнения: 13230
  • Регистриран: 05-March 03
  • Репутация: 7
  • Пол:Мъж
  • Интереси:;]
Произволен текст

<html>

	<head>

		<title></title>

		<script type="text/javascript">

			var msg=new Array();

			msg[0]="Message 1";

			msg[1]="Message 2";

			msg[2]="Message 3";

			msg[2]="Message 4";

			msg[2]="Message 5";



			var i=Math.round(Math.random()*msg.length);



			function rotateMsg()

			{

				document.getElementById('message').innerHTML=msg[
i%msg.length]; i++;

			}

			var interval=setInterval("rotateMsg()", 3000);

		</script>

   </head>



	<body onload="rotateMsg();">

		<div id="message"></div>

	</body>

</html>


code by sandh
What the world out there is like
And how I can fit in
0

#27
Потребителят е неактивен   emicha 

  • Група: Потребители
  • Мнения: 1632
  • Регистриран: 02-September 04
  • Репутация: 1
  • Пол:Мъж
  • Град:София//Лозенец
  • Интереси:����� ��
CountDown & CountUp scripts

CountDown script с текст:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> 

<html>

	<head>

		<title>Countdown Script</title>

		<meta http-equiv="content-type" content="text/html; charset=windows-1251">

		<script type="text/javascript">

			var before="коледа."

			var current="Съобщение за деня"

			var montharray=new Array("Jan","Feb","Mar","Apr"
,"May","Jun","Jul","Aug","
Sep","Oct","Nov","Dec")

			

			function countdown(yr,m,d){

			theyear=yr;themonth=m;theday=d

			var today=new Date()

			var todayy=today.getYear()

			if (todayy < 1000)

			todayy+=1900

			var todaym=today.getMonth()

			var todayd=today.getDate()

			var todaystring=montharray[todaym]+" "+todayd+", "+todayy

			futurestring=montharray[m-1]+" "+d+", "+yr

			dd=Date.parse(futurestring)-Date.parse(todaystring)


			dday=Math.floor(dd/(60*60*1000*24)*1)

			if(dday==0&&dhour==0&&dmin==0&&dsec==1)
{

			document.forms.count.count2.value=current

			return

			}

			else

			document.forms.count.count2.value="Остават само "+dday+ " дена до "+before

			setTimeout("countdown(theyear,themonth,theday)
",1000)

			}

			countdown(2007,12,25)

		</script>

	</head>

	<body onload="countdown(2007,12,25);">

		<form name="count" action="">

			<input type="text" size="69" name="count2" style="border: 0px solid red;">

		</form>

		<p>

			<a href="http://validator.w3.org/check?uri=referer">


				<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0">

			</a>

		</p>

	</body>

</html>


:) Сменете 2007,12,25 с избраната от вас дата. Трябва на 2 места да го смените
:) Валиден код
:) Ето в действие
:) Можете да поставите скрипта, където пожелаете

Countdown с картинки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> 

<html>

	<head>

		<title>Countdown Script</title>

		<meta http-equiv="content-type" content="text/html; charset=windows-1251">

		<script type="text/javascript">

			var before="коледа."

			var current="Съобщение за деня"

			var montharray=new Array("Jan","Feb","Mar","Apr"
,"May","Jun","Jul","Aug","
Sep","Oct","Nov","Dec")

			

			function countdown(yr,m,d){

			var today=new Date()

			var todayy=today.getYear()

			if (todayy < 1000)

			todayy+=1900

			var todaym=today.getMonth()

			var todayd=today.getDate()

			var todaystring=montharray[todaym]+" "+todayd+", "+todayy

			var futurestring=montharray[m-1]+" "+d+", "+yr

			var difference=(Math.round((Date.parse(futurestring)
-Date.parse(todaystring))/(24*60*60*1000))
*1)

			var dstring=difference.toString()

			if (difference==0)

			document.write(current)

			else if (difference>0){

			document.write("Още ")

			for (i=0;i<=dstring.length-1;i++)

			document.write('<img src="dg'+dstring.charAt(i)+'.gif">')

			document.write(' дена до '+before)

			}

			}

			countdown(2007,12,25)

		</script>

	</head>

	<body>

		<p>

			<a href="http://validator.w3.org/check?uri=referer">


				<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0">

			</a>

		</p>

	</body>

</html>


:) Сменете 2007,12,25 с избраната от вас дата. Трябва на 2 места да го смените
;) Ето цифричките в RAR формат
;) Ето скрипта в действие
:lol: Валиден код
:lol: Не е задължително самият скрипт да е в head тага. Ако искате скрипта на някое по-специфично място в страницата си копирайте всичко и го сложете там

CountUp Script
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> 

<html>

	<head>

		<title>CountUp Script</title>

		<meta http-equiv="content-type" content="text/html; charset=windows-1251">

		<script type="text/javascript">

			var montharray=new Array("Jan","Feb","Mar","Apr"
,"May","Jun","Jul","Aug","
Sep","Oct","Nov","Dec")

			function countup(yr,m,d){

			var today=new Date()

			var todayy=today.getYear()

			if (todayy < 1000)

			todayy+=1900

			var todaym=today.getMonth()

			var todayd=today.getDate()

			var todaystring=montharray[todaym]+" "+todayd+", "+todayy

			var paststring=montharray[m-1]+" "+d+", "+yr

			var difference=(Math.round((Date.parse(todaystring)
-Date.parse(paststring))/(24*60*60*1000))
*1)

			difference+=" дена"

			document.forms.count.count2.value="Изминали са "+difference+" откакто се родих!"

			}

			countup(1990,06,14)

		</script>

	</head>

	<body onload="countup(1990,06,14)">

		<form name="count" action="">

			<input type="text" size="69" name="count2" style="border: 0px solid red;">

		</form>

		<p>

			<a href="http://validator.w3.org/check?uri=referer">


				<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0">

			</a>

		</p>

	</body>

</html>


:lol: Сменете 1990,06,14 с избраната от вас дата. Трябва на 2 места да го смените
:P Ето го в действие
:P Валиден код
:lol: Можете да поставите скрипта, където пожелаете


Всички скриптове с отброяване имат днешна дата - в смисъл, когато настъпи датата, до която отброяват ще се изпише "Днес е коледа" например.
На var current="Съобщение за деня" напишете това, което искате да се изписва, когато датата е настъпила.
На var before="коледа." сложете името на празника.
Знам, че скриптовете могат да се оптимизират доста, но явно не ме бива толкова. Това е, което успях да направя.
0

#28
Потребителят е неактивен   FarmDve 

  • Група: Потребители
  • Мнения: 6504
  • Регистриран: 14-March 06
  • Репутация: 111
  • Пол:Мъж
  • Град:Ямбол
ет един скрипт за забрана на дясния бутон на мишката


<script type="text/javascript">

   document.oncontextmenu = function() {

	  alert('Не кради бе, ей! :)');

	  return false;

   }

</script>


edit: faicheto
i5-4670k, ASRock Z87 Pro4, Gigabyte GTX 760 Windforce3x+Sapphire HD5850+ASUS EAH5870, Chieftec 600w, 2x1GB Kingmax 1333MHz+1GB A-data, WD Caviar Blue 640GB, LG Flatron W2261VP-PF, Cooler Master Hyper 212+

Bitcoin miner since April 2011.
0

#29
Потребителят е неактивен   FarmDve 

  • Група: Потребители
  • Мнения: 6504
  • Регистриран: 14-March 06
  • Репутация: 111
  • Пол:Мъж
  • Град:Ямбол
Скрипт който позволява скриване на таблици Текстове и др..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 <html>

  <head>

   <title>Show/Hide script</title>

	<meta http-equiv="content-type" content="text/html; charset=windows-1251"> 

	 <script language="JavaScript" type="text/JavaScript">



function closeit(box)

{

document.getElementById(box).style.display="none"
;

}



function showit(box)

{

document.getElementById(box).style.display="block"
;

}



function SetSize(obj, size) {

		if (obj.offsetWidth > size) {

				obj.style.width = size;

		};

		if (obj.offsetHeight > size) {

				obj.style.height = size;

		};

};







</script>

</head>

<body>

<div id="div3">

<p align=center><a href=#><font color=red>Тесктът</font></a></
p>



</td></tr></table></div>

</div>

<center><a href="#Hide" onclick="closeit('div3')">Скрий<
/a> |

<a href="#Show" onclick="showit('div3')">Покажи<
/a></center>





</body>

</html>

:) Където <div id"div3"> и </div>
определят какво ще бъде скрито
<div id"div3">Тескта и затваряме тага</div>

и после
<center><a href="#Hide" onclick="closeit('div3')">Скрий<
/a> |

<a href="#Show" onclick="showit('div3')">Покажи<
/a></center>

i5-4670k, ASRock Z87 Pro4, Gigabyte GTX 760 Windforce3x+Sapphire HD5850+ASUS EAH5870, Chieftec 600w, 2x1GB Kingmax 1333MHz+1GB A-data, WD Caviar Blue 640GB, LG Flatron W2261VP-PF, Cooler Master Hyper 212+

Bitcoin miner since April 2011.
0

#30
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Дървовидно меню (DEMO)

Принципът е прост. За добавяне на неограничен брой менюта е нужен единствено линк, последван от неподреден списък (ul) - без никакви междинни елементи.

Например проблем ще има в този случай:
...

	<li>

		<a href="#">Subitem 2</a><span>tralala</span>

		<ul>

			<li><a href="#">Sub-subitem 1</a></li>

			<li><a href="#">Sub-subitem 2</a></li>

			...

		</ul>

	</li>

...
заради тагът span след линка - менюто няма да се отвори.

Броят падащи менюта е неограничен. Няма да е проблем дори едно под-под-под-подменю. Необходимо е само да се добавя html код - нищо повече.

Ето го и скрипта:
<html>

	<head>

		<title></title>

		<style type="text/css">

			#menu {margin: 0px; padding: 0px;}

			#menu li {margin: 0px; padding: 0px;}

			#menu ul {display: none; margin: 0px 15px; padding: 0px 15px;}

		</style>

		<script type="text/javascript">

			function operateMenu() {

				var menu=document.getElementById('menu');

				var Links=menu.getElementsByTagName('A');



				for(var i=0; i<Links.length; i++) {

					Links[i].onclick=function() {

						var Lists=this.parentNode.parentNode.getElementsByTagName('UL'
);



						for(var j=0; j<Lists.length; j++)

							Lists[j].style.display='none';



						if(this.nextSibling.nextSibling && this.nextSibling.nextSibling.tagName=='UL')

							this.nextSibling.nextSibling.style.display='block';

					}

				}

			}

		</script>

	</head>



	<body>

		<ul id="menu">

			<li><a href="#">Item 1</a></li>

			<li>

				<a href="#">Item 2</a>

				<ul>

					<li><a href="#">Subitem 1</a></li>

					<li>

						<a href="#">Subitem 2</a>

						<ul>

							<li><a href="#">Sub-subitem 1</a></li>

							<li><a href="#">Sub-subitem 2</a></li>

							<li><a href="#">Sub-subitem 3</a></li>

							<li><a href="#">Sub-subitem 4</a></li>

							<li><a href="#">Sub-subitem 5</a></li>

							<li><a href="#">Sub-subitem 6</a></li>

						</ul>

					</li>

					<li><a href="#">Subitem 3</a></li>

				</ul>

			</li>

			<li><a href="#">Item 3</a></li>

			<li><a href="#">Item 4</a></li>

		</ul>

		<script type="text/javascript"> operateMenu(); </script>

	</body>

</html>

0

#31
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Скролер с javascript (DEMO)

Този скрипт ще ви позволи да придадете стил на скролбаровете под всеки браузър и без значение от дизайна. Поддържа се скролиране с MouseWheel, стрелки, влачене, директен указ.

Няма да поствам кода тук, защото е дългичък. Убеден съм, че не е най-оптималния, възможен, но ще ме прощавате.

scrollOperator.js
styles.css

Стиловете могат да се редактират според нуждата. Височината на влекача и стрелките са зададени в js файла, а ширината им - в стиловете.

Стрелките, които съм ползвал: Публикувано изображение и Публикувано изображение (11*11px)


Как да работя със скрипта?

Устройството е просто. Нужно е единствено да имате контейнер, който да представлява кутийката с текст. Той трябва да има id - например "tralala" (<div id="tralala">...</div>). След като той е поставен, трябва да се създаде нов обект по следния начин:
<script type="text/javascript">

	new SetScrollOperator('tralala',[200,150],2);

</script>
като:
- първият аргумент на конструктура е id на контейнера
- вторият (между квадратните скоби - това е масив) - съответно ширина и височина на кутийката, отделени със запетая.
- третият е скоростта. Колкото по-голяма е цифрата - толкова по-голяма е скоростта.

Файловете се намират тук: http://nlt.bg/sandh/ScrollOperator/

Примерен код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title>Test</title>

		<link type="text/css" rel="Stylesheet" href="http://nlt.bg/sandh/ScrollOperator/styles.css"
 media="screen" />

		<script type="text/javascript" src="http://nlt.bg/sandh/ScrollOperator/scrollOperator.
js"></script>

	</head>



	<body>

		<div id="scroller1">

			Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст,

			текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст,

			текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст,

			текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст,

			текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст,

			текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст

		</div>



		<script type="text/javascript">

			new SetScrollOperator('scroller1',[200,150],2);

		</script>

	</body>

</html>


11/06/2007: Вече няма проблем с незаредените картинки
0

#32
Потребителят е неактивен   vensa 

  • Група: Потребители
  • Мнения: 1341
  • Регистриран: 05-May 04
  • Репутация: 1
Много прост прелоудър



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Simple Preloader Script</title>

<script language="javascript1.5" type="text/javascript">

function preLoader() {

document.getElementById('preLoader').style.visibility = "hidden";

document.getElementById('preLoader').height = "0px";

document.getElementById('main').style.visibility = "visible";

document.getElementById('main').height = "auto";

}



</script>

</head>



<body onload="preLoader();">

<div id="preLoader" style="height:auto; visibility:visible;"> 

<font color="#000000">Зарежда се, моля изчакайте...</font>

</div>



<div id="main" style="height:0px; visibility:hidden;">

 <img src="http://ict.paginablog.nl/ict/firefox_logo.jpg"
 alt="FireFox Logo" />

</div>

</body>

</html>

:) <div id="preLoader"></div> - съдържанието му се показва, докато се зареди страницата
:) <div id="main"></div> - тук трябжа да стои това, което искате да се зарежда
:) Изпробван е на IE и FireFox работи както трябва
0

#33
Потребителят е неактивен   faicheto 

  • All I Want All I Need
  • Група: Потребители
  • Мнения: 13230
  • Регистриран: 05-March 03
  • Репутация: 7
  • Пол:Мъж
  • Интереси:;]
:) Дървовидно меню
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title></title>

		<style type="text/css">

			*{

				margin: 0; padding: 0;

			}

			

			html, body{

				font-family: Verdana, Arial, sans-serif;

				font-size: 11px; color: #fff;

			}

			

			ul.menu{

				width: 160px; list-style-type: none; border: 1px solid #6B6659;

			}

			

			ul.menu li{

				width: 100%; clear: left; 

			}

			

			ul.menu li a{

				color: #fff; text-decoration: none;	height: 21px; background: #979185 url('arrow_down.gif') 140px 14px no-repeat;

				display: block; padding: 8px 0 0 15px; border-bottom: 1px solid #A29E92;

			}

			

			ul.menu li a:hover{

				background: #888377 url('arrow_down.gif') 140px 14px no-repeat;

			}

			

			ul.menu li ul a{

				height: 21px; width: 135px; padding: 8px 0 0 25px; 

				background: #D8D2C2; color: #545045; border-bottom: 1px solid #E4DECF;

			}

			

			ul.menu li ul a:hover{

				background: #B4AEA0; color: #111;

			}

			

			.down_open{

				background: #888377; font-weight: bold;

			}

			

			.unactive{background-image: none!important;}

		</style>

		<script type="text/javascript">

			function expand_nav(link)

			{

				var ul = find_enclosing_ul(link)

				if (ul.style.display == 'none')

				{

					ul.style.display = 'block'

				}

				else

				{

					ul.style.display = 'none'

				}

				if (link.className == 'down')

				{

					link.className='down_open'

				}

				else

				{

					link.className='down'

				}

			}

			

			function find_enclosing_ul(link)

			{

				var search_node = link

				while (true)

				{

					var node = search_node.nextSibling

					if (node && node.nodeName == 'UL')

					{

						break

					}

					else

					{

						search_node = node

					}

				}

				return node	

			}

		</script>

	</head>

	<body>



		<ul class="menu">

			<li><a href="#" class="unactive">Item 1</a></li>		   

			<li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 2</a>

				<ul style="display: none;">

					<li><a href="#">Sub Item 2.1</a></li>   

					<li><a href="#">Sub Item 2.2</a></li>   

					<li><a href="#">Sub Item 2.3</a></li>   

				</ul>



			</li>   

			<li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 3</a>

				<ul style="display: none;">

					<li><a href="#">Sub Item 3.1</a></li>	   

					<li><a href="#">Sub Item 3.2</a></li>	   

					<li><a href="#">Sub Item 3.3</a></li>	   

				</ul>

			</li>	 

			<li><a href="#" class="unactive" onclick="expand_nav(this); return false;">Item 4</a>



			<li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 5</a>

				<ul style="display: none;">

					<li><a href="#">Sub Item 5.1</a></li>	   

					<li><a href="#">Sub Item 5.2</a></li>	   

					<li><a href="#">Sub Item 5.3</a></li>	   

				</ul>

			</li>		  

		</ul>

	</body>

</html>

Demo
0

#34
Потребителят е неактивен   abozhilov 

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
Съжалявам за спама, но горното меню може да се поопрости:

		 function expand_nav(link)

		 {

			var ul = link.parentNode.getElementsByTagName('ul')[0]
;

			ul.style.display = (ul.style.display == 'block') ? 'none' : 'block';

			link.className = (link.className == 'down') ? 'down_open' : 'down';

		 }

И още едно правило в CSS за да не се пишат inline стилове за display: none;

ul.menu li ul {

	 display: none;

}

0

#35
Потребителят е неактивен   faicheto 

  • All I Want All I Need
  • Група: Потребители
  • Мнения: 13230
  • Регистриран: 05-March 03
  • Репутация: 7
  • Пол:Мъж
  • Интереси:;]

abozhilov каза:

Съжалявам за спама, но горното меню може да се поопрости:


Като отида в офиса ще го оправя. Благодаря за съвета :)
0

#36
Потребителят е неактивен   skatebord 

  • Група: Потребители
  • Мнения: 261
  • Регистриран: 29-December 05
  • Репутация: 0
  • Интереси:Killing Fuckers
Fav Icon (Иконка до URL-то на сайта)

Често по скайп, ЛС и др. ме питат как съм си сложил иконка горе при URL-то, та реших да постна тук:
 <link rel="shortcut icon" href="floder/icon.*">

Слага се в head секцията на сайта !
Floder/icon.* пишете пътя до иконката, може да е какъвто размер искате, браузера си я ресайзва.
*Разширението на иконката, може да е всякакво, стига да е валидно...
0

#37
Потребителят е неактивен   mmeeaattaall 

  • Група: Потребители
  • Мнения: 560
  • Регистриран: 06-October 05
  • Репутация: 82
  • Пол:Мъж
RollOver button + text
By acider
CSS

ul {

width: 200px;

height: 200px;

list-style-type: none;

}

li a {

width: 120px;

height: 32px;

display: block;

background-image: url('URL_TO_IMAGE') ;

list-style-type: none;

text-decoration:none;

color: #DDD;

text-align: center 

}

li a:hover {

color: #000;

}


HTML

		<ul>

<li><a href="">Text</a></li>

<li><a href="">Text</a></li>

<li><a href="">Text</a></li>

<li><a href="">Text</a></li>

		</ul>



С rollover background
CSS

		<ul>

<li><a href="">Text</a></li>

<li><a href="">Text</a></li>

<li><a href="">Text</a></li>

<li><a href="">Text</a></li>

</ul>



 ul{

list-style-type: none;  

width: 200px;

height: 200px;

text-align: center 

}

 li a {

width: 160px;

height: 32px;

display: block;

background-image: url('URL_TO_NORMAL_IMAGE'); 

list-style-type: none;

text-decoration:none;

color: #DDD;

}

 li a:hover {

color: #000;

background-image: url('URL_TO_ROLL_IMAGE') 



}


DEMO
"Секунда невнимание, а после - цял живот мъртъв"


0

#38
Потребителят е неактивен   emicha 

  • Група: Потребители
  • Мнения: 1632
  • Регистриран: 02-September 04
  • Репутация: 1
  • Пол:Мъж
  • Град:София//Лозенец
  • Интереси:����� ��
Движещ се текст

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

		<title>Движещ се текст</title>

	</head>

	<body>

		<marquee direction="left" onmouseover="this.stop();" onmouseout="this.start();">Това е движещ се текст</marquee>

	</body>

</html>

direction приeма стойности down, left, right, up.
0

#39
Потребителят е неактивен   hrvladev 

  • Група: Потребители
  • Мнения: 293
  • Регистриран: 03-February 06
  • Репутация: 0
Скрипт за снежинки:
<script type="text/javascript">

function rnd(){return Math.random();}

function xRnd(){return (rnd()/10);}

function yRnd(){return (2+2*(.5-rnd()));}

var letitsnow=true;

var flakes=Array("пътя до изображението");

var numflakes=20;

var GheosTime=50;

var Gheosdx,GheosxPos,GheosyPos,vx,vy,GheosObj,iVar;

var winwidth=640;

var winheight=480;



function sizeIt(){

window.winwidth=window.innerWidth?window.innerWidth:document.
body.clientWidth;

window.winheight=window.innerHeight?window.innerHeight:document.
body.clientHeight;

}



Gheosdx=new Array();

GheosxPos=new Array();

GheosyPos=new Array();

sway=new Array();

var swaymax=20;

vx=new Array();

vy=new Array();

sizeIt();

document.write('<STYLE TYPE="text/css">n.flk {position:absolute;top:-100;}</STYLE>
');

for(iVar=0;iVar<numflakes;iVar++){

	var thisflake=''+flakes[Math.floor(rnd()*flakes.length)
];

	Gheosdx[iVar]=0;

	

	GheosxPos[iVar]=rnd()*(window.winwidth-30)
+10;

	GheosyPos[iVar]=rnd()*window.winheight;

	sway[iVar]=rnd()*swaymax;

	vx[iVar]=xRnd();

	vy[iVar]=yRnd();

	document.write('<DIV ID="f'+iVar+'" CLASS="flk"><IMG SRC="'+thisflake+'" BORDER="0"></DIV>');

}



function snowMove(id,left,top){

	GheosObj=document.getElementById?document.getElementById(
id).style:

	document.all?document.all[id].style:

	document.layers?document.layers[id]:null;

	if(GheosObj){

		GheosObj.left=left;

		GheosObj.top=top;

	}

}



function snowSwitch(s){

	if(s=='on'){

		if(window.letitsnow!=true){	

			window.letitsnow=true;

			doSnow();

		}

	} else if(s=='off'){

		window.letitsnow=false;

		hideSnow();

	}

}



function hideSnow(){

for(jVar=0;jVar<numflakes;++jVar)snowMove('f'
+jVar,-100,-100);

}



function doSnow(){

if(letitsnow){

	sizeIt();

	delta=(window.pageYOffset!=null)?window.pageYOffset:
document.body.scrollTop;

	for(kVar=0;kVar<numflakes;++kVar){

		GheosyPos[kVar]+=vy[kVar];

		if(GheosyPos[kVar]>window.winheight+delta-20)
{

			GheosxPos[kVar]=rnd()*(window.winwidth-sway[
kVar]-30);

			GheosyPos[kVar]=delta;

			vx[kVar]=xRnd();

			vy[kVar]=yRnd();

		}

		Gheosdx[kVar]+=vx[kVar];

		snowMove('f'+kVar,GheosxPos[kVar]+sway[kVar]
*Math.cos(Gheosdx[kVar]),GheosyPos[kVar]
);

	}

	setTimeout("doSnow()",GheosTime);

  }	

}

//setTimeout("sunshine()",30000);

function sunshine(){

snowSwitch('off');return false;

}

window.onload=doSnow;

setTimeout("doSnow()",500);

</script>


:) Поставяте скрипта между <body> и </body>
:) Променяте var flakes=Array("пътя до изображението");
:) Ето една примерна снежинка:Публикувано изображение
:) Демо
:) Работи под IE, Opera и Mozilla Firefox.
:) Скриптът е взет от тук
0

#40
Потребителят е неактивен   akolevutd 

  • Група: Потребители
  • Мнения: 1294
  • Регистриран: 28-May 06
  • Репутация: 0
  • Град:Ебнево
Rollever Menu с една картинка

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>

<html xmlns="http://www.w3.org/1999/xhtml">



	<head>

		<title></title>

		<style type="text/css">

			.pics{

				height: 25px; width: 143px; cursor: pointer; display: block;

				background: transparent url('rolleverbottom.jpg') left; 

			}

			

			.pics:hover{background-position: right; color: white; text-decoration: underline;}

	

			div.menu{height: 25px; width: 143px;}

			div.menu a{margin-right: 5px; padding: 8px 0 0 20px; color: white; text-decoration: none; margin: 1px;}

		</style>

	</head>

	<body>

		<div class="menu">



			<a href="#" class="pics">Начало</a>

			<a href="#" class="pics">За нас</a>

			<a href="#" class="pics">Проекти</a>

			<a href="#" class="pics">Партньори</a>

			<a href="#" class="pics">Контакти</a>

		</div>	

	</body>



</html>


:) Демо
:) Автор: faicheto
0

Споделете тази тема чрез:


  • (3 Страници) +
  • 1
  • 2
  • 3
  • Вие не можете да започнете нова тема
  • Вие не може да отговаряте на тази тема

1 потребители четат тази тема
0 регистрирани потребители, 1 гости и 0 анонимни потребители


Data.BG e форум за дискусии. Data.BG не носи отговорност за съдържанието и достоверността на публикуваните в дискусиите материали.

Никаква част от съдържанието на тази страница не може да бъде репродуцирана, записвана или предавана под каквато и да е форма или по какъвто и да е повод без писменото съгласие на Data.BG.

Close  Member Login