|
JavaScript - Lightboxes And Hover-overs?
Hi. I'm trying to make a progression module for my guild. I would like it to be "lightbox" with several thumbnail images one can over over to bring up some descriptive text.
How can I do this? I assume it's simple code. Thank you very much. Similar TutorialsCould some one help me with achieving a roll over effect? Not the type where you hover over a link and a image appears and then you move away from the link and it disappears but rather like the ones viewable in the roll over section here @ www.dailyscience.com - that is you hover over a link and text and an image appears but then you move away and it still remains until you hover over another link? I'm a novice to javascript and am still learning so any help would really be appreciated, thanks! PS I realise there is a connection to the HTML code as this is where the content lies but interlinking this with my desired effect is rather annoying. Once again thanks. I want to mouse over a symbol (or coordinate) on an image and have a photograph appear of the real life item. Is there a code that could be used for doing this? Any help appreciated. Hi all, I was just wondering if there is a JavaScript tutorial online that shows you how to do similar hover effect to what Twitter does with the trending topics. Such as Inception. When you hover over it and a black bubble appears. Also I'm not sure what it is called. If anyone knows how to do it, It would be appreciated. Thanks! I have two divs, one is the triggering and the other is the hidden one. Hovering the first div will show the hidden div. To hide the div the user must "mouseout" from this div, however if the user "mouseout" from the first div nothing will happend and that is the problem because if there are another group next to them, and the user pass from one triggering div to the next this will show the two hidden divs stacking over one another. This is for a horizontal menu (something like www.oracle.com). The actual code is this: Code: <div id="option_a"><p>FIRST OPTION</p>
<div id="option_a_menu">
**HERE ARE LIST, DIVS, IMGS**
</div>
</div>
<div id="option_b"><p>SECOND OPTION</p>
<div id="option_b_menu">
**HERE ARE LIST, DIVS, IMGS**
</div>
</div>
The JS: Code: function init() {
oOptionA=document.getElementById("option_a");
oOptionAmenu=document.getElementById("option_a_menu");
oOptionB=document.getElementById("option_b");
oOptionBmenu=document.getElementById("option_b_menu");
//behaviors
addEvent(oOptionA,'mouseover',goOptionA);
addEvent(oOptionAmenu,'mouseout',outOptionAmenu);
addEvent(oOptionB,'mouseover',goOptionB);
addEvent(oOptionBmenu,'mouseout',outOptionBmenu);
}
function goOptionA() {
oOptionAmenu.style.visibility="visible";
}
function outOptionAmenu() {
oOptionAmenu.style.visibility="hidden";
}
function goOptionB() {
oOptionBmenu.style.visibility="visible";
}
function outOptionBmenu() {
oOptionBmenu.style.visibility="hidden";
}
The user will hide the option A menu only when his mouse clears the div that showed up. However is he hover the triggering div and go just to the next triggering div (The second div) will trigger the visibility of their menu, but the previously menu will still on stage, stacking the two menus. I was trying this to solve the problem: Code: ...addEvent(oOptionA,'mouseout',goOptionA);
function goOptionA() {
if (oOptionAmenu!=hover) {
oOptionAmenu.style.visibility="hidden";
} else {
oOptionAmenu.style.visibility="visible";
}
}
However, this is not working, something is wrong with the "oOptionAmenu!=hover" but how can I do this ? Thanks in advanced Quick question, I need to get the hover effect that Templatemonster has, for example click here and hover over a template image see how you get that larger pop-up image that disappears instantly after you remove you mouse from the template thumbnail image. How would I get that effect? Thanks!!! Rather than post everything here, I'll give a link to my stackoverflow post, which didn't receive a good answer. Note: I have a different function that uses toggleClass on these same elements One person suggested using CSS. That worked very well, until I went to toggle my elements the second time (remove the added class). Then, the new "transition" line in my CSS caused the jQuery transition to perform very quickly. html - Using jquery .hover, with $this - Stack Overflow How can I get hover to work? Or better, use css transition, which I prefer - without ruining my jQuery toggleclass' animate time? Thanks. Hi guys. How would I implement this css: Code: .story-wrap:hover .dates This obviously allows the .dates div to react when I hover over the .story-wrap div. How would I select the same in javascript with this code: Code: $(".story-wrap .dates").hover(function () {
Because currently it just reacts when .dates is hovered over. Cheers! Instead of loading the data when the page loads (thus making the page load slower) I wanna make it load when you hover over the tool tip so how would I change this? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test Screenname</title> <style type="text/css"> body {color:#000;background-color:#FFF; font-family:Arial, Helvetica, sans-serif;} /*tooltip*/ div.tooltip { width: 200px; color: #fff; text-align: center; } div.tooltip h4 { color: #fff; font-weight: bold; text-shadow: 2px 2px 1px #222; margin: 0; padding: 13px 10px 5px; background: url(img/balloon.png) top left no-repeat !important; background: url(img/balloon.gif) top left no-repeat; font-size: 11px; } div.tooltip p { margin: 0; padding: 0 10px 15px; text-shadow: 2px 2px 1px #222; background: url(img/balloon.png) bottom left no-repeat !important; background: url(img/balloon.gif) bottom left no-repeat; font-size: 10px; } </style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.onload=function() { /* setup tooltips */ var as = []; $S('a').each(function(a){ if (a.getAttribute('title')) as.push(a); }); new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25}); } </script> </head> <body> <a href="#" title=" <?php $url = "http://www.blockstatus.com/aim/status-checker/index.php"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS,"aimac=screenname"); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); $result2 = curl_exec ($ch); curl_close ($ch); $data = $result2; $pattern = '/Status:<\/b>(.*?)<br.*?><\/td>/i'; preg_match($pattern, $data, $status); $output = str_replace("Status: ", "", $status[1]); $aimstatus = trim($output); echo "$aimstatus"; ?> ">Test tooltip</a> </body> </html> I have a quick search box in my home page that I can't seem to get working properly. When the user types in the input field and hits the "Add" button, the word they typed in appears in a box below the "Add" button. I got that, no problem. The issue arises because I want the user to be able to hover over any of the words they typed in, see some visual change (like text color changing), and be able to click the word to delete it. Right now, when the user hits the "Add" button, a function is called and the word is stored to an array. Then I have a for() loop to display the contents of the array, but the for() is only displaying one word on the screen and it is the most recent word that was added. How can I make this right? HTML Form: Code: <form> <table> <th>Recipe Quick Search</th> <tr> <td class="quickSearchHeader">Ingredient:</td> </tr> <tr> <td><input type="text" name="quicksearch" size="18" id="quickSearchInput"/></td> </tr> <tr> <td class="quickSearchAddButton" name="quickSearchAddButton" id="quickSearchAddButton"><input type="image" src="images/quickAddButton.png" name="quicksearchadd" alt="Add" onclick="insert(this.form.quicksearch.value);show();this.form.quicksearch.value='';return false;"/></td> </tr> <tr> <td class="quickSearchIngList" id="quickSearchIngList" valign="top"></td> </tr> <tr> <td class="QSSubmit"><input type="submit" name="quickSearchSubmit" value="Search!"></td> </tr> </table> </form> Javascript Code: Code: <script type="text/javascript">
var array = new Array();
function insert(val)
{
if(val != "")
{
array.push(val);
}
}
function show()
{
if(array.length > 0)
{
for(i = 0; i < array.length; i++)
{
document.getElementById('quickSearchIngList').innerHTML = "<p id='quickList'>" + array[i] + "</p>";
}
}
}
</script>
I'm trying to create a menu navigation system from the top of the page. I want it so when I hover over the link, it drops down (the link drops down; so it'd be as if there was a whole field being hidden beyond the 0px mark) with the related field. I've gotten it to work, somehow but it still isn't right. A few issues a - when I hover over .drop_slide and then if I choose to close it by hovering back over the .drop_slide it does as it's told, which is "slide, slide". I'm interested in rectifying this issue so it doesn't do that, however I just don't know how. - The idea is to have multiple links in the .slide, so I need it to be constantly open while the user mouses over the other links. Should this be created in one field? If so, how would I do that with a drop down in mind? - Am I approaching this completely wrong? Lol. Should I be researching into .animate? I've been looking at it actually, but I can't get anything to grow negatively. Say; marginTop: -85px or something. ANY help is appreciated, thanks! Code: <html>
<head>
<title>test slide panel</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function slide() {
$("#panel").slideToggle("slow");
}
$(".drop_slide").hover(slide, stop);
$("#panel").hover(stop, slide);
});
</script>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: grey;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
background-color: red;
}
.drop_games {
width: 200px;
height: 31px;
padding: 10px 10px 0 0;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="panel">
additional links here...or information
</div>
<p class="slide"><a href="#" class="drop_slide">test link</a></p>
</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>
Help, I have a navigation menu that has a flyin effect for each item using Javascript. Right now, The Javascript flys in a picture (in the same location) no matter what item you hover over. How can I get it to fly into a different position for each item. Here is my code: 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" xml:lang="en" lang="en">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script src="hoverIntent.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav a").append("<em></em>");
$("#nav a").hoverIntent(function () {
$(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function () {
$(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
});
});
</script>
<style type="text/css">
body {
margin: 0px;
}
#nav
{
border-top: 2px solid #000;
border-bottom:2px solid #000;
width: 100%;
height: 36px;
line-height: 36px;
float: left;
background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
list-style: none;
width: 900px;
margin: 0 auto;
padding: 0;
position:relative;
}
#nav li {
float: left;
}
#nav li em {
background: url(images/home.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -43px;
left: 0px;
padding: 20px 12px 10px;
z-index: 1;
display: none;
}
#nav li a {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-size:medium;
padding: 0px 5px;
text-align:center;
color: #000;
width:110px;
height: 36px;
line-height: 36px;
background:transparent url("images/off.gif") no-repeat top right;
}
#nav li a:hover {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-weight:bold;
font-size:medium;
padding: 0px 5px;
width:110px;
height: 36px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</body>
</html>
Thank you! I have a div with an icon and some text. When the user hovers over the area, a box appears above it with a few links in the box. I want the user to be able to select any of these links, as well as have the option NOT to select these links and have the box disappear when he moves off of the box. I can't seem to achieve this with the script I'm using now - right now, as soon as the user moves off of the div/icon and moves the cursor UP to select the links in the box, the box disappears. Any ideas? Here's my JS code: Code: <script language="JavaScript">
function show_it(){
document.all.box1.style.visibility = "visible";
}
function hide_it(){
document.all.box1.style.visibility = "collapse";
}
</script>
Here's my CSS code: Code: #box1{
position: absolute;
top: -186px;
left: 147px;
visibility: hidden;
}
#socialmedia-action-items-container {position: relative; float: right;}
#box-wrapper {padding: 0 0 21px 0; height: auto; width: 160px; background: url(../images/socialmedia/sm-funnel.png) 10px bottom no-repeat; float: left;}
#box-main {padding: 10px 10px 0 10px; height: auto; width: 140px; background-color: #cc0000; float: left;}
a.box-item1 { /*flickr*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/flickr.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item1:hover {
color: #000;
background: url(../images/socialmedia/flickr-over.png) top left no-repeat;}
a.box-item1 span {font-size: 0.7em;}
a.box-item2 { /*facebook*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/facebook.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item2:hover {
color: #000;
background: url(../images/socialmedia/facebook-over.png) top left no-repeat;}
a.box-item2 span {font-size: 0.7em;}
a.box-item3 { /*twitter*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/twitter.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item3:hover {
color: #000;
background: url(../images/socialmedia/twitter-over.png) top left no-repeat;}
a.box-item3 span {font-size: 0.7em;}
Here's my HTML code: Code: <div id="socialmedia-action-items-container">
<a class="twitter" onMouseOver="show_it()" onMouseOut="hide_it()">
<span class="twitter-first">Follow Us on</span><br />
<span class="twitter-last">Twitter</span>
</a>
<div id="box1">
<div id="box-wrapper">
<div id="box-main">
<a href="#" class="box-item1">Follow us <br /><span>on Flickr</span></a>
<a href="#" class="box-item2">Follow us <br /><span>on Facebook</span></a>
<a href="#" class="box-item3">Follow us <br /><span>on Twitter</span></a> </div>
</div>
</div>
</div>
Much appreciated! Hi everyone, i am looking for a tutorial or example file i can download that features the following mouseover effect: http://www.webdesignerwall.com/demo/...ed-hover2.html i have tried googling for tutorials and have tried to view source on the above page but when pasted into dreamweaver i cannot seem to get the effect to work. can anyone help??? thanks! I was using the below code to fade text links in and out on hover. But the problem I'm having is that if you hover over the text a few times quickly the animation will play over and over. Can someone help me add a 'callback'(?) so while the animation is still playing it won't fade in/out again until its finished? Or point me in the direction of a better way of doing this effect. Thanks for reading and I looking forward to your help and responses! Heres the code: Code: $(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});
I'm working on a sliding panel menu in Javascript, there are just text items that have a different background when hovered over that is controlled in CSS, When the menu item is selected the background is changed to a blue button in Javascript and turned off when clicked again. The first problem I encountered was the :hover pseudoclass not working, I managed to fix that with the !important attribute, but now whenever I hover back over the now selected button the :hover effect kicks back in and replaces the background for the button. I've tried something along the lines of ul li:selectd :hover {backg...} with no luck, so far I haven't found a way to do it inside javascript. I hope that explains it well enough, any advice is much appreciated. Hi all I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded. Is there a way to either: * Use javascript to make it so the image only loads when the link is hovered over? or * Allow the rest of the javascript on the page to run before the images are finished loading? I think i'd prefer the first solution if possible but i'm open to all ideas. Thanks in advance! I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/. I have found some javascript which looks like it will do the trick. But being a graphic designer and not a web developer or anything it just doesn't work. lol Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve. This is my very first attempt at Javascript here is the html: Code: <link href="style.css" rel="stylesheet" type="text/css" /> <script src="javascript.js" type="text/javascript"></script> </head> <body> <div style="margin:20px;" class="modules"> <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> </div> </body> And the CSS: Code: .modules {
margin:0px -20px 20px;
background-color:#9999CC;
min-height:100%;
width:100%;
}
.single_module {
border:solid 1px #000000;
background-color:#000000;
height:160px;
padding:0;
margin:-1px 0px 0px -1px;
width:240px;
float:left;
}
.toggleopacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity:1;
}
And the Javascript: Code: $("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});
I'm currently generating some tooltips to display data for certain items in a game. The tooltips and stats work great, however, for certain items, the tooltip gets long and will extend pass the viewable range for the user. Here are the links: test page: http://cory.wellen.googlepages.com/Build_Hover_Test.htm javascript: http://cory.wellen.googlepages.com/hover.js css (for hover div only): http://cory.wellen.googlepages.com/affe.css If you hover over the links of items (like villages, barracks, etc.) a tooltip will pop up to show you the stats. But if you notice, for items like castles, the tooltip can extend past the viewable range for the user. Any suggestions are greatly appreciated. Hi Ive got my menu displayed on this site http://valkesh.000space.com. The issue I am having is that I want the hover image (red part) to be displayed only when hovering the root li, and not all subsequent li items in the menu.. because as you may see now, even when hovering the li in the submenu the red gets displayed. The code I am using is the following Code: <script type="text/javascript">
$(document).ready(function () {
$('#smoothmenu1 li').append('<div class="hover"></div>');
$('#smoothmenu1 li').hover(
function() {
$(this).children('div').fadeIn('500');
},
function() {
$(this).children('div').fadeOut('500');
}).click (function () {
$(this).addClass('selected');
});
});
</script>
and Code: <div id="smoothmenu1" class="menu">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a>
<ul>
<li><a href="#">2.1</a>
<ul>
<li><a href="#">2.1.1</a></li>
</ul>
</li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
</ul>
</li>
<li><a href="#">Page 3</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3</a></li>
</ul>
</li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
Is there a way to specify in the javascript functionality where to append the div to only the root li item? Thanks |
|||||||