Page 1 of 1

Help me i am NOOB

Posted: Fri Mar 23, 2012 10:27 pm
by universalas
hello sry for my english i got 1 main problem i am using DLE 9.2 i need insert jquery navigation menu into my template witch is all in PHP but when i am downloading that jquery menu is all in HTML how i can insert it ... i was playing 2 days ... but all fake :( there is some examples

my source is ...

Code: Select all

<body>
{AJAX}
	<table width="1020" cellpadding="0" cellspacing="0" border="0" align="center">
	<tr>
		<td id="menu1">

			<table width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td width="11" height="79" valign="top"><img src="{THEME}/images/pic_02.png" /></td>
				<td style="background: url('{THEME}/images/pic_03.png') top repeat-x;" width="138" valign="top">
					<a href="/"><img src="{THEME}/images/pic_04.png" /></a>
				</td>
				<td style="background: url('{THEME}/images/pic_03.png') top repeat-x;" valign="top">
					<ul id="menu">
					<li><img src="{THEME}/images/sep.png" /></li>

					<li><a id="menu_item_3" href="/news"><strong>Íîâîñòè</strong></a></li>
					<li><img src="{THEME}/images/sep.png" /></li>
					<li><a id="menu_item_4" href="faq.html"><strong>FAQ</strong></a></li>
					
					<li><img src="{THEME}/images/sep.png" /></li>
					<li><a id="menu_item_6" href="/kontakty.html"><strong>Êîíòàêòû</strong></a></li>
					<li><img src="{THEME}/images/sep.png" /></li>
					<li><a id="menu_item_7" href="/reklama_na_sayte.html"><strong>Ðåêëàìà</strong></a></li>

					<li><img src="{THEME}/images/sep.png" /></li>
					</ul>
				</td>
				<td width="11" height="79" valign="top"><img src="{THEME}/images/pic_05.png" /></td>
			</tr>
			</table>
		</td>
	</tr>
after 1 and last <tr> is my navigation meniu in old ... new is looks like this .....

Code: Select all


<!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=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='kwicks.js'></script>
<script type='text/javascript' src='custom.js'></script>

<title>Kwicks Menu with jQuery</title>
</head>

<body>
 <ul class="kwicks">  
     <li id="kwick1"><a href="#">Home</a></li>  
     <li id="kwick2"><a href="#">Contact</a></li>  
     <li id="kwick3"><a href="#">Downloads</a></li>  
     <li id="kwick4"><a href="#">Search</a></li>  
 </ul>  

</body>
</html>


sry but cant understand
if i try to convert into php my self and edit it. Javascript or images no working ... is looks like something wrong ( sry for my english and i know i am noob but plz help me add nav top menu to my main.tpl :( )


after my input is looks like this ....

Code: Select all

<!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>
{headers}
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>

<style type="text/css" media="all">
@import url({THEME}/css/kwicks.css);
</style>

<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='kwicks.js'></script>
<script type='text/javascript' src='custom.js'></script>

<script type="text/javascript">


(function($){
	$.fn.kwicks = function(options) {
		var defaults = {
			isVertical: false,
			sticky: false,
			defaultKwick: 0,
			event: 'mouseover',
			spacing: 0,
			duration: 500
		};
		var o = $.extend(defaults, options);
		var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
		var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
		
		return this.each(function() {
			container = $(this);
			var kwicks = container.children('li');
			var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
			if(!o.max) {
				o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
			} else {
				o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
			}
			// set width of container ul
			if(o.isVertical) {
				container.css({
					width : kwicks.eq(0).css('width'),
					height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
				});				
			} else {
				container.css({
					width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
					height : kwicks.eq(0).css('height')
				});				
			}

			// pre calculate left or top values for all kwicks but the first and last
			// i = index of currently hovered kwick, j = index of kwick we're calculating
			var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
			for(i = 0; i < kwicks.size(); i++) {
				preCalcLoTs[i] = [];
				// don't need to calculate values for first or last kwick
				for(j = 1; j < kwicks.size() - 1; j++) {
					if(i == j) {
						preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
					} else {
						preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
					}
				}
			}
			
			// loop through all kwick elements
			kwicks.each(function(i) {
				var kwick = $(this);
				// set initial width or height and left or top values
				// set first kwick
				if(i === 0) {
					kwick.css(LoT, '0px');
				} 
				// set last kwick
				else if(i == kwicks.size() - 1) {
					kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
				}
				// set all other kwicks
				else {
					if(o.sticky) {
						kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
					} else {
						kwick.css(LoT, (i * normWoH) + (i * o.spacing));
					}
				}
				// correct size in sticky mode
				if(o.sticky) {
					if(o.defaultKwick == i) {
						kwick.css(WoH, o.max + 'px');
						kwick.addClass('active');
					} else {
						kwick.css(WoH, o.min + 'px');
					}
				}
				kwick.css({
					margin: 0,
					position: 'absolute'
				});
				
				kwick.bind(o.event, function() {
					// calculate previous width or heights and left or top values
					var prevWoHs = []; // prevWoHs = previous Widths or Heights
					var prevLoTs = []; // prevLoTs = previous Left or Tops
					kwicks.stop().removeClass('active');
					for(j = 0; j < kwicks.size(); j++) {
						prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
						prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
					}
					var aniObj = {};
					aniObj[WoH] = o.max;
					var maxDif = o.max - prevWoHs[i];
					var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
					kwick.addClass('active').animate(aniObj, {
						step: function(now) {
							// calculate animation completeness as percentage
							var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
							// adjsut other elements based on percentage
							kwicks.each(function(j) {
								if(j != i) {
									kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
								}
								if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
									kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
								}
							});
						},
						duration: o.duration,
						easing: o.easing
					});
				});
			});
			if(!o.sticky) {
				container.bind("mouseleave", function() {
					var prevWoHs = [];
					var prevLoTs = [];
					kwicks.removeClass('active').stop();
					for(i = 0; i < kwicks.size(); i++) {
						prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
						prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
					}
					var aniObj = {};
					aniObj[WoH] = normWoH;
					var normDif = normWoH - prevWoHs[0];
					kwicks.eq(0).animate(aniObj, {
						step: function(now) {
							var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
							for(i = 1; i < kwicks.size(); i++) {
								kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
								if(i < kwicks.size() - 1) {
									kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
								}
							}
						},
						duration: o.duration,
						easing: o.easing
					});
				});
			}
		});
	};
})(jQuery);


</script>




<script type="text/javascript">
	
	 function my_kwicks(){
    $('.kwicks').kwicks({
		duration: 300,   
        max: 200,  
        spacing:  0  
    });
}  

 $(document).ready(function(){					
	my_kwicks();
});
</script>




<script type="text/javascript">








            $(document).ready(function() {

                $('#menu a').hover(function() {
                    $(this).children('strong').stop().fadeTo(300, 1);
                }, function () {
                    $(this).children('strong').stop().fadeTo(300, 0);
                }).children('strong').empty().css('opacity', 0);

            })

			function show(ele) {
      var srcElement = document.getElementById(ele);
      if(srcElement) {
          if(srcElement.style.display == "block") {
            srcElement.style.display= 'none';
          }
          else {
            srcElement.style.display='block';
          }
      }
  }
    </script>

<!--
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> -->
<script type='text/javascript' src='{theme}/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='{theme}/kwicks.js'></script>
<script type='text/javascript' src='{theme}/custom.js'></script> 


	
	
	

</head>

<body>
{AJAX}
	<table width="1020" cellpadding="0" cellspacing="0" border="0" align="center">
	<tr>
		<td id="menu1">

			<table width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td width="11" height="79" valign="top"><img src="{THEME}/images/pic_02.png" /></td>
				<td style="background: url('{THEME}/images/pic_03.png') top repeat-x;" width="138" valign="top">
					<a href="/"><img src="{THEME}/images/pic_04.png" /></a>
				</td>
				<td style="background: url('{THEME}/images/pic_03.png') top repeat-x;" valign="top">
				
				
				
				

 <ul class="kwicks">  
     <li id="kwick1"><a href="#">Home</a></li>  
     <li id="kwick2"><a href="#">Contact</a></li>  
     <li id="kwick3"><a href="#">Downloads</a></li>  
     <li id="kwick4"><a href="#">Search</a></li>  
 </ul> 

				
				
				
				
				
				
				
				
				
				
				
				
				
				
				<!--	<ul id="menu">
					<li><img src="{THEME}/images/sep.png" /></li>

					<li><a id="menu_item_3" href="/news"><strong>Íîâîñòè</strong></a></li>
					<li><img src="{THEME}/images/sep.png" /></li>
					<li><a id="menu_item_4" href="faq.html"><strong>FAQ</strong></a></li>
					
					<li><img src="{THEME}/images/sep.png" /></li>
					<li><a id="menu_item_6" href="/kontakty.html"><strong>Êîíòàêòû</strong></a></li>
					<li><img src="{THEME}/images/sep.png" /></li>
					<li><a id="menu_item_7" href="/reklama_na_sayte.html"><strong>Ðåêëàìà</strong></a></li>

					<li><img src="{THEME}/images/sep.png" /></li>
				</ul> -->
				</td>
				<td width="11" height="79" valign="top"><img src="{THEME}/images/pic_05.png" /></td>
			</tr>
			</table>
		</td>
	</tr>





	
	<tr>

		<td>
		<div class="login"> 
			{login}
</div>
			<div id="loading"></div>
		</td>
	</tr>
	<tr>
		<td>
			<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td width="17" height="17"><img src="{THEME}/images/border_14.png" /></td>
				<td background="{THEME}/images/border_15.png"></td>

				<td width="17" height="17"><img src="{THEME}/images/border_18.png" /></td>
			</tr>
			<tr>
				<td width="17" height="461" valign="top"><img src="{THEME}/images/border_19.png" /></td>
				<td bgcolor="#151515" valign="top"></td>
				<td width="17" height="461" valign="top"><img src="{THEME}/images/border_21.png" /></td>
			</tr>
			<tr>
				<td width="17" height="100%" background="{THEME}/images/border_22.png"></td>

				<td bgcolor="#151515" valign="top">
					<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: -461px; position: relative;">
					<tr>
						<td width="182" valign="top">
							<div class="nav-block">
								<div class="marg-bimg">
									<h1><center>- = M E N I U = -</center></h1>
									<ul id="nav-menu">

									<li><a href="/">Home</a></li>
									<li><a href="/news">News</a></li>
									<li><a href="/">CSX Bans</a></li>									
									<li><a href="/">Server List</a></li>
									<li><a href="/forum">Forums</a></li>
									<li><a href="index.php?do=stats">Site Stats</a></li>
									<li><a href="index.php?do=feedback">Feedback</a></li>
									<li><a href="/">Downloads</a></li>
									<li><a href="/chat.html">Chat  <img src="{THEME}/images/new.png"></a></li>
</ul>
								</div>
							</div>


</div>			
<div class="block">
								<h1><center>- = V O T E = -</center></h1>
								<p>{vote}</p>
							</div>

							
						<div class="block">
								<h1>Online</h1>
								{online}
							</div>
		


						<td valign="top" align="center">
							<div class="page" style="margin-bottom: 15px;">

								<div class="page-header">Search</div>
								<form onsubmit="javascript: showBusyLayer()" method="post">
									<input type="hidden" name="do" value="search" />
									<input type="hidden" name="subaction" value="search" />
									<table width="95%" style="margin: -5px 10px 10px 10px;">
									<tr>
										<td background="{THEME}/images/sbg.gif" valign="top" style="padding-top:10px;padding-left:4px;">
											<input id="story" name="story" type="text" class="search-text" />

										</td>
										<td background="{THEME}/images/sbg.gif" width="52" valign="top" style="padding-top:9px;padding-left:4px;">
											<input type="image" src="{THEME}/images/search.png" border="0" alt="Íàéòè íà ñàéòå" align="absmiddle" />
										</td>
									</tr>
									</table>
								</form>
							</div>
							<div style="height: 60px; margin-bottom: 25px;"><a href="/"><img src="{THEME}/images/sell_me.png" style="border: 5px solid #202020;" /></a></div>

							<div class="page">
								[sort]<div class="page-header">
{sort}
								</div>
								[/sort]
							{info}
							{content}
							
<td width="182" valign="top" align="left">

		                                                                                                 
	

							
<div class="block">
								
<h1>Calendar</h1>
								<p align="center">{calendar}</p>

							</div>

								
												
<div class="block">
								<h1>Top news</h1>
								<p>{topnews}<br /></p>

							</div>
							
							<div class="block">
								<h1>????</h1>
								<p align="center"><a href="/"><img src="{THEME}/images/120x150.png" style="border: 5px solid #202020;" /></a></p>
							</div>

							
						</td>
					</tr>
					</table>
				</td>
				<td width="17" background="{THEME}/images/border_24.png"></td>
			</tr>
			<tr>
				<td width="17" height="17"><img src="{THEME}/images/border_26.png" /></td>

				<td background="{THEME}/images/border_28.png"></td>
				<td width="17" ><img src="{THEME}/images/border_29.png" /></td>
			</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td height="50" id="footer">
			<div style="float: left;">

				
			<i>
Ïðè èñïîëüçîâàíèè ìàòåðèàëîâ ññûëêà íà èñòî÷íèê îáÿçàòåëüíà. Copyright &copy; 2011 All Rights Reserved.<br />
 </div>
			<div style="float: right; opacity: 0.2;">
				<img src="{THEME}/images/8831.jpg" />
				<img src="{THEME}/images/8831.jpg" />
				<img src="{THEME}/images/8831.jpg" />
			</div>

		</td>
	</tr>
	</table>
</body>
</html>