Re: [Proto-Scripty] Re: Dynamic file upload input creation
Yes, the way you would do this in prototype is to create an html element such as a , , , etc and add an onclick event handler to that element. When the onclick event is invoked on that element, you would want to use Element.insert() to dynamically insert a new file input element to your form. I hope this helps somewhat. I won't give out sample code for what you are trying to accomplish, but maybe someone else will. On Thu, Jul 1, 2010 at 12:50 PM, Pier wrote: > On Jul 1, 12:53 am, Peter De Berdt wrote: > > On 01 Jul 2010, at 02:49, Pier wrote: > > > > > Hi, I am pretty much new to Prototype, so I apologize if the question > > > is a bit off. > > > I have this form with only one file input element. What I want to do > > > is add a new file input every time a file is selected to upload. Is > > > there a way to do this using Prototype? > > > > Use the click event in tandem with the change event, since file input > > fields have very weird behavior across browsers. You'll have to keep a > > record of the previous value though, to see if the value was indeed > > changed, or if the control was simply clicked. You might be better of > > just rethinking your strategy and allowing the user themselves to add > > a new file field via an "Add file" button. > > > > Best regards > > > > Peter De Berdt > > Thanks for the reply Peter. Indeed I was thinking about including an > "Add a file". > Something I forgot to mention: the form will we displayed only in > Firefox. Would this make it easier to keep an eye (or an ear) to the > change event on the file input field? > > > Thanks again > > > Pier > > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to > prototype-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com > . > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Do I stop observing events on element with Ajax.Autocompleter using Event.stopObserving()
Thank you for your solution. Now my form removes Ajax.Autocompleter when I
remove a form element.
On Thu, Apr 29, 2010 at 11:49 PM, Sébastien Gruhier wrote:
> Hi
>
> I'll add a Ajax.Autocompleter#release method like this.
>
> Ajax.Autocompleter.addMethods({
> release: function() {
>this.element.stopObserving();
> }
> });
>
> http://gist.github.com/384853
>
> On Apr 29, 2010, at 7:29 PM, kimbaudi wrote:
>
> > Hi, I have a form with multiple text inputs (i.e. > name="list_1" id="list_1"> ... > id="list_5">) which all have Ajax.Autocompleter initialized. Now when
> > I remove any of these autocompleting text inputs from the DOM, I want
> > to stop observing events on these elements. However, Scriptaculous
> > does not provide a way to unregister all the events that are handling
> > the Ajax.Autocompleter for a particular element.
> >
> > I want to know if I should unregister all the events that are handling
> > the Ajax.Autocompleter for a particular element by using
> > Event.stopObserving() on that element or some other method?
> >
> > I don't want to resort to modifying Prototype or Scriptaculous and
> > would prefer not to have to extend Ajax.Autocompleter class just for
> > this task.
> >
> > Thanks.
> >
> > --
> > You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> > To post to this group, send email to
> prototype-scriptacul...@googlegroups.com.
> > To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> > For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
> >
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] How would I get a closer set of siblings?
Hi Alex, thanks for the tip. I've modified the function based on your tip
and your example function:
function consecutiveSameTagSiblings(element) {
var element = $(element);
var nextSiblings = element.nextSiblings();
var similarElements = [];
similarElements.push(element);
for (var i=0; i< nextSiblings.length; i++) {
if (element.tagName == nextSiblings[i].tagName) {
similarElements.push(nextSiblings[i]);
}
else {
break;
}
}
return similarElements;
}
On Mon, Feb 22, 2010 at 9:50 AM, Alex Wallace wrote:
> Paul, one recommendation: store the results of element.nextSiblings() in a
> local variable outside of the loop. DOM traversals are pretty slow.
>
> Best,
> Alex
>
>
> On Mon, Feb 22, 2010 at 12:28 PM, Paul Kim wrote:
>
>> Hi Walter, if you want to get all similar elements up to but not including
>> the next head, I would use Prototype's Element.nextSiblings() to loop
>> through all elements with the same tagName and break when the tagName is
>> different. Here is a function I created just now that would hopefully do
>> what you want:
>>
>> function getSimilarElements(element) {
>> var element = $(element);
>> var similarElements = new Array();
>> for (var i=0; i< element.nextSiblings().length; i++) {
>> if (element.tagName == element.nextSiblings()[i].tagName) {
>> similarElements[i] = element.nextSiblings()[i];
>> }
>> else {
>> break;
>> }
>> }
>> return similarElements;
>> }
>>
>> Here is the entire example as well:
>>
>> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
>> http://www.w3.org/1999/xhtml";>
>>
>>
>> Demo
>> http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js</a>
>> ">
>> http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js</a>
>> ">
>>
>> document.observe("dom:loaded", function() {
>> function getSimilarElements(element) {
>> var element = $(element);
>> var similarElements = new Array();
>> for (var i=0; i< element.nextSiblings().length; i++) {
>> if (element.tagName == element.nextSiblings()[i].tagName) {
>> similarElements[i] = element.nextSiblings()[i];
>> }
>> else {
>> break;
>> }
>> }
>> return similarElements;
>> }
>>
>> console.log(getSimilarElements('foo'));
>> });
>>
>>
>> body {margin:0; padding:0;}
>>
>>
>>
>>
>> first header
>> first paragraph
>> second paragraph
>> second header
>> third paragraph
>> fourth paragraph
>> fifth paragraph
>> third header
>> sixth paragraph
>> seventh paragraph
>>
>>
>>
>>
>>
>>
>> On Mon, Feb 22, 2010 at 8:22 AM, Walter Lee Davis wrote:
>>
>>> Thanks very much. I was looking in the wrong place for the functionality
>>> I need. You've given me the bones I need to build on.
>>>
>>> Walter
>>>
>>>
>>> On Feb 22, 2010, at 11:07 AM, Alex Wallace wrote:
>>>
>>> I whipped up something that should handle the task, although I'm sure
>>>> this could be optimized using the nextElementSibling. This version grabs
>>>> nextSiblings() and then filters them, but the faster way would be to
>>>> iterate
>>>> over the `element.nextSibling` and break when it encounters a different tag
>>>> name (instead of finding them all, which is bound to be slower).
>>>>
>>>> But here goes:
>>>>
>>>>function consecutiveSameTagSiblings(element) {
>>>>element = $(element);
>>>>var siblings = element.nextSiblings(), results = [];
>>>>if (!siblings[0]) return results;
>>>>var tagName = siblings[0].tagName.toLowerCase();
>>>>for (var i = 0, sibling; sibling = siblings[i]; ++i) {
>>>>if (sibling.tagName.toLowerCase() === tagName)
>>>>results.push(sibling);
>>>>else
>>>>break;
>>>>}
>>>
Re: [Proto-Scripty] How would I get a closer set of siblings?
Hi Walter, if you want to get all similar elements up to but not including
the next head, I would use Prototype's Element.nextSiblings() to loop
through all elements with the same tagName and break when the tagName is
different. Here is a function I created just now that would hopefully do
what you want:
function getSimilarElements(element) {
var element = $(element);
var similarElements = new Array();
for (var i=0; i< element.nextSiblings().length; i++) {
if (element.tagName == element.nextSiblings()[i].tagName) {
similarElements[i] = element.nextSiblings()[i];
}
else {
break;
}
}
return similarElements;
}
Here is the entire example as well:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml";>
Demo
http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js
">
http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js
">
document.observe("dom:loaded", function() {
function getSimilarElements(element) {
var element = $(element);
var similarElements = new Array();
for (var i=0; i< element.nextSiblings().length; i++) {
if (element.tagName == element.nextSiblings()[i].tagName) {
similarElements[i] = element.nextSiblings()[i];
}
else {
break;
}
}
return similarElements;
}
console.log(getSimilarElements('foo'));
});
body {margin:0; padding:0;}
first header
first paragraph
second paragraph
second header
third paragraph
fourth paragraph
fifth paragraph
third header
sixth paragraph
seventh paragraph
On Mon, Feb 22, 2010 at 8:22 AM, Walter Lee Davis wrote:
> Thanks very much. I was looking in the wrong place for the functionality I
> need. You've given me the bones I need to build on.
>
> Walter
>
>
> On Feb 22, 2010, at 11:07 AM, Alex Wallace wrote:
>
> I whipped up something that should handle the task, although I'm sure this
>> could be optimized using the nextElementSibling. This version grabs
>> nextSiblings() and then filters them, but the faster way would be to iterate
>> over the `element.nextSibling` and break when it encounters a different tag
>> name (instead of finding them all, which is bound to be slower).
>>
>> But here goes:
>>
>>function consecutiveSameTagSiblings(element) {
>>element = $(element);
>>var siblings = element.nextSiblings(), results = [];
>>if (!siblings[0]) return results;
>>var tagName = siblings[0].tagName.toLowerCase();
>>for (var i = 0, sibling; sibling = siblings[i]; ++i) {
>>if (sibling.tagName.toLowerCase() === tagName)
>>results.push(sibling);
>>else
>>break;
>>}
>>return results;
>>}
>>
>> Best,
>> Alex
>>
>>
>> On Mon, Feb 22, 2010 at 10:38 AM, Walter Lee Davis
>> wrote:
>> Hmmm. That's not a documented function. I had a look at the source, and I
>> can't see how it works. It accepts a node as its only argument, and it
>> doesn't seem to perform any comparison as it executes. How then would I get
>> it to stick to just the one type of sibling, and how would I get it to stop
>> when it ran out of similar siblings?
>>
>> Thanks as always for any pointers.
>>
>> Walter
>>
>>
>> On Feb 22, 2010, at 10:29 AM, Alex Wallace wrote:
>>
>> You'll want to leverage Prototype's nextElementSibling function. That
>> function grabs element.nextSibling and traverses until it finds an an actual
>> element (by checking nodeType).
>>
>> You could wrap a function around that which stores the tagName of the
>> first element it matches, and then continues to find nextElementSibling
>> until it either returns null, or break when the tagName doesn't match the
>> original tagName.
>>
>> Take a look at the innards of Element.adjacent and
>> Element.nextElementSibling for an idea of what I mean.
>>
>> Best,
>> Alex
>>
>> On Mon, Feb 22, 2010 at 12:00 AM, Walter Lee Davis
>> wrote:
>> I have a structure like this inside a parent DIV:
>>
>> H3
>> P
>> P
>> H3
>> P
>> P
>> P
>> H3
>> P
>> P
>>
>> And I'd like to be able to get the paragraphs between two heads, or
>> between the last head and the end of the parent DIV. Element.adjacent('p')
>> doesn't do what I need -- it returns all the p tags in the entire DIV, since
>> everything is at the same level. If I get a reference to the first element
>> following the head, how could I get all similar elements up to but not
>> including the next head? I'm trying to find a purely structure based way to
>> do this, rather than adding classnames to the elements.
>>
>> Thanks,
>>
>> Walter
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Prototype & script.aculo.us" group.
>> To post to this group, sen
Re: [Proto-Scripty] Re: How can I pause and resume PeriodicalExecuter?
Hi, I was able to pause and resume PeriodicalExecuter without using your
PeriodicalExecuter class. I ended up using the standard
PeriodicalExecuter#stop method and resumed the PeriodicalExecuter by
delaying the execution for 5 seconds using the Function#delay method and by
binding it to the PeriodicalExecuter object using the Function#bind method.
I still don't understand Prototype (in specific) and Javascript (in general)
as well as I want to, but taking a look at your code helped me accomplish
what I needed to do. Thanks.
On Wed, Feb 10, 2010 at 12:23 AM, Радослав Станков wrote:
> You can use the standard PeriodicalExecuter#stop /
>
> http://api.prototypejs.org/language/periodicalexecuter.html#stop-instance_method
> / method for stopping.
>
> And one undocumented method PeriodicalExecuter#registerCallback /
>
> http://github.com/sstephenson/prototype/blob/master/src/lang/periodical_executer.js#L31
> / start it again. It's strange why this method isn't documented at
> all. ( You could fire a ticket for that )
>
> One thing to know though is that registerCallback don't check if the
> timer was started ( and I don't like registerCallback as method name,
> I always forget it :) So you could do:
>
>
> PeriodicalExecuter.addMethods({
> start: function(){
>if (!this.timer) this.registerCallback();
> }
> });
>
>
> and have PeriodicalExecuter#start method :)
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Multiple timed slideshows
I don't know of any examples of what you are trying to achieve. However, it could be accomplished using PeriodicalExecuter and Effect.appear/Effect.fade. On Sun, Jan 31, 2010 at 12:16 PM, greyhound wrote: > Hi everyone, > > I have been using the script library to create simple slide shows with > no problem. > > I have recently been asked to create 3 slideshows which fade in one > after the other, very similar to this example (which is in Flash) > http://www.rockarchive.com/ (see the top 3 discs that rotate) > > Does anyone know of any examples as to how this could be achieved? > > Thanks in advance. > > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to > prototype-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com > . > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Help with blindup/blinddown effect using mouseover/mouseout events
Hi david, thank you for your help. Your code works exactly as I wanted. I
also noticed that using Effect.BlindUp and Effect.BlindDown to
mouseover/mouseout quickly caused the loss of the height of the element and
agree that using Effect.Morph is clearly a better solution for creating this
effect. I don't think I would have been able to figure out this problem
without your help so THANK YOU VERY MUCH!
On Wed, Jan 13, 2010 at 11:13 AM, david wrote:
> Hi Paul,
>
> sorry, I made a mistake, in your case, it return the Element and not a
> scriptaculous Effect Object.
>
> I take your code and modify it :((
> Why, Because I think it's more flexible to use the Morph Effect
> instead of those packaged Effect (it's my personnal opinion).
> So go to pastie, and see the change I made: http://pastie.org/776764
> If some explaination is needed, just write it back on this thread, I
> will try to follow it. My first reason is when moving in and out the
> mouse quickly on the element will lost the real height of thge element
> and Effects where lost ...
>
> So, quickly, I use the Morph Effect and animate the Height property of
> the peekaboo to 50px and set it back to 0px for the ""blindDown"".
>
> --
> david
>
>
> On 12 jan, 20:31, Paul Kim wrote:
> > Hi David, thank you for your response and what you explained is exactly
> what
> > I'm trying to do. I have tried your code sample, but I get an error from
> the
> > Firebug console: effectInExecution.cancel is not a function. Here is the
> > code that I have used:http://pastie.org/775288. It seems that
> > effectInExecution=$('peekaboo').blindUp({ duration: 0.3 }); does not
> > reference the Scriptaculous Effect object, which is what is needed to
> call
> > the cancel() method. However, I don't know how to reference the Effect
> > object using the effectInExecution variable. I've tried:
> > if(effectInExecution) effectInExecution*.effect*.cancel(); but it returns
> an
> > 'undefined', not the Effect object. Thanks for your time and I hope I can
> > find a solution to this problem.
> >
> > On Tue, Jan 12, 2010 at 10:01 AM, david
> wrote:
> > > hi kimbaudi,
> >
> > > This is a common mistake with animation. Let me explain.
> > > When you mouseover element, you'll start animation. If you mouseout,
> > > after animation is finished, no problem, mouseout animation will be
> > > executed.
> > > But now if you repeatedlly move mouse over/out/over/out, if you did
> > > not manage global animations, you'll have 2 blinddown and 2 blindup
> > > executing concurrently.
> > > In your code exemple, you'll set the queue parameter so each animation
> > > is stack and play one after the other ... but this is not what you
> > > want ??
> > > And to lmimit execution code, you set the limit parameter, which
> > > prevent having more tahn 1 animation in the queue. But that's not like
> > > that it should be handle.
> >
> > > What you should do is:
> >
> > >
> > > document.observe("dom:loaded", function() {
> > > var effectInExecution=null;
> > >$('observearea').observe('mouseover', function() {
> > > if(effectInExecution) effectInExecution.cancel();
> > > effectInExecution=$('peekaboo').blindDown({ duration:
> > > 0.3 });
> > >}
> > >$('observearea').observe('mouseout', function() {
> > > if(effectInExecution) effectInExecution.cancel();
> > > effectInExecution=$('peekaboo').blindUp({ duration: 0.3 });
> > >}
> > > });
> > >
> >
> > > In fact, you just save the scriptaculous object and cancel it if
> > > another animation should execute.
> > > Is that what your trying to do ??
> >
> > > --
> > > david
> >
> > > On 9 jan, 23:05, kimbaudi wrote:
> > > > Hi, I have a hidden block element absolutely positioned to the bottom
> > > > right of my webpage. I am trying to display this block element when I
> > > > mouseover that area and hide this block element when I mouseout from
> > > > that area using Effects.BlindUp and Effects.BlindDown. At first
> > > > glance, my webpage seems to work okay. However, if I repeatedly
> > > > mouseover/mouseout of the area quickly, the block element becomes
> > > > visible once I mouseout of that area even thou
Re: [Proto-Scripty] Re: Help with blindup/blinddown effect using mouseover/mouseout events
Hi David, thank you for your response and what you explained is exactly what
I'm trying to do. I have tried your code sample, but I get an error from the
Firebug console: effectInExecution.cancel is not a function. Here is the
code that I have used: http://pastie.org/775288. It seems that
effectInExecution=$('peekaboo').blindUp({ duration: 0.3 }); does not
reference the Scriptaculous Effect object, which is what is needed to call
the cancel() method. However, I don't know how to reference the Effect
object using the effectInExecution variable. I've tried:
if(effectInExecution) effectInExecution*.effect*.cancel(); but it returns an
'undefined', not the Effect object. Thanks for your time and I hope I can
find a solution to this problem.
On Tue, Jan 12, 2010 at 10:01 AM, david wrote:
> hi kimbaudi,
>
> This is a common mistake with animation. Let me explain.
> When you mouseover element, you'll start animation. If you mouseout,
> after animation is finished, no problem, mouseout animation will be
> executed.
> But now if you repeatedlly move mouse over/out/over/out, if you did
> not manage global animations, you'll have 2 blinddown and 2 blindup
> executing concurrently.
> In your code exemple, you'll set the queue parameter so each animation
> is stack and play one after the other ... but this is not what you
> want ??
> And to lmimit execution code, you set the limit parameter, which
> prevent having more tahn 1 animation in the queue. But that's not like
> that it should be handle.
>
> What you should do is:
>
>
> document.observe("dom:loaded", function() {
> var effectInExecution=null;
>$('observearea').observe('mouseover', function() {
> if(effectInExecution) effectInExecution.cancel();
> effectInExecution=$('peekaboo').blindDown({ duration:
> 0.3 });
>}
>$('observearea').observe('mouseout', function() {
> if(effectInExecution) effectInExecution.cancel();
> effectInExecution=$('peekaboo').blindUp({ duration: 0.3 });
>}
> });
>
>
> In fact, you just save the scriptaculous object and cancel it if
> another animation should execute.
> Is that what your trying to do ??
>
> --
> david
>
>
> On 9 jan, 23:05, kimbaudi wrote:
> > Hi, I have a hidden block element absolutely positioned to the bottom
> > right of my webpage. I am trying to display this block element when I
> > mouseover that area and hide this block element when I mouseout from
> > that area using Effects.BlindUp and Effects.BlindDown. At first
> > glance, my webpage seems to work okay. However, if I repeatedly
> > mouseover/mouseout of the area quickly, the block element becomes
> > visible once I mouseout of that area even though the block element
> > should be hidden. Can anybody tell me what is wrong with my code? Can
> > anybody point me to a website or share some example code that would
> > achieve the results that I am trying to pull? Thanks. I would have
> > provided the sample code on pastie.org, but the site is down. Here is
> > my sample code:
> >
> > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> > http://www.w3.org/1999/xhtml";>
> >
> >
> > Blind Test
> > http://ajax.googleapis.com/ajax/
> > libs/prototype/1.6.1.0/prototype.js">
> > http://ajax.googleapis.com/ajax/
> > libs/scriptaculous/1.8.3/scriptaculous.js">
> >
> > document.observe("dom:loaded", function() {
> > $('observearea').observe('mouseover', function() {
> > if ($('peekaboo').visible()) {
> > $('peekaboo').blindUp({ duration: 0.3, queue: {
> position: 'end',
> > scope: 'modalbtnscope', limit: 1 } });
> > }
> > else {
> > $('peekaboo').blindDown({ duration: 0.3, queue: {
> position: 'end',
> > scope: 'modalbtnscope', limit: 1 } });
> > }
> > });
> > $('observearea').observe('mouseout', function() {
> > if ($('peekaboo').visible()) {
> > $('peekaboo').blindUp({ duration: 0.3, queue: {
> position: 'end',
> > scope: 'modalbtnscope', limit: 1 } });
> > }
> > else {
> > $('peekaboo').blindDown({ duration: 0.3, queue: {
> position: 'end',
> > scope: 'modalbtnscope', limit: 1 } });
> > }
> > });});
> >
> >
> >
> > body {margin:0; padding:0;}
> > #peekaboo {
> > position:absolute;
> > bottom:0px;
> > right:10px;
> > z-index:;
> > width:100px;
> > height:20px;
> > background:pink;
> > text-align:center;}
> >
> > #observearea {
> > position:absolute;
> > bottom:0px;
> > right:10px;
> > z-index:;
> > width:100px;
> > height:20px;}
> >
> >
> >
> >
> > Peek-A-Boo
> >
> >
> >
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" grou
Re: [Proto-Scripty] Question on performance and SEO optimization regarding javascript to create elements
Thanks for your opinion. I think I will take the DOM approach as well. On Fri, Jan 8, 2010 at 1:12 AM, Alex McAuley < webmas...@thecarmarketplace.com> wrote: > Some SEO experts will argue that google for example will mark you down for > hidden content in a page as it may think you are trying to trick the search > engine and some will argue that it doesnt matter. > > I personaly do not know which way is faster but i prefer the Dom approach > as it does not load any html until something triggers it to - which > increases load time and doesnt put an element somewhere that amy be > displayed for browsers that dont use css or javascript. > > > > Alex Mcauley > http://www.thevacancymarket.com > - Original Message - From: "kimbaudi" > To: "Prototype & script.aculo.us" < > prototype-scriptaculous@googlegroups.com> > Sent: Friday, January 08, 2010 6:50 AM > Subject: [Proto-Scripty] Question on performance and SEO optimization > regarding javascript to create elements > > > > Hi, I have come up with 2 ways to create a modal dialog. The first way >> is to statically create the html with a style of display:none; and >> using event handlers to show/hide the html. The second way is to >> dynamically create the html using Prototype (new Element(tagName[, >> attributes]). Which way is "better"? Is there an argument for using >> one method over the other or does it really not matter? Thanks for >> your opinion. >> >> > > > > > > -- >> You received this message because you are subscribed to the Google Groups >> "Prototype & script.aculo.us" group. >> To post to this group, send email to >> prototype-scriptacul...@googlegroups.com. >> To unsubscribe from this group, send email to >> prototype-scriptaculous+unsubscr...@googlegroups.com >> . >> For more options, visit this group at >> http://groups.google.com/group/prototype-scriptaculous?hl=en. >> >> >> >> > > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to > prototype-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com > . > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > > > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] setOpacity has no effect in IE8
I do not experience your problem of having Element.setOpacity not working in IE8 w/o compatibility mode. Here is a pastie that demonstrates Element.setOpacity working in IE8: http://pastie.org/762888. If you view this in IE8 w/o compatibility mode, you will notice that the setOpacity makes the black background of the div#myelement opaque. I got this example from the Prototype API: http://www.prototypejs.org/api/element/setOpacity. I think that your problem lies in your code,not Prototype Javascript library. On Thu, Dec 31, 2009 at 3:15 PM, drewB wrote: > I have a site that is working well in FF3 and IE7 but when I test it > in IE8 all calls to setOpacity don't have any impact. If I set the > browser to IE7 compatibility mode it works fine. > > Has another else every experienced this problem? Did you find a > solution? > > -- > > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to > prototype-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com > . > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] How can I observe elements with class="test_1", "test_2", "test_3" or "first_test", "second_test", "third_test"?
Okay, I found the solution to adding onclick observer to elements with a
class that either has a prefix of "test_" or a suffix of "_test". In case
anyone is interested, here is a pastie to add onclick observers to elements
with a class that has a prefix of "test_": http://pastie.org/762432. And
here is a pastie to add onclick observers to elements with a class that has
a suffix of "_test": http://pastie.org/762433. Glad to know that Prototype
supports CSS3 selectors for the $$ function. Cheers.
On Thu, Dec 31, 2009 at 3:49 AM, Paul Kim wrote:
> Sorry, I was just suggesting a hypothetical. I don't have 1000 listeners
> and I understand that doing so will eat memory on the client. I was hoping
> that there was a solution where I can find all the elements that have a
> class that starts with "test_" and Javascript will be able to add an onclick
> observer to those elements. This way, I wouldn't have to know the elements
> that start with "test_" ahead of time.
>
>
> On Thu, Dec 31, 2009 at 3:14 AM, Alex McAuley <
> webmas...@thecarmarketplace.com> wrote:
>
>> RE. post 1.
>> http://pastie.org/762383
>>
>> There is a pastie to show u how!..
>> Re post 2.
>>
>> I don't want -you- to do anything. You are the one with the problem and
>> you asked how to get round it - so i showed you. It is up to you how you
>> write your scripts / html in a way that does not require you to have 1000
>> listeners.
>>
>> For a start having 1000 click listeners on a page will eat memory on the
>> client
>>
>> Secondly. If you have to have 1000 elements on a single page that require
>> observers -I- would go back to thee drawing board and rethink my
>> application.
>>
>> Alex Mcauley
>> http://www.thevacancymarket.com
>>
>> - Original Message -
>> *From:* Paul Kim
>> *To:* prototype-scriptaculous@googlegroups.com
>> *Sent:* Thursday, December 31, 2009 11:10 AM
>> *Subject:* Re: [Proto-Scripty] How can I observe elements with
>> class="test_1", "test_2", "test_3" or "first_test", "second_test",
>> "third_test"?
>>
>> That is a great solution if I have a few elements with class that starts
>> with "test_" or ends with "_test". But what if I have 1,000 elements that
>> start with "test_" or ends with "_test"? Do you really want me to do this:
>> $$(.'test_1', 'test_2', ... 'test_1000') or $$('first_test', 'second_test',
>> ... 'onethousand_test')?
>>
>> On Thu, Dec 31, 2009 at 2:37 AM, Alex McAuley <
>> webmas...@thecarmarketplace.com> wrote:
>>
>>> You can comma up your classes in the observer...
>>>
>>> $$('.test_1','.test_2','#some_id','.test_3').each(...
>>> });
>>>
>>>
>>> HTH
>>> Alex Mcauley
>>> http://www.thevacancymarket.com
>>> - Original Message -
>>> From: "Frédéric"
>>> To:
>>> Sent: Thursday, December 31, 2009 10:30 AM
>>> Subject: Re: [Proto-Scripty] How can I observe elements with
>>> class="test_1",
>>> "test_2", "test_3" or "first_test", "second_test", "third_test"?
>>>
>>>
>>> On jeudi 31 décembre 2009, kimbaudi wrote:
>>>
>>> > Hi, I know how to observe elements with class="test". However, I would
>>> > like to know how I would be able to observe elements with
>>> > class="test_1", class="test_2" and class="test_3" or
>>> > class="first_test", class="second_test" and class="third_test". Here
>>> > is my pastie url that observes elements with class="test" and alerts
>>> > the innerHTML of these elements: http://pastie.org/762352. Can someone
>>> > please show me a code that will alert the innerHTML of elements that
>>> > have classes "test_1", "test_2", "test_3" and elements that have
>>> > classes "first_test", "second_test", "third_test"? I am familiar w/
>>> > Javascript to know that this is possible but unfamiliar w/ Javascript
>>> > to know how to achieve this.
>>>
>>> A simple-but-not-smart way is to parse all dom elements and observe all
>>> id
>>> containting 'test'...
&g
Re: [Proto-Scripty] How can I observe elements with class="test_1", "test_2", "test_3" or "first_test", "second_test", "third_test"?
Sorry, I was just suggesting a hypothetical. I don't have 1000 listeners and
I understand that doing so will eat memory on the client. I was hoping that
there was a solution where I can find all the elements that have a class
that starts with "test_" and Javascript will be able to add an onclick
observer to those elements. This way, I wouldn't have to know the elements
that start with "test_" ahead of time.
On Thu, Dec 31, 2009 at 3:14 AM, Alex McAuley <
webmas...@thecarmarketplace.com> wrote:
> RE. post 1.
> http://pastie.org/762383
>
> There is a pastie to show u how!..
> Re post 2.
>
> I don't want -you- to do anything. You are the one with the problem and you
> asked how to get round it - so i showed you. It is up to you how you write
> your scripts / html in a way that does not require you to have 1000
> listeners.
>
> For a start having 1000 click listeners on a page will eat memory on the
> client
>
> Secondly. If you have to have 1000 elements on a single page that require
> observers -I- would go back to thee drawing board and rethink my
> application.
>
> Alex Mcauley
> http://www.thevacancymarket.com
>
> - Original Message -
> *From:* Paul Kim
> *To:* prototype-scriptaculous@googlegroups.com
> *Sent:* Thursday, December 31, 2009 11:10 AM
> *Subject:* Re: [Proto-Scripty] How can I observe elements with
> class="test_1", "test_2", "test_3" or "first_test", "second_test",
> "third_test"?
>
> That is a great solution if I have a few elements with class that starts
> with "test_" or ends with "_test". But what if I have 1,000 elements that
> start with "test_" or ends with "_test"? Do you really want me to do this:
> $$(.'test_1', 'test_2', ... 'test_1000') or $$('first_test', 'second_test',
> ... 'onethousand_test')?
>
> On Thu, Dec 31, 2009 at 2:37 AM, Alex McAuley <
> webmas...@thecarmarketplace.com> wrote:
>
>> You can comma up your classes in the observer...
>>
>> $$('.test_1','.test_2','#some_id','.test_3').each(...
>> });
>>
>>
>> HTH
>> Alex Mcauley
>> http://www.thevacancymarket.com
>> - Original Message -
>> From: "Frédéric"
>> To:
>> Sent: Thursday, December 31, 2009 10:30 AM
>> Subject: Re: [Proto-Scripty] How can I observe elements with
>> class="test_1",
>> "test_2", "test_3" or "first_test", "second_test", "third_test"?
>>
>>
>> On jeudi 31 décembre 2009, kimbaudi wrote:
>>
>> > Hi, I know how to observe elements with class="test". However, I would
>> > like to know how I would be able to observe elements with
>> > class="test_1", class="test_2" and class="test_3" or
>> > class="first_test", class="second_test" and class="third_test". Here
>> > is my pastie url that observes elements with class="test" and alerts
>> > the innerHTML of these elements: http://pastie.org/762352. Can someone
>> > please show me a code that will alert the innerHTML of elements that
>> > have classes "test_1", "test_2", "test_3" and elements that have
>> > classes "first_test", "second_test", "third_test"? I am familiar w/
>> > Javascript to know that this is possible but unfamiliar w/ Javascript
>> > to know how to achieve this.
>>
>> A simple-but-not-smart way is to parse all dom elements and observe all id
>> containting 'test'...
>>
>> --
>>Frédéric
>>
>> --
>>
>> You received this message because you are subscribed to the Google Groups
>> "Prototype & script.aculo.us" group.
>> To post to this group, send email to
>> prototype-scriptacul...@googlegroups.com.
>> To unsubscribe from this group, send email to
>> prototype-scriptaculous+unsubscr...@googlegroups.com
>> .
>> For more options, visit this group at
>> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>>
>>
>>
>> --
>>
>> You received this message because you are subscribed to the Google Groups
>> "Prototype & script.aculo.us" group.
>> To post to this group, send email to
>> prototype-scriptacul...@googlegroups.com.
>> To unsubscribe from this group, send email to
>> prototype-scriptaculous+unsubscr...@googlegroups.co
Re: [Proto-Scripty] How can I observe elements with class="test_1", "test_2", "test_3" or "first_test", "second_test", "third_test"?
That is a great solution if I have a few elements with class that starts
with "test_" or ends with "_test". But what if I have 1,000 elements that
start with "test_" or ends with "_test"? Do you really want me to do this:
$$(.'test_1', 'test_2', ... 'test_1000') or $$('first_test', 'second_test',
... 'onethousand_test')?
On Thu, Dec 31, 2009 at 2:37 AM, Alex McAuley <
webmas...@thecarmarketplace.com> wrote:
> You can comma up your classes in the observer...
>
> $$('.test_1','.test_2','#some_id','.test_3').each(...
> });
>
>
> HTH
> Alex Mcauley
> http://www.thevacancymarket.com
> - Original Message -
> From: "Frédéric"
> To:
> Sent: Thursday, December 31, 2009 10:30 AM
> Subject: Re: [Proto-Scripty] How can I observe elements with
> class="test_1",
> "test_2", "test_3" or "first_test", "second_test", "third_test"?
>
>
> On jeudi 31 décembre 2009, kimbaudi wrote:
>
> > Hi, I know how to observe elements with class="test". However, I would
> > like to know how I would be able to observe elements with
> > class="test_1", class="test_2" and class="test_3" or
> > class="first_test", class="second_test" and class="third_test". Here
> > is my pastie url that observes elements with class="test" and alerts
> > the innerHTML of these elements: http://pastie.org/762352. Can someone
> > please show me a code that will alert the innerHTML of elements that
> > have classes "test_1", "test_2", "test_3" and elements that have
> > classes "first_test", "second_test", "third_test"? I am familiar w/
> > Javascript to know that this is possible but unfamiliar w/ Javascript
> > to know how to achieve this.
>
> A simple-but-not-smart way is to parse all dom elements and observe all id
> containting 'test'...
>
> --
>Frédéric
>
> --
>
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
>
> --
>
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] How can I observe elements with class="test_1", "test_2", "test_3" or "first_test", "second_test", "third_test"?
Sorry, but I'm afraid your "simple-but-not-smart way" addresses the problem because I am observing elements with class, not id. On Thu, Dec 31, 2009 at 2:30 AM, Frédéric wrote: > On jeudi 31 décembre 2009, kimbaudi wrote: > > > Hi, I know how to observe elements with class="test". However, I would > > like to know how I would be able to observe elements with > > class="test_1", class="test_2" and class="test_3" or > > class="first_test", class="second_test" and class="third_test". Here > > is my pastie url that observes elements with class="test" and alerts > > the innerHTML of these elements: http://pastie.org/762352. Can someone > > please show me a code that will alert the innerHTML of elements that > > have classes "test_1", "test_2", "test_3" and elements that have > > classes "first_test", "second_test", "third_test"? I am familiar w/ > > Javascript to know that this is possible but unfamiliar w/ Javascript > > to know how to achieve this. > > A simple-but-not-smart way is to parse all dom elements and observe all id > containting 'test'... > > -- >Frédéric > > -- > > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to > prototype-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com > . > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: stopping the PeriodicalExecuter
Wouldn't this work?
var pe = new PeriodicalExecuter(function(pe) {outsideFunction();}, 3);
pe.stop();
On Thu, Aug 27, 2009 at 1:06 AM, T.J. Crowder wrote:
>
> Hi,
>
> > I've searched high & low for this but I haven't been able to dig
> > anything specific up about stopping the PeriodicalExecuter.
>
> Really?[1]
>
> [1] http://prototypejs.org/api/periodicalExecuter
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
> On Aug 26, 10:02 pm, plo wrote:
> > Hey Everybody,
> >
> > I've searched high & low for this but I haven't been able to dig
> > anything specific up about stopping the PeriodicalExecuter. I've seen
> > many examples that stop the PeriodicalExecuter within the same line
> > that it's called, but what about from another function? For example,
> > I have the PeriodicalExecuter calling another function:
> >
> > new PeriodicalExecuter(function(pe) {outsideFunction();}, 3);
> >
> > Is it possible to call pe.stop(); from another function?
> >
> > Any help would be greatly appreciated.
> >
> > Cheers.
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: does prototype have a plain timer?
Cool. Glad to know its there. Thanks.
On Mon, Aug 24, 2009 at 4:27 PM, JoJo wrote:
>
> Nevermind. I found it though Google search:
> http://www.prototypejs.org/api/periodicalExecuter
>
> Boy, was it hard to find.
>
> On Aug 24, 4:24 pm, Paul Kim wrote:
> > I don't think Prototype has a plain timer, but couldn't you just use
> > setTimeOut?
> >
> > setTimeout("javascript statement", 1000);
> >
> > - Paul
> >
> > On Mon, Aug 24, 2009 at 4:21 PM, Mojito wrote:
> >
> > > I'm sifting through the API docs and cannot seem to find a plain
> > > timer. I just want to call a function every second.
> >
> > > I see there's an Ajax timer and a form validation timer, but no plain
> > > Jane timer.
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: does prototype have a plain timer?
I don't think Prototype has a plain timer, but couldn't you just use
setTimeOut?
setTimeout("javascript statement", 1000);
- Paul
On Mon, Aug 24, 2009 at 4:21 PM, Mojito wrote:
>
> I'm sifting through the API docs and cannot seem to find a plain
> timer. I just want to call a function every second.
>
> I see there's an Ajax timer and a form validation timer, but no plain
> Jane timer.
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help! Unable to defer function to run when interpreter is idle
Hi TJ, thank you and Mike for your all your help! I simply thought about
preventing the effect from firing and did not think about cancelling the
current effect when a new event is being fired. This was very helpful!
"But just not firing the effect doesn't seem like the right thing.
What if the user clicks Slide A, then B, then C, fairly quickly? That
would mean (for instance) that B may still be appearing when they go
to C. Surely you don't want to just not do the fade on B, because you
do want it to go away.
One way you can do that is to keep track of the current effect and
cancel it when a new one is going to be done"
- Paul K
On Wed, Jul 15, 2009 at 2:25 PM, T.J. Crowder wrote:
>
> Hi,
>
> Mike was indeed right in terms of the Function#defer. All that defer
> does is execute the function later. It doesn't prevent it from being
> executed more than once.
>
> If you want to prevent the effect from being fired a second time,
> you'll have to check for that condition. There are any number of ways
> you can do that. Probably the simplest is a flag on the slide
> instances that you sent when fading/appearing them and clear in the
> afterFinish callback of the effect.
>
> But just not firing the effect doesn't seem like the right thing.
> What if the user clicks Slide A, then B, then C, fairly quickly? That
> would mean (for instance) that B may still be appearing when they go
> to C. Surely you don't want to just not do the fade on B, because you
> do want it to go away.
>
> One way you can do that is to keep track of the current effect and
> cancel it when a new one is going to be done, something like this
> (untested):
>
> // Somewhere convenient
> var cancelPrevEffectOpts = {
>beforeStart: function(effect) {
>// Cancel any previous effect on this element
>if (effect.element.currentEffect) {
>effect.element.currentEffect.cancel();
>}
>// Remember this one
>effect.element.currentEffect = effect;
>},
>afterFinish: function(effect) {
>// Since we're done, clear our reference from the element
>effect.element.currentEffect = undefined;
>}
> };
>
> // Then in showSlide, use those opts:
> showSlide: function(slide){
>$(slideshow.slides[slideshow.currentSlide]).fade
> (cancelPrevEffectOpts);
>$(slideshow.slides[slide]).appear(cancelPrevEffectOpts);
>slideshow.currentSlide = slide;
> }
>
> If you don't like having the reference actually on the element, it's
> easy enough to adapt the above to use a separate "active effects"
> store keyed by the ID of the element:
>
> // Somewhere convenient
> var prevEffects = {};
> var cancelPrevEffectOpts = {
>beforeStart: function(effect) {
>// Cancel any previous effect on this element
>var id, prevEffect;
>id = 'e' + effect.element.identify();
>prevEffect = prevEffects[id];
>if (prevEffect) {
>prevEffect.cancel();
>delete prevEffects[id];
>}
>
>// Remember this one
>prevEffects[id] = effect;
>},
>afterFinish: function(effect) {
>// Since we're done, clear our reference to the effect
> var id = 'e' + effect.element.identify();
>if (prevEffects[id]) {
>delete prevEffects[id];
>}
>}
> };
>
> FWIW,
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
>
> On Jul 15, 5:11 pm, Paul Kim wrote:
> > Hi Mike, I think you are most likely right because Firebug doesn't output
> > any errors.
> >
> > However, defer() does not seem to be doing what I expected it to. When a
> > user clicks the buttons very quickly, the fading images might either
> flicker
> > or disappear. I didn't want to queue the fade/appear effects, but instead
> > wanted to prevent the fade/appear effects from triggering when the image
> is
> > currently undergoing a fade/appear effect. Do you know if this is even
> > possible?
> >
> > - Paul
> >
> >
> >
> > On Wed, Jul 15, 2009 at 7:28 AM, Mike Glen
> wrote:
> >
> > > Paul Kim wrote:
> > > > Basically, this is the error I get from firebug when I run
> > > > slideshow.showSlide(i).defer():
> > > > slideshow.showSlide(i).defer() is undefined
> >
> > > > How can I defer the showSlide() function so that when users click on
> > > > the buttons too quickly, it will wait for the interpreter to idle
> > > > before attemptin
[Proto-Scripty] Re: Help! Unable to defer function to run when interpreter is idle
Hi Mike, I think you are most likely right because Firebug doesn't output any errors. However, defer() does not seem to be doing what I expected it to. When a user clicks the buttons very quickly, the fading images might either flicker or disappear. I didn't want to queue the fade/appear effects, but instead wanted to prevent the fade/appear effects from triggering when the image is currently undergoing a fade/appear effect. Do you know if this is even possible? - Paul On Wed, Jul 15, 2009 at 7:28 AM, Mike Glen wrote: > > Paul Kim wrote: > > Basically, this is the error I get from firebug when I run > > slideshow.showSlide(i).defer(): > > slideshow.showSlide(i).defer() is undefined > > > > How can I defer the showSlide() function so that when users click on > > the buttons too quickly, it will wait for the interpreter to idle > > before attempting to run the showSlide() function again. > > I think I am on the right track in trying to use defer(), instead of > > queueing the effect to suppress events being fired too quickly. > > However, I don't know whether my use of defer() is correct. > > > i think it might need to be slideshow.showSlide.defer(i) > > > > > > --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Help! Unable to defer function to run when interpreter is idle
Hi, I have been working to modify a fading slideshow image gallery script w/
controls, but I am having problems deferring a function to run when the
interpreter is idle using Prototype's defer() method.
Here is a snippet of my code and I want to defer the showSlide() function:
var slideshow = {
currentSlide: 0,
slides: $$('#slideimg li'),
init: function(){
slideshow.slides[slideshow.currentSlide].show();
pe = new PeriodicalExecuter(slideshow.showNext, 5);
$$('#slidebtn li').invoke('observe', 'click', function(e) {
for(var i=0; i<$$('#slidebtn li').length; i++){
if(e.element().up(0) == $$('#slidebtn li')[i]){
if(slideshow.currentSlide !== i){
if(pe){
pe.stop();
slideshow.showSlide(i).defer();
pe = new PeriodicalExecuter(slideshow.showNext,
5);
}
}
}
}
});
},
showSlide: function(slide){
$(slideshow.slides[slideshow.currentSlide]).fade();
$(slideshow.slides[slide]).appear();
slideshow.currentSlide = slide;
}
};
Basically, this is the error I get from firebug when I run
slideshow.showSlide(i).defer():
slideshow.showSlide(i).defer() is undefined
How can I defer the showSlide() function so that when users click on the
buttons too quickly, it will wait for the interpreter to idle before
attempting to run the showSlide() function again.
I think I am on the right track in trying to use defer(), instead of
queueing the effect to suppress events being fired too quickly. However, I
don't know whether my use of defer() is correct.
You can see a working demo here: http://icecreamcola.com/testing/
I have pasted the code in pastie.org: http://pastie.org/546795
Any help in the right direction would be most appreciated.
- Paul K
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help! Is it possible to tell which element I invoked without the use of id attribute
Thanks Alex, this was exactly what I was looking for:
for(i=0;i<=$$('#slidebtn li').length) {
if(i==3) {
alert('Got the 4th list element');
}
- Paul
On Tue, Jul 14, 2009 at 11:08 PM, Alex McAuley <
webmas...@thecarmarketplace.com> wrote:
> You can collect the LI's under the UL like this if you need to
>
> $$('#slidebtn li')
>
> then you have an array of elements you can use each on or you can access
> directly ->
> var i=0;
> $$('#slidebtn li').each(function(el) {
>
> if(i==2) {
> alert('Got the 3rd List element');
> }
>
> i++;
> });
>
>
> -
>
> Or
> var second_list_item=$$('#slidebtn li')[1];
>
> and so on
>
> Or
>
> for(i=0;i<=$$('#slidebtn li').length) {
>
> if(i==3) {
> alert('Got the 4th list element');
> }
>
> }
>
> HTH
>
> Alex
>
> - Original Message -
> *From:* Paul Kim
> *To:* prototype-scriptaculous@googlegroups.com
> *Sent:* Wednesday, July 15, 2009 4:57 AM
> *Subject:* [Proto-Scripty] Help! Is it possible to tell which element I
> invoked without the use of id attribute
>
> Hi, I have a simple unordered list:
>
>
>
>
>
>
>
>
> I would like to know if it is possible to determine the nth element
> without the use of an id attribute:
>
> document.observe("dom:loaded", function(){
> $('slidebtn').invoke('observe', 'click', function(e) {
> var element = Event.element(e);
> // this is where I need help
> // if element is first , alert('0');
> // if element is second , alert('1');
> // if element is third , alert('2');
> // if element is fourth , alert('3');
> });
> };
>
> Currently, I am doing this to return the src attribute value:
>
> document.observe("dom:loaded", function(){
> $('slidebtn').invoke('observe', 'click', function(e) {
> var element = Event.element(e);
> // this will give me the src attribute value of the element
> alert(element.src);
> });
> };
>
> The reason I want to return the nth index of the element is so that I
> can pass that as an argument to a function.
> Any help in the right direction will be much appreciated.
>
> - Paul K
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Help! Is it possible to tell which element I invoked without the use of id attribute
Hi, I have a simple unordered list:
I would like to know if it is possible to determine the nth element
without the use of an id attribute:
document.observe("dom:loaded", function(){
$('slidebtn').invoke('observe', 'click', function(e) {
var element = Event.element(e);
// this is where I need help
// if element is first , alert('0');
// if element is second , alert('1');
// if element is third , alert('2');
// if element is fourth , alert('3');
});
};
Currently, I am doing this to return the src attribute value:
document.observe("dom:loaded", function(){
$('slidebtn').invoke('observe', 'click', function(e) {
var element = Event.element(e);
// this will give me the src attribute value of the element
alert(element.src);
});
};
The reason I want to return the nth index of the element is so that I
can pass that as an argument to a function.
Any help in the right direction will be much appreciated.
- Paul K
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Why does document.viewport.getDimensions() not work without a DOCTYPE?
I guess this mean that I must use DOCTYPES when using Prototype. I was expecting Prototype to work consistently whether or not there was a DOCTYPE present. - Paul On Mon, Jun 8, 2009 at 11:07 AM, Alex McAuley < webmas...@thecarmarketplace.com> wrote: > > This has been discussed many times before .. if i recall correctly its > somehting to do with Quirksmode > > HTH > > Alex > - Original Message - > From: "kimbaudi" > To: "Prototype & script.aculo.us" < > prototype-scriptaculous@googlegroups.com> > Sent: Monday, June 08, 2009 5:58 PM > Subject: [Proto-Scripty] Why does document.viewport.getDimensions() not > work > without a DOCTYPE? > > > > > > Hi, I have taken a look at the Prototype API and it says that > > document.viewport.getDimensions() should return the size of the > > viewport. I have created a simple page with a with width of > > 100px and height of 100px. I am hoping to alert the height of the > > browser window, but I get the height of the div. I didn't understand > > why the height of the div got alerted instead of the browser window. > > It appears that I needed to add a DOCTYPE in order for > > document.viewport.getDimensions() to work properly. Can anybody > > explain why the DOCTYPE is required for Prototype to return the > > correct viewport height? I have pasted the code that incorrectly > > returns the height of the div instead of the viewport on pastie: > > http://pastie.org/504692. > > > > Just add a doctype and you get the correct result: > > Replace > > with > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > > http://www.w3.org/1999/xhtml";> > > > > > > I hope to use Prototype with Ext JS in the future, but it seems that > > Prototype recommends/requires the use of DOCTYPES while Ext JS > > recommends against using DOCTYPES in order to avoid bugs in IE. > > > > - Paul K > > > > > > > > > > --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
Hi T.J., I'm sorry for any confusion, but I was trying to get the dimension
of the browser window this whole time. I misunderstood the element
dimension as being the same thing as the browser window dimension.
- Paul K
On Thu, May 7, 2009 at 10:02 AM, Paul Kim wrote:
> Hi T.J., that is odd... I get the same results for the width and height of
> the element using the code that Douglas gave me and Prototype's
> document.viewport.getDimensions(). You can take a look at my code at
> pastie.org: http://pastie.org/471309. I don't know if it makes any
> difference, but I have tested the code on IE7, Firefox 3, Opera 9, and
> Safari 3 on my Windows Vista operating system.
>
> - Paul
>
>
> On Thu, May 7, 2009 at 9:54 AM, T.J. Crowder wrote:
>
>>
>> Hi Paul,
>>
>> Hmmm, that's not what it's documented to do. Looking at the code,
>> it's clearly trying to give you the window dimensions, not the body
>> element. Some browsers make that harder than others. :-)
>>
>> -- T.J.
>>
>> On May 7, 5:48 pm, Paul Kim wrote:
>> > Hi T.J., thanks for pointing me to document.viewport. It returns the
>> > dimensions of the element.
>> >
>> > - Paul K
>> >
>> > On Thu, May 7, 2009 at 1:21 AM, T.J. Crowder
>> wrote:
>> >
>> > > Hi Paul,
>> >
>> > > > Thanks for the clear explanation regarding the viewport's height. I
>> did
>> > > > expect the body element's height to be the viewport's height...
>> >
>> > > You're not the first or only one to make that mistake. :-)
>> >
>> > > > ...I thought there was a simple method in Prototype
>> > > > that could easily determine the body element's width and height...
>> >
>> > > There is, and you used it: getDimensions does that. It's just that
>> > > the body's dimensions aren't what you thought they should be. (And
>> > > again, you're not the only one, I think we've all been there.)
>> >
>> > > If you haven't looked at document.viewport[1] yet, it may be worth a
>> > > look, depending on what you're doing.
>> >
>> > > [1]http://prototypejs.org/api/document/viewport
>> >
>> > > HTH,
>> > > --
>> > > T.J. Crowder
>> > > tj / crowder software / com
>> > > Independent Software Engineer, consulting services available
>> >
>> > > On May 6, 8:46 pm, Paul Kim wrote:
>> > > > Hi T.J.,
>> >
>> > > > Thanks for the clear explanation regarding the viewport's height. I
>> did
>> > > > expect the body element's height to be the viewport's height and I
>> was
>> > > wrong
>> > > > to make that assumption. Since Prototype javascript library seems
>> to
>> > > iron
>> > > > out various cross-browser implementations of native javascript
>> (Internet
>> > > > Explorer in particular), I thought there was a simple method in
>> Prototype
>> > > > that could easily determine the body element's width and height.
>> >
>> > > > - Paul K
>> >
>> > > > On Wed, May 6, 2009 at 2:05 AM, T.J. Crowder <
>> t...@crowdersoftware.com>
>> > > wrote:
>> >
>> > > > > Hi Paul,
>> >
>> > > > > Just to add to that, I'm guessing the height was "wrong" because
>> you
>> > > > > were expecting the body element's height to be the viewport's
>> height.
>> > > > > The body element's height is determined by its content (barring
>> CSS
>> > > > > rules to the contrary), not the height of the viewport. Try this
>> CSS:
>> >
>> > > > > body {
>> > > > >border: 1px solid red;
>> > > > > }
>> >
>> > > > > ...with this body:
>> >
>> > > > >
>> > > > > This is a test
>> > > > >
>> >
>> > > > > ...and you'll see the red border around the (outside of the)
>> > > > > paragraph, not around the entire page viewport. If you ask its
>> > > > > dimensions, you'll find the body is 40-50px high depending on your
>> > > > > font sizes, etc. If you have lots of content in the body, such
>> that
&g
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
Hi T.J., that is odd... I get the same results for the width and height of
the element using the code that Douglas gave me and Prototype's
document.viewport.getDimensions(). You can take a look at my code at
pastie.org: http://pastie.org/471309. I don't know if it makes any
difference, but I have tested the code on IE7, Firefox 3, Opera 9, and
Safari 3 on my Windows Vista operating system.
- Paul
On Thu, May 7, 2009 at 9:54 AM, T.J. Crowder wrote:
>
> Hi Paul,
>
> Hmmm, that's not what it's documented to do. Looking at the code,
> it's clearly trying to give you the window dimensions, not the body
> element. Some browsers make that harder than others. :-)
>
> -- T.J.
>
> On May 7, 5:48 pm, Paul Kim wrote:
> > Hi T.J., thanks for pointing me to document.viewport. It returns the
> > dimensions of the element.
> >
> > - Paul K
> >
> > On Thu, May 7, 2009 at 1:21 AM, T.J. Crowder
> wrote:
> >
> > > Hi Paul,
> >
> > > > Thanks for the clear explanation regarding the viewport's height. I
> did
> > > > expect the body element's height to be the viewport's height...
> >
> > > You're not the first or only one to make that mistake. :-)
> >
> > > > ...I thought there was a simple method in Prototype
> > > > that could easily determine the body element's width and height...
> >
> > > There is, and you used it: getDimensions does that. It's just that
> > > the body's dimensions aren't what you thought they should be. (And
> > > again, you're not the only one, I think we've all been there.)
> >
> > > If you haven't looked at document.viewport[1] yet, it may be worth a
> > > look, depending on what you're doing.
> >
> > > [1]http://prototypejs.org/api/document/viewport
> >
> > > HTH,
> > > --
> > > T.J. Crowder
> > > tj / crowder software / com
> > > Independent Software Engineer, consulting services available
> >
> > > On May 6, 8:46 pm, Paul Kim wrote:
> > > > Hi T.J.,
> >
> > > > Thanks for the clear explanation regarding the viewport's height. I
> did
> > > > expect the body element's height to be the viewport's height and I
> was
> > > wrong
> > > > to make that assumption. Since Prototype javascript library seems to
> > > iron
> > > > out various cross-browser implementations of native javascript
> (Internet
> > > > Explorer in particular), I thought there was a simple method in
> Prototype
> > > > that could easily determine the body element's width and height.
> >
> > > > - Paul K
> >
> > > > On Wed, May 6, 2009 at 2:05 AM, T.J. Crowder <
> t...@crowdersoftware.com>
> > > wrote:
> >
> > > > > Hi Paul,
> >
> > > > > Just to add to that, I'm guessing the height was "wrong" because
> you
> > > > > were expecting the body element's height to be the viewport's
> height.
> > > > > The body element's height is determined by its content (barring CSS
> > > > > rules to the contrary), not the height of the viewport. Try this
> CSS:
> >
> > > > > body {
> > > > >border: 1px solid red;
> > > > > }
> >
> > > > > ...with this body:
> >
> > > > >
> > > > > This is a test
> > > > >
> >
> > > > > ...and you'll see the red border around the (outside of the)
> > > > > paragraph, not around the entire page viewport. If you ask its
> > > > > dimensions, you'll find the body is 40-50px high depending on your
> > > > > font sizes, etc. If you have lots of content in the body, such
> that
> > > > > it fills or overfills the viewport, the red border is (of course)
> > > > > around all of the content.
> >
> > > > > You were probably expecting the body to be at least the height of
> the
> > > > > viewport, perhaps because some CSS rules are applied as if that
> were
> > > > > true. Add a background color, for instance:
> >
> > > > > body {
> > > > >border: 1px solid red;
> > > > >background-color: yellow;
> > > > > }
> >
> > > > > ...and the yellow background fills the viewport, even though the
> body
> > > >
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
Hi T.J., thanks for pointing me to document.viewport. It returns the
dimensions of the element.
- Paul K
On Thu, May 7, 2009 at 1:21 AM, T.J. Crowder wrote:
>
> Hi Paul,
>
> > Thanks for the clear explanation regarding the viewport's height. I did
> > expect the body element's height to be the viewport's height...
>
> You're not the first or only one to make that mistake. :-)
>
> > ...I thought there was a simple method in Prototype
> > that could easily determine the body element's width and height...
>
> There is, and you used it: getDimensions does that. It's just that
> the body's dimensions aren't what you thought they should be. (And
> again, you're not the only one, I think we've all been there.)
>
> If you haven't looked at document.viewport[1] yet, it may be worth a
> look, depending on what you're doing.
>
> [1] http://prototypejs.org/api/document/viewport
>
> HTH,
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
>
> On May 6, 8:46 pm, Paul Kim wrote:
> > Hi T.J.,
> >
> > Thanks for the clear explanation regarding the viewport's height. I did
> > expect the body element's height to be the viewport's height and I was
> wrong
> > to make that assumption. Since Prototype javascript library seems to
> iron
> > out various cross-browser implementations of native javascript (Internet
> > Explorer in particular), I thought there was a simple method in Prototype
> > that could easily determine the body element's width and height.
> >
> > - Paul K
> >
> > On Wed, May 6, 2009 at 2:05 AM, T.J. Crowder
> wrote:
> >
> > > Hi Paul,
> >
> > > Just to add to that, I'm guessing the height was "wrong" because you
> > > were expecting the body element's height to be the viewport's height.
> > > The body element's height is determined by its content (barring CSS
> > > rules to the contrary), not the height of the viewport. Try this CSS:
> >
> > > body {
> > >border: 1px solid red;
> > > }
> >
> > > ...with this body:
> >
> > >
> > > This is a test
> > >
> >
> > > ...and you'll see the red border around the (outside of the)
> > > paragraph, not around the entire page viewport. If you ask its
> > > dimensions, you'll find the body is 40-50px high depending on your
> > > font sizes, etc. If you have lots of content in the body, such that
> > > it fills or overfills the viewport, the red border is (of course)
> > > around all of the content.
> >
> > > You were probably expecting the body to be at least the height of the
> > > viewport, perhaps because some CSS rules are applied as if that were
> > > true. Add a background color, for instance:
> >
> > > body {
> > >border: 1px solid red;
> > >background-color: yellow;
> > > }
> >
> > > ...and the yellow background fills the viewport, even though the body
> > > doesn't.
> >
> > > Fun, eh?
> > > --
> > > T.J. Crowder
> > > tj / crowder software / com
> > > Independent Software Engineer, consulting services available
> >
> > > On May 5, 5:25 pm, Paul Kim wrote:
> > > > Thank you, Douglas. Works like a charm!
> >
> > > > - Paul K
> >
> > > > On Tue, May 5, 2009 at 9:19 AM, Douglas
> > > wrote:
> >
> > > > > I hope this snippet helps :o)
> >
> > > > > [code]
> > > > >var w = 0,
> > > > >h = 0;
> >
> > > > >if (typeof(window.innerWidth) == 'number') {
> > > > >w = window.innerWidth;
> > > > >h = window.innerHeight;
> > > > >} else if (document.documentElement &&
> > > > > (document.documentElement.clientWidth ||
> >
> > > > > document.documentElement.clientHeight))
> > > > >{
> > > > >//IE 6+ in 'standards compliant mode'
> > > > >w = document.documentElement.clientWidth;
> > > > >h = document.documentElement.clientHeight;
> > > > >} else if (document.body && (document.body.clientWidth ||
> > > > > document.body.clientHeight))
> > > > >{
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
Hi T.J.,
Thanks for the clear explanation regarding the viewport's height. I did
expect the body element's height to be the viewport's height and I was wrong
to make that assumption. Since Prototype javascript library seems to iron
out various cross-browser implementations of native javascript (Internet
Explorer in particular), I thought there was a simple method in Prototype
that could easily determine the body element's width and height.
- Paul K
On Wed, May 6, 2009 at 2:05 AM, T.J. Crowder wrote:
>
> Hi Paul,
>
> Just to add to that, I'm guessing the height was "wrong" because you
> were expecting the body element's height to be the viewport's height.
> The body element's height is determined by its content (barring CSS
> rules to the contrary), not the height of the viewport. Try this CSS:
>
> body {
>border: 1px solid red;
> }
>
> ...with this body:
>
>
> This is a test
>
>
> ...and you'll see the red border around the (outside of the)
> paragraph, not around the entire page viewport. If you ask its
> dimensions, you'll find the body is 40-50px high depending on your
> font sizes, etc. If you have lots of content in the body, such that
> it fills or overfills the viewport, the red border is (of course)
> around all of the content.
>
> You were probably expecting the body to be at least the height of the
> viewport, perhaps because some CSS rules are applied as if that were
> true. Add a background color, for instance:
>
> body {
>border: 1px solid red;
>background-color: yellow;
> }
>
> ...and the yellow background fills the viewport, even though the body
> doesn't.
>
> Fun, eh?
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
> On May 5, 5:25 pm, Paul Kim wrote:
> > Thank you, Douglas. Works like a charm!
> >
> > - Paul K
> >
> > On Tue, May 5, 2009 at 9:19 AM, Douglas
> wrote:
> >
> > > I hope this snippet helps :o)
> >
> > > [code]
> > >var w = 0,
> > >h = 0;
> >
> > >if (typeof(window.innerWidth) == 'number') {
> > >w = window.innerWidth;
> > >h = window.innerHeight;
> > >} else if (document.documentElement &&
> > > (document.documentElement.clientWidth ||
> >
> > > document.documentElement.clientHeight))
> > >{
> > >//IE 6+ in 'standards compliant mode'
> > >w = document.documentElement.clientWidth;
> > >h = document.documentElement.clientHeight;
> > >} else if (document.body && (document.body.clientWidth ||
> > > document.body.clientHeight))
> > >{
> > >//IE 4 compatible
> > >w = document.body.clientWidth;
> > >h = document.body.clientHeight;
> > >}
> > > [/code]
> >
> > > On Tue, May 5, 2009 at 1:14 PM, kimbaudi wrote:
> >
> > > > Hi, I am unable to get the height of the tag using
> > > > Element.getDimensions although I can get the width of the tag
> > > > fine. How can I get the height of the tag? I have my simple
> > > > code pasted athttp://pastie.org/468828. Here is the snippet of code
> > > > below as well:
> >
> > > > function alertBodyDim() {
> > > > /* $('main') refers to */
> > > >var dimensions = $('main').getDimensions();
> > > >alert(dimensions.width);
> > > >alert(dimensions.height);
> >
> > > > }
> >
> > > > - Paul K
> >
> > > --
> > > Believe nothing, no matter where you read it, or who said it, no
> > > matter if I have said it, unless it agrees with your own reason and
> > > your own common sense. ~Buddha
> >
> >
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
Thank you, Douglas. Works like a charm!
- Paul K
On Tue, May 5, 2009 at 9:19 AM, Douglas wrote:
>
> I hope this snippet helps :o)
>
>
> [code]
>var w = 0,
>h = 0;
>
>if (typeof(window.innerWidth) == 'number') {
>w = window.innerWidth;
>h = window.innerHeight;
>} else if (document.documentElement &&
> (document.documentElement.clientWidth ||
>
> document.documentElement.clientHeight))
>{
>//IE 6+ in 'standards compliant mode'
>w = document.documentElement.clientWidth;
>h = document.documentElement.clientHeight;
>} else if (document.body && (document.body.clientWidth ||
> document.body.clientHeight))
>{
>//IE 4 compatible
>w = document.body.clientWidth;
>h = document.body.clientHeight;
>}
> [/code]
>
>
> On Tue, May 5, 2009 at 1:14 PM, kimbaudi wrote:
> >
> > Hi, I am unable to get the height of the tag using
> > Element.getDimensions although I can get the width of the tag
> > fine. How can I get the height of the tag? I have my simple
> > code pasted at http://pastie.org/468828. Here is the snippet of code
> > below as well:
> >
> > function alertBodyDim() {
> > /* $('main') refers to */
> >var dimensions = $('main').getDimensions();
> >alert(dimensions.width);
> >alert(dimensions.height);
> >
> > }
> >
> > - Paul K
> > >
> >
>
>
>
> --
> Believe nothing, no matter where you read it, or who said it, no
> matter if I have said it, unless it agrees with your own reason and
> your own common sense. ~Buddha
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help! Clicking on onclick event handler too quickly breaks Effect.BlindUp/Effect.BlindDown
Hi Baglan, Thanks for pointing me in the right direction. Now it works
perfectly! Thank you! - Paul
On Tue, Nov 4, 2008 at 4:45 AM, Baglan <[EMAIL PROTECTED]> wrote:
>
> Sure, there's a feature called 'queues':
>
> http://github.com/madrobby/scriptaculous/wikis/effect-queues
>
> You can queue the effects so that the next one is being fired up after
> the first one has finished:
>
> new Effect.BlindUp('my-div',{queue:'end'});
>
> You could limit the queue length to 1, which effectively prevents
> other effects till initial effect has finished:
>
> new Effect.BlindUp('my-div',{queue:{ position: 'end', scope: 'blinds',
> limit: 1 }});
>
> Or you could, a bit less elegantly, disable the element used to fire
> up the effect an re-enable it with 'afterFinish'.
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Effect.toggle slide doesn't work well with unordered/ordered list elements
Hi Matt and David, I made the changes to my example so that the element
is encapsulated in a element. Now Effect.toggle using the 'slide'
option works as it should in FF3, IE7, Safari3, but does not work well in
Opera. For some strange reason, the Effect.toggle uses the 'blind' option
in Opera9 even though I call Effect.toggle with 'slide'. You can check out
the changes I made by going to http://icecreamcola.com/test/jsMenu.php. If
you test it in FF, IE, or Safari, you will notice the slide effect. If you
test it in Opera, you will notice the blind effect.
- Paul
On Fri, Oct 31, 2008 at 9:01 AM, Matt Foster <[EMAIL PROTECTED]> wrote:
>
> Effect.Slide needs an immediate child to perform the clipping
> necessary for the effect.
>
>
>
>
> On Oct 31, 9:56 am, "Paul Kim" <[EMAIL PROTECTED]> wrote:
> > Thanks for the solution David. Do you have any idea why this worked for
> > Opera when the element wasn't encapsulated inside a element? -
> > Paul
> >
> > On Fri, Oct 31, 2008 at 4:42 AM, david <[EMAIL PROTECTED]> wrote:
> >
> > > Hi Paul,
> >
> > > You'll have to change the HTML to:
> > >
> > > RECENTLY
> > >
> > >
> > >Menu List 1
> > >Menu List 2
> > >Menu List 3
> > >Menu List 4
> > >Menu List 5
> > >Menu List 6
> > >Menu List 7
> > >Menu List 8
> > >
> > >
> > >
> >
> > > and the toggle function to:
> > > function toggleMenu() {
> > > if ($('menu-head').getStyle('background-image').include('img/
> > > sidebarh3bg.jpg') && $('menu-head').getStyle('background-
> > > position')=='0px 0px') {
> > > //Effect.toggle('menu-body', 'blind', {duration: 0.75});
> > >Effect.toggle('menu-div', 'slide', {duration: 0.5});
> > > Element.setStyle.delay(0.5, $('menu-head'), {background:'url(img/
> > > sidebarh3bg.jpg) no-repeat -165px 0px', cursor:'pointer'});
> > > }
> > > else {
> > > //Effect.toggle('menu-body', 'blind', {duration: 0.75});
> > >Effect.toggle('menu-div', 'slide', {duration: 0.5});
> > > Element.setStyle.delay(0.5, $('menu-head'), {background:'url(img/
> > > sidebarh3bg.jpg) no-repeat 0px 0px', cursor:'pointer'});
> > > }
> > > }
> >
> > > In your exemple only the first li is slide, because the slide effect
> > > take the first descendant to slide. So you need to encapsulate the ul
> > > code inside a div (for exemple) and call the slide effect onto the div
> > > level.
> >
> > > --
> > > david
> >
> > > On 31 oct, 05:23, kimbaudi <[EMAIL PROTECTED]> wrote:
> > > > Hi, I was inspired byhttp://
> > >www.exit404.com/2005/57/unobtrusive-persistant-scriptaculous-e...
> > > > to create a menu that would expand and contract the menu whenever I
> > > > click on the menu header. Instead of using Effect.BlindDown and
> > > > Effect.BlindUp, I decided to use Effect.toggle to toggle the
> unordered
> > > > list when I click on the menu header. I decided to use the slide
> > > > effect for Effect.toggle, but found that it is buggy in FF3, IE7,
> > > > Safari3 and works as it should in Opera9. It seems that adding
> > > > Effect.toggle to is problematic. You can check out my result
> > > athttp://icecreamcola.com/test/jsMenu.htmlortake a look at some code
> > > > below:
> >
> > > > [html]
> > > >
> > > > RECENTLY
> > > >
> > > > Menu List 1
> > > > Menu List 2
> > > > Menu List 3
> > > > Menu List 4
> > > > Menu List 5
> > > > Menu List 6
> > > > Menu List 7
> > > > Menu List 8
> > > >
> > > >
> > > > [/html]
> >
> > > > [script]
> > > > function toggleMenu() {
> > > > if ($('menu-head').getStyle('background-image').include('img/
> > > > sidebarh3bg.jpg') && $('menu-head').getStyle('background-
> > > > position')=='0px 0px') {
> > > > Effect.toggle('menu-body', 'slide', {duration: 0.5});
> > > > Element.setStyle.delay(0.5, $('menu-head'),
> > > {background:'url(img/
> > > > sidebarh3bg.jpg) no-repeat -165px 0px', cursor:'pointer'});
> > > > }
> > > > else {
> > > > Effect.toggle('menu-body', 'slide', {duration: 0.5});
> > > > Element.setStyle.delay(0.5, $('menu-head'),
> > > {background:'url(img/
> > > > sidebarh3bg.jpg) no-repeat 0px 0px', cursor:'pointer'});
> > > > }}
> >
> > > > [/script]
> >
> > > > - Paul
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Effect.toggle slide doesn't work well with unordered/ordered list elements
Thanks for the solution David. Do you have any idea why this worked for
Opera when the element wasn't encapsulated inside a element? -
Paul
On Fri, Oct 31, 2008 at 4:42 AM, david <[EMAIL PROTECTED]> wrote:
>
> Hi Paul,
>
> You'll have to change the HTML to:
>
> RECENTLY
>
>
>Menu List 1
>Menu List 2
>Menu List 3
>Menu List 4
>Menu List 5
>Menu List 6
>Menu List 7
>Menu List 8
>
>
>
>
>
> and the toggle function to:
> function toggleMenu() {
> if ($('menu-head').getStyle('background-image').include('img/
> sidebarh3bg.jpg') && $('menu-head').getStyle('background-
> position')=='0px 0px') {
> //Effect.toggle('menu-body', 'blind', {duration: 0.75});
>Effect.toggle('menu-div', 'slide', {duration: 0.5});
> Element.setStyle.delay(0.5, $('menu-head'), {background:'url(img/
> sidebarh3bg.jpg) no-repeat -165px 0px', cursor:'pointer'});
> }
> else {
> //Effect.toggle('menu-body', 'blind', {duration: 0.75});
>Effect.toggle('menu-div', 'slide', {duration: 0.5});
> Element.setStyle.delay(0.5, $('menu-head'), {background:'url(img/
> sidebarh3bg.jpg) no-repeat 0px 0px', cursor:'pointer'});
> }
> }
>
>
> In your exemple only the first li is slide, because the slide effect
> take the first descendant to slide. So you need to encapsulate the ul
> code inside a div (for exemple) and call the slide effect onto the div
> level.
>
>
> --
> david
>
>
> On 31 oct, 05:23, kimbaudi <[EMAIL PROTECTED]> wrote:
> > Hi, I was inspired byhttp://
> www.exit404.com/2005/57/unobtrusive-persistant-scriptaculous-e...
> > to create a menu that would expand and contract the menu whenever I
> > click on the menu header. Instead of using Effect.BlindDown and
> > Effect.BlindUp, I decided to use Effect.toggle to toggle the unordered
> > list when I click on the menu header. I decided to use the slide
> > effect for Effect.toggle, but found that it is buggy in FF3, IE7,
> > Safari3 and works as it should in Opera9. It seems that adding
> > Effect.toggle to is problematic. You can check out my result
> athttp://icecreamcola.com/test/jsMenu.htmlor take a look at some code
> > below:
> >
> > [html]
> >
> > RECENTLY
> >
> > Menu List 1
> > Menu List 2
> > Menu List 3
> > Menu List 4
> > Menu List 5
> > Menu List 6
> > Menu List 7
> > Menu List 8
> >
> >
> > [/html]
> >
> > [script]
> > function toggleMenu() {
> > if ($('menu-head').getStyle('background-image').include('img/
> > sidebarh3bg.jpg') && $('menu-head').getStyle('background-
> > position')=='0px 0px') {
> > Effect.toggle('menu-body', 'slide', {duration: 0.5});
> > Element.setStyle.delay(0.5, $('menu-head'),
> {background:'url(img/
> > sidebarh3bg.jpg) no-repeat -165px 0px', cursor:'pointer'});
> > }
> > else {
> > Effect.toggle('menu-body', 'slide', {duration: 0.5});
> > Element.setStyle.delay(0.5, $('menu-head'),
> {background:'url(img/
> > sidebarh3bg.jpg) no-repeat 0px 0px', cursor:'pointer'});
> > }}
> >
> > [/script]
> >
> > - Paul
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: $$() and Element.observe() question
Thanks Robert
On Tue, Oct 28, 2008 at 9:58 PM, Robert Zotter <[EMAIL PROTECTED]> wrote:
>
> kimbaudi,
>
> Like you said, $$() returns and array of DOM elements. You just need
> to iterate over the collection and set up the observe event on each
> item. For example:
>
> $$('.class').each(function(element) {
> element.observe('click', function() {
>alert('clicked');
> });
> });
>
> Cheers
>
> --
> Robert Zotter
> Zapient, LLC
> Ruby on Rails Development and Consulting
>
> http://www.zapient.com
> http://www.fromjavatoruby.com
>
> On Oct 28, 9:27 pm, kimbaudi <[EMAIL PROTECTED]> wrote:
> > Hi, I am having trouble with using Element.observe() with $$(). If I
> > have an element with id="id", I can do this:
> >
> > $('id').observe('click', function() {alert('clicked');});
> >
> > However, if I have elements with class="class", I can't do this:
> >
> > $$('.class').observe('click', function() {alert('clicked');});
> >
> > I know that $$() returns a document-order array of extended DOM
> > elements, but I have no idea how to use Element.observe() on the array
> > returned by $$(). Any help will be greatly appreciated.
> >
> > - Paul
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Prototype's setOpacity does not work consistently in all browsers
Hi, I realized that I made a mistake:
> Element.extend(document.body);
> document.body.insert({bottom: newDiv}).setOpacity(0.5);
should have been
Element.extend(document.body);
document.body.insert({bottom: newDiv});
newDiv.setOpacity(0.5);
Now, setOpacity works the way it should. Thanks Tobie for your response.
Without it, I don't think I would have caught that mistake. Sorry about
that.
- Paul
On Mon, Oct 27, 2008 at 8:33 AM, Paul Kim <[EMAIL PROTECTED]> wrote:
> I don't think "document.body.insert({bottom: newDiv}).setOpacity(0.5);" is
> equivalent to "document.body.insert({bottom: newDiv});
> document.body.setOpacity(0.5);" because the first one is setting newDiv
> with an opacity of 0.5 whereas the second one is setting with an
> opacity of 0.5. What I'm trying to do is created an absolutely positioned
> div element with an opacity of 0.5 and insert it to the bottom of the
> tag, not set the tag itself with an opacity of 0.5.
>
> - Paul
>
>
> On Mon, Oct 27, 2008 at 1:20 AM, Tobie Langel <[EMAIL PROTECTED]>wrote:
>
>>
>> > Element.extend(document.body);
>> > document.body.insert({bottom: newDiv}).setOpacity(0.5);
>>
>> That's equivalent to doing this:
>>
>> Element.extend(document.body);
>> document.body.insert({bottom: newDiv})
>> document.body.setOpacity(0.5);
>>
>> Is that what you are trying to do?
>>
>>
>> >>
>>
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Prototype's setOpacity does not work consistently in all browsers
I don't think "document.body.insert({bottom: newDiv}).setOpacity(0.5);" is
equivalent to "document.body.insert({bottom: newDiv});
document.body.setOpacity(0.5);" because the first one is setting newDiv
with an opacity of 0.5 whereas the second one is setting with an
opacity of 0.5. What I'm trying to do is created an absolutely positioned
div element with an opacity of 0.5 and insert it to the bottom of the
tag, not set the tag itself with an opacity of 0.5.
- Paul
On Mon, Oct 27, 2008 at 1:20 AM, Tobie Langel <[EMAIL PROTECTED]>wrote:
>
> > Element.extend(document.body);
> > document.body.insert({bottom: newDiv}).setOpacity(0.5);
>
> That's equivalent to doing this:
>
> Element.extend(document.body);
> document.body.insert({bottom: newDiv})
> document.body.setOpacity(0.5);
>
> Is that what you are trying to do?
>
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
