JavaScript - Highlight Two Links On One Image

hey guys this is my first post, looking at the sheer wwealth of knowledge on here i thought you guys would be the best people to ask.

I have created a photography website myself and coded it all in dreamweaver cs4. Now i have created it using html, as i didnt want to limit it to flash users and loading times etc etc. So today i found myself a nice simple slideshow tool that uses html and javascript. i created it using a site online (which i will not post as i dont think we are allowed to post to online sites).

The slideshow loads images up in the background, and it plays them in a random order.

Now i am able to define individual image links to either a url of the an image, or point it to individual images, listing them one by one in my coding, which as a photographer having differet galleries is goign to be a royal pain when i want to have new images showing up.

So my idea is to replace the code that retrieves in dividual images from url's, to replace it with a piece of code that will display an image from a list of about 7 or 8 folders on my server all containing images....

i.e. displays an image from the folder .../images/models/pic01.jpg then it brings up an iamge from a different folder .../images/portrait/pic08.jpg.

Is there a way to do this and how can i go about it?

this is the code i currently have:

Code:

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["/images/models/photo01.jpg", "", ""];
theimage[1]=["/images/models/photo02.jpg", "", ""];
theimage[2]=["/images/models/photo03.jpg", "", ""];
theimage[3]=["/images/models/photo04.jpg", "", ""];
theimage[4]=["/images/models/photo05.jpg", "", ""];

///// Plugin variables

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='revealtrans';// 'blendTrans' or 'revealtrans'
transattributes='0';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;


//###########################################
//if random
function SetRandom() {
	tempimage = new Array();
	for(p=0; p<theimage.length; p++){
		for(p1=0; p1>-1; p1) {
			tempNum = Math.floor(Math.random()*theimage.length)
			if(!tempimage[tempNum]){
				tempimage[tempNum]=theimage[p];
				break;
			}
		}
	}
	for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
}

//if random order
SetRandom()


//###########################################
window.onload=function(){

	//preload images into browser
	preloadSlide();

	//set transitions
	GetTrans();

	//set the first slide
	SetSlide(0);

	//autoplay
	PlaySlide();
}

//###########################################
function SetSlide(num) {
	//too big
	i=num%theimage.length;
	//too small
	if(i<0)i=theimage.length-1;

	//switch the image
	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
	document.images.imgslide.src=theimage[i][0];
	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

}


//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	// if you have to change the image for the "playing" slide
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}


//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
	//si=document.slideshow.trans.selectedIndex;

		if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
		dotrans=0;
	}
	else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
		dotrans=1;
		transtype='blendTrans';
		document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
	}else{
		dotrans=1;
		transtype='revealtrans';
		if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
		document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
	}

}
//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][0]=new Image().src=theimage[k][0];
	}
}


</script>

then this is the little bit of html

Code:

<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
	<td align="center">
	<a href="#" onMouseOver="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
	</script>
	</a>
	</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

hope someone can shed a little light on this for me

thank you

Chris

Let me start of by saying that I'm a designer, not a programmer so I'll apologize in advance for having very little knowledge of javascript.

I found a free script for a auto-advancing slideshow that allows you to give each image in the slideshow a unique link. My problem is that when you click on one of the pictures the link opens in a new window instead of loading in the default browser window. I have tried to search google for an answer but my lack of javascript knowledge has left me scratching my chin.

Here's the code in the head of my page:

Code:

<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow
*/

var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages(){
  for (i=0;i<slideshowimages.arguments.length;i++){
  slideimages[i]=new Image()
  slideimages[i].src=slideshowimages.arguments[i]
  }
}

function slideshowlinks(){
  for (i=0;i<slideshowlinks.arguments.length;i++)
  slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
  if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
  else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
}
//-->
</script>

and here's the Body code:

Code:

<script>
		<!--
		//configure the paths of the images, plus corresponding target links
		slideshowimages("images/services/3d_meter.jpg", "images/services/3d_prototype.jpg", "images/services/3d_stage_renderings.jpg", "images/services/atsite.jpg", "images/services/netstar.jpg", "images/services/photo_manipulation.jpg", "images/services/powerpoint.jpg")
		slideshowlinks("/", "/", "/", "/", "/", "/", "/")

		//configure the speed of the slideshow, in miliseconds
		var slideshowspeed=8000
		var whichlink=0
		var whichimage=0

		function slideit(){
  		if (!document.images)
    		return
    		document.images.slide.src=slideimages[whichimage].src
    		whichlink=whichimage

  		if (whichimage<slideimages.length-1)
    		whichimage++
  		else
    		whichimage=0
    		setTimeout("slideit()",slideshowspeed)
		}
		slideit()
		//-->
		</script>

fooling around with it, I think I have determined that my problem is the window.open in the function gotoshow, but again, I'm a designer who has little knowledge of how this actually works.

If it helps, here is a link to my site where I have the slideshow, http://gravescreativedesign.com/services.html All of the images link to the index page for my site at the moment for testing purposes, but these images will eventually link to different urls within my portfolio section of my website.

Referring to following link, I get no idea on what the highlight code do,
I would like to retrieve the web page using direct URL coding without using function.
Does anyone have any suggestions?
Thanks in advance for any suggestions

http://www.dailyfx.com.hk/calendar/index.html

function setFilter(field, value){
var params = {};
params["type"] = "calendar";
params["date"] = "2011-12-06"
$('#calTable').load("/inc/process.php", params, function(data){
$(this).html(gbBig5(data)); });
}

Hi

I am doing validation on a form, but instead of throwing an alert on empty fields I want to highlight those fields indicating error. if all are empty, then i would like to show only 1 generalized error
message "Pls. fill the highlighted textboxes.".
how do i do this and thanks in advance.

Hey guys,

So, I am using the highlight.js library to highlight posted code. It is working fine, however in IE it centers everything within my <pre><code>...</code></pre> area. This is because my body has the attribute: text-align: center; This is specifically because IE doesn't respond to: margin: 0 auto. So, how could I go about fixing this? Here is the code.

Code:

<html>

<head>

<link rel="stylesheet" href="highlight/styles/sunburst.css">
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<style type="text/css">

	pre 
	{
		overflow: auto;
	}
	p hover 
	{
		position: relative;
		width: 100%;
		height: 80%;
		z-index: 99;
	}
	
	body
	{
		margin: 0px;
		text-align: center;
	}

	.spacer1
	{
		height: 7%;
	}
	
	.sub_title
	{
		text-align: center;
		font-size: 1.7em;
		font-family: monospace;
		font-weight: bold;
	}
	
	.sub_title2
	{
		text-align: center;
		font-size: 1.4em;
		font-family: monospace;
		font-weight: bold;
	}

	.text_norm
	{
		font-size: 1.2em;
		font-family: monospace;
		text-align: left;
	}
	
	.code_cont
	{
		width: 90%;
		height: 40%;
		background-color: #CCCCCC;
		border: 1px solid #333333;
		margin: 0 auto;
		overflow: auto;
		text-align: left;
	}

	#container
	{
		background-color: #999999;
		width: 80%;
		height: auto;
		margin: 0 auto;
		overflow: hidden;
		padding-bottom: 5%;
	}
		
	#title_cont
	{
		background-color: #333333;
		width: 100%;
		height: 10%;
		display: table;
		text-align: center;
	}

	#title
	{
		color: #ffffff;
		font-size: 2.4em;
		font-family: monospace;
		font-weight: bold;
		display: table-cell;
		vertical-align: middle;
	}
	
	#summary_cont
	{
		width: 90%;
		margin: 0 auto;
	}
	
	#ex_cont
	{
		width: 90%;
		margin: 0 auto;
	}
	
</style>

</head>

<body>

	<div id="container">
			
		<div id="title_cont">
			<span id="title">Dynamically Expanding Textarea Script</span>
		</div>

		<div id="summary_cont">
			<div class="sub_title">SCRIPT SUMMARY</div>
			<br />
			<div id="summary_body" class="text_norm">This script adds a feature on all textarea's in a page allowing them
			to dynamically change height according to their content. The script goes at the very bottom of the body. The
			script first makes an array of all the textareas on the page, and then modify's the onfocus, onblur</div>
		</div>
		
		<div class="spacer1"></div>
		
		
		<div class="sub_title2">Code(Goes at bottom of &lt;body&gt;)</div>
		<pre class="code_cont">
		<code>
&lt;script type="text/javascript"&gt;
	
////////////////////////////////////
//   Auto Expand Textarea Script  //
////////////////////////////////////
//This script gives every textarea//
//the property of expanding and   //
//returning to original size      //
//relative to its conetnt.        //
////////////////////////////////////
//   Insert at end of body tag    //
////////////////////////////////////
		
//Sniffer is the variable holding the recursive setTimeout function
var sniffer;
//textareas is the array of every textarea element found on the page
var textareas = document.getElementsByTagName('textarea');
		
//If user is viewing through IE, set overflow to visible, everything
//else is already taken care of.
if (navigator.appName == 'Microsoft Internet Explorer')
{
	for(var i=0; i %lt; textareas.length; i++)
	{
				textareas[i].style.overflow = "visible";
	}
}
else
{
	//This function dynamically changes the height of the textarea in focus
	function tAreaSniffer(tArea, prevVal)
	{
		//This makes sure the textarea doesn't change height if no changes
		//have been detected recently.
		var curVal = tArea.value;
		if(curVal != prevVal)
		{
			tArea.style.height = 1 + "px";
			tArea.style.height = tArea.scrollHeight + "px";
		}
		//This is a recursive call that will execute 50 milliseconds after here.
		sniffer = setTimeout(function(){tAreaSniffer(tArea, curVal)}, 50);
	}
	//This cycles through every textarea on the page and assigns different properties
	//and methods as can be seen below. Onfocus property means when a textarea has
	//focus, the script tAreaSniffer will run. When it loses focus the function will stop.
	//Overflow hidden ensures that no scrollbar will be present, and minHeight is to make
	//sure the textarea never gets smaller than its originally intentded height.
	for(var i=0; i &lt; textareas.length; i++)
	{
		textareas[i].onfocus = function(){tAreaSniffer(this, this.value);};
		textareas[i].onblur = function(){clearTimeout(sniffer);};
		textareas[i].style.overflow = "hidden";
		textareas[i].style.minHeight = textareas[i].offsetHeight + "px";
	}
}
				
&lt;/script&gt;
		</code>
		</pre>
				
				
		<div class="spacer1"></div>
		
		<div id="ex_cont">
			<div class="sub_title2">Example</div>
			<div class="text_norm">Below are several textareas. This is meant to demonstrate the script's universal
			power, in the sense that it will modify each and every textarea object. To test the script, simply type, 
			or copy and paste text into the textareas. They should change accordingly.</div>
			<div>
				<textarea cols="42" rows="6"></textarea>
				<textarea cols="42" rows="6"></textarea>
				<textarea cols="42" rows="6"></textarea>
				<textarea cols="42" rows="6"></textarea>
			</div>	

         
		</div>        	
	</div>
	
<script type="text/javascript">
	
////////////////////////////////////
//   Auto Expand Textarea Script  //
////////////////////////////////////
//This script gives every textarea//
//the property of expanding and   //
//returning to original size      //
//relative to its conetnt.        //
////////////////////////////////////
//   Insert at end of body tag    //
////////////////////////////////////
		
//Sniffer is the variable holding the recursive setTimeout function
var sniffer;
//textareas is the array of every textarea element found on the page
var textareas = document.getElementsByTagName('textarea');
		
//If user is viewing through IE, set overflow to visible, everything
//else is already taken care of.
if (navigator.appName == 'Microsoft Internet Explorer')
{
	for(var i=0; i < textareas.length; i++)
	{
				textareas[i].style.overflow = "visible";
	}
}
else
{
	//This function dynamically changes the height of the textarea in focus
	function tAreaSniffer(tArea, prevVal)
	{
		//This makes sure the textarea doesn't change height if no changes
		//have been detected recently.
		var curVal = tArea.value;
		if(curVal != prevVal)
		{
			tArea.style.height = 1 + "px";
			tArea.style.height = tArea.scrollHeight + "px";
		}
		//This is a recursive call that will execute 50 milliseconds after here.
		sniffer = setTimeout(function(){tAreaSniffer(tArea, curVal)}, 50);
	}
	//This cycles through every textarea on the page and assigns different properties
	//and methods as can be seen below. Onfocus property means when a textarea has
	//focus, the script tAreaSniffer will run. When it loses focus the function will stop.
	//Overflow hidden ensures that no scrollbar will be present, and minHeight is to make
	//sure the textarea never gets smaller than its originally intentded height.
	for(var i=0; i<textareas.length; i++)
	{
		textareas[i].onfocus = function(){tAreaSniffer(this, this.value);};
		textareas[i].onblur = function(){clearTimeout(sniffer);};
		textareas[i].style.overflow = "hidden";
		textareas[i].style.minHeight = textareas[i].offsetHeight + "px";
	}
}
			
</script>
	
</body>

</html>

I'm trying to highlight the row color when the input field is changed but get an error. Can someone please help. TRACY

Code:

<script type="text/javascript">
 function toggle(trid){
var edited_row_bgcolor = '#FAEBD7'; 
var elm = document.getElementById(trid); 
document.elm.style.background = edited_row_bgcolor;
}


 </script>


 
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr id="Child1">
    <td width="50%"> 
        <input onchange="toggle('Child1');" type="text" name="T1" size="20">
     </td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td width="50%"><input type="text" name="T1" size="20"></td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td width="50%"><input type="text" name="T1" size="20"></td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td width="50%"><input type="text" name="T1" size="20"></td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td width="50%"><input type="text" name="T1" size="20"></td>
    <td width="50%"></td>
  </tr>
</table>

Hi guys,

I wonder if anyone can help me here,

got this below code for a page im working on,

what you'll notice is that when you hover over 'order' a sub menu appears,

what I need help on is this, how do I make the 'order' remain highlight while Im hovering over the sub menus.

hope im making sense.

thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test </title>
 
<style type="text/css"> 
#menu {width:800px; height:36px; text-align:left; background:url(red.gif);}
#menu li a {display:block; width:80px; margin-top:5px; height:24px; color:#000; 
	  	   text-decoration:none; padding:0 10px 0 10px; font: bold 12px/22px verdana;}/* This sets the default properties*/
		   
#menu li a:hover{padding:0 9px; border:1px solid #000; background:#444; color:#fff; line-height:24px}/* This sets the hover properties*/
#menu ul {width: 100%;margin: 0 75px auto;}  /* This centres the menu 100px from the left*/

#menu li
{	margin: 0;  padding: 0; list-style: none; float: left;}

#sddm div
{	position: absolute; visibility: hidden; margin: 0; background: #EAEBD8; border: 1px solid #5970B2}

#sddm div a {position: relative; display: block; margin: 0; width: auto; white-space: nowrap; text-align: left; text-decoration: none;
		background: lightgrey; border-left:1px solid black; color: #2875DE;}

#sddm div a:hover{	background: #49A3FF; color: #FFF}
   /* End navigation bar styling. */
   
   /* This is just styling for this specific page. */
   body { font: small/1.3 Arial, Helvetica, sans-serif; }
   
div { text-align:center; }
 
div#page { border:1px solid lightgrey; width:800px; margin:0 auto; padding:5px; text-align:left;}
 
div#header { border:2px solid lightgrey; width:796px; height:100px;}
 
 
div#content { border:2px solid lightgrey; width:796px; min-height:500px; _height:500px}
 
div#footer { border:2px solid red; width:750px; height:30px;}
 
</style>
<script type="text/javascript">
<!--
var timeout         = 1;
var closetimer		= 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
// -->
</script>

</head>
<body>
 
<div id="page">
 <div id="header">Header</div>
 <div id="menu">
 	  <ul id="sddm">
	  	<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Visa Credit Card</a>
		<a href="#">Paypal</a>
		</div>
	</li>
	  	  <li><a href="#">Home</a></li>
      	  <li><a href="#">Our Products</a></li>
      	  <li><a href="#">FAQs</a></li>
      	  <li><a href="#">Contact</a></li>
      	  <li><a href="#">Login</a></li>
     </ul>
 </div>
 <div id="content">Content</div>
 <div id="footer">Footer</div>
</div>
 
</body>
</html>

Hi,
On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas?

I've Googled this without success. I have a webpage with an iframe which is on my same server. My parent page is a form which posts to the iframe page. The iframe page is a shell script that is used to telnet to routers and process commands and display the commands and responses.

I need to have a highlight text option on the parent page for what is displayed in the iframe. Is this possible to do this with Javascript and if so, can you share that with me?

Hi all,

Please forgive me if this is a dumb question. Is it possible to highlight the contents of all text and/or textareas within one form simultaneously?

I've tried to do it using the funciton below, it cycles through allright, but only highlights each field whilst it is in focus, then loses it when it moves to the next field. The result is that only the last text/textarea within the form is highlighted. My aim is to highlight all fields for subsequent spell checking.

Any help would be appreciated.

Code:

<html>
<head>
<script type="text/javascript">

	function SelectText(){
         var fields = document.getElementsByTagName("input");
         for (var i = 0; i < fields.length; i++){
    	  var node = fields[i]; 
      	  if (node.getAttribute('type') == "text"){
	   node.focus(); 
	   node.select();
	  }
	 }
	} 

</script>
</head>
<body>
<form id="form1" action="">
<p></p>
<input type="text" id="one" style="width:500px;">
<p></p>
<input type="text" id="two" style="width:500px;">
<p></p>
<input type="button" value="Select Text" onclick="javascript:SelectText();">
</form>
</body>
</html>

I have some table rows with an item, item description and a text field named "qty" for the quantity. If a user types a number above 0 in the "qty" field, I would like it to highlight the table row. If a user gos back and deletes the number already in the text field I would like the table row to return to it's default state. How can I do this?

Hi I have the code below. I am trying to get the radio button selector to highlight on mouseover and remain highlighted until focus is taken away from the highlighted selector.

[CODE]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>


</head>

<body >

<div onmouseup="setBack(Radio1,1)" style="width:1000px; height:1000px">
<input id="Radio1" type="radio" name="RadioGroup" /><label id="lblRadio1" for="Radio1" title="Radio1"
onmouseover="setBack(Radio1, 2)" >Radio1</label>


<div onmouseup="setBack(Radio2, 1)" style="width:1000px; height:1000px">

<input id="Radio2" type="radio" name="RadioGroup" /><label id="lblRadio2" for="Radio2" title="Radio2"
onmouseover="setBack(Radio2,2)">Radio2</label>

</div>

</div>

<p>
&nbsp;</p>
<p>
&nbsp;</p>
<script type="text/javascript">
function setBack(rdo, area) {

switch (area) {

case 1:
rdo.style.background = "White";
break;
case 2:
rdo.style.background = "Blue";
break;
default:
rdo.style.background = "White";
break;



}


}

</script>
</body>

</html>
[CODE]

Hi all

I have created a single page horizontally scrolling website comprised of 5 sections with a fixed navigation bar in the top right of the screen at http://www.clickmunki.com and I am trying to figure out how to highlight the active section of the site in the nav bar as the user navigates through the site so that the user knows exactly which section of the site they are in. I assumed this would be a pretty basic thing to try and do but I have not been able to achieve it so far. I have tried a few different methods but no success as yet. Can anyone point me in the right direction as to how best achieve this? Can I do it just using css or would i need some js? Any assistance would be very much appreciated.111

Kind regards

Anne

This is my js:

Code:

 $(".nav").click(function(){
			$(".nav.a").toggle("fast");
			$(this).toggleClass("active");
					});

This is my css;

Code:

.nav {
text-align: center;
overflow: hidden;
margin: .3em ;
width: 500px;
position: fixed; 
padding: 0px 0px 0 830px;
}

.nav a {
position: relative;
float: left;
padding: 2.2em 0 3.1em;
width: 20%;
text-decoration: none;
color: #484848;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }

.nav a:hover {
color: #c6342e; }

.effect {
position: absolute;
left: 120%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }

.nav a:nth-child(1):hover ~ .effect {
left: 66.3%; }
.nav a:nth-child(2):hover ~ .effect {
left: 73.8%; }
.nav a:nth-child(3):hover ~ .effect {
left: 81.2%; }
.nav a:nth-child(4):hover ~ .effect {
left: 89%; }
.nav a:nth-child(5):hover ~ .effect {
left: 96.4%; }
	  


/* ----- dot effect -----*/

.ph-dot-nav:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #484848;
  bottom: 40px; 
  }

  .ph-dot-nav a:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  bottom: 38px;
  left: 50%;
  margin-left: 0px; 
  background: #484848;
  border-radius: 100%; }

  .ph-dot-nav .effect {
  width: 10px;
  height: 10px;
  bottom: 36px; 
  margin-left: -5px;
  background: #fff;
  border-radius: 100%; 
  z-index:999;}