|
JavaScript - Highlight Text In Div (code Acts Weird Using Opera)
This might be a little complicated. I'll try to be as clear as possible. I got some help from Old Pedant a little while ago and the code worked great.
The problem came after I tried some code that will highlight (select) text in a DIV: Code: <script type="text/javascript">
function selectNode (node) {
var selection, range, doc, win;
if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof
win.getSelection != 'undefined' && typeof doc.createRange != 'undefined'
&& (selection = window.getSelection()) && typeof
selection.removeAllRanges != 'undefined') {
range = doc.createRange();
range.selectNode(node);
selection.removeAllRanges();
selection.addRange(range);
}
else if (document.body && typeof document.body.createTextRange !=
'undefined' && (range = document.body.createTextRange())) {
range.moveToElementText(node);
range.select();
}
}
</script>
Code: <div id="bb1"></div>
<form>
<input type="button" value="Click Here to Highlight Data" onclick="window.selectNode(document.getElementById('bb1'));" style="margin-left:4px; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px;">
</form>
It works great with Firefox and Internet Explorer, but there is a problem with Opera. The contents of the DIV is selected, but so is everything after the DIV. Below is a link to the page, but be sure to turn down your speaker volume before you visit the page so you won't have a heart attack: http://www.randomterrain.com/atari-2...music-toy.html The DIV is empty when the page loads. To put content in the DIV, jump down to All Sounds and left click on a couple of the numbers than run from 0 to 31, then jump down to the DIV. When you click on the "Click Here to Highlight Data" button, you'll see that more than the contents of the DIV is selected. I hope someone can figure out how to make the code work properly with Opera. Thanks. Similar TutorialsHi, Here's a sample form: Code: <form action="#" method="post"> Name:<br /> <input type="text" name="name" value="your name" /><br /> E-mail:<br /> <input type="text" name="mail" value="your email" /><br /> <input type="submit" value="Send"> </form> When you tab to a text input, the value gets highlighted. How can it be disabled? Any help is appreciated! Mike 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, 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? 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>
Hi, I am having trouble searching for text in a textarea in all browsers. I display formatted text in a textarea with tinyMCE editor. Some of the text contains blanks ('______') which the user needs to find and fill in (usually with a number). I have written a new button on the toolbar of the editor which will find and highlight the blank when clicked. The user will click the button, fill in the text, click the button, fill in the text, etc. In IE the blanks are highlighted just fine. The only problem is: user clicks button and first blank is highlighted. User fills in the text then clicks the button again. Second blank should be highlighted but it skips right to the third blank. If you don't fill anything in, the next blank will be highlighted. If you highlight and then fill anything in, the next blank is skipped and the following blank is highlighted. Any thoughts? But my worst problem is with Mozilla. I get an error. It does not act like setSelectionRange(pos, pos+len(str)) is a valid function call. I receive the following error: "component returned failure code: 0x800004005 (NS_ERROR_FAILURE)[nsIDOMNSHTML TextareElement.setSelectionRange]" Here is my function: var win = window; var n = 0; var str = '______'; function FindBlanks() { var txt, i, found; win = tinyMCE.get('txtPolicy').getDoc(); if (str == "") return false; if (window.execScript) { txt = win.body.createTextRange(); //Find the nth match from the top of the page for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } // If found, mark it and scroll it into view if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); // n = i--; n++; } //Otherwise, start over at the top of the page and find first match else { if (n > 0) { n = 0; alert("End of document has been reached."); } //Not found anywhere, give message. else alert("No blanks found."); } } else { //document.getElementById('txtPolicy').setFocus; var ht = '______'; if (ht.length == 0) { alert('highlightText has zero lenth'); return false; } var str2 = document.getElementById('txtPolicy').value; var startPos = str2.indexOf(ht); if (startPos == -1) { alert('No blanks found'); return false; } document.getElementById('txtPolicy').focus(); document.getElementById('txtPolicy').setSelectionRange(startPos, startPos + ht.length); return true; if (n == 0) alert ("No blanks found."); } return false; } Can anyone help me with this? Thanks. Hi, As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off. But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now. I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa. Code: <!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var btn = function () {
var active = null, bcolor = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = bcolor;
active = element;
}
};
}();
</script>
</head>
<body>
<div onclick="btn(this);">ONE </div>
<div onclick="btn(this);">TWO </div>
</body>
</html>
I'm using a nice little script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use. Nice It works on every browser ie7 ie8 ie9 FF safari chrome but not on opera. On Opera the regular file input appears. I've had a good hoke round the 'net and I know there's loads of scripts which do similar things. But either they are too complicated for me to figure out how to use them eg uploadify (bit of a newbie) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too). here's the script I'm using - there's not much to it How come it doesn't work in Opera grrrr... Is there anyway to fix it? This is perfect for what I want apart from not working in Opera Hi, I have say 12 pics on a page, in 3 rows of 4. The rows of pics are there so that a choice can be made from each row and I'm using a function <script> var highlight_color = '#FF0033'; function toggle_highlight(id) { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var image = images[i]; image.style.borderColor = image.id == id ? highlight_color : 'white'; } } </script> to toggle a border colour change so that you can see what was chosen from each row. The function I have used is fine in that it works, but I can only choose one picture and have the border changed, then if I click on another row the first border that changed obviously changes back and the new selection is highlighted. I don't really know where to go from here. Any help will be much appreciated. Thank you. 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. 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>
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? 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 <body>)</div>
<pre class="code_cont">
<code>
<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 %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 < 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>
</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>
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>
Hello, I have an image that contains two links; however, you cannot tell unless you happen to mouseover the right area and a message appears "Click here..." How do I highlight the area so that the user knows the links are there? This is the url: http://jaxpubliclibrary.org/progs/jpl/foote.html Thank you for your help, Elbee Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite ) Code: $('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});
nav li is as follows Code: <nav>
<li class="highlt">
<a href="index.php" class="home"><span>Home</span></a>
</li>
The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work 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> </p> <p> </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 a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state. Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element. Take a look at a basic example I've mocked up, and see the code below: CSS: Code: #navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:155px;
color:#fff;
text-decoration:none;
background:url(../images/tab.gif) no-repeat;
padding-top: 7px;
padding-right: 4px;
padding-bottom: 6px;
padding-left: 10px;
}
#navlist a:hover {
background-position:0 -29px;
color: #1e5ebd;
}
#navlist a:active {
background-position:0 -58px;
color:#1e5ebd;
}
HTML: Code: <!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=iso-8859-1" />
<title>Test Page</title>
<link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />
<script>
function changeFlash(url){
var d=document;
(d.all)? d.all("flashMov1").movie = url :
d.embeds["flashMov2"].src = url;
}
</script>
</head>
<body>
<!-- Tour Box Begins Here -->
<div id="box">
<div id="titleBar"></div>
<div id="content">
<div id="menu">
<ul id="navlist">
<li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
<li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
<li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
</ul>
</div>
<div id="videoDisplay">
<object id=flashMov1
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
width="233" height="156">
<param name="movie" value="sb-main.swf" />
<param name="quality" value="high" />
<param name="SCALE" value="exactfit" />
<embed src="sb-main.swf"
width="233" height="156" name=flashMov2 quality=high
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
</object>
</div>
</div>
</div>
<!-- Tour Box Ends Here -->
</body>
</html>
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;}
|
|||||||