JavaScript - Do You Know Prototype And Mootools? If So, I Need Your Help!

I am trying to get these Mootool Tooltips to work:
http://demos111.mootools.net/Tips

Nothing on the internet seems up to date or valid. I can NOT get these to work. I have been consistently trying for two days. I'm not an expert at coding, but I'm good enough to produce something like this: http://www.starforge.us/apply/

Okay, so what I need this for is a module. When you hover over the image, a description will come up. It needs to follow the mouse, as long as it is inside the image. I need the style to look just like what is provided.

It gives you the JS code, the HTML code, and a CSS code. They have a webpage that tells you what things do, but I've tried. I've called their core framework, and nothing happens, added the JS code to the framework, nothing, added css framework, nothing. I can NOT get this to work.

If anyone knows ANYTHING or has a functioning download of that, ALL FILES INCLUDED. So I can just switch the cow to my stupid image and change the text, it would be most appreciated. I need this for a website my boyfriend is doing. I've looked at buying other tooltips but NONE of them have the functionality that Mootools has.

Complete list of the codes would be great. All I need is one image with descriptive text, please. We have standards, so I will accept nothing of less quality than what is above. It doesn't have to be mootools, it just has to look like it and function like it. I can't get ANYTHING to work, protools, etc. etc. People only link code EXAMPLES. I need a file I can sift through that actually WORKS. Something I can play around with, and if it works, I can THEN FIGURE OUT WHY. For some reason, when it comes to tooltips, I'm handed a bunch of crap files that DON'T WORK and at that point, I don't know how to fix them...

Thank you VERY much for ANY help.

If you have a link to the code that I can BUY it with I will. Willing to pay $5.00 for them if you can produce one that looks EXACTLY like the mootools or whatever. (that's what they're going for on codecanyon.net). Please help. I'm really sick of these stupid tooltips. :P

hi,
I'm trying to inherit with prototype but I'm not able to do so. The problem is that I have a few functions which use some common variables and common functions and I want to inherit a Resource object with all these parameters. I also whant this inheritance to be done when I load the function, so no extra functions are loaded unless I need them.
Here's the code
Code:

function Resource(){
	this.url='';
	this.object=new Object();
	this.id='';
	this.categories=new Array();
}
function Users(){	
	Users.prototype=new Resource(); 
	this.url='user/';
	this.name='';
	this.email='';
};

function test(){
       var users = new Users();
       alert(users.id);
};

When I run the test function for the first time I get an undefined. a second time works fine.
I I get the prototype definition outside the User() function it also works fine, but I want the inherited function to be loaded when I need it.
Any ideas?

As always, thank you for your help.

G'day,

How would I go about copying all the prototype functions AND the constructor from one object into another object, and then call them?

Code:

function myOriginal() {
  alert('Hello');
}

myOriginal.prototype.example = function() {
  alert('In example '+this.test);
}

function myNewThing() {
  // Copy myOriginal into this object here
  this.oldconstructor(); // Should now display "Hello"
  this.test = 'from myNewThing';
  this.example(); // Should now display "In example myNewThing"
}

I know I can use this.example.call(this), but that's not an acceptable solution. I want to deploy this style over dozens, potentially hundreds of objects.

Thanks muchly,
Your friend from server-side...

Code:

/**
 * @class TestInheritance
 * 
 * This is a class and it's constructor all in one but the constructor is not set yet
*/
function TestInheritance(){
	this.testName;
	return this;
}
/**
 * @extends Util
 * Make sure this is called after the constructor/class declaration
*/
TestInheritance.prototype = new Util();

/**
 * @ctor TestInheritance
 * Set it to itself if there isn't an explicit constructor
*/
TestInheritance.prototype.constructor = TestInheritance;

/**
 * @extends Util
 * This specifically is set to allow TestInheritance to access it's parent's identity 
*/
TestInheritance.prototype.parent = new Util();


/**
 * @extends Util
 * @argument testName String
 * All functions are called after setting the prototype
*/
TestInheritance.prototype.setTestName = function(testName){
	this.testName = testName;
}

How would I reference the same Util class on both the prototype and the parent?

hi, i'm currently stumped by the following code.

what's the point of using x.constructor.prototype? (highlighted in red) why not directly use x.prototype.classname to check whether 'classname' property is in this class?

thx in advance

Code:

function getType(x) {
    // If x is null, return "null"
    if (x == null) return "null";

    // Next try the typeof operator
    var t = typeof x;
    // If the result is not vague, return it
    if (t != "object")  return t;

    // Otherwise, x is an object. Use the default toString( ) method to
    // get the class value of the object.
    var c = Object.prototype.toString.apply(x);  // Returns "[object class]"
    c = c.substring(8, c.length-1);              // Strip off "[object" and "]"

    // If the class is not a vague one, return it.
    if (c != "Object") return c;

    // If we get here, c is "Object".  Check to see if
    // the value x is really just a generic object.
    if (x.constructor == Object) return c;  // Okay the type really is "Object"
    // For user-defined classes, look for a string-valued property named
    // classname, that is inherited from the object's prototype
     if ("classname" in x.constructor.prototype &&  // inherits classname
        typeof x.constructor.prototype.classname == "string") // its a string
        return x.constructor.prototype.classname; 

    // If we really can't figure it out, say so.
    return "<unknown type>";
}

Anyone wanna give me some pointers on how prototypes work exactly? ;o

Especially in the context of this code:

Code:

var chatscroll = new Object();

  chatscroll.Pane = function(scrollContainerId){
    this.bottomThreshold = 20;
    this.scrollContainerId = scrollContainerId;
    this._lastScrollPosition = 100000000;
  }

  chatscroll.Pane.prototype.activeScroll = function(){

    var _ref = this;
    var scrollDiv = document.getElementById(this.scrollContainerId);
    var currentHeight = 0;
    
    var _getElementHeight = function(){
      var intHt = 0;
      if(scrollDiv.style.pixelHeight)intHt = scrollDiv.style.pixelHeight;
      else intHt = scrollDiv.offsetHeight;
      return parseInt(intHt);
    }

    var _hasUserScrolled = function(){
      if(_ref._lastScrollPosition == scrollDiv.scrollTop || _ref._lastScrollPosition == null){
        return false;
      }
      return true;
    }

    var _scrollIfInZone = function(){
      if( !_hasUserScrolled || 
          (currentHeight - scrollDiv.scrollTop - _getElementHeight() <= _ref.bottomThreshold)){
          scrollDiv.scrollTop = currentHeight;
          _ref._isUserActive = false;
      }
    }


    if (scrollDiv.scrollHeight > 0)currentHeight = scrollDiv.scrollHeight;
    else if(scrollDiv.offsetHeight > 0)currentHeight = scrollDiv.offsetHeight;

    _scrollIfInZone();

    _ref = null;
    scrollDiv = null;

  }

It's code to make the scrollbars autoscroll down. Full article and extra info he

http://radio.javaranch.com/pascarell...837038219.html

I sort of understand it but I'm not clear on what prototypes are.

Hi

I am using a program called aptabs which uses the Protoype framework.
The problem is that when I create a new tab and refresh the page, the newly created tab disappears. How can I resolve this ?

NOTE: The zip file for aptabs is attached.

Thanks

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!

Hi All,

I had to switch to Mootools, because the current company I am working for uses MooTools. Till thus far I haven't had any problems with MooTools until about 10min ago.

I am using a plug in called noobSlide, You can check it out here http://www.efectorelativo.net/laboratory/noobSlide/

My problem is that for some or other reason it displays 5 images instead of 4 images(the amount I am using), leaving the lastly displayed image blank.

Code:

Head:

<link rel="stylesheet" type="text/css" href="./css/liquidstyle.css" />
		<link rel="stylesheet" type="text/css" href="./css/screen.menumatic.css" />
		<link rel="stylesheet" type="text/css" href="./css/jd.gallery.css" />
		<script src="../root/scripts/core.js" type="text/javascript"></script>
		<script src="../root/scripts/mootools-1.2.1-core.js" type="text/javascript"></script>
		<script src="../root/scripts/mootools-1.2-more.js" type="text/javascript"></script>
		<script src="../root/scripts/menumatic.js" type="text/javascript"></script>
		<script src="../root/scripts/com_form.js" type="text/javascript"></script>
		<script src="../root/scripts/com_list.js" type="text/javascript"></script>
		<script src="../root/scripts/com_panel.js" type="text/javascript"></script>
		<script src="../root/scripts/com_tab.js" type="text/javascript"></script>
		<script src="../root/scripts/roar.js" type="text/javascript"></script>
		<script src="../root/scripts/jd.gallery.js" type="text/javascript"></script>
		<script src="../root/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
		<script src="../root/scripts/_class.noobSlide.packed.js" type="text/javascript"></script>

Code:

page:

<script type="text/javascript">
window.addEvent('domready',function(){
		var nS2 = new noobSlide({
			box: $('box2'),
			size: 945,
			items: [0,1,2,3,4],
			interval: 3000,
			fxOptions: {
				duration: 2500,
				transition: Fx.Transitions.Bounce.easeOut,
				wait: false
			},
			addButtons: {
				previous: $('prev1'),
				next: $('next1')
			}
		});
	});	
</script>

Code:

HTML:

<div class="mask2">
	<div id="box2">
		<span class="sShow"><img src="images/branding_your_website/img_1.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_2.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_3.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_4.jpg" alt="Photo" /></span>
	</div>
</div>

<p class="buttons">
	<span id="prev1">&lt;&lt; Previous</span>
	<span id="next1">Next &gt;&gt;</span>
</p>

Thanks in advance

Hi,

I'm trying to use a javascript tabstrip script called aptabs, which uses prototype.js. However, prototype.js won't load properly, because the following error occurs in prototype.js:

destination is undefined

on the following line (3042):

destination[property] = value.methodize();

The function this line is in is:
Code:

  function copy(methods, destination, onlyIfAbsent) {
    onlyIfAbsent = onlyIfAbsent || false;
    for (var property in methods) {
      var value = methods[property];
      if (!Object.isFunction(value)) continue;
      if (!onlyIfAbsent || !(property in destination))
        destination[property] = value.methodize();
    }
  }

I've tried using versions 1.6.0 all the way up to 1.6.1, but I still get the same error.

Can someone suggest what this error could be caused by and possible fixes?

Debbie

Hi there
I am trying to retrieve xml data using the prototype Ajax.Request.
I think I am getting the xml though I am unsure as to how to retrieve the text from the nodes
here is the function I am using to try and populate a text field

Code:

function makeMarkerXml() {
new Ajax.Request('coords.xml',
  {
    method:'post',
    onSuccess: function(transport){
////this will not work/////////
	  var coord = transport.responseXML.childNodes(0).childNodes(0).firstChild.text;
///////////////////////////////



    },
    onFailu  function(){ alert('Call failed') }
  });

 
}

can anyone help?

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

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

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?

Hey All - I asked this a few days ago.. what I came up with works just fine, but I feel it doesn't take advantage of "classes". If you think I could make this better by turning it into a class or using some other notation, that would be great.

Keep in mind, ALL this does is rewrite a pagination.... for a search return in a lightbox. I have this function called in the return function...




Code:

var srcpagParams = $H();
function buildPagi(param, currdsplyNum){
       var temDsply = new Template('<strong>[#{total_display}<span id="count">#{prevImg} #{links} #{nextImg}</span>'),
           crnt_link = srcpagParams.set('crnt_link', param), // the page we want to see
           dsplyNum = srcpagParams.get('paginateNum'), // what is the number of returns per page
           ttl_lnks  = Math.ceil( srcpagParams.get('numFound') / srcpagParams.get('paginateNum')), // total pages
           data_template = new Hash();
           data_template.set('total_display',srcpagParams.get('numFound'));

        bldImg = function() {
              var prvB = '<a href="#content" id="pagiPrev" onclick="firesrc(this)">Prev<img src="blank.gif" /></a>';
              var nxtB = '<a href="#content" id="pagiNext" onclick="firesrc(this)">Next<img src="blank.gif" /></a>';
              data_template.set('prvImg',(crnt_link > 1) ? prvB : "");
              data_template.set('nxtImg',(crnt_link < ttl_lnks) ? nxtB  : "");
       }
        bldLk =  function(){
           var holder = "";
           if(ttl_lnks > 1){
             var linkStr = new Template('&nbsp;&nbsp;<a href="#content" onclick="firesrc(#{pos});"> Go to page #{pos}</a>&nbsp;&nbsp;');
               $R(1,ttl_lnks).each(function(n) {
                  var posit = {pos : n}
                  holder += (crnt_link == n) ? "&nbsp;&nbsp;" + n + "&nbsp;&nbsp;" : linkStr.evaluate(posit);
               });
                  data_template.set('links',linkholder);
           }
        }
        bldRng =  function(){
            var currPaneRg = (dsplyNum * crnt_link) - (dsplyNum - currdsplyNum);
            data_template.set('range',((crnt_link - 1) * (dsplyNum) + 1 ) + " - " + currPaneRg);
             $('pages').update(temDsply.evaluate(data_template)).show();
        }
       firesrc = function(cl){
           var pagiPane = (typeof cl === "number") ? cl : (cl.id == "pagiNext") ? crnt_link + 1 : crnt_link - 1;
           var start = crnt_link * srcpagParams.get('paginateNum');
           Alertsrc( $F('query') ,(pagiPane)) // pass the query to the json to return the current search request
       }
           bldImg();
           buildLnk();
           bldRng();
};


Since some of the data declared at the top changes depending on the return, I didn't know if I could "initialize" it in a class.

But could I turn this into a class and if so - what I just use:

var buildPagi = create.Class({ 
       initialize: object.extend({

        })

})

Call the function when we are passed some data:
Code:

buildPagi(somevalue, somevalue2)

** NOTE: I use the libraries prototype and jquery.. so use Create.Class and new Template are within the libraries... etc..

so, is there a more eloquent, or robust way to write what I did above?