No responses to “Previous Post”
-
-
Wow you’re fast:) Yeah I know you’re using both tabs and accordions. It’s a great page you have but there’s a lot of content. I don’t know what I had done when I was in your position. Maybe I’d split the document into several pages. Tabs and sub tabs are not the solution to your problem because that ‘ll also let people scroll to ‘china’. Anyway, no offense, you did a great job with the tutorial…
-
-
Realware weblog &r... | 3 years, 8 months ago | #[...] Ho trovato un tutorial per Mootols, per chi mastica un pò di Inglese, dove vengono spiegati alcuni effetti molto particolari, come gli accordion verticali e orizzontali, lo trovate qui insieme ad altre risorse interessanti. [...]
-
-
-
-
-
-
-
Otro manual de Aja... | 3 years, 7 months ago | #
[...] Si por alguna extraña razón, el manual que Daniel preparó sobre Ajax en MooTools no te ha ido bien, prueba con este que tambien puede servirte. [...]
-
-
Hello!
Thank u first for this very nice and useful tutorial,
please can u suggest me how to add color effects (fading or similar) to the titles boxs, like moofx.mad4milk.net page?
This question was already askt bij somebody before but
I would realy like to know.
This looks great! -
-
-
Bill Scheltema | 3 years, 7 months ago | #I really like your tutorial, but I was wondering how I might ad a table or div or images and titles within the accordian-content code?
Thank you
-
Hi to both,
@merel: In the chapter ‘Some extra eyecandy’ I described something you are looking for. I also made an example. See it here.
@Bill: Just add a div or an image or any html within an element with classnameaccordion-content. So do something like this:<p class="accordion-content\">your html in here<p>.
@both: did the answer help you? Feel free to ask any questions… -
-
LutinCapucheBlog &... | 3 years, 7 months ago | #
[...] http://solutoire.com/tagstention/ del.icio.us this! [...]
-
-
-
-
Bill Scheltema | 3 years, 7 months ago | #
Bas,
Thank you, I actually looked at the other video tutorial and working example from Jon Molina on mootools external resources. I added the span class and reworked his css to suite me. I am doing up a site for a sports video guy up here. It seems to work so I must be doing it correctly. I can’t cold code but I can rework existing coed.
Bill
-
Stephen Clark | 3 years, 7 months ago | #Hi: In IE7, the font/text contianed within “accordion-content” is displaying , while it appears normal in Firefox. I’m a Firefox loyalist but I was just testing it out in other browsers. Is this a common bug in all IE? Does anyone know of a solution? I’ve tried to work with the CSS but it does not seem to change the font weight. I’m wondering if its an issue in the JS? Any solutions or suggestions would be appreciated!!
Thanks
Steve -
Stephen Clark | 3 years, 7 months ago | #
Sorry…some of my previous post did not display. The issue is that the font is displaying *bold* in IE7.
-
-
-
-
Bill Scheltema | 3 years, 7 months ago | #
Bas,
I use firefox2 and IE7 and all seemed well until I checked it out on IE6 on another coomputer,it has all accordian content expaneded but invisilbe in IE 6, it functions bit is not collapsed as it should be.
You can check my link to see what may be the cause. Maybe the span style is doing it, don’t know enough…Thanks again.
-
Rick Blalock | 3 years, 7 months ago | #I recently did a “Mootools for dummies” tutorial series at http://www.beautyindesign.com if you want to include it in your links.
Great job with all the resource links, I’ve used many of them recently!
RB
-
-
-
-
cdharrison.com | W... | 3 years, 7 months ago | #
[...] I’ve been comfortable coding HTML, CSS, etc. in Notepad for years, but I’ve grown to love Dreamweaver ever since I started working at PowerServe. Tonight, I ran across this Dreamweaver extension for Wordpress that could make life a little bit easier for anyone who uses the popular blogging platform. [...]
-
-
-
-
Ajaxian » Po... | 3 years, 7 months ago | #
[...] Bas Wenneker has ported the functions over, and has written up the experience. I really like the Prototype Framework and the functionality that comes with it, but I like Mootools even more because it’s so damn small and lightweight. Sometimes the minimalistic framework is just too light. Recently I needed some of Prototypes’ Enumerable functions for an Array but the app was implemented using Mootools. So I decided to take a look at the Array.each functions provided by the two frameworks. They’re implemented in different ways but by changing the Mootools Array.each I was able to treat a Mootools Array like a Prototype Enumerable. In this article I’ll describe how to ‘hack’ the Enumerable functionality into Mootools. If you just want the code you should take a look at my EnumArray.js. [...]
-
-
-
-
Hi nate,
Do you have all the necessary modules included? I’m testing the examples on ie6 WIN and they’re working just fine… About the cookies, Mootools has a cookie plugin that makes it real easy to store some info on the clientside, for more information go here. A possible implementation is that you do a Cookie.set(”fontsize”, “small/larger”) in the grow and shrink functions. Then in the initialize function you should check the the Cookie with Cookie.get() and when its’ value’s set to large call the grow function and otherwise the shrink function. There might be some other solutions as well. Let me know if this got you any further…
-
-
-
-
-
Javier Trapero | 3 years, 6 months ago | #Hi all,
I found a “temporal solution” for the version problem. I only change the onLoad event.
Byes!!!var accordion;
var accordionTogglers;
var accordionContents;
var tmpTogglers=new Array(0);
var tmpContents=new Array(0);
var cont1 = 0;
var cont2 = 0;
window.onload = function() {var tbls = document.getElementsByTagName(”p”);
for (var ti=0;ti -
Javier Trapero | 3 years, 6 months ago | #
Ups!!! max reply size problem, If anyone needs the complete solution please send my and Email atiktepika@gmail.com The partial solution:
…
var tbls = document.getElementsByTagName(”p”);
for (var ti=0;ti -
Hi peter,
It’s quite easy to do that. Let’s say you add
<div id="loadingImg"></div>
somewhere in your page. Make sure it’s style has display:none in it. Then do something like this:
function ajaxCall(){ $('loadingImg').style.display = 'block'; <ajax request in here with option {onComplete: showResponse}> ... } function showResponse(req){ $('loadingImg').style.display = 'none'; alert(req); }This code will show the loading img when it make a request and when the request is complete the showResponse function will be called and then you hide the loading img…
-
-
Hi nate,
I looked at your site and the only thing I could think of is that there’s something missing in your
style.cssfile. It says:p { margin:0.5em 0pt; }but it’s necessary to explicitly set the font-size, so try this:
p { font-size:12px; margin:0.5em 0pt; }Let me know if it worked, because with IE6 the script does work on this page…
-
Setting the P font-size to 13px worked in IE 6. Though I’m trying to keep all the fonts relative with percentages based on the YUI ‘reset’ and ‘fonts’ css. I tried setting the font-size to 100% but on IE the fonts went crazy big.
Looking at your script it is using pixels as the unit of growth/shrink size. What would need to be done to work with percentages?
Check out: http://developer.yahoo.com/yui/fonts/#using
Currently my default font size is 13px at 100%. If i wanted to increase it by 2px i would increase the font-size by 14%.
Is it as simple as changing ‘px’ to ‘%’ and ‘2′ to ‘14′?
-
Hi nate, you could try to adjust the grow and shrink functions. In the ‘grow’ and ’shrink’ function the unit is set to
px… try to change that to ‘%’. The unit can also be changed to ‘em’. Read more about it at the mootools documentation… When you change the unit make sure you set the ‘growsize’ parameter of the Class:new Fx.Font($$(‘p’),$(’shrink’),$(‘grow’),14);
Cheers
-
Rita Voland | 3 years, 6 months ago | #Great site, thanks. I’ve got one more for your collection :).
World Largest Collection of Ajax tutorials (300+)
Ajax-tutorials.com is a hand-picked, carefully selected, extensive listing of over 300 resources. As for today, it is the largest in the world collection of online Ajax tutorials.
Ajax Framework Feature Matrix is coming soon! -
Hey Bas, I think I’m close. If i change both the shrink and grow unit to % and change the growsize to 114. It will grow in IE (which is better than not working at all) but then shrink to 13%.
It seems shrink is returning the elements to the original px size of 13 but is putting a % on the end.
Also the animation on the grow start from what looks to be 13% and goes to the defined larger size (you can see this on the site above).
Any advice would be much appreciated.
-
Hi nate,
You’re a real pain in the ass:) Lol just kidding… I went to your site (dev.e-myth.com) and I’ve used the firebug javascript debugger to see what font-sizes are stored in the this.elements array. It seems it stores 13 as the font-size just like you stated. I think
el.getStyle('font-size').toInt()in the ‘initialize’ function is our problem. I think that for your specific needs this can be replaced with 100. Then when you hit ’shrink’ all elements are going back to 100%. This better be working:)Cheers
-
-
-
Porting Prototype ... | 3 years, 6 months ago | #
[...] Bas Wenneker has ported the functions over, and has written up the experience. I really like the Prototype Framework and the functionality that comes with it, but I like Mootools even more because it’s so damn small and lightweight. Sometimes the minimalistic framework is just too light. Recently I needed some of Prototypes’ Enumerable functions for an Array but the app was implemented using Mootools. So I decided to take a look at the Array.each functions provided by the two frameworks. They’re implemented in different ways but by changing the Mootools Array.each I was able to treat a Mootools Array like a Prototype Enumerable. In this article I’ll describe how to ‘hack’ the Enumerable functionality into Mootools. If you just want the code you should take a look at my EnumArray.js. [...]
-
-
-
MooTools Cheat She... | 3 years, 6 months ago | #
[...] [PNG][PDF][Via] « Wordpress Resources, el buscador de recursos para Wordpress [...]
-
-
Партизанс... | 3 years, 6 months ago | #
[...] Кстати о птичках, вчера скачал extension для этого самого Дримвивера специально под WordPress. Вот ссылка http://solutoire.com/tagstention. Posted by tsisar Filed in Интернетная жизнь, Что попало [...]
-
-
Well, I don’t have experience with XML handling. There are a lot of ways to communicate with a server. I prefer JSON. You should read Dare Obasanjo’s article ‘JSON vs XML’. Anyway, next week when I’ve some time I’ll look into it…
-
-
-
-
-
Scott | 3 years, 6 months ago | #
The title said “horizontal”… I thought they were going to unfold sideways instead of vertically. Darn, you got me excited there!
-
-
Hi scott, the problem is, I think, how to get the contents of a form into a JSONString. I’m writing this from scratch so it might not work, but it should get you started:
<form id="xform"> <input type="text" name="field_1" value="somevalue 1" > <input type="text" name="field_2" value="somevalue 2" > </form> function formToJson(formId){ var el = $(formId); var result = {}; result[el.field_1] = el.field_1.value; result[el.field_2] = el.field_2.value; return result; } //formObj => {field_1: 'somevalue 1', field_2: 'somevalue 2'} var formObj = formToJson(xform); //jsonString => {"field_1": "somevalue 1", "field_2": "somevalue 2"} var jsonString = Json.toString(formToJson(xform)); -
Thanks for a really great and co0l solution.
I need to toogle my grow/shink calls, I’ve been doing some experiments without any luck. Can you guide me in any directions?
by toogle i mean one link first click “grow” second click “shrik”
Thanks again for a teriffic job!
-
That’s very funny, I made the script using two buttons and one using three buttons and now you want a script using only one button! Ok, I’ll write something that can get you started. I didn’t test this code so don’t sew me:)
Fx.Font = new Class({ initialize: function(elements, toogler, growsize){ this.growsize = (growsize) ? growsize : 2; this.elements = elements; elements.each(function(el){ this.elements.push([el,el.getStyle('font-size').toInt()]); },this); $(toogler).onclick = this.grow; }, grow: function(){ this.elements.each(function(el){ if(el[0].getStyle('font-size').toInt() == el[1]) el[0].effect('font-size',{duration:300,unit:'px'}).custom(el[1],el[1]+this.growsize); },this); $(toogler).onclick = this.shrink; }, shrink: function(){ this.elements.each(function(el){ if(el[0].getStyle('font-size').toInt() == el[1]+this.growsize) el[0].effect('font-size',{duration:300,unit:'px'}).custom(el[1]+this.growsize, el[1]); },this); $(toogler).onclick = this.grow; } });The first time you click the grow function is called. When the grow function is called it changes the onclick function to shrink. So the next time you press the button the text will shrink. Let me know if it worked.
Cheers
-
-
-
links for 2007-01-... | 3 years, 6 months ago | #
[...] TAGStention: wordpress extension for dreamweaver Do you love Wordpress? Do you use Dreamweaver to write the code for Wordpress? Try the wordpress extension for Dreamweaver! (tags: wordpress dreamweaver blog work) [...]
-
spot | 3 years, 6 months ago | #how can i create a vertical accordion?
-
Hi spot, in my previous comment is a link to an old example of an accordion that has a width-transition. So the accordionTogglers don’t go up and down but left and right. It’s based on moofx, but I don’t think it’s that hard to get it working woth mootools. Make sure you take a look in the mootools doc for Accordion and the ‘width’ option.
-
hasnain mir mohammed | 3 years, 6 months ago | #Hi,
This is indeed a great extention but it would be even better if u write a help manual please like http://www.inserit.com (for reference purpose only).Plz reply
Thanks a lot.
Hasnain Mir Mohammed -
-
Luiz Jr. Fernandes | 3 years, 6 months ago | #You can put in the body of your great links list of ajax tutorials my mootools Fly Over Background example too…, it is an release that compile with IE and you can visualize it in http://www.dotes.com.br/mootools/FlyOverBackground.html
-
Luiz Jr. Fernandes | 3 years, 6 months ago | #
Yeah…, this is so simple and usefull!
-
Ron | 3 years, 6 months ago | #This looks pretty awesome, great job!
-
-
-
-
sam | 3 years, 6 months ago | #Thank very useful for those who want to use mootools
-
sam | 3 years, 6 months ago | #
May be it can be enhance by showing/masking unuse tab
-
Партизанс... | 3 years, 6 months ago | #
[...] самого Дримвивера специально под WordPress. Вот ссылка http://solutoire.com/tagstention. RSS [...]
-
solutoire.com | Mo... | 3 years, 6 months ago | #
[...] for form handling. To see how the Ajax class works I refer to a previous article I wrote called “Mootools: the ‘ajax’class”. The following example shows how to you an XHR [...]
-
Sheila | 3 years, 6 months ago | #Very understandable… thanks!
-
-
Paul irish | 3 years, 6 months ago | #This is great. Thanks for summarizing the changes!
-
-
hasnain mir mohammed | 3 years, 6 months ago | #
Hi,
Thanks 4 ur reply. Can u atleast temme how to use it plz coz i should know how to insert which thing where.Plz reply
Thanks. -
Sortie de Mootools... | 3 years, 6 months ago | #
[...] brievement dans la suite. (pour certains des exemples qui suivent je me suis inspiré de cet article en anglais très bien [...]
-
chromaSYNTHETIC Jo... | 3 years, 6 months ago | #
[...] has a nice new look. Cool, eh? For differences between the latest version and rev83 check out this blog entry at solutoire. In the future, I plan on jazzing up my SimpleView Gallery with mootools. I also have [...]
-
[...] , extension WordPress. http://solutoire.com/tagstention. RSS [...]
-
Luiz Jr. Fernandes | 3 years, 5 months ago | #
. . . and how I like that =]
-
Jan Enning | 3 years, 5 months ago | #is it posible to “save” or remember the position of the menu after a link in the menu is clicked?
example: if you click some link in the menu, that menu item will me “opened” at the second page?Works great and implementing it now!
-
-
Tobie Langel | 3 years, 5 months ago | # -
-
G Jones | 3 years, 5 months ago | #Thank you very much. I too had found Plotkit when looking for charting, but because Mochikit and prototype don’t (or didn’t…) play nice together, I was unable to use it. I’d planned on having a look to see if I could work out the necessary changes, but too many other things got in the way. I’m going to be having a good look at this, and how to use it in the open-source CRM system I work on.
-
-
Alexandre Plennevaux | 3 years, 5 months ago | #woooooow !
amazing work Bas!
would you be willing to port it to the jQuery library?
-
Xsss4hell | 3 years, 5 months ago | #I’m not good with Javascript, I would do it myself if I was an expert like you are, but I’m not =)
So, sorry but can you make an improved branch of mootools and prototype based on this knowledge, maybe a middleman javascript tool that boosts both libraries for the unskilled public? with your loop array technique…
greetz from germany
-
-
-
mowgly | 3 years, 5 months ago | #did you try it with jQuery’s iterators?
-
-
Justin Palmer | 3 years, 5 months ago | #Great to see someone pick up on this effort. I actually wrote one of these back in May 2006 but I never released it because I didn’t have time to support it. There were a few things in the implementation that I wanted to change too, but never got around to it.
I’ve implemented most of the charts already, including some additional ones that plotKit didn’t have at the time (not sure if it does now). I’ll send you over the source if your planning to press on with the charting effort.
-
-
-
Sebastian Munz | 3 years, 5 months ago | #Wow! Thanks for your works. Will give it a try. Your examples work fine in Safari 2 and FF2/mac.
Would love to see support for pie-charts. And maybe real line-charts?
-
Lo nuevo de MooToo... | 3 years, 5 months ago | #
[...] realmente espectaculares. Daniel Mota nos muestra las que ha encontrado y por si no te bastan, en Solutoire.com nos cuentan algunas más. # « Integra Site Stats de FeedBurner en tu [...]
-
Actually, there is an even faster while loop. I remember reading a post by someone doing various loop speed tests and this implementation was the fastest:
Can’t find said post any longer, but that was the fastest loop format.
-
dru | 3 years, 5 months ago | #Any chance we can get some legend drawing support?
-
That will be implemented some time, please post functionality requests in the issue tracker…
-
WoW we will use this for our application development http://www.citotech.com
-
Bibi | 3 years, 5 months ago | #I can’t seem to implement plotr and Fx.Font simultaneuosly. The interference seem to be coming from the prototype.js file. Is there a loophole around this issue?
-
-
-
Bibi | 3 years, 5 months ago | #I found a solution! It’s a bit sloppy but it gets the job done. You can create an tag and link it to an html file that exclusively has the graph.
-
Bibi | 3 years, 5 months ago | #
…an iframe tag…
-
TayebDev » ... | 3 years, 5 months ago | #
[...] Wenneker כתב בבלוג שלו על סוגי בלולאות ב-javascript ואיך הכי כדאי להשתמש בהן. אבל הוא לא דיבר על טכ יקות [...]
-
Uriel Katz | 3 years, 5 months ago | #you can see that prototype doesn`t use the forEach Array function,even if it is running on JavaScript 1.6+ .
that makes it alot slower,all the overhead in mootools each function comes from the fact that it is calling a function which takes both memory and performance.
also i seen that mootools also do a validation “if (i in this)”. -
Mootools 1.0 Final... | 3 years, 5 months ago | #
[...] going to 1.0! There are a lot of new classes like Color, Event, Hash, Common and some more. Go to Bas Wenneker website to know more about a small part of the feature with [...]
-
Hi there! I’d like to excerpt part of your code for Plotr in a book on JavaScript I am writing for O’Reilly & Associates. I know that this should be allowed under the BSD license, but I thought I’d ask you for permission as a courtesy, anyway.
Please drop me a line ASAP to let me know. I couldn’t find an email address for you.
Thanks! Amy
-
-
-
-
Well, it’s documented over here. Here’s an example:
function ajaxRequest(){ var postArgs = $('myElement').toQueryString(); new ajax('ajax1.php',{postBody: postArgs, onComplete: showResponse, update:'container'}).request(); return false; }; //or if you want to submit a form: function ajaxRequest(){ $('myForm').send({onComplete: showResponse, update:'container'}); return false; }; -
Aaron Bassett | 3 years, 5 months ago | #I can’t remember where I came across it but I’ve taken to using the following style loop quite a bit:
for (var i = array.length-1; i >= 0; --i)I haven’t performed any thorough speed tests but from general observation it appears to run fairly quickly on the majority of browsers.
Of course its not without its own problems, such as the fact that it goes through the array in reverse. But if that is not an issue then I think it is worth looking at when you want to shave a few ms of a loop execution.
-
-
Matt Foster | 3 years, 5 months ago | #There is a syntax error in IE with the object extension in the bar graph example in the package.
just remove the last comma and it will not error, this could thwart a lot of potential users using IE
-
I have nested accordions. The inner accordion content expands/contracts depending on which pane is opened. Sometimes the content of the inner accordion also changes in dimension.
Do you know of an elegant way to resize the accordion pane (both inner and outer) when their content changes in dimension?
-
Bruno | 3 years, 5 months ago | #Good Work!
Very usefull and very easy to use. -
-
Mindaugas | 3 years, 5 months ago | #XMLHttpRequest in mootools returns as text. How to get response as XML. In php I echo “text”. How to get this inserted in to document, if the response is text type?
-
Hey there, I was wondering if it would be possible to the toggler to display the content from Bottom to top, rather than from top to bottom…
what I mean is the effect. Can it be changed so that it opens the content from bottom to top.Thanks that would be pretty cool..
-
Hiiya,
Love the script!! Looking to use it to show teams movement within a league, if thats ok. Two quick questions tho…
1. Can you have the lowest number on the Y axis at the top?
2. Is it possible to have a “key” to the colors? Be good if you could identify the lines in the chart too a team.Cheers!!
-
Tdaf | 3 years, 5 months ago | #Nice write up. Big question though…
If a user has javascript turned off, how can you get the header content to display when a tab button is pressed? As far as I can see none of the content is visible if javascript is turned off. Is there a fix for that?
-
-
-
Hi Paul,
you can do whatever you want with Plotr :) The answer to your first question is no, it’s not possible yet but it will be implemented in the future. In the second question I suppose you mean something like a legend. This is also not yet implemented… Sorry, I’m very busy at the moment so I can’t say how long it’s going to take…Cheers Bas
-
Eric | 3 years, 5 months ago | #MooTools 1.0 Version?
Fantastic job with Plotr! I’ve been messing around with PlotKit, but it’s so extremely bloated, I haven’t wasted time in porting it to MooTools.
I’ve spent the afternoon attempting to port your code to MooTools, but have had little success.
Is there something in the works?
-
Hi Eric,
I thought about porting to Mootools, which shouldn’t be that hard. The main reason I’m not doing it is because it’s not finished yet. I’ve to write some documentation, implement some more features like parsing (html) tables for data and drawing a legend etc. So I’m definitely willing to do a port, but in a later stage. -
Eric | 3 years, 5 months ago | #
I’m more than willing to add features/documentation for a MooTools port. I’d hate to have to digg through the busy work of re-wiring the whole thing while learning Prototype :)
-
Clay Loveless | 3 years, 5 months ago | #Please create a releases RSS feed! :)
-
-
Alx | 3 years, 5 months ago | #Hi i was wondering where to get a help manual. This is a super cool extension. It should be high preiority for you that’s my opinion. Anyway good job tho. Bye.
-
Rob | 3 years, 5 months ago | #Hi Bas!
Great job! I use Plotkit already. It looks easyer. I plan to rewrite the userinterface of my application in the near future so I look for ONE js library. By now I vote for mootlools. My first thought was: what a pity it is not for mootools :( . Than I read on and I really hope you will have enogh time in the near future to port Plotr for mootools. I can’t wait it.
Best regards. -
Lothar | 3 years, 5 months ago | #Cool stuff. I actually use the canvas tag to draw realtime graphs in process screens for plant information systems. I made my compact graph component back in october which was tuned for realtime performance. However I also used plotkit ( which is again based on mochikit ) for some more sofisticated things. Is this ment as a plotkit replacement which just uses prototype? Performance is the key in these things. Right now everyone seems to be starting from scratch and making their own graph libraries. Would be good if one could make one that was based on prototype and which made redrawing the graph easy in a realtime scenario.
Does anyone know if Microsoft have any plans to include canvas in the next version of IE ( IE 7.1/8?). I find it most annoying that IE doesn’t yet have it because that means the event thread in the browser will hang while it renders the graph. Firefox on the other hand renders it on the graphics card. If only the whole world used Firefox life would be great.
-
Steve | 3 years, 5 months ago | #I’m still getting into mootools… however I can’t find the addons/plugins Fx.js, Dom.js, and Fxpack.js on the mootools download page. I tried going ahead with the rest of the tut, but in the end it didn’t work.
halp?
-
-
Matt Kruse | 3 years, 5 months ago | #I did some interesting tests on loop speeds here:
http://www.mattkruse.com/temp/gb_speed.htmlThe difference is most noticeable in IE. I use the lessons learned in these tests in my table sorting script, which I believe outperforms any other script performing the same functionality:
http://www.JavascriptToolbox.com/lib/table/ -
DeadCabbit | 3 years, 5 months ago | #Nothing happens, using FF 2.0.0.1 under Arch.
-
vladimir prieto | 3 years, 5 months ago | #i have copy your example page, in order to reproduce it on my localhost.
after a few problems, i realice that the problem was on the ajax class creation at line 8 of the ajas_ex1.html.
you create it like this :
new ajax(’….
and must be :
new Ayax(’…
the capital A leter!
at least at the time of writing, i have download the mootools library and ajax class declaration is with A not with a.
that’s all and thanks for this great post.
-
dani | 3 years, 5 months ago | #hi, why does this code not work if the buttons are on top?
thanks
d -
-
CCF | 3 years, 5 months ago | #Nice, but why not (using your examples’ #ids)
var oneLiner =
new Accordion(
$$('#button1', '#button2'),
$$('#contentElement1' ,'#contentElement2'),
// display set at n >than num. of buttons to
// display nothing at start, dont know any other way
{alwaysHide: true , display: 3};
Makes a nice double wipe transition…, and you can put the buttons anywhere you want, HTML and CSS-wise@Ubbe: I had this too, use Fx.Style insted. MooDoc says html must be in strict mode.
-
solutoire.com | Mo... | 3 years, 5 months ago | #
[...] I’m writing this article because my old article about the Mootools ajax class is outdated because of the API changes in Mootools version 1.0. This article will be an update of the previous article. [...]
-
-
matthew | 3 years, 5 months ago | #Firstly thanks for the tute.
I’ve noticed that the loading animation example only seems to work the first time the function runs?
Has anyone tested this and had any luck? Cheers!
function ajaxRequest(product_id){
$('loadingImg').style.display = 'block';
new ajax('some_script.php',{postBody:'product=' + product_id, onComplete: showResponse, update:'container'}).request();
return false;
};
-
matthew | 3 years, 5 months ago | #
Can ignore what I said in previous post. (except for the thanks part !)
My div with loading img was in the container which gets updated -
-
@Bas Uhm, I’m kinda new at Mootools, and especially javascript, so if you would be kind enough to maybe update your tutorial for mootools v.1.0. That’d be lovely.
Also, it would benefit everyone else who uses this tutorial from now on…
Just a request you may, or may not wish to follow.
-
-
-
H | 3 years, 5 months ago | #Does anyone know where I can find a good example of the fx.Slider effect for MooTools v1.0. I have already poured over the mootoosl.net documentation and as I am such a nooob cannot make head or tail of it… I wish some one would create a simple example that creates he same effect as the left hand menu on mootools.net. It is such a commonly used effect that in my opinion adds a lot of value when used in the correct context. I would really appreciate any help anyone could offer me.
-
I haven’t done much testing, but using XHR to send POST requests didn’t work. In previous dev versions it had, but some code was moved from XHR to AJAX. In particular, this bit
if (this.options.method == 'post'){
...
this.setHeader('Content-type', 'application/x-www-form-urlencoded' + encoding);
}
As I said, I haven’t done much testing, but in my case, the request was never processed by the server until that header was set.
If I’m wrong, please let me know.
-
Okan Ozkan | 3 years, 5 months ago | #Good Work!
Very usefull and very easy to use.
Thanks all. -
Okan Ozkan | 3 years, 5 months ago | #
Thank you. ;)
-
brodie | 3 years, 5 months ago | #Hi Bas, first off, fantastic site and work! really impressed and inspired by it.
im working on a site and i’ve hit a brick wall with your accordion script and cmotion image gallery from Dynamic Drive.I’ve put the two examples with both effects here to make it clear:
motion gallery -
http://nb015a9938.pwp.blueyonder.co.uk/jc/accordion.htmland the accordion effect -
http://nb015a9938.pwp.blueyonder.co.uk/jc/accordion2.html
When the two are on the same page the accordion effect ceases to work, and the only script that prevents it is the motiongallery.js (by process of elimination)
(there is a fade.js dependant on what i believe is an older version of mootools.js which also has to be removed for the accordion.js to see the mootools.v1.00.js but i don’t think its where the conflict lies)
I would greatly appreciate any help with this.
Thanks in advance,
Brodie
-
brodie | 3 years, 5 months ago | #H – why don’t you copy the source code from the page and just change the layout/css to your own style?
-
Wow, this site is really cool and useful. Did you make it from scratch, or is it running some sort of blog engine like Wordpress? This is really, really, really cool. I hope someday I can make a site half as cool as this. I’m just getting started with mootools, so I’ll be sure to use this site often.
-
-
John | 3 years, 5 months ago | #Hi Bas, If you use Firefox, the DIV elements cut off the ends or larger numbers (works ok in IE though)
-
John | 3 years, 5 months ago | #
P.S – Walter Zorn has a pretty cool Vector Graphics class in JS – though I don’t know if it works with prototype. – This lib can draw in realtime:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm -
Torbjørn | 3 years, 5 months ago | #Hello guys. To Tdaf:
The code under could probably work for your problem “If not javacript is enabled”.
b1Toggle.hide(); is the trick:
window.onload = function(){var button1 = $('button1');
var content1 = $('contentElement1');var b1Toggle = new Fx.Style('contentElement1', 'height', {duration: 700});
b1Toggle.hide();
button1.addEvent('click', function()
{if(content1.getStyle('height').toInt() > 0)
{
b1Toggle.start(0);
}
else
{
b1Toggle.start(c1Height);
}return false;
});content1.setStyle('display','block');
var c1Height = content1.getSize().scrollSize.y;
};
The bad thing is that the inline style “display: none” has to go.. so there will probably be some flickering.
You also have to remove the “height: 0;” from #contentElement1
-
Vasili Sviridov | 3 years, 5 months ago | #Just what I was looking for. I have lots of dynamic data from my DNS server, so I want to be able to plot all that in real time :) Great work!
-
Having a Helluva t... | 3 years, 5 months ago | #
[...] Tagstention – Wordpress plugin for Dreamweaver & found this page, but haven’t read it How to edit Wordpress themes using Dreamweaver | Leon Kilat ::: The Cybercafe Experiments [...]
-
Gustavo | 3 years, 5 months ago | #Regarding the vertical accordion…the mootools docs just say that CSS mastery is required…but they dont mention ANYTHING about what css options are supposed to be specifically set. I have the width set in my css file of the stretcher and my accordion doesnt expand at all…and yes, i did set the width: true option….
Can anyone please elaborate on CSS Mastery required??? -
-
Gustavo | 3 years, 5 months ago | #
you can check out an example of what I’m trying to do at http://gmtaz.com:81/riad_v2/
I believe thats the Url…
I’m also using the latest version of mootools… with everything attached to the build.
Thanks! I’m sure i’m missing something, i just wish i knew what it was… -
-
-
Gustavo | 3 years, 5 months ago | #
Ha, your birthday is 1 day after mine…Jan 12th 81. it’s the month of developers!
-
Carter | 3 years, 5 months ago | #I have the same question as David from above, but didn’t see it answered:
“Is there an easy way to change it so the y-axis doesn’t go all the way to zero? My example date is between 150 and 200 so the change from period to period isn’t that noticeable when the axis goes all the way to zero.”
Thanks!!!
-
Painthappy | 3 years, 5 months ago | #
Nevermind on my last comment… Figured out the answer. Maybe I’ll put together a documentation piece as I’m working on it.
Thanks!
-
Thomas Aylott | 3 years, 5 months ago | #That’s just awesome. But where’s the demo? :’(
-
Steax | 3 years, 4 months ago | #Same goes here – I can’t seem to do a POST request. I’ll try more testing.
-
peter | 3 years, 4 months ago | #just letting you know the graph works in camino and looks great. thanks!
-
Tim | 3 years, 4 months ago | #miniajax.com
-
lambchop | 3 years, 4 months ago | #Excellent stuff. Thanks.
So far I’ve found one minor problem using the pie chart to generate sparklines in IE. If you have one slice of 0% and another of 100% it doesn’t render the slices properly. I guess it’s a limitation of excanvas. You can work-around by setting 100% to 99.99% and 0% to 0.01% and it’ll look mostly OK.
-
-
Skakunov Alex | 3 years, 4 months ago | #seems neat
-
-
-
-
-
-
Fredrico | 3 years, 4 months ago | #Ahh great, I was wrestling with this problem too.. Thanks!
-
Hi,
is it possible to have two different (independent) classes with the accordion affect? So that clicking elements in class1 only effects other elements in class1 and not in the other class.
That way I could make two groups of boxes that can be opened and closed independent of each other. -
-
The examples are all based on Mootools 1.0… Check out the example pages. Do you have all the dependencies? Do you use firebug for testing? If not,you should learn to use it, I you do, tell me why is your script is not working. Do you have an example for us? If it’s online I could give it a try…
-
-
Hey there Bas, a while back you helped me with creating a function to change the color of the currently opened tab’s button.
Of Course that was before the 1.0 version of Mootools was added to the scripts.
Wanted to know if you could help once again, to help me achieve that same effect. from before.
Let me know.
Thanks, A LOT!
Great work as always. -
-
-
Joe Walker | 3 years, 4 months ago | #I hate to be a pain, but I think you are fighting a losing battle. For example, the follow-up was to steal data from Objects too. In the end you can’t trust the environment that you are sending the data to, so you should only send data to people you trust, and that means having URLs that are not predictable.
-
I completely agree with you that unpredictable urls are the best security one can have right now. We can’t control what happens on the clientside. In example, when MR. Evil changes the iframe Array object before we apply our fix we’re doomed too… What’s described on this page is just a way one can improve security, not making a app invulnerable to data theft… Maybe I should update the article about this…
-
David Hund | 3 years, 4 months ago | #Hi Bas,
Great stuff, I love (and use) it! One question though: is it possible to define the ’steps’ on the axis?
At the moment, the y-axis is sub-divided by ’steps. (i.e. 0 – 0.3 – 0.6 – 1.2 etc) but I would loke to see ONLY integers (1- 2 – 3 – 4). Would that be possible?
-
-
ByteDreams | 3 years, 4 months ago | #hmm, from the comments it looks like this extension is not being developed further – or at least not a priority. Perhaps if it was released as open source, others within the Wordpress community might be willing to keep it up-to-date with current WP versions. I understand the latest version of WP has several new tags replacing the tags of prior version. Perhaps using find and replace in DW will suffice for most things? Don’t know myself for sure.
-
Simon Willison | 3 years, 4 months ago | #Your applyArrayFix() function can be easily disabled by an attacker simply redefining document.createElement before your function is called. You’re putting yourself in an arms race with an attacker, but the attacker has the advantage of knowing exactly how your code works (you on the other hand don’t know the details of theirs). As such, your solution can’t work.
-
It’s very ignorant when people don’t read the article and comments very well. If you read the chapter ‘The downside’ and my previous comment you can see you’re almost rephrasing me.. Now I’m definitely going to update this article because the fix I wrote about is not a fool proof way to secure json from being read by Mr. Evil. Just like Joe told us, using unpredictable urls is the best security one can have right now.
Cheers
-
-
Stathis | 3 years, 4 months ago | #It seems that your blogging software has rendered “i minus minus” as a “i ndash” in your code (an ndash is a slightly longer version of a dash). In my browser it looks like you’re just writing “i minus” which can’t be right. Consider fixing this to avoid confusion :-)
-
Spiros Denaxas | 3 years, 4 months ago | #It is interesting to see that the reverse iteration loop is faster than the normal iteration loop. Out of curiosity, I did the same with Perl:
idaru:/tmp spiros$ ./loop.pl
total elements: 500000
Normal loop : 0.269156
Reverse loop : 0.253984
500000 elements took 0.26ms to get traversed normally and 0.25ms to get traversed backwards.
The difference seems to get larger as the size of the array grows:
idaru:/tmp spiros$ ./loop.pl
total elements: 700000
Normal loop : 0.379325
Reverse loop : 0.353184
Spiros
-
Seth Illgard | 3 years, 4 months ago | #Great job!
-
-
Simon Willison | 3 years, 4 months ago | #
I’m not too happy about being called ignorant. The exploit I explained in my comment is NOT the same as the one you talked about as “The downside” – you had suggested that your method could work provided you applied the fix at exactly the right moment, whereas I was pointing out that the attacker could modify document.createElement to prevent your fix from working no matter when it was applied.
-
-
Bjørn Olav V. Aure | 3 years, 4 months ago | #I just wanted to test this commenting stuff, it’s pretty great that i can see the text that i am writing, nice work :)
-
pixelchutes | 3 years, 4 months ago | #Thank you for the great tutorial! Everything is working as intended, other than two things:
(MooTools v1.0)
1. When using Accordion for navigation, how can I get the accordion to Start on the appropriate toggler, instead of the first toggler? I have ways to reference which toggler to activate via a CSS class, but wanted to know if there was a “built in” way to handle such scenariou.
2. In IE7, I am only shown the first two items in my list after the accordion effect…it’s almost as if it’s a fixed height? In FF, I see ALL of the container (as expected)…. anyone experience this??
-
pixelchutes | 3 years, 4 months ago | #
Ah, nice!
http://docs.mootools.net/files/Plugins/Accordion-js.html
It looks like “display” may be my answer…
-
-
-
Tommy Valand | 3 years, 4 months ago | #I feel safer with running IE6 in a virtual machine, than hacking around.
M$ has a IE 7 Readiness toolkit: http://blogs.msdn.com/ie/archive/2006/11/30/ie6-and-ie7-running-on-a-single-machine.aspx
I use this both at work and at home, and it works really nice..
-
Steve James | 3 years, 4 months ago | #Hmmm, I got a bunch of errors when opening up IE7 after using the technique to NOT overwrite IE6. Did you run into this, or did you use the the other method? Or, thirdly, are you using some old beta IE7 version. Thanks!
-
-
Tommy Valand | 3 years, 4 months ago | #
@Bas: What are you talking about? Did you actually read what I linked to?
You upgrade to IE7 on you machine, and use the virtual machine (software that lets you run windows inside windows) with IE6 to test JS/CSS.
BTW, new release of the virtual-machine image: http://blogs.msdn.com/ie/archive/2007/03/20/ie6-vpc-refresh-now-available.aspx
-
-
digitarald | 3 years, 4 months ago | #This is fixed now, Xhr has more power and Ajax more options :) Take a look at the dev version or wait for 1.1 release.
-
digitarald | 3 years, 4 months ago | #
Why do u have the iframe approach for Opera 9 too? I have also a HistoryManager for mootools (more options, different Interface for registering states), its online for closed beta testing, drop me a mail for the link. It also works in Safari, your will freeze safari in an endless loading state. Workaround for safari was hell!
-
-
Sorry about those 2 post trials (can delete them if you wish).
About your 2 native for loops, the second one (reverse iteration) is not an optimization at all, it’s actually the proof of poor algorithm (sorry to be so rude :).
I bet the only thing that slows down the first loop compared to the second is the fact that the second for argument (i < data.length) is run at every cycle of the loop, thus evaluating the length of your array each and everytime.
To “optimize” the first loop, just replace this :
for(var i = 0; i < data.length; i++){tmp = data[i];};
by this :
for(var max = data.length, i = 0 ; i < max; i++) { tmp = data[i]; }
It should do the trick, be as fast as the first one and not reversed. Haven’t tested it though, I must admit (not enough time in a day :)Apart from that little point, it was a very usefull and instructive test, thanks a lot !
-
Hi Bas. Firstly I want to congratulate you for the awesome work you do. :)
Secondly, I’d like to tell you that I tried and tried to make v2 of histman work but just couldn’t :)I can hardly think I did something wrong but who knows?
I wrote everything as said on your site, but no content is loaded. With v1 it worked…
Also, I tried to combine v1 with the function for showing a loading image while the content was being loaded. Again, I had no success, because i’m guessing it affected the request somehow. It just didn’t load nothing. I’m quite new to ajax anyway, but i love it.
I would appreciate an answer. Till then, good luck.
-
Thomas Aylott | 3 years, 4 months ago | #
I run IE 3, 4, 5, 5.5, 6 & 7 on XP in Parallels on my mac.
I had been manually hacking them up to work, but now you can just run a simple installer to make it all happen perfectly.
Internet Explorer 7 Standalone Installation Instructions by Tredosoft
Internet Explorers 3 thru 6 Standalone Installer by TredosoftWorks perfectly without having an extra copy of windows running.
-
Gerald Dean | 3 years, 4 months ago | #Hey,
Nice tutorial.Just what I was looking for. My implementation is not working right in IE6. When the page first loads the first section that opens only does so half way.
Works perfectly in FF as always. My site address is: http://www.geralddean.com
Please help!
-
@Dan, about your problem, are you using the mootools or the prototype port? Which browser are you testing with? Do you use firebug for debugging? I good way to test HistMan is to have an alert in the callback function, this way you’ll know the callback function is called or not. Good luck :)
-
drekwon | 3 years, 4 months ago | #Dude this is sweet! Super thanx bro.
-
Of course, the while loops can be replaced as easily by an optimized version. It’s just basic algorithmics : as the tests are repeated for every loop, make them as light as you can.
So it would be like :
var max = data.length;
var i = 0;
while (i < max) {
tmp = data[i++];
}
Djee, your preview box doesn’t work as the posted version… We have to use ‘& lt ;’ instead of ‘<’. -
Markus Ehrlich | 3 years, 4 months ago | #I prefer MultipleIEs to run multiple versions of IE on the same machine…
http://tredosoft.com/Multiple_IE -
i’m using mootools v1 and i think i quit trying to make v0.2 of histman work. i am content with 0.1 which seems to… perfectly work in ie6, ie7, ff202. thanks a lot for your help… you’re the man.
(still haven’t figured out how to make the loading image work, but trying.)
btw, i do php. javascript is just a hobby. cya m8 -
danny | 3 years, 4 months ago | #What can I say, this is exactly what we all have been waiting for so long under prototype… simple, lightweight, elegant. Life saver! Keep up the cool work!
I do feel greedy for ask this, but could you please fix the example_bar.html for safari?
SyntaxError – Parse error (line 57)
-
danny | 3 years, 4 months ago | #
More to last comment:
Value undefined (result of expression element.readAttribute) is not object. (line 1)
-
-
danny | 3 years, 4 months ago | #
follow up to example_bar.html not working in safari:
If I remove line 53-57, which is used, i.e. the
“Object.extend(options,{
barOrientation: ‘horizontal’,
colorScheme: ‘grey’,
backgroundColor: ‘#d8efb0′,
});”block it’ll work.” Any idea?
-
danny | 3 years, 4 months ago | #
sorry, me again. It seems that the above problem occurs in IE6 as well.
-
Thanks Bas ..really helpful.
Re the Javascript disabled issue: There is a simple css fix for this – add height:100%; below the first c1, c2 statement ie:
#c1,#c2{
height:0px;
margin:0;
padding:0;
overflow:hidden;
}
#c1 {
height:100%;
}you could use height ‘auto’ also (depends on your layout / ie6 box model issues).
-
-
-
Mike | 3 years, 4 months ago | #Great tutorial, thanks a lot :-)
Did anyone find a solution for the bold text problem in IE7?
-
Mike | 3 years, 4 months ago | #
I found a solution for the bold text here:
jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.htmladding a background colour to the element fixed the problem.
Just in case somebody else has similar problems :-) -
-
defar | 3 years, 4 months ago | #Wonderful design.
If mouse design added to interactive for user is perfect. -
I don’t think you read the article very well. It’s not a proof of concept, it’s a comparison between different ways to loop over an Array. You’re right about the optimizations, but I wanted to show the difference between normal for loops and ‘improved’ loops.
And about the live preview: yeah I know, otherwise this place would be heaven for Mr Evil… -
tc | 3 years, 4 months ago | #Well I’ll take this into consideration the next time I’m looping over 100,000 records, but how much of a difference does it make for list of more realistic size. I mean on the web, I have never really looped over anything more than probably 100 records. Anyway… still interesting article.
-
-
-
Hey there, I just started messing around with what it looks like, it will be my site.
I added the accordions and all that goodness. I also added some PNG transparency script I found. Though I still have some problems with it.Anyway, I wanted to see if you could help me out on this one.
I added a png background image to the tab, so when it is opened the background changes to a color to make it stand out. and when the tab is closed it should go back to the “no-background” function. But i keep getting errors on Firefox.Warning: Expected number or percentage in rgb() but found ‘)’. Error in parsing value for property ‘background-color’. Declaration dropped.
Can anyone help. Also I still don’t know why my “accContent” background doesn’t display as a transparent on IE but it does on Firefox. (thats another problem I have)
-
-
kev | 3 years, 3 months ago | #Hi bas,
Great tutorials, Was having alot of trouble trying to get this working. Whenever I download the mootools.js from the official site nothing ever works for me, however when i follow your tutorial everything is ok. Are they constantly revising it? Thanks anyway. Works fine from your tutorial
-
Luiz Jr. Fernandes | 3 years, 3 months ago | #
http://www.dotes.com.br/mootools/mootools_link_list.html
That’s a new link list for mootools =D
-
Luiz Jr. Fernandes | 3 years, 3 months ago | #
Allready in Beta version
-
Techsplorer | 3 years, 3 months ago | #John (or bas, or anyone else who cares to jump in): got any hints for nesting? I’ve been beating my head against the wall and I can’t seem to make it work.
-
Riccardo Bartoli | 3 years, 3 months ago | #Hi Bas, great utility!
I’m using Mootols Svn Version, rev.435 and i get this error:
Fx is not defined
[Break on this error] Fx.FontPlus = new Class({
Fxfontplus.js (line 4)Fx is not defined
[Break on this error] new Fx.FontPlus($$(’p',’h1′,’h2′,’li’,'a’,'b’,’span’),$(’shrink’),$(’gro…
(index.php) (line 18)Can you help me to resolve this problem? I need this revision for other features
Thanks in advance
-
-
-
Panky | 3 years, 3 months ago | #Wow! this is ql! :)
-
morganusvitus | 3 years, 3 months ago | #The site looks great ! Thanks for all your help ( past, present and future !)
-
Panky | 3 years, 3 months ago | #
Hy! I used the full-full packed mootools (v1.0) and dosen’t work the code! What can I do? I don’t understand what’s the problem. :’(
Panky
-
-
-
Chrissy | 3 years, 3 months ago | #Hi Bas, Yahoo has also some groups about javascript, but google groups has way more threads..
Thanks for the interesting article! -
vladimir prieto | 3 years, 3 months ago | #not pretty sure about this, but in my case works.
setting
loadingImg.style.display = 'block';
would not work on all browsers, cuz not all browsers will execute that style in the same way. it would be better if you leave it by default…like this :
loadingImg.style.display = '';
this way the browser will use the value that has by default for that object.
-
marat | 3 years, 3 months ago | #ditto on the mootools port. would be willing to help.
-
Hello.
I used Mootools Ajax since some months, but recently i used it to load an XML file, with some CDATA elements into to put some HTML content in my XML….
But the result I get is that any html tags into my CDATA elements are still considered as XML tags, nodeType 1, and not as CDATA elements… So actually i can’t insert HTML text in an XLM if I want to load it in Ajax via mootools…
Is anybody having any idea?Thanks
-
Daniel | 3 years, 3 months ago | #hi ,i’m a bit new to mootools,but in the green to blue color accordion found here | http://www.solutoire.com/experiments/mootools/acc_ex3.html | how can i transform it to the blue color when i mouseOver the green color?
i don’t really understand how it’s made,i have some ideas and it involves the animation in | http://mootools.net/download | light blue to darkblue animation of the tables and the text.
once i get the idea i can manage to continue by my own but i’m really stuck and to start to learn java right now it’s a bit hard and it’s gona push back my programs.I’m not a coder ,i’m a designer .but i’m trying to do both. Please help.-Daniel-
-
-
-
Web Design & N... | 3 years, 3 months ago | #
[...] http://solutoire.com/tagstention/ With this extension a toolbar is added in Dreamweaver which you can use for inserting WordPress template tags into your theme files. If a tag has parameters, you’ll be asked to fill in a wizard. [...]
-
-
-
-
-
-
stefan | 3 years, 3 months ago | #it’s not a bad solution, but keep in mind that document.createElement and a multitude of other native objects/functions can be overwritten to get around this in a variety of ways. the only real solution is to parse any and all data which comes from outside sources. we also need real namespaces in javascript so that external sources can provide executable code without any possibility of access to the global and other private namespaces…
-
-
the hosting & ... | 3 years, 3 months ago | #
-
-
Diego Perini | 3 years, 3 months ago | #A new IFRAME also means a new “window” and a new “document” apart new fresh constructors for Array, Object and Function etc…
Think to the IFRAME as a completely new and different scope, and a namespace. Seen this, it seems to me a little more “secure” if your application is loaded and executed in a newly created IFRAME instead of trying to do the opposite and “fishing” fresh methods and object from it.
You can still allow/disallow comunication between IFRAMEs, and the browser should implement at a minimum it’s domain restriction policies.
This is not 100% secure, I also have come to know…, but who cares, the Internet itself is not a secure place…so things are matching well :-) -
FeaturePics Images | 3 years, 3 months ago | #Good one! Just to let you know — I was not able to change background color (IE7). Is it a bug?
-
-
Roman | 3 years, 3 months ago | #looks like very well crafted ajax history weapon
in my case i cant get something to work properlyfor example:
lets say u need a link in the content2.html to do exactly the same as the link Show content2 on example.html would dowhat would i need to do to get this functionality into the content zone, having a href object with history attribute doesnt call somecallbackfunc at all if its placed in one of the conetent.html file
-
Roman | 3 years, 3 months ago | #
hmm another disadvantage here
u cant use any javascript in content files
not even simple alert works out of content file -
Techsplorer | 3 years, 3 months ago | #
Well, I must be dense, because I don’t see the answer anywhere here at http://solutoire.com/2006/11/29/mootools-horizontal-accordions-explained/, but I made it work on my own once I realized I just needed to create multiple togglers. Now if I can figure out how to get the content to toggle open all the way, I’ll be very happy.
Any hints?
-
-
Dylan Barber | 3 years, 3 months ago | #Love accordians think they are a great way to save space – is there a way to lay the accordian on its side?
I havent seen a good way of doing it but there has to be someone who has done one
-
Techsplorer | 3 years, 3 months ago | #
I guess I was unclear is what I was asking. When I click on a toggler to open it and close all the others, I would like it to open all the way (right now only the first few lines (or partial lines) are shown completely, the rest is clipped); if I toggle open another toggler (which needs to be one further down the page, I believe) and then reopen the clipped one it looks fine. I’d like it to look fine the first time!
-
-
jez | 3 years, 3 months ago | #is this working with mootools v1?
just curious. -
-
beaks | 3 years, 3 months ago | #@pixelchutes
You can also use ’show’.
For example, if you wanted to show the third section in the accordion:
accordion = new Fx.Accordion(accordionTogglers, accordionContents,{
//when an element is opened change the background color to yellow
onActive: function(toggler){
toggler.fx.start('#fdff00');
},
onBackground: function(toggler){
//change the background color to the original (white)
//color when another toggler is pressed
toggler.setStyle('background-color', toggler.origColor);
},
// shows one of the sections in the accordion
show: 2
});
-
Techsplorer | 3 years, 3 months ago | #
Okay. I’m now using height attributes (I was hoping to avoid that but it seems to be the only way I’ll get it to work), but as mentioned above it only works in FF. Anybody have workarounds/fixes for IE?
-
JonathanW | 3 years, 3 months ago | #Techsplorer, to fix your height problem, please remove the width declaration under .accContent from the CSS file and it should display fine :)
I had the same problem and I managed to get a solution from the MooTools forums :)
-
-
kollektiv | 3 years, 3 months ago | #Hi,
this is a very nice functionallity. Are you able to give an example to save the status from a mootools effect like accordion in a cookie?
thx
Kollektiv -
kollektiv | 3 years, 3 months ago | #
e.g.: for this accordion effect: http://curiousanimal.com/demo/moofx_accordion/index3.html
-
michaelmuller.net ... | 3 years, 3 months ago | #
[...] http://solutoire.com/ajaxsolutoirecom/ [...]
-
edson | 3 years, 2 months ago | #parece quefunciona
-
-
Caio | 3 years, 2 months ago | #Not working on IE 6, nothing displays on the graphics
-
Robert | 3 years, 2 months ago | #hi, thnx for the script!
but is it possible to combine this with the function ScrollLinks?
when i implement mootools.js, the script is not more functional, a click to a # do this: jump to top, shake alittle bit, then jump to anchor, but no more smooth scrolling :-(
here is the source:
var ScrollLinks = {
currentHash: false,
start: function(){
this.scroll = new fx.Scroll({duration: 1500, transition: fx.sineOut, onComplete: function(){this.end();}.bind(this)});
this.allinks = $c(document.getElementsByTagName(’a'));
this.allinks.each(function(lnk){
if ((lnk.href && lnk.href.indexOf(’#') != -1) && ( (lnk.pathname == location.pathname)
|| (’/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {
lnk.onclick = function(){
ScrollLinks.scroll.clearTimer();
this.initialHref = this.href;
this.initialHash = this.hash;
this.href = “javascript:void(0)”;
setTimeout(function(){this.href = this.initialHref;}.bind(this), 200);
ScrollLinks.go(this);
}
}
});
},go: function(link){
this.currentHash = link.initialHash.slice(1);
if (this.currentHash) {
this.allinks.each(function(lnk){
if (lnk.id == ScrollLinks.currentHash){
if (window.opera) lnk = [lnk].find(’parentNode’);
ScrollLinks.scroll.scrollTo(lnk);
return;
}
});
}
},end: function(){
if (!/Konqueror|Safari|KHTML/.test(navigator.userAgent)) window.location.hash = “#”+this.currentHash;
this.currentHash = false;
}
}i think there is a doublecrash with document.getElementsByTagName(’a'), or?
sincerely
robert -
-
Robert | 3 years, 2 months ago | #
hi, thnx for the fast answer.
yeah, you are right!
now the script no longer jump to top.
normal anchor function is now available but the scroll function is alreay gone :-)
sincerely
robert -
Robert | 3 years, 2 months ago | #
here is an errormassage from moz:
uncaught exception: [Exception... "Object can not be created in this context"]
the error is coming for the changed code
greez fom vienna
robert -
berchi | 3 years, 2 months ago | #Is it possible to change the scale in graphic bar?
best regards -
Nigel | 3 years, 2 months ago | #You may want to look at http://webfx.eae.net/dhtml/chart/chart.html – similar to PlotKit but with fewer annoying bugs (I remember I hit problems with graph colouring etc), and the big win is that it gives you a legend block.
-
Markus | 3 years, 2 months ago | #I am looking for a framework like Plotr but to draw spider charts. Is this feature planned or any other framework with this feature available?
-
Joe | 3 years, 2 months ago | #Looks great in SeaMonkey 1.1
-
-
-
Jason | 3 years, 2 months ago | #Just like “Caio”, I dont see any graphics in IE6 & IE7. Works great in Firefox.
The only thing that shows is the labels and axis markers.
Note: I am using 0.1.4
-
Casey | 3 years, 2 months ago | #Thanks for this nice tut.
I’m curious how difficult would it be to use this in *Fx.Slide instead of *Fx.Style so the added effects (bounce, etc.) can be achieved? -
Jason | 3 years, 2 months ago | #
Fixed the problem with the graphics not rendering in IE6/IE7.
It turns out that my HTML page had a DOCTYPE tag for HTML 4.0 Traditional. I replaced it with” -
Jason | 3 years, 2 months ago | #
Fixed the problem with the graphics not rendering in IE6/IE7.
It turns out that my HTML page had a DOCTYPE tag for HTML 4.0 Traditional. I replaced it with -
Jason | 3 years, 2 months ago | #
Fixed the problem with the graphics not rendering in IE6/IE7.
It turns out that my HTML page had a DOCTYPE tag for HTML 4.0 Traditional. I replaced it with
a doctype tag for XHTML 1.0 Transitional//ENNote: Sorry for the previous posts. The inline “pre/code” tags didnt like me.
-
-
For the XHR Class the XML document is passed as the second argument to the onSuccess function. I assume that this will be the same for the onComplete function of the ajax class.
So probably you can work with the XML document like this:
with ‘onComplete: showResponse‘ try
function showResponse(response, responseXML){
alert(responseXML + ', ' + responseXML.getElementsByTagName('nodeTagName')[0]);
} -
Tran Quoc Huy | 3 years, 2 months ago | #hi Bas, i want to upload a image file on a form. Please help how to do this?
Thanks and best regards,
Huy Tran.
-
WP Plugins DB &raq... | 3 years, 2 months ago | #
[...] Visit [...]
-
-
Maya | 3 years, 2 months ago | #this blog is amazing-looking. which plugin do you use for news, btw?
thanks!!
-
-
Arpit Jacob | 3 years, 2 months ago | #hey looks neat :D
-
-
juraj | 3 years, 2 months ago | #Hi
nice site thanks for doing the effort, I have a question for anyone I guess, why is the descending loop (the improved) more efficient?
I suspect it is at bit level manipulation, is decrementing a number faster than incrementing it?
bye
j
-
Itay | 3 years, 2 months ago | #Hi,
I am trying the example above to load a XML file.
var bob=new function(req,xml){
alert(xml);
}
var a=new XHR({method:’post’,onSuccess:bob}).send(’source.xml’);I keep getting the error (I use no compression on mootools and download everything)
fn.create is not a function mootools.js line 600 -
Hi Itay, I just tested your code local and it seems to call the
onFailuremethod. I see you’re doing a POST request, maybe you should change it to a GET request. A guy called ’smack’ had the same problem, he found the solution, you can find it on the Mootools Forums. -
Daniel Niquet | 3 years, 2 months ago | #To all those that hoped anxiously that Plotr worked with MooTools, don’t do it anymore… plOOtr, the Plotr version with MooTools its done, right here, right now… I hope you enjoy it. Please send me some comments in case you find any bug, or if you nottice any chance of improvement on it… Go for plOOtr now, just clic on this link :
-
-
Is there no way to use this code with domready? When I try to use the following code:
var accordion;
var accordionTogglers;
var accordionContents;window.addEvent(’domready’, function() {
accordionTogglers = document.getElementsByClassName(’accToggler’);accordionTogglers.each(function(toggler){
//remember the original color
toggler.origColor = toggler.getStyle(’background-color’);
//set the effect
toggler.fx = new Fx.Style(toggler, ‘background-color’);
});accordionContents = document.getElementsByClassName(’accContent’);
accordion = new Fx.Accordion(accordionTogglers, accordionContents,{
//when an element is opened change the background color to blue
onActive: function(toggler){
toggler.fx.start(’#E67E7E’);
},
onBackground: function(toggler){
//change the background color to the original (green)
//color when another toggler is pressed
toggler.setStyle(’background-color’, toggler.origColor);
}
});});
then the accordian’s first tab doesn’t open all the way. It only opens all the way when I use “onload.” But the problem with this is that I have to wait for all the image sin the different tabs to be done loading before the accordian displays correctly.
-
Aritz | 3 years, 2 months ago | #Iim using Plotr to create some pie graph and line graph in my web application. But I have few problems with the line graph. I want set the X Axis where is de 0 in Y Axis. For example, if Ymax = 10 and Y min = -10, x axis will be set in Y value = 0.
Another little problem is that I want to create the without the lines around the graph when you don’t fill the graph, in other words, I want to draw the graph line.
Thank you -
Tom | 3 years, 2 months ago | #How about this Week in Tech? tWiT.tv, it has great technology podcasts hosted by the Tech Guy Leo Laporte with some great guests, there’s a Mac Podcast, a Windows one, a security one, a “best of the net” one. All awesome and all with humour (for a laugh I recommend the daily Giz Wiz, with Dick DeBartolo from Mad Magazine!)
-
Laboratik | 3 years, 2 months ago | #I like the site. Great color scheme which is nice to the eyes.
Would you mind sharing the rewrite of the codehighlighter to Mootools?
And PLOTR, is there a rewrite to mootools scheduled? Would be nice to not having to do that myself :-)Anyways. Congrats with the site!
ps. what is the story with your logo? I like the overal simplicity of both the site and the logo but does the logo have a special meaning?
-
Thanks Laboratik, I might port Plotr to Mootools, but there already is someone who did it. Although I doubt if he will port the next version. The next version will be very different, and I’ve added some features like adding a legend and fake shadows. Very cool though and I think it’ll be released in the next two weeks. The logo is nothing special, just came up with it will playing with Photoshop :)
Cheers
-
-
Laboratik | 3 years, 2 months ago | #
Thanks for the info.
You are the walking and talking example of a Dutchman with an eye for design!
Looking forward to the new Plotr version.
Keep it going and till next time !
-
-
Arpit Jacob | 3 years, 1 month ago | #
Hey Cool That was very descriptive I need to try it myself. and hope to see some more cool things in plotr.
-
Aritz | 3 years, 1 month ago | #
Hello again!
I have another problem. I want refresh the graph when the user made some changes into the values of the graph. But the labels does’t remove and get 2 diferent labels in the same position more or less (the new and the old). Have anyone try this type of refresh?
Thank you -
plingboot | 3 years, 1 month ago | #Hi all,
Sorry to crash the party, but i have a quick question and would appreciate some help.I’ve created an accordion of 5 panes and within one of the ‘panes’ i’ve nested another accordion. This accordion has 5 panes of it’s own, each containing a differing number of elements. When i open the pane containing the nested accordion, the nested accordion opens to reveal it’s coontents – which is fine. However, when i click to open some of the other panes (of the nested accordion – containing longer/more conent) the parent frame doesn’t resize and therefore this longer content is not visible.
is there a way to have the parent pane resize when it’s content increases in size?
thanks, -
-
Plotr (Javascript ... | 3 years, 1 month ago | #
[...] because the biggest Prototype-only feature (its extensive functionality for enumerable objects) has already been ported to Mootools by Bas Wenneker, the same author who wrote Plotr. [...]
-
Phil Crosby | 3 years, 1 month ago | #I ported Plotr to Mootools by wrapping a few Prototype functions that Plotr needs. It’s only a few lines of code, and it doesn’t mess with potr.js, so you can drop in a new plotr.js when it gets released.
Details and the code are here: Plotr Javascript graphing with mootools.
I couldn’t get Daniel Niquet’s port working, as the full source isn’t distributed (just a compressed version), and it’s not in English. So I quickly wrote this wrapper.
Thanks Bas for the great library!
-
Daniel Niquet | 3 years, 1 month ago | #
I’ve just forget to tell All of you that I recently Added the uncompressed plOOtr source code file. You can download it now plOOtr with mootools…
-
solutoire.com | Pl... | 3 years, 1 month ago | #
[...] LineChart example [...]
-
solutoire.com | Pl... | 3 years, 1 month ago | #
[...] Legend example [...]
-
Arpit Jacob | 3 years, 1 month ago | #
Wow that looks even better :D thanks
-
Plotr 0.2.0 OpenSo... | 3 years, 1 month ago | #
[...] just released Plotr 0.2.0 an OpenSource JavaScript Charting Library. With some signification [...]
-
-
@Aritz: I had this problem too and fixed it in the patched version of 0.1.4 I uploaded to code.google.com/plotr (issue #15). I moved all the labels, etc into a separate DIV which gets emptied when you call refresh (also helps with CSS affecting the label positions). Bas was going to look at integrating these changes, and some of the others, after releasing 0.2.
-
-
-
albert | 3 years, 1 month ago | #Hi bas :
I trying de new version with legens & is soo good. Great job!
I detect a problem when try to print de graf with content of htm elements tables, div etc..
Tthe proportional dimensions of and oher element in HTML are no correct.I think the there is a problem of webBrowser (i use firefox v.2), but i dont know the origin of problem…..
Thks all.
-
-
¿La funcion $ al ... | 3 years, 1 month ago | #
[...] en Solutoire.com comentan que al parecer en el ECMAScript (de ECMA-262) están teniendo en cuenta la función $() de javascript como acompañante del document.getElementById(). (Ver PDF pag.14). ¿Que opinais del [...]
-
Plotr 0.2.0 OpenSo... | 3 years, 1 month ago | #
[...] just released Plotr 0.2.0 an OpenSource JavaScript Charting Library. With some signification [...]
-
-
-
Daniel Niquet | 3 years, 1 month ago | #
plOOtr for mootools 0.20 is here…. http://utils.softr.net/plootr/
-
JM | 3 years, 1 month ago | #You should fix a little something above:
HistMan is a script that let’s you manage browser history (back/forward buttons) and bookmarking in Ajax applications using Mootools.
let’s = LET US
lets = ALLOWSIt’s like saying:
HistMan is a script that let us you manage browser history (back/forward buttons) and bookmarking in Ajax applications using Mootools.
-
Plotr Super Flexib... | 3 years, 1 month ago | #
[...] some convoluted series of searches and blog posts I came across the newly updated Plotr graphing library. It is [...]
-
-
Bas, wow, I have been super busy, and have not checked in with you in a while. NICE. I am really interested in your mootools/sIFR work. I was running into some issues with that. I also really like how you combined all your js in one file, sweet. Anyway, I like the new design.
-
-
Jeff | 3 years, 1 month ago | # -
Sepp | 3 years, 1 month ago | #I’ve run into a similar problem like Aritz – I get new values via AJAX, add them to the dataset, reset and redraw it. The graph is fine, but the axis labels get confused… is there some possibility to clear the whole canvas and force a full redraw?
Greetz -
Quincy | 3 years, 1 month ago | #
If you give me just a little nudge in the right direction, I can look into it too…
-
Bas Wenneker | 3 years, 1 month ago | #
Ok I haven’t tested this but I think it’ll work. First, I’ve to say it’s my fault. This is a bug and it goes wrong because for PieCharts only the first set of the dataset is used. Example:
// Define a dataset. var dataset = { 'myFirstDataset': [[0, 3], [1, 2], [2, 1.414], [3, 2.3]], //=> Only this set is used for plotting the PieChart. 'mySecondDataset': [[0, 1.4], [1, 2.67], [2, 1.34], [3, 1.2]], 'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 1.0], [3, 1.6]], 'myFourthDataset': [[0, 0.3], [1, 0.83], [2, 0.7], [3, 0.2]] };So in the colorScheme hash you have to set the keys like:
colorScheme = new Hash({ '0': 'red', '1': 'blue', .... });I think that’s your solution. Let me know if it worked.
-
If you’re trying to draw graphs on a web page from an RPC call (AJAX) that returns a tag (that’s doing the actual drawing), you’ll find it won’t work in a lot of browsers (IE, Safari…) if you try to insert the code with innerHTML. I had this exact problem with PlotKit and came up with a solution that will definitely work with Plotr as well:
I’m working on converting my code to separate the graph data (for PlotKit/Plottr) and the HTML, but it’s a solution that works for now.
-
Daniel Niquet | 3 years, 1 month ago | #
Examples for plOOtr 0.20 was wrong. Now are right.
-
Brad Neuberg | 3 years, 1 month ago | #Cool post and code! One thing — we have ported Dojo Offline to use the Google Gears runtime instead of the Dojo Offline runtime, keeping our old APIs and adding some new ones. Expect to see a download this week.
Brad Neuberg
-
I never know you could run Aptana as a plugin, nice tip! I need vanilla Eclipse for it’s CVS functionality, but now I can have the best of both worlds. Once thing you might want to check out is the Minify project. It automatically concatenates and compresses JavaScript AND CSS, caching the results so it really cuts down load time. No extra build steps necesary. I’ve written about my experiences with it and modified the code to work with PHP 4. I’m updating it now to use Dean Edwards packers as well.
-
-
Bas Wenneker | 3 years, 1 month ago | #
Thanks for the tip Peter, I’ll definitely check out Minify!
-
Ryan Johnson | 3 years, 1 month ago | # -
tony | 3 years, 1 month ago | #Any change there will be updates for wordpress 2.2 function tags? Great plugin!
-
A large collection of nifty web 2.0 demos
AjaxDaddy.com -
Rube | 3 years, 1 month ago | #Hey Bas, thanks for all the time that you’ve put into Plotr! I’ve found what I think might be a) a bug or b) a mistake on my part.
I’m following the steps that you listed in this post to redraw the graph, but using a different type of graph. My report consists of a select drop-down box that a user can choose between line, bar or pie chart. I’m just reusing the same dataset and option set and instantiating a new Plotr.XXXChart onchange of the select element.
The problem is that the x-axis gets all sloppy when the different types are drawn. This is my first time messing with canvas tags and SVG, but what I think is happening is that the charts are being drawn on top of each other – each chart is fine, but the axes are transparent so they show through. Am I correct? Is there any workaround for this?
Thanks much in advance, and thanks again for all of your efforts!
-
Hi Rube,
Thanks for the compliments! You’re right about the bugs. If you’re plotting charts in the same canvas element, you’ll see that the canvas isn’t cleared before re-rendering. Also the axis labels aren’t removed. The next version, which’ll be available in about two weeks fixes this problem. I hope that’ll fix your problem, you just have to wait a little longer :)
-
fentex | 3 years ago | #I recently used plotkit in a project and found it had a problem, that also exists in plotr, with doing something I needed.
The project in question is a simple linechart, three datasets, accummulated sales from two years ago, last year and this year. Obviously this year does not stretch the charts full 12 month width.
So the data for this year climbs towards the current months sales but then dives down to zero at december. I didn’t want the line to continue to december, I wanted it to cut off in the current month.
In plotkit I wrote a custom renderer, similar code in plotr gets the result I want by editing the ‘_renderLineChart’ extension function for linecharts by putting the code that forces closing lines to the charts end inside the test for ’shouldFill’ thus…
if(this.options.shouldFill){
cx.lineTo(this.area.w + this.area.x, this.area.h + this.area.y);
cx.lineTo(this.area.x, this.area.y + this.area.h);
cx.closePath();
}else{
cx.strokeStyle = this.options.colorScheme[storeName];
cx.stroke();
}I’m surprised that plotkit and plotr don’t seem to be ready off the rack for this. Guessing that not everyone wants this functionality implied by ’shouldfill = false’ perhaps adding an option ‘leaveOpen=true’ is in order?
-
Ryan | 3 years ago | #Nice, but not very useful if the table is structured the opposite way, (i.e., headers down a column)
-
Ryan | 3 years ago | #
A jquery port would be awesome!
-
Yakun Kaya Toast | 3 years ago | #Is there anyway to round the values? Instead of 0.1, 0.2, 0.9, etc… Great tool!
-
-
Yakun Kaya Toast | 3 years ago | #
Oooh…sorry, I had it bluntly. I meant starting from 1 2 3…I have value of 1 and it will start from 0.1 – 0.9 to 1…is there anyway to have the Y axis from 0 – 1 without the floating range?
-
Rube | 3 years ago | #
Excellent – after I posted my first message I decided to dig deeper. I’m not sure what your code is doing, but I wrote this function:
reloadChart : function( name, type, options )
{
Element.remove('kill-me');
var div = Builder.node('div', { id:"kill-me", style:"margin-left: 175px;" });
var canvas = Builder.node('canvas', { id:"chart", width:"800", height:"300" });
div.appendChild( canvas );
$('canvas-wrapper').appendChild( div );
Reports.Charts.chartObjects[ name ][ type ].reset();
Object.extend( this.chartOptions[ name ], options || {} );
Reports.Charts.renderChart( name, type );
}
that makes it all work for Plotr 0.2. Anyway, looking forward to the next release and thanks again for all the hard work!
-
Tim Tully | 3 years ago | #Yeah, can you fix that redraw problem quickly :)
-
-
Ryan | 3 years ago | #
Would it be easy to add an option to display the xTicks only when the individual pie graph pieces are hovered over? — I’m thinking about working on that project.. I am thinking about cartoon-like bubbles that hover over the graph… what do you think?
-
Rube | 3 years ago | #
Hi Bas,
I came across another really fricken annoying problem (because of browser inconsistencies, not Plotr code!!). In canvas.js (line 335 of V 0.20) you calculate what the width for the new tick mark text node should be:
width: (this.options.padding.left - this.options.axisTickSize * 2) + 'px',
This can, potentially, try to assign a negative width if this.options.padding.left is less than this.options.axisTickSize * 2. Boy, oh boy does IE not really give you a CLUE what the problem is. Firefox doesn’t seem to mind, neither does Safari.
Why would anyone possibly not want any padding on the left? I don’t know, really ;-). I’m just trying to squeeze my Plotr charts into as tight a space as possible and trying to add a negative width in IE makes it fall down go boom. Just thought I’d point it out in case you see it as something that should be checked for at run time. Again, thanks and keep up the great work! -
mizyxirquza | 3 years ago | #What was. He doubted first month of pregnancy whether it was making herself in it flared into.
-
Mats | 3 years ago | #Hi,
I’m just wondering if there is any plans to support dynamic hiding/showing of datasets in a chart?
Is is possible to set the color of a particular dataset instead of using a color scheme for the whole chart?btw, great work! :)
-
dave | 3 years ago | #any chance on being able to run a function on the y-axis values? for example my chart is dealing with gigabytes of data, and it’d be nice if i could format the y-axis values accordingly (so instead of 104814784512 i would have 97.62 GB) . thanks and excellent work! made my life much easier :)
-
Ben Carlson | 3 years ago | #Hello Bas,
First off thanks for a great charting tool! It’s simple to use, and is very nice looking! Next, is there a forum for questions/problems with plotr? I’ve been hitting a problem that I am unsure if it is something with prototype, plotr, or something else. I’ve posted at the google groups:
http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thread/04fa9299ae9a680b/3ec698f39d545113#3ec698f39d545113
but I’m not sure if I should hold my breath…Thanks in advance,
Ben Carlson
-
Nessy Programando ... | 3 years ago | #
[...] Un compañero de trabajo (Santiago Borrazas) me paso el otro dia un link sobre que el ECMAScript esta teniendo en cuenta el simbolo $ como alternativa a document.getElementById y document.all (de IE, que no es ECMAScript). Esa función es altamente recomendable, fue creada por Prototype y JQuery. Link: http://solutoire.com/2007/06/18/ecmascript-about/ [...]
-
Arpit Jacob | 3 years ago | #
Wow looks really cool. I like the config tool.
-
-
you should add this code to the plotr library line 1525 :
addLegend: function(/*Element*/ element){
// Create a list that will be the legend.
var ul = $(document.createElement(’ul’));
Element.setStyle(ul,{
‘listStyleType’: ‘none’
});this._evaluate(options);
this._evalPieTicks();
this.slices.each(function(/*Array*/ set, /*Integer*/ i){
var li = $(document.createElement(’li’)).setStyle({
‘lineHeight’: ‘20px’
}).addClassName(’legend_li’);var div = $(document.createElement(’div’)).setStyle({
‘display’: ‘inline’,
‘position’: ‘relative’,
‘top’: ‘-2px’,
‘border’: ‘1px solid #ccc’,
‘padding’: ‘2px 0′,
‘margin’: ‘2px’,
‘width’: ‘5px’,
‘fontSize’: ‘5px’
});var color = $(document.createElement(’div’)).setStyle({
‘display’: ‘inline’,
‘padding’: ‘0 6px’,
‘margin’: ‘2px’,
‘background’: this.options.colorScheme[i],
‘color’: this.options.colorScheme[i]
}).addClassName(’legend_li_color’);color.appendChild(document.createTextNode(i+1));
div.appendChild(color);
li.appendChild(div);var label = this.xticks[i][1];
li.appendChild(document.createTextNode(label));
ul.appendChild(li);
}.bind(this));// Add the list to the element.
element.appendChild(ul);
},with these youwill be able to add a legend with the line pie.addLegend($(’legend’)) if your fieldset has the ‘legend’ id ;)
-
jorge | 3 years ago | #Hi!
I’m trying to use PLOTR for a dinamically generated graph.
i’m ploting temperature / humidity values coming from a self-made hardware.
Since my web interface is ajax based i always get an error saying: “elementStyle has no properties” because my HREF is something like “CGI_getdata.cgi&template=data.html”, when trying to render a graph,
Any idea about how to solve this situation?
-
Sol-Digg | わー... | 3 years ago | #
[...] Sol-Digg [...]
-
LaztheGimp | 3 years ago | #Curious on whether this extension will work with Dreamweaver CS3, and the latest Wordpress.
Anyone have a clue? I’d like to use it, but I’m hesitant to insert something that will screw up my system.Laz…
-
Jeremiah | 3 years ago | #An example showing which files to include would be helpful. Your download has multiple files,yet your examples show none of those files being including with script tags.
-
-
2.0 WEBMANIA &raqu... | 3 years ago | #
[...] Aproveite e faça uma visita ao blog do Bas Wenneker, o responsável pelo Ajax.Solutoire e por um outro projecto bastante interessante denominado Plotr. [...]
-
Tom | 3 years ago | #
Hi There Bas — Hope your holiday went well. I know you’re busy getting Plotr 0.3.0 ready, so I won’t take much of your time. I was hoping that you could kindly help me regarding the Line Charts. I would like to display the Y-axis ticks on the actual canvas — Basically the value would be hover over the line change on the chart — is this possible? Thank you very much.
-
-
www.intensedesigns... | 3 years ago | #
[...] instead using entirely CSS. The template was done with Dreamweaver, and I used an extension called TAGStention to insert the PHP code for Wordpress into the [...]
-
Michael | 3 years ago | #It looks like “xTicks” broke in 0.3.0 (or they are implemented differently now). Any assistance appreciated.
-
dilek | 3 years ago | #Hi
I’m dilek
I want to make a menu by using accordion but the accordion is must be nested accordion..
that is I want to use nested accordion (two accordion).
Please could you help me about this subject.
thanks. -
Martin | 3 years ago | #Doesn’t work here. I’m using FF2 on Windows XP SP2 and this is the output of Firebug:
load is not a function
onload()#A (line 1061)
[Break on this error] load(); -
Michael | 3 years ago | #
if you’re interested, I found the issue with “xTicks” and PieCharts. Configuring your options has changed. Use the following instead of xTicks.
var options = { "axis": { "x": { "ticks": [ {v:0,"label":"value"},...],... },... }
Now, if I could just configure a way to pad the top labels away from the graph (they tend to write over the top part of the pie chart with a text label). -
Joshua Gross | 3 years ago | #Tom – is this like what you’re looking for: http://www.unwieldy.net/plotr_modified/demos/linechart_example.html? If so, feel free to use that code (just leave my name in the script). It is a modified copy of the latest Plotr 0.3.0 beta that integrates interactivity with line charts (change “line” in the URL to “pie” or “bar” to see the other modified examples). The script itself is available here: http://www.unwieldy.net/plotr_modified/plotr_uncompressed.js.
-
Dennis | 2 years, 12 months ago | #It says that Plotr 0.2 requires Prototype v1.5.1. Can you tell what parts don’t work with v1.5.0? Or is it just that it has not been developed/tested with 1.5.0? Our problem is that we are developing a UI framework that uses third party libraries that don’t yet work with v1.5.1 yet we realy would like to use the new legend feature in Plotr 0.2.
-
rory | 2 years, 12 months ago | #Hi guys,
I have a function that pulls data from a dynamically generated table into a dataset to make graphs using plotr. It works fine for the line graphs but when I try to do a pie chart, I just get a grey circle with no slices, all the labels in the bottom left corner, and the values are all NaN% (Not a Number).
The Code I’m using is as follows:function getTableData(rowID,c1,c2){
// this function takes the table rowID, and
// either 0,1 for data or ‘v’,'label’ for labels
var array = new Array();
var cells = $(rowID).getElementsByTagName(”td”);
// gets a list of the table tds
for (var i = 0; i
var tempArray = new Array();
tempArray[c1] = i;
tempArray[c2] = cells[i].innerHTML;
array[i] = tempArray;
}
return array;
}Is there something fundamentally wrong here? I can’t see any bugs in the code I have, and it works flawlessly for line graphs. Is there a better way of doing what I’m trying to do?
I’m writing the data from a database using a .NET page, so i could technically build the Javascript function calls as a string and write them to the page, but thats messy and doesn’t default to a table as this method does.
thanks in advance,
Rory -
vladimir prieto | 2 years, 12 months ago | #
i think i got it :
Element.extend({
toJsonString:function(){
var queryString = [];
this.getFormElements().each(function(el){
var name = el.name;
var value = el.getValue();
if (value === false || !name || el.disabled) return;
var qs = function(val){
queryString.push('"' + name.replace(/(["\\])/g, '\\$1') + '":"' + val.replace(/(["\\])/g, '\\$1') + '"');
};
if ($type(value) == 'array') value.each(qs);
else qs(value);
});
return '{' + queryString.join(',') + '}';
}
});
addit to your code, and the just do somethin like :
var jsonString = $(’xform’).toJsonString();
note: not sure if it will “see” fine, preview doesn’t help so much :)
-
vladimir prieto | 2 years, 12 months ago | #
i re-made this extension cuz it has some bugs, and post it on the mootools forum.
-
nigel | 2 years, 12 months ago | #I’m really finding the standard plotkit a pain… looking forward to 0.3.0 and ur config tool… any word how long?? :) :)
-
nigel | 2 years, 12 months ago | #
hey! take it easy on the aussie accent, mate! ;)
-
Jonas | 2 years, 12 months ago | #Is there a way to change the values of the y-axis to only go from, for example, 198.4 to 201.6 so as see small changes on the graph? Also, how does one kill the color fill below the line? Thanks!
-
Jonas | 2 years, 12 months ago | #
Figured out the second issue. But yeah, how does one change the values of the y-axis on the line graph? In effect, i want to “zoom in” on values from +/- 1.5 from a value
-
Jonas | 2 years, 12 months ago | #
sorry for spamming, scratch previous question. how can i make the line graph display the line into the negative y-axis range?
-
Jonas | 2 years, 12 months ago | #
nvm, figured it all out, sorry
-
Steve | 2 years, 12 months ago | #
Is it possible to fix the line graph y-axis values, making them static, so that it doesn’t readjust to fit the values?
-
@Dennis: Prototype version 1.5.1 is the only version I tested with, maybe 1.5.0 also works, but if you want to use 1.5.0 you need to remove a few lines of code that throw exceptions.
@Steve: See this example (the second one) row 24-29 and replace xTicks with yTicks.
-
-
-
-
-
Mladen Mihajlovic | 2 years, 11 months ago | #Great tool, thanks. One suggestion is that the config tool could do with an image behind the chart to show the results of choosing a transparent background.
-
-
Ryan | 2 years, 11 months ago | #I’m not sure I understand how the php side of the JSON example works. Is the JSON.php a service or module that has to be installed on your server or is it just a file that you have to include on your php page. I know how to include but if its a service then I don’t know what I’m doing.
-
-
-
Mladen Mihajlovic | 2 years, 11 months ago | #
I also have a question: Do you plan to make it compatible with JQuery? I would love that as I use JQuery over Prototype and don’t really like mixing the two. :)
-
Charlie Hubbard | 2 years, 11 months ago | #There is an error in Plotr 0.3.0 on plotr_uncompressed:1936:
self.hotSpots.each(function(el) {
This throws an exception “self.hotSpots has no properties”. I’m pretty sure you want this to be this instead of self. So the line should read:
this.hotSpots.each(function(el) {
-
Joshua Gross | 2 years, 11 months ago | #
Charlie: You’re right! Thanks for pointing that out, it has been fixed.
-
Matt | 2 years, 11 months ago | #Hey Bas,
This thing is great! However, I can’t figure out how to make the y start at a number other than 0…. (This is annoying when your data is something like 200 going to 205… would be nice if the y axis started at 150 instead of 0)
Any help would be appreciated!Thanks a million!
-
Mark | 2 years, 11 months ago | #Hi,
Please, please, please. can someone address the issue of nested accordians? Are they possible? I need a menu structured like:
Food -> Fruit, Vegetables etc -> Apples
So user clicks on Food menu, and sees a list of food, and then can click on one of these e.g. Vegetables, to get the different types e.g. carrot, potato, etc etc.
Is this possible, or not???
Regards,
Mark -
rquilliet | 2 years, 11 months ago | #Hi !
I’m currently encoutering a problem with scales in Plotr. For some ranges of values, the graph “saturates” at a certain value, and all values higher than this one can’t be seen …
do you know how to fix it ?
Thks a lot ! and Nice job ! Plotr is really useful !!!
-
v1c | 2 years, 11 months ago | #Hello,
I’m building a project that will use Plotr. I am waiting for the 0.3 release.
Is it possible to have an approx. release date for this release?Thanks a lot,
Regards -
Casey | 2 years, 11 months ago | #Even tagstention 0.2.1 works in CS3 version of Dreamweaver. I’m updating today, though. Thanks for this lifesaver as DW is notorious lame when working in WP!
-
Casey | 2 years, 11 months ago | #
I’m hoping v3 has WP2.2 support, too.
-
Tom | 2 years, 11 months ago | #Is there a way to add more than one table to a graph? — just like dataset1, dataset2 for example?
-
Cosmin Catalin Sanda | 2 years, 11 months ago | #Hello,
How can I reset the labels on the axis. If I useline.reset()and than redraw the graph after reseting, the labels of the axis will still appear and they are visually overwritten.Thank you,
Cosmin Catalin Sanda -
Tracie Berardi | 2 years, 11 months ago | #Brought to you by Ajaxian.com, The Ajax Experience is the only Web 2.0 conference created and planned by developers. The Ajax Experience brings thought-leaders and the community together to help shape the future of Ajax. Topics include architecture, building quality software, case studies, design and effects, frameworks, JavaScript and security. With exclusive insight, hands-on coding examples and tutorials, you’ll leave the conference knowing how to effectively use Ajax in your next project.
-
-
Erik Ostrom | 2 years, 11 months ago | #Quick note: In r30, plotr_uncompressed.js, Plotr.Chart._renderAxis has a call to console.log (line 1078) that breaks in IE (or, I guess, when Firebug is not present).
Also, the configurator generated code that uses ‘new BarChart’, which gave me an error; I changed it to ‘new Plotr.BarChart’.
-
-
Ian | 2 years, 11 months ago | #2 points:
1. Might be worth seeing if AFLAX is better than ExCanvas for rendering in IE.
2. This page doesn’t print in IE7 – the graph is displaced. (Actually, it’s giving me a JS error on rendering to screen, but the graph is drawn.)
-
Milan | 2 years, 11 months ago | #I want to create negative bar chart but i can’t make it the way i want:
I need something like this
(y axis)
3 | |
2 | | |
1 | | |
0 |—————————————— (x axis)
-1 | |
-2 | |
-3 |I tried to find solution but only thing i managed to create is to x axis be on bottom
and values at y axis start negative…
Is there any way to achieve my goal?Thanks.
-
-
Milan | 2 years, 11 months ago | #
It looks like ascii drawing is imposible, the thing i need i to have positive values over x axis and negative values below x axis… Is that possible?
Thanks in advance
-
persil | 2 years, 11 months ago | #how does it work whit a dynamic page whit css layout?
i did a try, it loads the page whit dynamic content into the DIV, but whitout css layout! -
Tom | 2 years, 11 months ago | #
Hi Bas — Is it possible to export as PDF — it’d be nice if it were possible to create graphs in Plotr and export them as PDF —
-Thx
-Tom -
links for 2007-08-... | 2 years, 11 months ago | #
[...] Solutoire.com | TAGStention (tags: wordpress) [...]
-
Quimi miri | 2 years, 11 months ago | # -
John Porter | 2 years, 11 months ago | #Hey Baz…
I’ve just been looking at the Fx.Font that you put together, Neat!
After searching the internet to find something to resize text on my page for nearly two days, I finally found your code.However, I still need your help…
Is there no way that it can be set to use em instead of px?
Please help, everything I have designed for the site uses em…
-
-
Tommy Valand | 2 years, 11 months ago | #
Regarding tip 2, if you have som familiarity with Regular Expression, you can save even more code:
/* parenthesis around regexp not needed but easier to read i for case-insensitive ^ start of string $ end of string */ if( (/^(div|input|p|span|blockquote)$/i).test( document.getElementById('id').tagName ) ){ //dostuff } -
-
-
Bas Wenneker | 2 years, 11 months ago | #
Oh, sorry, now I see what you mean. Yeah you’re right, the ‘a’ is in the word ’span’, so this condition returns true. To have that problem fixed I’d use something like this:
if( '|p|span|'.indexOf( '|' + tagName + '|' ) ){ // Some action }Thanks for pointing me on this.
-
If I remember rightly, the with keyword only reliably works with predefined namespaces in that if you were working with an object that looks like:
var ob = { x: 12, y: "hello" }then
with(ob) { x += 1; }would work no worries, however you couldn’t do:
with(ob) { z = 12; }and for this reason it might be more versatile to use a simple object assignation, like so (this time using a more contextual / useful / complete example):
var p = Array.prototype; p.toJSON = function{ ... }thus gaining the benefits of smaller code (albeit slightly less small with bigger operations) using a much more flexible method.
-
-
-
rquilliet | 2 years, 11 months ago | #
Hi !
I’ve found a solution for my pb (was not linked to Plotr !). Now, i’d like to know if we can change the orientation of the labels on the X-axis.Indeed, my labels are dates, and if we visualize too much data, these dates become unreadable …
So, can we change this orientation to ‘vertical’, or even better, ’slanted’ ???Thks for your answer
-
-
Written in pure javascript, Sigma Grid is an Ajax data grid for displaying and inline editing data in a scrollable and sortable table. Pure javascript codes. Inline editing, keyboard data navigation, nested multiline headers, sortable and frozen columns. Slice rendering and built-in paginal output. Powerful aggregation by group and printing technology. Plentiful attibut & event handlers. CSV / XML / JSON format supported.
-
Hey, I ran into the same sort of issue with having to be able to redraw the graph based on new input from XMLHttpResponse (it’s a nice feature). I haven’t checked the SVN trunk yet… just downloaded 0.20, but here is a clear() function that can be added to the Plotr.Canvas class:
clear: function() {if (!Plotr.Base.isNil(this.xlabels)) {
this.xlabels.each(function(el) {
el.remove();
});
}if (!Plotr.Base.isNil(this.ylabels)) {
this.ylabels.each(function(el) {
el.remove();
});
}var cx = this.canvasNode.getContext('2d');
cx.clearRect(0,0, this.canvasNode.width, this.canvasNode.height);
},
It’s by no means cross-browser just yet, but it easily could be. The down-side here is that you have to have a separate instance for each graph, rather than re-using the same instance of Plotr for multiple graphs.
-
Recipeus Goodeus | 2 years, 11 months ago | #Great site!
-
Wordpress Dreamwea... | 2 years, 11 months ago | #
[...] TAGStention es una extensión para Dreamweaver que agrega un nuevo Toolbar para insertar etiquetas para la creación de temas de WordPress. Si alguna etiqueta necesita parámetros se mostrará una ventana emergente solicitando los valores necesarios. [...]
-
WordPress y Joomla... | 2 years, 11 months ago | #
[...] Enlace Descarga version Dreamweaver 8 (Vikiworks) – Actualizo: Acabo de encontrar una versión para Dreamweaver MX2004 – Enlace Descarga – Web oficial [...]
-
-
Tony Arcucci | 2 years, 11 months ago | #Hello,
when I print in Internet Explorer 7 a page with a Line Graph, graph is outside canvas ( see screenshot ).Why ?
-
-
Bas Wenneker | 2 years, 11 months ago | #
It’s not possible to generate or export Plotr to PDF, and it’ll never will be… sorry
-
Cookies | 2 years, 10 months ago | #Hi How could I create an two submit button the other one uses ajax and the other dont, im not using an “submit button” however im using javascript to make an link behave as submit.. I want to use mootools..
please help me, any ideas guys?
-
Tom | 2 years, 10 months ago | #
Actually, I have created an add on script that allows it. Thanks
Tom -
Bas Wenneker | 2 years, 10 months ago | #Well, thanks for sharing…
-
-
tom | 2 years, 10 months ago | #hello bas, have a question to your old design. pls write me back whenever your time allows you. great redesign. greetz from austria
-
Solutoire.com | Su... | 2 years, 10 months ago | #
[...] from around 20 different animated gifs, and specify the back and foreground color. In the article ‘Mootools: Ajax & XHR classes’ I explained how to show and hide the loader gif. To give you a quick example, here’s how to [...]
-
Chris | 2 years, 10 months ago | #I noticed you wrote a dreamweaver extension for wordpress… I would like to see I could fund your further development on this to make it possible for anyone to modify templates within dreamweaver in ture wysiwyg mode — by this I mean that all templates are combined into one visual interface for editing. Let me know.
-
Håvard Pedersen | 2 years, 10 months ago | #So, what happenede to Plotr 3.0? :)
-
teoria glacial &ra... | 2 years, 10 months ago | #
[...] TAGStention, além de cobrir 90% das tags do Wordpress, é repleta de wizards e botões extras, como Paypal e [...]
-
-
sephi’s tips... | 2 years, 10 months ago | #
[...] http://solutoire.com/plotr/lineexample/ • • • [...]
-
-
fangzx | 2 years, 10 months ago | #what happenede to Plotr 3.0?
I want to know also. -
ridcully | 2 years, 10 months ago | #i use this diff against 0.2 to have the script also working with just one value to display. Plotr.Base.uniqueIndices otherwise returns one to many – this is no big deal with more columns, but there is a check for the “only one” that fails later and ends up in errors that prevent the display of the plot.
diff -u -w -b -B -r1.2 plotr.js
— ewaf/view/js/scripts/plotr.js 17 Sep 2007 12:20:55 -0000 1.2
+++ ewaf/view/js/scripts/plotr.js 18 Sep 2007 07:07:46 -0000
@@ -99,7 +99,7 @@return new ObjectRange(0,arr.max(function(item){
return item.length;
- })).toArray();
+ })-1).toArray();
}; -
Seobilgi Türkçe ... | 2 years, 10 months ago | #
[...] eklentinin adı tagstention buradan indirebilir, buradan kendi sitesinden destek [...]
-
-
-
My site is http://www.Techzone.co.nz
-
sorry its http://www.techzone.co.nz
-
-
Bas Wenneker | 2 years, 10 months ago | #
Looks like I forgot about that, fixed it now, thanks.
-
Raymond | 2 years, 10 months ago | #i would like to ask if it is possible to use pie.addLegend($(’pie_legend’)) for a pie chart in your tools. Cause i found i could only use it on the line chart and bar chart only
-
Dreamweaver Extens... | 2 years, 10 months ago | #
[...] Download URL: http://solutoire.com/tagstention/ [...]
-
digitarald | 2 years, 10 months ago | #
Just as quick note: arguments.callee is not deprecated, Function.arguments including its properties (callee …) is deprecated, in favor of the functions local variable arguments.
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Functions:arguments:callee
-
Joost | 2 years, 10 months ago | #I seem to be having a similar problem with the BarChart;
both:
colorscheme = (
'#eeeeee',
'#cccccc',
'#333333'
),
and:
colorscheme = new Hash({
'0': '#eeeeee',
'1': '#cccccc',
'2': '#333333'
}),
(tried your solution for pieCharts hoping that would work)didn’t work; IE displays black bars, FF with FireBug doesn’t render and says
'An invalid or illegal string was specified" code: "12''. Have you ever tried custom colors on a barChart? Could you give this fellow Dutchy some pointers where I’m making a mistake?Would be great! :P
-
Dan | 2 years, 10 months ago | #Thank you for this !
-
-
For larger data sets in a pie chart (presumably all) the color of entries after 10 will be white. I changed Base.js to do
setKeys.each(function(index){
result[index] = color.lighten(250/setKeys.length).toHexString();
});
instead of
setKeys.each(function(index){
result[index] = color.lighten(25).toHexString();
});Anyone else receiving JS error in IE saying “object undefined” ?
Rgds,
svenps: great job on this library!
-
Hi there,
I downloaded the 0.3.0 release just now, before you even had this page up. Was lucky enough to see it in the google code list. Anyways, I downloaded and set it up, using the pie chart. I have multiple charts on one page, so I’ve called each one pie1, pie2, pie3 etc. Using the code from the example piechart page included, everything displays. using the output from your plotr configurator, none of the charts display. I’m using FF2.0.0.7.
This is how I have it implemented atm:var dataset = {"firstPie": [[0, 1]], "secondPie": [[0, 0.7]], "thirdPie": [[0, 0.5]], "fourthPie": [[0, 0.5]], "fifthPie": [[0, 0.5]]}; var options = {"colorScheme": "blue", "axis": {"lineWidth": "1", "labelColor": "#000000"}, "background": {"color": "#F2f2f2", "lineColor": "#FFFFFF", "lineWidth": "3.0"}, "legend": {"opacity": "0.5"}, "stroke": {"shadow": false, "width": "1"}}; var chart = new PieChart('pie<!--[$groupCounter]-->', options); chart.addDataset(dataset); chart.render();The thing is just a counter to give each chart it’s own ID.
I tried messing around with the chart = new PieChart(’pie’); stuff, like changing it into chart = newPlotr.PieChart (as per example btw), but to no avail :/Any ideas or suggestions?
-
Some code got nuked during the posting process there.
Anyways, the ‘thing’ I refer to is a +1 counter variable I added to the PieChart(’pie$variable_here’, options); part. Of course added the same variable to the code that calls the chart in the first place.
(Also, apologies for posting code here :/ ) -
Josh | 2 years, 10 months ago | #Good work on the release, and thanks!
Is there any chance of getting either Plotr_uncompressed.js or plotr_uncompressed.js ditched in subversion? On first-letter-case-insensitive filesystems like HFS+, it will cause checkouts to fail because both files can’t exist at the same time, which in turn, causes any checkout that has Pltotr listed as an svn:external to fail.
Just a thought — it would be a really quick fix and be a *huge* favor to me, seeing as how one of them is old anyway. :)
-
Richard Kuesters | 2 years, 10 months ago | #Hello!
First of all, good work again on Plotr, it really looks promising. Unfortunatelly I have an application that has colors attached to every group of data (that renders in lots of different places, like grids, panel groups, etc) and the charts generated with these data must have their color attacheds (like warning = orange, critical = red). Because of this I can’t use Plotr (at least for now). Is there anyway to customize colors of every single dataset? Or there’s a plan to implement it in the near future?
Thanks in advance.
-
Bas Wenneker | 2 years, 10 months ago | #
@ryushe: You’re right. The code that was generated was wrong. The PieChart should be instantiated by doing:
var chart = new Plotr.PieChart('plotr', options); // So using your code, this should work: var dataset = {"firstPie": [[0, 1]], "secondPie": [[0, 0.7]], "thirdPie": [[0, 0.5]], "fourthPie": [[0, 0.5]], "fifthPie": [[0, 0.5]]}; var options = {"colorScheme": "blue", "axis": {"lineWidth": "1", "labelColor": "#000000"}, "background": {"color": "#F2f2f2", "lineColor": "#FFFFFF", "lineWidth": "3.0"}, "legend": {"opacity": "0.5"}, "stroke": {"shadow": false, "width": "1"}}; // Be sure to point to the right id (first argument) var chart = new Plotr.PieChart('pie', options); chart.addDataset(dataset); chart.render();@Josh: I screwed up svn so badly and I tried several times to fix it. The latest revision is not the current release. This weekend I’ll look into it, and if nothing works, I’ll ask the Google crew to reset the svn.
@Richard: The colorschemes are something that are likely to change because it’s not flexible enough in the current and past versions. I’ll write down your request.
-
Thanks Bas,
seems to working great now. One last request and I’ll leave you alone for some time while I go and play with all of this. So, Is it possible to:
1) Change the color of the labels listed INSIDE the legend box?
2) Change the name of the labels on the pie chart so that they match the labels in the legend? Ie. you have as example a dataset called firstPie with some data attached to it, now instead of displaying ‘firstpie’ in the legend, display firstpie as well in place of the ‘0′ (as in your example)? As the ‘0′ isn’t really saying that much in this case :/Besides all that, very nifty script. I’ll have some fun poking around and trying to get some data charted out :)
-
Heh, seems I got one more after all. Would it be hard to make the chart colors (for a pie chart) start looping after say 7 or 8 datasets if there are more than 7 or 8 datasets present? This because most of it tends to be quite hard to distinguish between the lighter variations of a certain color scheme.
See this image to get an idea of what I mean. -
Sigma Soft | 2 years, 10 months ago | #
Written in pure javascript, Sigma Grid is an Ajax data grid for displaying and inline editing data in a scrollable and sortable table. http://www.sigmawidgets.com
Pure javascript codes, Seamless Integration with any server side solution, such as j2ee, .net, PHP, perl.
Inline editing, keyboard data navigation, nested multiline headers, sortable and frozen columns.
Slice rendering and built-in paginal output allow you to manipulate huge datasets on the fly.
Powerful aggregation by group and printing technology, to make it easy to build a traditional-look printable reports.
OGNL format supported, smooth objects converting between presentation layer and logic layer.
Extensibility enable you to replace built-in cell editor with custom external component (user defined editor), present cell data as your customers’ wish (user defined renderer).
Plentiful attibutes and event handlers give you more flexibility without coding too much.
Export and import in CSV / XML / JSON format, to support further editing within spreadsheet or any other applications.
http://www.sigmawidgets.com -
Milan Cvejic | 2 years, 10 months ago | #Does plotr now support negative values?
-
Bas Wenneker | 2 years, 10 months ago | #
@ryushe: I’m working on documentation for colorschemes. you can see a preview over here.
@milan: No, Plotr does not support negative values.
-
Great ;)
Just played around changing values in the Plotr.Base.generateColorscheme() and the Plotr.Color() functions, but I don’t see any difference at all. Am I missing something here, or is any arbitrary number not going to give results anyways?Once again, thanks for taking the time to answer questions dude, much appreciated.
-
Lim Chee Aun | 2 years, 10 months ago | #It’s ‘February’, not ‘Februari’. :-D
-
Thats cool | 2 years, 10 months ago | #Thanks
-
Mladen Mihajlovic | 2 years, 9 months ago | #
Wonderful news! I can’t wait to try it out. Any comment on my previous question of making it JQuery compatible?
-
ryushe | 2 years, 9 months ago | #
Looking good, but how would one handle having just one dataset (as in a piechart) and running out of colors? Is there a way to define a custom color scheme based on the number of values a dataset has?
ie. if I know a dataset has 10 values, something like
var customsinglescheme = new Hash ({ ‘#000000′, ‘#111111′, ‘#222222′, ‘#333333′});
where the amount of colors defined should be equal or more than the amount of values in one dataset? -
Bas Wenneker | 2 years, 9 months ago | #
You should try to use the custom colorscheme. Here’s an example, it’s really easy:
// Define a dataset. var dataset = { 'myFirstDataset': [[0, 3], [1, 2], [2, 1.414], [3, 2.3]], 'mySecondDataset': [[0, 1.4], [1, 2.67], [2, 1.34], [3, 1.2]], 'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 1.0], [3, 1.6]], 'myFourthDataset': [[0, 0.3], [1, 0.83], [2, 0.7], [3, 0.2]] }; // Define a custom colorscheme, assigning different colors // to each defined dataset. var customScheme = new Hash({ 'myFirstDataset': '#00A800', 'mySecondDataset': '#F07800', 'myThirdDataset': '#F00000', 'myFourthDataset': '#900060' }); var options = { ... colorScheme: customScheme, ... }; // Instantiate a new PieCart. var pie = new Plotr.PieChart('pie1',options); // Add a dataset to it. pie.addDataset(dataset); // Render it. pie.render(); -
-
Bas Wenneker | 2 years, 9 months ago | #
Pie charts only use data defined on x = 0. So the example in the previous comment the data used for the piechart is 3, 1.4, 0.46 and 0.3. So the datasets should look like this:
var dataset = { 'myFirstDataset': [[0, 3]], 'mySecondDataset': [[0, 1.4]], 'myThirdDataset': [[0, 0.46]], 'myFourthDataset': [[0, 0.3]] };That’s what I forgot in my previous comment.
-
ryushe | 2 years, 9 months ago | #
Ah, I see. I was confusing datasets with values for a bit there. What threw me off is the var dataset = part. I was referring to the datasets as values instead of as datasets :)
Sorry to bug you over this, and thanks for explaining it all. Much appreciated. -
Bas Wenneker | 2 years, 9 months ago | #
No problem!
-
mike | 2 years, 9 months ago | #Hi, thanks for a wonderful tool. I’m working on a piechart which isn’t doint exactly what I want.
I’ve defined datasets with only one value per set. I have a list of attributes for a certain object, which I’m trying to present as a piechart breakdown of the percentage of that attribute for the total object. For instance, one obj
In my (large) tutorial, I use both tabs and accordions because I didn’t want people to scroll all the way to china and I also didn’t want to break the tutorial up into numerous pages. I could have used tabs with sub-tabs, but the accordion seemed a good way to fit a lot of content into the page.
-an