JavaScript - How Do I Make A Menu Like This:...

Hello
I have several issues with my multilevel drop down menu
The First issue is : the page has 2 iframes (one has the horizontal multilevel drop down menu on the top) the below iframe has my site address
Now, when i hover over the menu it does not open or expand but when i open just the menu without any iframes it does
This clearly means that the menu is not coming out of the iframe
Please help me bring it on top of everything of the page
Note: i have placed the menu in one iframe and a page opens below it in another iframe.


The Second issue is : I want the navigation bar that is the multilevel drop down menu to be editable
Which means i have a blog and a forum on my site but my visitor wants that the blog should not appear there and another link to play games should

be there and hence he/she can edit it
And please also try to make it work on cookies so that the user info and preferences are saved in cookies and whenever he/she comes back they

see the page their way.

For you: I would like to tell you that IdeaLab has launched a Twitter Advertising, Widget and Search platform and the first 1000 people are getting $100
go to tweetup.com

Please help me, it will be really appreciable. Thank you very much in advance!

Hi Exprts,

I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS.

Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all.

Please suggest me any solutions for this. Thank you in advance.

Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.

I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours.

this is the html:

Code:

<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
  <ul>
    <li><a href="2-1.php">Cani</a>
        <ul>
          <li><a href="2-1-1.php">Domestic dogs</a></li>
          <li><a href="2-1-2.php">Wolves</a></li>
        </ul>
    </li>
    <li><a href="2-2.php">Felidae</a>
        <ul>
          <li><a href="2-2-1.php">Domestic cats</a></li>
          <li><a href="2-2-2.php">Wild cats</a></li>
        </ul>
    </li>
  </ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>

the css is as follows:

Code:

div#s1 {
width: 200px;          /* menu width */
}

div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0;             /* no padding */
margin:0;              /* no margin for IE either */
}

div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}

div#s1 ul li a {
display: block;         /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px;           /* hint for IE, alternatively remove whitespace from HTML */
}

div#s1 ul ul li a {
margin-left: 20px;     /* indent level 1 */
}

div#s1 ul ul ul li a {
margin-left: 40px;     /* indent level 2 */
}

div#s1 ul ul ul ul li a {
margin-left: 60px;     /* indent level 3 */
}

div#s1 li ul, div#s1 li.open li.closed ul {
display: none;         /* collapse */
}

div#s1 li.open ul {
display: block;        /* expand */
}

div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}

div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}

div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}

div#s1 li.active a {
background-position: 0px -20px;
color: red;            /* highlight text */
}

div#s1 li.active li a {
background-position: 0px 0px;
color: white;          /* fix lower levels */
}

div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}

and finally the javascript:

Code:

var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";

//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;

//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
 var url = location.href;
 if (url.lastIndexOf("/") == (url.length-1)) {
   url = url+menu_default_page;
 }
 if (url.lastIndexOf("?") >= 0) {
   url = url.substring(0, url.lastIndexOf("?"));
 }
 if (url.lastIndexOf("#") >= 0) {
   url = url.substring(0, url.lastIndexOf("#"));
 }
 menu_url = url;

 var main = document.getElementById(menu_id);
 if (!main) alert("No element with id '"+ menu_id +"' found");
 menu_traverse(main);
 }

 /* Walks down the subtree and on the way back
 sets properties.
 returns bit set
         1: set = element is a node, unset = element is a leaf
         2: set = element contains the active node
         4: set = element is the active A node
*/
function menu_traverse(element) {
var props  = 0;

// walk down
for (var i=0; i<element.childNodes.length; i++) {
  var child = element.childNodes[i];
  props |= menu_traverse(child); // aggregate bits
}

// on the way back now
switch (element.tagName) {
  case "UL":
    props |= 1;
    break;

  case "LI":
    var c1 = (props & 1) ? 
               ((props & (2|4)) ? menu_open_class : menu_closed_class)
             : menu_leaf_class; 
    element.className = element.className ? element.className+" "+c1 : c1;
    if (props & 4) {
      if (!(props & 2)) element.className += " "+menu_active_class;
      props |= 2;
      props &= 1 | 2; // reset bit 4
    }
    break;

  case "A":
    if (props & 2) break; // once is enough
    var href = element.getAttribute("href");
    if (menu_isSameUrl(menu_url, href)) props |= 4;
    break;
  }

  return props;
}

//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
  if (b[j] == "..") { j-=2; continue; }
  if (a[i] == "..") { i-=2; continue; }
  if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
  if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
  if (! (a[i] == b[j])) return false;
  i--;
  j--;
 }
 return true;
}

New to this forum but hope this will explain my problem, any help is much appreciated!

thanks!!

Jesper

I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code:

var NoOffFirstLineMenus=7; // Number of first level items
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='black'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial,comic sans ms,technical" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'
var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=05; // Menu offset x coordinate
var StartLeft=05; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"

Menu1=new Array("Home","","",3);
Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150);
Menu1_2=new Array("Acknow","Acknowledgement.htm","",0);
Menu1_3=new Array("Prayer","Prayer.htm","",0);

Menu2=new Array("About Us","","",4);
Menu2_1=new Array("Debra","bio.htm","",0,20,150);
Menu2_2=new Array("Seamus","Seamus.htm","",0);
Menu2_3=new Array("Locations","location.htm","",0);
Menu2_4=new Array("Contact Us","contact.htm","",0);

Menu3=new Array("Services","","",7);
Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150);
Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0);
Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0);
Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0);
Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0);
Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0);
Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0);

Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0);

Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0);

Menu6=new Array("Articles","","",3);
Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150);
Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0);
Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0);

Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0);

Hello all,

I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:-

menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}

As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted.

I need a solution to it urgently, your help is appreciated.

Thanks

Hi there,

I am trying to create "sideways" sub menus off of my main vertical menu images.
(Something like this example: http://netweblogic.com/demos/ddm/vddm-nomoo.htm
but in the place of Menu Item 1, Menu Item 2, Menu Item 3 there would be roll over images.)

The main vertical menu items I have are rollover images.
I would like the sub menu to appear when you hover over the main menu item.

When I attempt this using the above example, all of my other CSS and JS does not work.

Any help on how to link my rollover menu images to the sub menu would be greatly appreciated! Thanks in advance!

Here is the code for my menu (I have only included 2 menu items here, if you need more info please let me know):


Code:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/buttons/teamandcorpsports.jpg','images/buttons/performancesports.jpg','images/buttons/flagsandbanners.jpg','images/buttons/home.jpg','images/buttons/catalogues.jpg','images/buttons/galleries.jpg','images/buttons/designown.jpg','images/buttons/dealerlogin.jpg','images/buttons/contactus.jpg','images/buttons/dealersignup.jpg')">

<div id="wrapper">
<div id="header">
<h1>&nbsp;</h1>
</div>


<!-- Main content -->
<div id="content">
<div style="text-align:center">
       <img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
   </div>

   <script type="text/javascript" src="slideshow.js"></script>
</div>




<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('teamandcorpsports1','','images/buttons/teamandcorpsports.jpg',1)"><img src="images/buttons/teamandcorpsports1.jpg" alt="Team and Corporate Sports" name="teamandcorpsports1" width="224" height="37" border="0" id="teamandcorpsports1" /></a></li>

<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('performancesports1','','images/buttons/performancesports.jpg',1)"><img src="images/buttons/performancesports1.jpg" alt="Performance Sports" name="performancesports1" width="224" height="37" border="0" id="performancesports1" /></a></li>

Here is my CSS code for the menu, not sure if this is where the issue is?

Code:

/* navigation menu */
#navcontainer ul {
margin: 0;
padding: 0; 
list-style-type: none; /* removes bullets */
background-image:url('background.jpg');
}

#navcontainer li {
margin: 0 0 0 0; /* separates list items */
}

#navcontainer a
{
display: block; /* achieves rollover */

width: 250px; /* list width */

text-decoration: none;

}

I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it...

I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded

Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same....

My live demo is here!


Thank you for any help and/or advice in advance,
Best Regards,
Tim

I found this copy and paste java script for slide shows...
I can only put 1 on the page then the other don't work...
how do i edit it so i can put multiple on 1 page?

http://www.javascriptkit.com/script/.../jsslide.shtml
Code:

<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

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>

Code:

<a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

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>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

I want the dynamically add fields can be appear with a contain of php code, but I have not found the way, I wondering there who are willing to help me. my code as fallowing:
Code:

    <!-- // another fields here //-->  
    <div id="new_field"--></div>
    <script type="text/javascript">
    var inputs = {
        fields: 0,
        target: "new_field",
        addInput: function() {
            if (this.fields != 5) {
                this.fields++;
                var newElement = document.createElement('div');
                newElement.id = this.target + this.fields;
                newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?>' size='auto' maxlength='100%' /><?php } } ?>";
                document.getElementById(this.target).appendChild(newElement);
            } else {
                alert("Only 5 fields allowed.");
            }
        },
    };</script>

i know it does not appear because the php code

Quote:
newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?' size='auto' maxlength='100%' /><?php } } ?>";
but please let me know is there another idea and pointer to make it work?, I would appreciate it and many thanks.

Hi everyone,

Someone made a website for my uncle, now he is telling me to fix a problem with it.
The problem is that he made a type of image posting system/script on the right bottom of the page{You can see it in the attached image} and its not working at all.

The address of website is http://www.signsgifts.com/

[IMG][img=http://s7.postimage.org/69zoetnsn/Screenshot_at_2012_05_03_15_28_28.jpg][/IMG]

I am new to developing..

Thanks

here is the source of my plugin, OSX Style Dialog
http://www.ericmmartin.com/projects/simplemodal-demos/#

here is my code... my problem is the content is so long... and i can't scroll the page down..
Code:

<!DOCTYPE html>
<html>
<head>
<title> SimpleModal OSX Style Dialog </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2009 - Eric Martin' />

<!-- OSX Style CSS files -->
<link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' />

<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='osx-modal'><h2>OSX Style Modal Dialog</h2>
<p>A OSX style modal dialog demonstrating the felxibility of SimpleModal.</p>
<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
</div>
<div id="osx-modal-content">
	<div id="osx-modal-title">OSX Style Modal Dialog</div>
	<div id="osx-modal-data">
		<table width="477" border="0">
  <tr>
    <td width="471"><h1>Terms &amp; Conditions</h1></td>
  </tr>
  <tr>
    <td><p><strong>IMPORTANT -- READ CAREFULLY BEFORE USING THE SERVICES PROVIDED ON  THIS WEB SITE: This End User Agreement (&quot;Agreement&quot;) is a legal  agreement between you (either an individual or an entity) and PNRC . By  accepting the Terms and Conditions of this Agreement you agree to be bound by  the terms and conditions of this Agreement. If you do not agree with the terms  of this agreement, you will not be permitted to use this Web Site.</strong></p></td>
  </tr>
  <tr>
    <td><p><strong>YOU AGREE THAT YOUR USE OF THIS WEB SITE ACKNOWLEDGES THAT YOU HAVE  READ THIS AGREEMENT, UNDERSTAND IT, AND AGREE TO BE BOUND BY ITS TERMS AND  CONDITIONS.</strong></p></td>
  </tr>
  <tr>
    <td><p>1. Restrictions - You may not download, copy, modify, adapt, translate,  reverse engineer, decompile, disassemble or modify the Software nor attempt to  gain knowledge of the source code of the Software in any manner. You shall  permit the PNRC to audit your compliance with this Agreement as the PNRC deems  reasonably necessary. All rights not expressly granted to you are reserved to  the PNRC.</p></td>
  </tr>
  <tr>
    <td><p>2. Content. - You acknowledge that the content on the Web Site is provided  by third parties and that the PNRC acts as a passive conduit for the  distribution and publication of such content. The PNRC does not endorse any  content on or accessible through the Web Site and is not responsible or liable  to you or to any third party for the truthfulness or accuracy such content.</p></td>
  </tr>
  <tr>
    <td><p>3. Advertisements - The Web Site may contain advertisements by third parties  which may contain links to other sites. Unless otherwise specifically stated,  the PNRC does not endorse any product or make any representation regarding the  content or accuracy of any materials contained in, or linked to, any  advertisement on the PNRC website.</p></td>
  </tr>
  <tr>
    <td><p>4. No Warranty - THE WEB SITE AND THE SOFTWARE ARE PROVIDED ON AN &quot;AS  IS&quot; BASIS WITHOUT ANY WARRANTIES OF ANY KIND. THE PNRC MAKES NO  REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE USE OF THE WEB SITE OR THE  SOFTWARE. THE PNRC DOES NOT AND CANNOT WARRANT THE PERFORMANCE OR RESULTS YOU  MAY OBTAIN BY USING THE WEB SITE OR THE SOFTWARE AND THE PNRC MAKES NO  REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, AS TO NON-INFRINGEMENT OF  THIRD PARTY RIGHTS, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. IN NO  EVENT WILL THE PNRC BE LIABLE TO YOU FOR ANY CONSEQUENTIAL, INCIDENTAL OR  SPECIAL DAMAGES, INCLUDING ANY LOST PROFITS OR LOST SAVINGS, EVEN IF THE PNRC  HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES, OR FOR ANY CLAIM BY ANY  THIRD PARTY.</p></td>
  </tr>
  <tr>
    <td><p>5. Limitation of Liability - UNDER NO CIRCUMSTANCES WILL THE PNRC, ITS  OFFICERS, DIRECTORS, EMPLOYEES, CONTRACTORS, LICENSORS OR SUPPLIERS BE LIABLE  TO YOU OR ANY OTHER PERSON FOR ANY CONSEQUENTIAL, INDIRECT, PERSONAL INJURY OR  DEATH, SPECIAL, PUNITIVE OR INCIDENTAL DAMAGES, WHETHER FORESEEABLE OR  UNFORESEEABLE, BASED ON YOUR CLAIMS OR THOSE OF ANY THIRD PARTY (INCLUDING, BUT  NOT LIMITED TO, CLAIMS FOR LOSS OF DATA, GOODWILL, PROFITS, USE OF MONEY OR USE  OF THE SOFTWARE, INTERRUPTION IN USE OR AVAILABILITY OF DATA, STOPPAGE OF OTHER  WORK OR IMPAIRMENT OF OTHER ASSETS) ARISING OUT OF A BREACH OR FAILURE OF AN  EXPRESSED OR IMPLIED WARRANTY, BREACH OF CONTRACT, MISREPRESENTATION,  NEGLIGENCE, STRICT LIABILITY IN TORT OR OTHERWISE. IN NO EVENT WILL THE  AGGREGATE LIABILITY WHICH THE PNRC, ITS OFFICERS, DIRECTORS, EMPLOYEES,  CONTRACTORS, LICENSORS OR SUPPLIERS MAY INCUR IN ANY ACTION OR PROCEEDING  EXCEED THE TOTAL AMOUNT ACTUALLY PAID BY YOU TO THE PNRC FOR THE USE OF THE WEB  SITE SOFTWARE IN THE THREE MONTHS IMMEDIATELY PRECEDING THE EVENT GIVING RISE  TO THE ACTION OR PROCEEDING.<br />
    YOU ARE RESPONSIBLE FOR ALL MATTERS RELATED TO THE SECURITY OF YOUR  COMPUTERS, SYSTEMS AND COMPONENTS THEREOF, AND ALL DATA AND BUSINESS RELATED TO  THE OPERATION OF THE SOFTWARE. THE WEB SITE AND THE SOFTWARE ARE MADE AVAILABLE  OVER THE INTERNET, WHICH IS AN &quot;OPEN&quot; ENVIRONMENT IN WHICH THIRD  PARTY ACCESS IS POSSIBLE, AND OFTEN PERMITTED. YOU ARE RESPONSIBLE FOR ENSURING  THE SECURITY OF YOUR SYSTEMS, INCLUDING, BUT NOT LIMITED TO  &quot;FIREWALL&quot; CONFIGURATIONS AND ANTI-VIRUS PROTECTIONS, AND the PNRC  SHALL HAVE NO RESPONSIBILITY OR LIABILITY FOR ANY LOSS, COST, EXPENSE OR DAMAGE  YOU MAY SUFFER RELATED TO THE USE OF THE SOFTWARE.</p></td>
  </tr>
  <tr>
    <td><p>6. Indemnity. You agree to idemnify the PNRC, its directors and officers  from any damages, costs and/or losses they or it may suffer as a result of any  breach on your part (or on the part of your employees or agents) of the terms  and conditions of this Agreement.</p></td>
  </tr>
  <tr>
    <td><p>7. Exclusion from the United Nations Convention on Contracts for the  International Sale of Goods - The rights and obligations under this agreement  shall not be governed by the United Nations Convention on Contracts for the  International Sale of Goods and/or any local implementing legislation, the  application of which is expressly excluded.</p></td>
  </tr>
  <tr>
    <td><p>8. Governing Law - This agreement shall be governed by the laws of the  Province of Ontario, Canada, excluding applicable conflict of law rules. You  hereby submit to the exclusive personal jurisdiction and venue of the courts of  the Province of Ontario with respect to matters related to this agreement.</p></td>
  </tr>
  <tr>
    <td><p>9. Force Majeure - Except for payment obligations hereunder, neither you nor  the PNRC will be liable for any failure or delay in performing an obligation  under this Agreement that is due to causes beyond its reasonable control, such  as natural catastrophes, governmental acts or omissions, laws or regulations,  labour strikes or difficulties or transportation stoppages or slowdowns. If any  of these causes continues to delay or prevent performance for more than 90  days, the affected party may terminate this Agreement, effective immediately,  upon notice in writing to the other party, which notice may be delivered by  E-mail.</p></td>
  </tr>
  <tr>
    <td><p>10. Termination - This Agreement will automatically terminate if you fail to  comply with any term hereof. No notice shall be required from the PNRC to  effect such termination. You may also terminate this agreement at any time by  notifying the PNRC in writing of termination, which notice may be delivered by  E-mail. Upon any termination of this Agreement you shall immediately  discontinue use of the Software.</p></td>
  </tr>
  <tr>
    <td><p>11. Miscellaneous - This Agreement shall constitute the complete and  exclusive agreement between you and the PNRC and supersedes all other proposals,  prior understandings or agreements between the parties pertaining to the  Software. The terms and conditions of this Agreement may not be amended except  by the PNRC providing you with at least 30 days written notice of amendment,  which notice may be delivered by e-mail. If any provision of this Agreement is  held to be unenforceable for any reason, such provision shall be reformed only  to the extent necessary to make it enforceable and such decision shall not  affect the enforceability of such provision under other circumstances, or of  the remaining provisions hereof under all circumstances. </p></td>
  </tr>
  <tr>
    <td><INPUT type="button" value="Close Window" onClick="window.close()"> </td>
  </tr>
</table>
		<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
	</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/osx.js'></script>
</body>
</html>

here is the CSS
Code:

body {height:100%; margin:0;}
#osx-modal-content, #osx-modal-data {display:none;}

/* Overlay */
#osx-overlay {background-color:#000; cursor:wait;}

/* Container */
#osx-container {background-color:#eee; color:#000; font-family:"Lucida Grande",Arial,sans-serif; font-size:.9em; padding-bottom:4px; width:600px; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; -moz-box-shadow:0 0 64px #000; -webkit-box-shadow:0 0 64px #000;}
#osx-container a {color:#ddd;}
#osx-container #osx-modal-title {color:#000; background-color:#ddd; border-bottom:1px solid #ccc; font-weight:bold; padding:6px 8px; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close {display:none; float:right;}
#osx-container .close a {display:block; color:#777; font-size:.8em; font-weight:bold; padding:6px 12px 0; text-decoration:none; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close a:hover {color:#000;}
#osx-container #osx-modal-data {padding:6px 12px;}
#osx-container h2 {margin:10px 0 6px;}
#osx-container p {margin-bottom:10px;}
#osx-container span {color:#777; font-size:.9em;}

Hi guys, first of all im sorry cause i dont know the javascript name and what should this call.

i wanted to make a Helps and Guides look like this website http://fnatic.com/ Feedback that located on the left side. If can totally make like them then i hope the script can open a new window with custom size and address bar.

I hope someone can help me... i will change my topic tittle if i know what is this call. sorry im a pure newbie in web programming. hopes you all can help me. thanks alot.

I have a Java script chat,

How would I make a scroll bar for it?

Does any one have any code for that? or do you know what I have to do?

thanks,

Yo_papa75

I have a script that clicks links how can i make it not click a certain. Such as how to make it dont click red link or dont click bold links.

Code:

var waiting_time = 30;
var range_to = 15;

var shuffle = function(o){
	if(Math.floor(Math.random() * o.length) % 2) return o;
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
},
isAds = function(o) {
	try {
		return o.href.match(/cks\.php\?k\=[0-9A-Fa-f]+\&cdk\=flase/) != null && o.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('div')[1].className == 'image'
	}
	catch(e) {
		return false
	}
},
correctURL = function(r) {
	return window.location.href.match(r) != null
},
setStatus = function(o, m) {
	o.parentNode.parentNode.parentNode.innerHTML = m
},
addevent = function(o, f) {
	document.getElementById(o).addEventListener('click', f, false)
},
byTag = function(t) {
	return document.getElementsByTagName(t)
},
byName = function(n) {
	return document.getElementsByName(n)
},
newTag = function(t) {
	return document.createElement(t)
},
getwtime = function(o) {
	var i, a = o.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('div');
	for(i = 0; i < a.length; i++)
		if(a[i].className == "counter")
			return a[i].innerHTML.match(/([0-9]+) seconds/)[1]
},
strip = function(s) {
	var str = String(s).split("</td>").join("\r"),
	reg = /<td\s*width=['"]?100\%['"]?\s*>([^\r]+)\r/,
	match = str.match(reg),
	search = str.search(reg),
	out = [], i = 0, tmp;
	while(match) {
		str = str.substr(search + match[0].length, str.length);
		out[i] = match[1].replace(/\s*<script[^>]+>[\S\s]+<\/script>\s*/, "");
		out[i] = out[i].replace(/<img[^>]+>/, "");
		i++;
		match = str.match(reg);
		search = str.search(reg);
	};
	return (out.length ? "<table><tr><td>"+out.join("</td><td>")+"</td></tr></table>" : "NO MATCH");
},
login = function() {
	var a = byTag("a"), I;
	for(I = 0; I < a.length; I++)
		if(a[I].href.match(/logout\.php/)) 
			return true;
	return false
}(),
autosurf = false;
if(correctURL(/\/ads\.php/)) {
	if(login) {
		var A = byTag("a"), i, html = "", timer,
		table = document.getElementById('content'),
		robot = newTag('div'),
		urls = [],
		current = 0,
		msg,
		tmr,
		load = function() {
			clearInterval(timer);
			timer = null;
			if(!urls[current]) {
				if(typeof autosurf == 'function')
					autosurf();
				return
			};
			var ajax = new XMLHttpRequest();
			ajax.onreadystatechange = function() {
				try {
					if(ajax.readyState == 4) {
						if(ajax.status == 200) {
							if(String(ajax.responseText).match(/You have already viewed this advertisement/)) {
								msg.innerHTML = "Ads already opened, loading next ads...";
								setStatus(urls[current], "OPENED");
								current++;
								timer = setInterval(load, 1000)
							}
							else if(String(ajax.responseText).match(/Couldn't find an advertisement/)) {
								msg.innerHTML = "Ads expired, loading next ads...";
								setStatus(urls[current], "EXPIRED");
								current++;
								timer = setInterval(load, 1000)
							}
							else if(String(ajax.responseText).match(/You don't have permission to view this advertisement/)) {
								msg.innerHTML = "Forbidden Ads, loading next ads...";
								setStatus(urls[current], "FORBIDDEN");
								current++;
								timer = setInterval(load, 1000)
							}
							else {
								var j = urls[current].wtime,
								validate = function() {
									var ajx = new XMLHttpRequest();
									ajx.onreadystatechange = function() {
										try {
											if(ajx.readyState == 4) {
												if(ajx.status == 200) {
													msg.innerHTML = "Ad click, opening next ads...";
													setStatus(urls[current], "Ad Clicked & Confirmed");
													current++;
													timer = setInterval(load, 1000)
												}
												else {
													msg.innerHTML = "Connection error, retrying...";
													validate()
												}
											}
										}
										catch(e) {
											msg.innerHTML = "Validation error, retrying...";
											validate()
										}
									};
									msg.innerHTML = "Validating...";
									ajx.open("GET", "cmp.php?complete&amp;", true);
									ajx.send(null)									
								};
								tmr = setInterval(function() {
									if(j < 0) {
										validate();
										clearInterval(tmr);
										tmr = null;
										return
									};
									msg.innerHTML = "Ads loaded, waiting for "+j+" seconds...";
									j--
								}, 1000)
							}
						}
						else {
							msg.innerHTML = "Loading error, retrying...";
							timer = setInterval(load, 1000)
						}
					}
				}
				catch(e) {
					msg.innerHTML = "Loading error, retrying...";
					timer = setInterval(load, 1000)
				}
			};
			msg.innerHTML = "Loading ads <b id='JFClickBot-current'>\""+(urls[current].parentNode.parentNode.parentNode.getElementsByTagName('a')[0].innerHTML)+"\"</b>...<br /><div id='JFClickBot-loading'></div>";
			ajax.open("GET", urls[current].href, true);
			ajax.send(null)
		};
		for(i = 0; i < A.length; i++) {
			try {
				if(isAds(A[i])) {
					urls[urls.length] = A[i];
					urls[urls.length - 1].wtime = getwtime(A[i])
				}
			}
			catch(e) {}
		};
		robot.id = "JFClickBot-container";
		robot.align = "center";
		html = "<style>";
		html += "#JFClickBot-container *{font-family:arial;color:black;font-weight:bold;text-decoration:none}";
		html += "#JFClickBot-container{display:block}";
		html += "#JFClickBot,#JFClickBot-title,#JFClickBot-container a.button{-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;border: 1px solid #d91a2d}";
		html += "#JFClickBot-container a.button{padding:10px;color:#000;background:#d91a2d}";
		html += "#JFClickBot-container a.button:hover{color:#fff;background:#333}";
		html += "#JFClickBot{padding:2px;display:block;width:900px;background:#fff;text-align:left}";
		html += "#JFClickBot-title{display:block;padding:5px;background:#d91a2d;color:#fff}";
		html += "#JFClickBot-msg{line-height:2em}";
		html += "</style>";
		html += "<div id='JFClickBot'><div id='JFClickBot-title'>JFClickBot For Gen4 Sites</div><br /><div id='JFClickBot-msg' align=center>";
		html += "<b style='font-size:20px'>Warning</b><br />By Using This Tool You Agree to The Terms Of Use On <a href='http://clickbots.justfreebies.net' rel="nofollow" target='_blank'>ClickBots</a>.<br> We Are Not Resposible For Your Action, USE AT YOUR OWN RISK.<br><a href='http://clickbots.justfreebies.net' rel="nofollow" target='_blank'>&copy; PTC ClickBots</a>";
		html += "</div><br />";
		html += "<center>"+(urls.length ? "<a href='javascript:;' class='button' id='adsclick'>Click All Ads ("+urls.length+")</a>" : "<a href='javascript:;' class='button'>No ads</a>")+"&nbsp;&nbsp;<a href='http://clickbots.justfreebies.net/features.php' class='button' rel="nofollow" target='_blank'>Features</a>&nbsp;<a href='http://clickbots.justfreebies.net/purchase.php' class='button' rel="nofollow" target='_blank'>Purcahse Site</a>&nbsp;<a href='http://clickbots.justfreebies.net/donate.php' class='button' rel="nofollow" target='_blank'>Donate</a></center><br />";
		html += "</div></div>";
		robot.innerHTML = html;
		table.parentNode.insertBefore(robot, table);
		msg = document.getElementById("JFClickBot-msg");
		if(urls.length) {
			urls = shuffle(urls);
			addevent("adsclick", function(){
				autosurf = function() {
					msg.innerHTML = "Done !";
					alert(msg.innerHTML);
				};
				this.parentNode.style.display = 'none';
				timer = setInterval(load, 1000);
			})
		};
		addevent('silversurfer', function(){
			alert("Sorry this features isnt available yet.");
			return;
			this.parentNode.style.display = 'none';
			msg.innerHTML = "Auto surf mode activated...";
			var adscontainer = newTag('div');
			document.body.appendChild(adscontainer);
			adscontainer.style.display = 'none';
			autosurf = function() {
				urls = [];
				current = 0;
				msg.innerHTML = "Reloading ads, finding new ads...";
				var sec = Math.ceil(Math.random() * range_to * 60),
				j = sec,
				tm, 
				ajx,
				reloadads = function() {
					msg.innerHTML = "Reloading ads, finding new ads...";
					ajx = new XMLHttpRequest();
					ajx.onreadystatechange = function() {
						try {
							if(ajx.readyState == 4) {
								if(ajx.status == 200) {
									msg.innerHTML = "Loaded, clearing codes and finding available ads...";
									adscontainer.innerHTML = strip(ajx.responseText);
									A = adscontainer.getElementsByTagName('a');
									for(i = 0; i < A.length; i++) {
										try {
											if(isAds(A[i]))
												urls[urls.length] = A[i]
										}
										catch(e) {}
									};
									if(urls.length) {
										urls = shuffle(urls);
										msg.innerHTML = urls.length + " ads found";
										timer = setInterval(load, 1000)
									}
									else {
										msg.innerHTML = "No ads found";
										autosurf()
									}
								}
								else {
									msg.innerHTML = "Loading error, retrying...";
									reloadads()
								}
							}
						}
						catch(e){
							msg.innerHTML = "Loading error, retrying...";
							reloadads()
						}
					};
					ajx.open('GET', 'ads.php', true);
					ajx.send(null)
				};
				tm = setInterval(function() {
					if(j < 0) {
						clearInterval(tm);
						tm = null;
						msg.innerHTML = "Time's up, reloading...";
						reloadads()
					}
					else {
						msg.innerHTML = "Waiting for "+j+" seconds before reloading...";
						j--
					}
				}, 1000)
			};
			if(urls.length)
				timer = setInterval(load, 1000)
			else 
				autosurf()
		})
	}
}
else if(correctURL(/\/register\.php/)) {
	var r = byName('6')[0], ref, cty, ori;
	if(r && force_referal_to) {
		ref = newTag('input');
		ref.type = "hidden";
		ref.name = "6";
		ref.value = force_referal_to;
		r.form.insertBefore(ref, r.form.firstChild);
		r.name = "ref";
		r.value = "";
		cty = byName('7')[0];
		ori = cty.value;
		cty.parentNode.removeChild(cty);
		r.form.getElementsByTagName('table')[0].rows[7].cells[1].innerHTML = "<input type=text name='7' value='"+ori+"' style='text-transform:uppercase' />"
	}
}
else if(correctURL(/\/forum/)) {
	try {
		var name = byName('a_name')[0], tr = newTag('tr');
		name.parentNode.parentNode.parentNode.insertBefore(tr, name.parentNode.parentNode);
		tr.innerHTML = "<td>Username</td><td>:</td><td><input type=text name='a_name' value='"+name.value+"' style='width:100%'/></td>";
		name.parentNode.removeChild(name)
	}
	catch(e) {}
}