JavaScript - Mootools Help!

Hi,

I am needing some help with the mootools script. I have uploaded a test page at http://74.52.32.68/~tempcom/slider/

Here is what I am attempting to do. When I click on one of the items (say Landscapes), I want some corresponding text to appear in the green box above. Is this possible? Would it be a javascript?

Any sample codes or assistance would be greatly appreciated. Thanks in advance!

Hello,

I have a problem with my code which only appears in ie (more specifically on ie8, I haven't tested it on any other versions yet). I have absolutely no problems with firefox (v4) or Chrome (v10). I am trying to use the standalone version of the RokBox plugin (http://www.rockettheme.com/extensions-joomla/rokbox), which uses mootools-release-1.11.js.
The use of rokbox in my application is necessary for me in order to easily display some linked files with a fancy pop-up box and more importantly to use the "gallery" property so that my links can be grouped together and shown in order by just clicking some "next" button... To explain this (I 'll try to be as thorough as possible so that you get what happens):
1)I am using an index.php file which is as you can guess of course the "index".
2)I am calling some functions to compose a query for my database.
3)I am using AJAX to send those queries in another file called values.php.
4)This file takes the data from my database and echoes them.
5)The echoed values are returned and echoed in index.php as options (dropdown list).
6)When the user selects a value on a field some new queries are composed and AJAX is called again but this time it sends data to another file called results.php which echoes back the found matches to a specified div on index.php. (And also calls values.php again to pass new queries).
7) The data returned from the results contain a link to another file called details.php.
8)I am using RokBox to make these links open in a fancy pop-up box with arrows that point to the next or previous link based on the gallery that was generated by RokBox.

Now here's some parts of my code:

index.php header section (attention:some of this code is commented):
[HTML]
<script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script>
<!--<script type="text/javascript" src="../rokbox/mootools-core-1.3.1-full-compat.js"></script>-->
<!--<script type="text/javascript" src="../rokbox/mootools-1.2.5-core-nc.js"></script>-->
<script type="text/javascript" src="../rokbox/rokbox.js"></script>
<link href="../rokbox/themes/mynxx/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../rokbox/themes/mynxx/rokbox-config.js"></script>

<script type="text/javascript" src="myscript.js"></script>
<script type="text/javascript" src="allfields.js"></script>
[/HTML]myscript.js (part of it):
Code:

function AJAX(i,query){
    /* Establish AJAX connection */
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        try{
          xmlhttp[i]=new XMLHttpRequest();
        }catch(err){ alert("ERROR IN AJAX["+i+"]: "+err)}
      }
    else
      {// code for IE6, IE5
          xmlhttp[i]=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp[i].onreadystatechange=function()          //line 21
      {//alert("check");
          if (xmlhttp[i].readyState==4 && xmlhttp[i].status==200)
        {
            document.getElementById("opt"+i).innerHTML=xmlhttp[i].responseText;
            if(i==-1) mybox();                    //I'm re-calling RokBox here so that it can recognize the new items
        }
      }
    /* Send data to php file */
//    alert("Field: "+obj[i].field+" \n Query: "+query);
    if(i!=-1){
        xmlhttp[i].open("POST","values.php",true);
        xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp[i].send('query='+query+'&field='+obj[i].field+'&i='+i);
    }else{
        xmlhttp[i].open("POST","../results.php",true);
        xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp[i].send('query='+query);
    }
    
}

Now the problem:
On every first run of this webpage using ie I get the following error generated by the try-catch commands:
Code:

ERROR IN AJAX[0]: TypeError: Object doesn't support this property or method

Then everything freezes... IE itself throws me the following error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64;  Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR  3.0.30729; Media Center PC 6.0; .NET4.0C)  
Timestamp: Sat, 2 Apr 2011 12:34:07 UTC


Message: 'xmlhttp[...]' is null or not an object    
Line: 21
Char: 4
Code: 0
URI: http://.............../advanced/myscript.js

Line 21 is marked on the script code with comments. These errors do not reoccur when the page is reloaded (and as I already said it only happens with ie). So, by this error (and after some debugging) I get that for some reason the AJAX methods are not called as ought to be when I use the tag:
[HTML]<script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script>[/HTML]on my index's head section. So... AJAX cannot work with using mootools?

After some research, I found that mootools which uses the $ sign to start it's operations, conflicts with other libraries (such as jQuery) using the same sign ($) for their own reasons. Now I found that the way to fix this is by using jQuery.noconflict() after your jQuery script. There's only one little thing: I DON'T use jQuery, so where is the conflict?
I also tried updating mootools to a newer release (as you can see from the comments in head section) but I realized that RokBox can't work with other versions.

I am pretty desperate with this, and I would really appreciate any solutions you can offer with your experience or any suggestions you think would help. You can check the issue your self by visiting my link:

http://e-tech.ath.cx/ares/project%20...nced/index.php

Hello all

I have been trying in vain for many days to resolve a conflict between javascript libraries.

I have read far and wide and still have failed to fix this problem, most likely because my programming skills are just about copy and pasting.

My homepage uses

jquery horizontal css menubar + a combined mootool and prototype accordian type sliding information box in the middle of the webpage.

I find that the highlighter of the css menubar does not work when prototype.js is also loaded on the same page.

I have read somewhere that $ should be replaced however I have tried every possible option and none works.

I have jquery loading first as it is on my template, with this

<script type='text/javascript' src='../Web/Templates/jquery-1.3.2.js'></script>
<script type='text/javascript' src='js/example.js'></script>

And my mootool and prototype loades further below like this

<script type="text/javascript" src="scripts/intro/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/intro/moo.fx.js"></script>
<script type="text/javascript" src="scripts/intro/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>


Could someone please offer me further assistance and enlighten me what other information you require to assist me further.

I have attached the example.js inside example.zip file if someone could kindly edit it for myself.

Looking forward to your assistance.

Sincerely,

Lex

Im coding with Mootools and JD Gallery I am running into a annoying Java Script Problem or CSS not sure.

Here is the site www.NAFC.TV if you view it in FF it looks fine but in IE 8 you will find a space That separates the Picture From the JAVA thumbnails for the rotator making the images mispositioned and cut off. I cant figure out why that is happening can someone please help

Thanks

mediasource.saymikeo.com

At the bottom of this page, click the web or video big white box. Then turn your attention to the select boxes.

When you select either of the first two choices, another box should pop up next to the select box. That box should populate with other choices.

1. My problem is the secondary box does not populate with the correct data.
2. When you select option 3 or 4 the box should disappear.

This works in Firefox. This is done through a JSON call in Mootools.

If you can figure this out I will think you are totally awesome. First for going through my messy code and second for being able fix it.

Your assistance is greatly appreciated.

This is the base function that calls view_category() which calls add_select_box();

Code:

function build_page(url, id){
	$('ajax_box').set('html', '');
	dbug.log('Obj URL: ',  id, url);
	   // Get the requested view
	   var view = new Request.JSON({ 
		url: url, onSuccess: function(jsonObj){
		   view_category(jsonObj.selectbar, id);
		}
	   }).send().chain(function(){
		 new Fx.Tween(service).start('opacity', '1');
	   });
   }

This is the view_category function. Its purpose is to build everything below the select box. It calls the add_select_box.
Code:

// Viewing the Title, Description and sub descriptions
   function view_category(oSelect, id){
	add_select_box(oSelect, id);
	oSelect.each(function(oOptions){
	   if(oOptions.id == id){
		var service_type = new Element('div', {id: oOptions.id, 'class': 'sub_choice'}).inject($('ajax_box'), 'bottom');
		oOptions.options.each(function(oSub){
		   var blank_div = new Element('div').inject(service_type, 'bottom'); // Needed for the Expand Link to work
		   var service_title = new Element('h2').set('html', oSub.title).inject(blank_div, 'bottom'); // Title
		   var service_description = new Element('p').set('html', oSub.description).inject(blank_div, 'bottom'); // Description
		   var expand = new Element('div', {'class': 'expanding'}).inject(blank_div, 'bottom'); // Expanding Sub Box
			if(oSub.sub != undefined){
			   // Expanding and Colapsing Link
			   var service_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(service_description); 
			   oSub.sub.each(function(oSubOptions){
				var sub_div = new Element('div').inject(expand, 'bottom');
				var sub_title = new Element('h3').set('html', oSubOptions.title).inject(sub_div, 'bottom'); // Sub Title
				var sub_description = new Element('p').set('html', oSubOptions.description).inject(sub_div, 'bottom'); // Sub description
				if(oSubOptions.sub_description != undefined){
				   var sub_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(sub_description);
				   var sub_expanding = new Element('div', {'class': 'expanding'}).inject(sub_div, 'bottom'); // Sub Sub Expanding
				   var sub_sub_description = new Element('p').set('html', oSubOptions.sub_description).inject(sub_expanding, 'bottom'); // Sub Sub Description
				};
			   });
			};
		});
	   }
	});
	
   };

This code adds the select box and changes the select box when the select button is changed.
Code:

function add_select_box(oSelect, id){
	var select_box = new Element('div', {id:'select_box'}).inject($('ajax_box'));
	var formSelectVar = new Element('select');
	oSelect.each(function(item){
	   if(item.id == id){
		var continue_div = new Element('div', {id:'continue'}).inject(select_box);
		new Element('a', {href:'javascript:void(0)'}).inject(continue_div);
		if(item.id == id){
		   // Create each option for the first select box
		   item.options.each(function(myArray){ 
			var formOption = new Element ('option').set('html', myArray.title).inject(formSelectVar);
		   });
		   new Element('option', {selected:'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
		   formSelectVar.inject($('select_box'), 'top' ); // This is the First Select Box
		   $('ajax_box').getElement('select').addEvent('change', function(){// Listen for the select box to change
			var categoryValue = $('ajax_box').getElement('select').value;
			   if($('sub_select')){
				var formSelectVar = $('sub_select').set('html', '');
			   }else {
				var formSelectVar = new Element('select', {id:'sub_select'});
			   }
			   // Make a secondary select box for additional options
			var notdefined;
			item.options.each(function(myArray){
			   if(myArray.sub != undefined && myArray.title == categoryValue){
			   dbug.log('Secondary Select: ', myArray.sub, myArray.title, categoryValue)
				myArray.sub.each(function(subArray){
				   var formOption = new Element ('option').set('html', subArray.title).inject(formSelectVar);
				});
				notdefined = false;
			   }else if(myArray.title == categoryValue){
				dbug.log('Else Dialoge: ', myArray.sub, myArray.title, categoryValue)
				notdefined = true;
			   }
			});
			dbug.log('Not Defined: ', notdefined);
			if(notdefined != true){
			   new Element('option', {selected: 'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
			   formSelectVar.inject($('select_box')); // This is the second select box
			}else{
			   formSelectVar.dispose();
			}
		   });
		};
	   }
	});
   };

HELP PLEASE!! Really need to get this working tonight!! I am applying for a design job and must be able to show my portfolio electronically!!
**If there is a reason no one is answering, please tell me**
I dont think it is that far off, but clearly something is stopping the rollover effectst for all projects EXCEPT "annual report" which is what i want the others to be like. Please, please, please help me!!

Visit link: http://twentyfourdesigns.com/portfolio2.asp to see example of what i have and what isnt working. PLEASE HELP!!
(Visit link: http://twentyfourdesigns.com/portfolio.asp to see how the code worked BEFORE separating out into jumps/anchors

(only works in ff and safari at the moment...i'll worry about ie later as i only need it to work on a mac at the moment)

**page code**
Code:

< <head>
	<title>Welcome to Twenty-Four Designs</title>
    <link rel="favicon" HREF="http://twentyfourdesigns.com/favicon.ico" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script src="js/mootools.js" type="text/javascript"></script>
	<script src="js/noobslide.js" type="text/javascript"></script>
	<script src="js/portfolio.js" type="text/javascript"></script>
    
</head>

<body>

<div id="wrap">

<div id="header"><img src="Images/24designsLogo.png" alt="Twenty-four Designs Logo" width="264" height="92" class="photo" /><a href="mailto:deb@twentyfourdesigns.com"><img src="Images/DebSmithContact.png" width="279" height="92" class="photo2" alt="Deborah Smith's Portfolio" /></a></div>

<div id="slide-mask">
<div id="slide-images">
	<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" />
    
	<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
    <img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
    <img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" />
    
    <img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" />
    
    <img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" />
    
    <img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" />
    
	<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div>
</div></div>

<div id="slider">    
            <ul class="navigation">

                <li><a href="#AnnualReport">Annual Report&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Verizon">Verizon Wireless&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#PressKit">Press Kit&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Perfco">Perfco&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Century">Century Windows&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#UCC">United Church of Christ</a></li>
            </ul>

<div class="scroll">
				<div class="panel" id="AnnualReport"><p class="text"><strong>Middlefield Banc. 2008 Annual Report</strong> : Printed Four Color Process on Coated Paper</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" /></div></div>
    
                <div class="panel" id="Verizon"><p class="text"><strong>Verizon Wireless</strong> : Slide One - Motorola Droid Box Sleeve : Slide Two - Cleveland Cavaliers' VIP Invite : Slide Three - Small Business Guide (Internal Website)</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
	<img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
	<img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" /></div></div>
    
    <div class="panel" id="PressKit"><p class="text"><strong>Rock. Ride. Remember. Press Kit</strong>  : Printed Four Color Process on Coated Paper : All Over Dull with Spot Varnish : Custom Die Cut </p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" /></div></div>
    
    <div class="panel" id="Perfco"><p class="text"><strong>Perfco Bill Insert and Postcards</strong>  : Printed Digital on Coated Paper : Variable Printed with Target Company's Name</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" /></div></div>
    
    <div class="panel" id="Century"><p class="text"><strong>Century Windows' Catalog Pages</strong>  : Printed Four Color Process on Coated Paper</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" /></div></div>
    
    <div class="panel" id="UCC"><p class="text"><strong>United Church of Christ Coffee Table Book Concepts</strong>  : Concept 1 - Vellum Wrap on Cover with Spot UV : Concept 2 - Spot UV on Cover</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div></div>

</div>
</div>
</body>

**css**
Code:

* {
   
	margin-left: auto ;
	margin-right: auto ;;
   padding: 0;
   outline: none;
   /*outline: 0;*/

	
}

p.text{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #000
}

p.text2{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: bolder;
	color: #3c2639;
}

/* ********************************** */

#slide-mask {
	position:relative;
	left:0;
	margin:0;
	padding:0;
	width:920px;
	height:650px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}
#slide-images {
	position:relative;
	left:0;
	width:9000px;
	height:650px;
	margin-left:auto;
	margin-right:auto;
}
#slide-images img {
	width:920px;
	height:650px;
}

#slide-thumbs {
	background-color:none;
	width:880px;
	height:75px;
	left:0;
	margin-left:auto;
	margin-right:auto;
}
#slide-thumbs img {
	width:106px;
	height:75px;
	cursor:pointer;
}

/* ********************************** */

#slider {
	position:relative;
	left:0;
    width: 900px;
    overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}

.scroll {
	position:relative;
	height: 105px;
	width: 900px;
	overflow-y: hidden;
	background: none;
	margin-left:auto;
	margin-right:auto;
	
}

#scrollContainer div.panel {
	height: 105px;
	width: 900px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 9px;
}

ul.navigation li {
    display: inline;
    margin-right: 10px;
}

ul.navigation a {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a:hover {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #5a447a;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a.selected {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a:focus {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

/* ********************************** */

body {
	width: auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(Images/bckgrnd.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}

#wrap {
	float: none;
	width: 1000px;
	height: auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#header {
	width: 1000px;
	height: 100px;
	margin-left: auto ;
	margin-right: auto ;
	padding-top: 7px;
}

.photo {
	float: left;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.photo2 {
	float: right;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.photo3 {
	margin-left: auto ;
	margin-right: auto ;	
}

a:link {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:visited {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:active {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:hover {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #5a447a;
	font-weight: bolder;
	text-transform:uppercase;}

**portfolio.js **
Code:

// JavaScript Document
window.addEvent("domready", function ()
  {
	var effect = {property:'left',duration:700, transition:Fx.Transitions.Linear, wait:false};
	var nS = new noobSlide({
		box: $('slide-images'),
		items: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
		size:925,
		handles: $$('#slide-thumbs img'),			handle_event: 'mouseenter',

		fxOptions: effect,
	  	onWalk: function(currentItem,currentHandle){
		  $each($$(this.handles), function(handle,index){
				handle.get('tween', {property: 'opacity', duration: 'short'}).start(1);
		});
	      currentHandle.get('tween', {property: 'opacity', duration: 'short'}).start(0.5);
	 	},
	});
	
  });

I also use the mootools.js and noobslide.js...

Hello guys,

I need some help. I am very noob in Jquery and Mootools .. and they were getting conflicted on one page. I tried every tutorial available online but I couldn't get my jquery slideshow and mootools menu to work together. Not even by the jquery no conflict command.

Code:

    		window.addEvent('domready', function(){
			//-vertical
			
			var mySlide = new Fx.Slide('v.menu-4');
			mySlide.hide(); 
			$('toggle-4').addEvent('click', function(e){
				e = new Event(e);
				mySlide.toggle();
				e.stop();
			});

		});

This script is for vertical menus and written for mootools 1.11

Can anybody help me out?

Hello,

I have been trying to trouble shoot this for quite a while and am stuck. My site works 100% on Firefox, Safari, and Chrome, but in Internet Explore (6,7,8) the only thing that shows up is the background image.

The site utilizes a few scripts: MooTools, a rollover replacement script, an iframe custom scrollbar script, and the Zenphoto CMS, that is utilized on other pages and displayed in the iframes.

I think my problem may be mootools related, bur really have no idea.

This is the site: http://www.ErikaCervantes.com

Here is the offending 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">
<head>
<title>ErikaCervantes.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

#main{width:1100px;height:618px;background: url('img/BG.jpg') no-repeat;margin-left:-550px;left:50%;position:absolute}
#words{text-align:right;padding-right:30px;padding-top:30px;}
.window{width:963px;height:492px;margin-left:-477px;left:50%;position:absolute;background: url('img/windowBG.jpg');top:49px;}
.content{float:left;width:618px;height:330px;margin-left:55px;}
.scroll{height:220px;width:36px;float:right;text-align:left;margin-top:60px;}
.contenthead{padding-top:52px;padding-left:47px;height:35px;width:300px;margin-bottom:15px;}
.right{padding-right: 50px; padding-top: 57px; text-align:right;width:200px;float:right;}
.back{padding-top:145px;margin-right:-10px}
.nav
.left{width:600px;height:490px;float:left;}
#production{visibility: hidden;}
#erika{visibility:hidden;}
img{border:0px;}

</style>

<script type="text/javascript" src="roll.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">

function showErika(){
$('words').tween('opacity',0);
      $('erika').set('tween',{duration : 2000}).fade([0,1]);    

}

function hideErika(){
$('erika').tween('opacity',0);
      $('words').set('tween',{duration : 2000}).fade([0,1]);    

}

function showProduction(){
$('words').tween('opacity',0);
      $('production').set('tween',{duration : 2000}).fade([0,1]);    

}

function hideProduction(){
$('production').tween('opacity',0);
      $('words').set('tween',{duration : 2000}).fade([0,1]);  
}
</script>



</head>
<body style="padding-top:15px;">

<div id="main">

	<div id="words"><img src="img/erika_off.jpg" alt="erika_off" width="" height="" onclick="javascript:showErika();" /><img src="img/productions_off.jpg" alt="productions_off" width="" height=""  onclick="javascript:showProduction();" style="padding-top:10px;" /></div><!--words-->
	
	<div class="window" id="erika">
	
		<div class="right">
			<div id="navErika">
			<a href="http://www.imdb.com/name/nm2563825/"  target="_blank"><img src="img/imdb_off.jpg"  width="" alt="Erika Cervantes on IMDB" height="" /></a>
			<a href="ECfilmography.pdf" ><img src="img/filmog_off.jpg" alt="Download Erika Cervantes Filmography" width="" height="" /></a>
			<a href="#"  target="_blank"><img src="img/editing_off.jpg" alt="View Erika Cervantes Editing Reel" width="" height="" /></a>
			<a href="mailto:erikamcervantes@gmail.com" ><img src="img/contact_off.jpg" alt="Contact Erika Cervantes" width="" height="" /></a>
			</div><!--navErika-->
			<img src="img/erikamail.jpg" alt="erikamail" width="" height="" />
		
			<div class="back"><img src="img/back_off.jpg" alt="Back" width="" height="" onclick="javascript:hideErika();" /></div><!--back-->
		</div><!--right-->
		<div id="left">
			<div class="contenthead"><img src="img/erikaHeader.jpg" alt="Erika Cervantes" width="" height="" /></div><!--contenthead-->
			<div class="content">
			<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->

<iframe class="datamain" src="zen/index.php?album=erika" name="bio" width="618" height="330" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" ></iframe>
</div><!--content-->
<div class="scroll">

<a href="#" onmouseover="scrollspeed=-1" onmousedown="scrollspeed=-2" onmouseout="scrollspeed=0"><img src="img/scrolltop.jpg" alt="scrolltop" width="" height="" /></a><br/><img src="img/scrollmid.jpg" alt="scrollmid" width="" height="" /><br /><a href="#"  onmouseover="scrollspeed=1" onmouseout="scrollspeed=0" onmousedown="scrollspeed=2"><img src="img/scrollbottom.jpg" alt="scrollbottom" width="" height="" /></a>

</div><!--scroll-->						
		</div><!--left-->
	</div><!--window erika-->
	
	<div class="window" id="production">
	
		<div class="right">
			<div class="nav">
			<a href="zen/index.php?album=features"  target="prod"><img src="img/features_off.jpg" alt="features" width="" height="" /></a>
			
			<a href="zen/index.php?album=shorts"  target="prod"><img src="img/shorts_off.jpg" alt="shorts" width="" height="" /></a><br />
			
			<a href="zen/index.php?album=web"  target="prod"><img src="img/web_off.jpg" alt="web" width="" height="" /></a>
			
			<a href="zen/index.php?album=music"  target="prod"><img src="img/music_off.jpg" alt="music videos" width="" height="" style="padding-bottom:25px;" /></a>
			
			</div><!--nav-->
			<div class="back"><a href="zen/news" target="prod"><img src="img/back_off.jpg" alt="Back" width="" height="" onclick="javascript:hideProduction();" /></a></div><!--back-->
		</div><!--right-->
		
		<div class="left">
			<div class="contenthead"><img src="img/erikatitle.jpg" alt="Erika Cervantes Productions" width="" height="" /></div><!--contenthead-->
	<div class="content">
			<!--Scrollable iframe script- By Dynamic Drive-->
			<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
			<!--This credit MUST stay intact for use-->

<iframe class="datamain" src="zen/news/" name="prod" width="618" height="330" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" ></iframe>
</div><!--content-->
<div class="scroll">

<a href="#" onmouseover="scrollspeed=-1" onmousedown="scrollspeed=-2" onmouseout="scrollspeed=0"><img src="img/scrolltop.jpg" alt="scrolltop" width="" height="" /></a><br/><img src="img/scrollmid.jpg" alt="scrollmid" width="" height="" /><br /><a href="#"  onmouseover="scrollspeed=1" onmouseout="scrollspeed=0" onmousedown="scrollspeed=2"><img src="img/scrollbottom.jpg" alt="scrollbottom" width="" height="" /></a>
</div><!--scroll-->		
			
		</div>	<!--left-->
	</div><!--window production-->

</div><!--main-->

</body>
</html>

Thank you very much!

Hi All,

I am looking to build a gallery similar to this one:
http://www.designguru.co.za/pages/brand.php

I am new to MooTools and don't know where to start, which plug ins etc..

Can anyone help me or just point me in the right directions

Thanks in advance

Hi. I am trying to make one small modification to a website. I just want to make an image that, when clicked, scrolls to a certain point. Pleeeeeeaaaaaase help!

This is the javascript that I think controls the scrolling:

var element_y;
var swiffy;
var cur_groupid;
var group_sortable = new Array();
var lightbox;
var content;

window.addEvent('load', function() {
checkScrollerWidth();
checkImages();
});

function checkImages() {
var check_w = window.getSize().x + 500;
var winh = window.getSize().y;

var divs = $$('.single_image_holder');
for(var i=0; i<divs.length; i++) {
if(divs[i].getChildren().length) continue;
if((parseInt($('main_images').getPosition().x) + parseInt(divs[i].get('xpos'))) >= check_w) return;
var img = new Element('img', {
'src': divs[i].get('source')
});
divs[i].adopt(img);
}
}

window.addEvent('resize', function(){
checkScrollerWidth();
});

function checkScrollerWidth() {
if($('scrollbar2') && $('content2') && $('handle2'))
makeScrollbar( $('content2'), $('main_images'), $('scrollbar2'), $('handle2'), true);
}

function makeScrollbar(content,checkContent,scrollbar,handle,horizontal,ignoreMouse){

if(checkContent.getScrollSize().x < scrollbar.getSize().x) {
handle.setStyle('display','none');
return;
}

handle.setStyle('display','block');

var steps = (horizontal?(content.getScrollSize().x - content.getSize().x)content.getScrollSize().y - content.getSize().y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
checkImages();
}
}).set(230);
if( !(ignoreMouse) ){
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
}

Hi guys,

I'm relatively new to coding, so apologies if this is something really trivial or even uneccessarily long.

I'm currently running a mootools and a jquery script on the same page (http://tamwardsings.squarespace.com/media).
Jquery = Jplayer audio player
mootools = video light box

Initially the jquery script wasn't working but I resolved that with var $j = jQuery.noConflict();

Now, while both scripts run in Chrome and Safari Browsers, firefox will not initiate either script.

Clicking an image with a link to the video lightbox instead sends you directly to the anchored link, and the audio player, fails to play.

Videobox script: Code:

var Videobox = {

	init: function (options) {
		// init default options
		this.options = Object.extend({
			resizeDuration: 400,	// Duration of height and width resizing (ms)
			initialWidth: 250,		// Initial width of the box (px)
			initialHeight: 250,		// Initial height of the box (px)
			defaultWidth: 425,		// Default width of the box (px)
			defaultHeight: 350,	// Default height of the box (px)
			animateCaption: true,	// Enable/Disable caption animation
			flvplayer: 'storage/js/flvplayer.swf'
		}, options || {});

		this.anchors = [];
		$A($$('a')).each(function(el){
			if(el.rel && el.href && el.rel.test('^vidbox', 'i')) {
				el.addEvent('click', function (e) {
          e = new Event(e);
          e.stop();
          this.click(el);
				}.bind(this));
				this.anchors.push(el);
			}
    }, this);

		this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
		this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);

		this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
		this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
		new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
		this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
		this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
		new Element('div').setStyle('clear', 'both').injectInside(this.bottom);

		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
			center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}),
			bottom: this.bottom.effect('margin-top', {duration: 400})
		};

	},

	click: function(link) {
	
     		return this.open (link.href, link.title, link.rel);

	},
	open: function(sLinkHref, sLinkTitle, sLinkRel) {
		this.href = sLinkHref;
		this.title = sLinkTitle;
		this.rel = sLinkRel;
		this.position();
		this.setup();
		this.video(this.href);
		this.top = Window.getScrollTop() + (Window.getHeight() / 15);
		this.center.setStyles({top: this.top+'px', display: ''});
		this.fx.overlay.start(0.8);
		this.step = 1;
		this.center.setStyle('background','#fff url("/storage/loading.gif) no-repeat center');
		this.caption.innerHTML = this.title;
		this.fx.center.start({'height': [this.options.contentsHeight]});
	},

	setup: function(){
		var aDim = this.rel.match(/[0-9]+/g);
		this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth;
		this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight;

	},

	position: function(){
    this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
	},

	video: function(sLinkHref){
		if (sLinkHref.match(/youtube\.com\/watch/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('=');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/metacafe\.com\/watch/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('/');
			this.videoID = videoId[4];
			this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/google\.com\/videoplay/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('=');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/ifilm\.com\/video/i)) {
		  this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('video/');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
			this.so.addVariable("flvbaseclip", this.videoID+"&");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/\.mov/i)) {
		  this.flash = false;
			if (navigator.plugins && navigator.plugins.length) {
          this.other ='<object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
      } else {
        this.other = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
      }
		}
		else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) {
		this.flash = false;
		 this.other = '<object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param NAME="URL" VALUE="'+sLinkHref+'"><param><param NAME="AUTOSTART" VALUE="false"></param><param name="showControls" value="true"></param><embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"></embed></object>'
		}
		else if (sLinkHref.match(/\.flv/i)) {
		 this.flash = true;
		 this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
		}
		else {
		  this.flash = true;
			this.videoID = sLinkHref;
			this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
		}
	},

	nextEffect: function(){
		switch (this.step++){
		case 1:
			this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]});
			break;
			this.step++;
		case 2:
			this.center.setStyle('background','#fff');
			this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ;
			this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''});
			if (this.options.animateCaption){
				this.fx.bottom.set(-this.bottom.offsetHeight);
				this.bottomContainer.style.height = '';
				this.fx.bottom.start(0);
				break;
			}
			this.bottomContainer.style.height = '';
			this.step++;
		}
	},

	close: function(){
		this.fx.overlay.start(0);
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.center.innerHTML = '';
		return false;
	}

};


window.addEvent('domready', Videobox.init.bind(Videobox));

HTML for videobox: Code:

<script src="/storage/js/mootools.js"></script> <script src="/storage/js/swfobject.js"></script> <script src="/storage/js/videobox.js"></script>
<link href="/storage/js/videobox.css" media="screen" rel="stylesheet" type="text/css" />
<div id="vid1"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid1.jpg" alt="" /></a></div>
<div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid2.jpg" alt="" /></a></div>
<div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid3.jpg" alt="" /></a></div>

Jplayer javascript: Code:

//<![CDATA[
var $j = jQuery.noConflict();
$j(document).ready(function(){

    var Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        $j.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        $j(this.cssSelector.jPlayer).jPlayer(this.options);

        $j(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            $j(this).blur();
            return false;
        });

        $j(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            $j(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            $j(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Create links to free media
                if(this.playlist[i].free) {
                    var first = true;
                    listItem += "<div class='jp-free-media'>(";
                    $j.each(this.playlist[i], function(property,value) {
                        if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
                            if(first) {
                                first = false;
                            } else {
                                listItem += " | ";
                            }
                            listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                        }
                    });
                    listItem += ")</span>";
                }

                listItem += "</li>";

                // Associate playlist items with their media
                $j(this.cssSelector.playlist + " ul").append(listItem);
                $j(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = $j(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        $j(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $j(this).blur();
                    return false;
                });

                // Disable free media links to force access via right click
                if(this.playlist[i].free) {
                    $j.each(this.playlist[i], function(property,value) {
                        if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
                            $j(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                var index = $j(this).data("index");
                                $j(self.cssSelector.playlist + "_item_" + index).click();
                                $j(this).blur();
                                return false;
                            });
                        }
                    });
                }
            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            $j(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            $j(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            $j(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            $j(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index);
        }
    };



    var audioPlaylist = new Playlist("1", [
        {
            name:"Tempered Song",
            mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"
            
        },
        {
            name:"Hidden",
            mp3:"http://tamtam123.squarespace.com/storage/images/avenged_unholyc.mp3"
            
        }
        

    ], {
        ready: function() {
            audioPlaylist.displayPlaylist();
            audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
        },
        ended: function() {
            audioPlaylist.playlistNext();
        },
        play: function() {
            $j(this).jPlayer("pauseOthers");
        },
        swfPath: "storage/js",
        supplied: "mp3"
    });

    $j("#jplayer_inspector_1").jPlayerInspector({jPlayer:$j("#jquery_jplayer_1")});
    $j("#jplayer_inspector_2").jPlayerInspector({jPlayer:$j("#jquery_jplayer_2")});
});
//]]>

Any help on this matter would be greatly appreciated,

Josh

Hi all,
I'm working on a script which is actually a very simple tab system.

Code:

<script>
window.addEvent('domready', function() {
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');

$$('#buttons li a').each(function(element,index){
    element.addEvent('click',function(){
        tabs.fade(0);
        tabs[index].fade(1);
    });
});
});
</script> 

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>

I'm trying to change the style of the selected button. I mean that the button which is selected each time, should be highlighted (bold text). How can I add this function in the existing code? Can you help me please?

I'm using the 1.2.0 version of mootools for this.

**just realised I have put this in the wrong section

This should be a simple fix.. I hope.

JS:
Code:

//-- This is a really awful script and if it could be re-written by someone who knows what they're doing that would be incredible.


window.addEvent('domready', function() { //new event wooooo
  // -- vertical2
  var myVerticalSlide = new Fx.Slide('vertical_slide');  //declaring the variable with the FXSlide property
  
  var toggleThis = $('v_toggle'); //toggle variable
  
  myVerticalSlide.hide();  //hides the variable off the bat.

    toggleThis.addEvent('click', function(event){  // uses the type 'click' the id on the link, giving it the following function
    event.stop(); //Prevents browser from following the link and instead initiates the next line
    myVerticalSlide.toggle(); //Togles the div declared in the variable VerticalSlide
  });
});

HTML:
Code:

    <div>
     <a id="v_toggle" href="#">Question 1</a>
     <div id="vertical_slide">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
    </div> 
     
     <div>
     <a id="v_toggle" href="#">Question 2</a>
      <div id="vertical_slide">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
     </div>

I'm new to JS (and any programming language, i just know HTML, CSS/SASS) . I tried to make the code as stupid-simple as I could, as you can see with all the comments.

The problem is when you click on question1, all the answers show. I just want the answer below the question to show.

How can I write this to just show one answer at a time. Any explanation would be a huge help or a point in the right direction would be great help. I'd love to learn how to fix this as opposed to just copying pasting :\