Вкарване в една функция

erik_1001 · 19 Февруари 2011

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

Код:

<html>
<head>
<style type="text/css">



#menu .window
{
	padding: 0px; 
	position: relative; 
	width: 900px; 
	height: 24px !important; 
	border: 4px solid orange; 
	overflow: hidden; 
	white-space: nowrap;    
	float: left;    
	background-color:black;

 }
 
	#menu .window .content
	{ 
		position:absolute;
		top: 0px;
		left: 2px;
		padding: 0px;
		color: red;
		width:auto;
	}

		#menu .window .content ul.cat
		{
			padding-left: 0px;
			margin: 0px;
			margin-left: 20px;

		}
			
			#menu .window .content ul.cat li.cat
			{
				list-style:none;
				
				position:relative;
				display:inline;
				top: 2px;
				right: 0px;
				left: 0px;
				padding-top: 3px;
				padding-right: 2px;
				padding-bottom: 4px;
		
				border-left: 1px solid orange; 
				border-right: 1px solid orange; 
			}

				#menu .window .content ul.cat li.cat:hover
				{
					background-color:orange;
					color: black;
					text-decoration:underline;
				}
			
			
			#menu .window .button
			{
						background-color:blue;
						color: black;
						cursor:hand;	cursor:pointer;
						
						position: absolute;
						right: auto;
						left: 0px;
						padding-top: 3px;
						width:18px;
						height: inherit;
						text-align:left;
			}

					#menu .window .button:last-child 
					{
						left:auto;
						right: 0px;
						text-align:right;
					}	
						
							#menu .window .button:hover
							{
								color:orange;
							}
</style>
</head>
<body>

<div id="menu">
	<div class="window">
		<div class="content">
			<ul class="cat">
			<li class="cat"> <input type="checkbox" id="id110" /> <label for="id310"> cat1.1</label></li>
			<li class="cat"> <input type="checkbox" id="id120" /> <label for="id320"> cat1.2</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.3</label></li>
			<li class="cat"> <input type="checkbox" id="id130" /> <label for="id330"> cat1.9</label></li>
			</ul>
		</div>
		<div href="#" onClick="leftEnd()" onMouseover="moveLeft()" onMouseout="clearTimeout(moveupvar)" class="button">◄</div>
		<div href="#" onClick="rightEnd()" onMouseover="moveRight()" onMouseout="clearTimeout(movedownvar)" class="button">►</div>
	</div>
	
	<br />
	<br />
	
	<div class="window">
		<div class="content">
			<ul class="cat">
			<li class="cat"> <input type="checkbox" id="id210" /> <label for="id310"> cat2.1</label></li>
			<li class="cat"> <input type="checkbox" id="id220" /> <label for="id320"> cat2.2</label></li>
			<li class="cat"> <input type="checkbox" id="id230" /> <label for="id330"> cat2.3</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.9</label></li>
			</ul>
		</div>
		<div href="#" class="button">◄</div>
		<div href="#" class="button">►</div>
	</div>
</div>


<script language="JavaScript1.2">
function findNecessary() 
{
	var menuDiv = document.getElementById('menu');
	var windowDivs = menuDiv.getElementsByClassName('window'); //windows  for content
	var windowWidths = new Array(); //widths of windows for content
	var contentDivs = new Array(); //contents
	var windowDivLength = windowDivs.length; //number of windows
	
	
	for (a=0; a<windowDivs.length; a++)
	{	
		var windowWidth = parseInt(window.getComputedStyle(windowDivs[a], '').getPropertyValue('width')); //width of window for content
		var contentDiv = windowDivs[a].getElementsByClassName("content")[0];	//content
		
		contentDivs[a] = contentDiv;	//contents
		windowWidths[a] = windowWidth; //widths of windows for content
	};
	
	return [windowDivs, windowWidths, windowDivLength, contentDivs];
};
console.log(findNecessary()[2])

/************************************************************************/

var	speed = 5;   //specify speed of scroll (greater=faster)


/*********************************************************************************/
var menuDiv = document.getElementById('menu');
var windowDiv = menuDiv.getElementsByClassName('window');
var windowWidth = parseInt(window.getComputedStyle(windowDiv[0],'').getPropertyValue('width'));


for (q = 0; q < findNecessary()[2]; q++)
{
	var buttons = findNecessary()[0][q].getElementsByClassName('button');

	buttons[0].setAttribute('onClick', 'leftEnd("' + q + '")');
	buttons[0].setAttribute('onMouseover', 'moveLeft("' + q + '")');
	buttons[0].setAttribute('onMouseout', 'clearTimeout(moveupvar)');

	buttons[1].setAttribute('onClick', 'rightEnd("' + q + '")');
	buttons[1].setAttribute('onMouseover', 'moveRight("' + q + '")');
	buttons[1].setAttribute('onMouseout', 'clearTimeout(movedownvar)');	
}


function leftEnd(number)
{
	var crossobj = findNecessary()[3][number];
	crossobj.style.left = 2;
}

function rightEnd(number)
{
	var crossobj = findNecessary()[3][number];
	var contentheight = crossobj.offsetWidth;	

	if (contentheight > windowWidth)
	crossobj.style.left = contentheight*(-1)+windowWidth - 17;
}

function moveRight(number)
{
	var crossobj = findNecessary()[3][number];
	
	
	var contentheight = crossobj.offsetWidth;	
	var styleLeft = window.getComputedStyle(crossobj,'').getPropertyValue('left');

	if (parseInt(styleLeft)>=(contentheight*(-1)+windowWidth - 17))crossobj.style.left = parseInt(styleLeft)-speed+"px";
	
		movedownvar=setTimeout('moveRight(' + number + ')', 5);
	}

function moveLeft(number)
{
	var crossobj = findNecessary()[3][number];
	var styleLeft = window.getComputedStyle(crossobj,'').getPropertyValue('left');
	if (parseInt(styleLeft)<=0)
	crossobj.style.left = parseInt(styleLeft)+speed+"px";
	moveupvar=setTimeout('moveLeft('+ number +')', 5);
}
/*****************************************************************/

/****************************************************************/
</script>

</body>
</html>

iCreatives · 19 Февруари 2011

Никъде не разбрах до къде си стигнал и какъв е проблема..?

erik_1001 · 19 Февруари 2011

Много ми се ще целия джаваскрипт да влезе в просто една функция, а не както е сега.

iCreatives · 19 Февруари 2011

Защо просто не си го сложиш в един файл и само го include когато ти трябва?

erik_1001 · 19 Февруари 2011

Притеснявам се от по-нататъшно евентуално припокриване на имена на функции и променливи, когато пиша и другите .js-си.

Вкарване в една функция

erik_1001

Registered

iCreatives

Registered

erik_1001

Registered

iCreatives

Registered

erik_1001

Registered