[Proto-Scripty] Issue after hiding divs on load
Hi, I'm working on a site where I have it load the page, and then I
have a content box containing a textfield and customized scrollbar
(custom images,width, etc) for the field. I have multiple content
boxes and I used script.aculo.us to basically make them appear or fade
when the menu pics are clicked etc. This was great but then I wanted
to make them all hidden when the page loads, and then have them shown
if you click the link. Like for news, you click it and the content box
for news shows up. The problem I am having is that when I set the
display for the div with id ContentBox to display=none since prototype
uses display for show/hide/appear/fade I thought that would work fine.
but it doesnt. I'm sure its a simple fix that I'm just not seeing.
What happens is, if I say for example:
window.onload = function() {
$$('div.tabcontent').invoke('hide');
};
or
document.observe(dom:loaded, function() {
$$('div.tabcontent').invoke('hide');
});
then it will hide it to begin with, but later on, even if it's right
after that, if I tell it to show, and use something like toggle, show,
appear... etc. what happens is, it shows the content box, but the text
field and scrollbar inside it are both hidden.
if I use the div specifically like:
$('contentBox').hide()
it will still hide but once again it won't show when I tell it to show
or appear.
I know there must be a simple solution because when I say:
window.onload = function() {
$$('div.tabcontent').invoke('fade');
};
it works when later on I tell it to show or appear just hide makes
it not work.
Also, I made a temporary solution by using iframes since I was already
using them for the gallery with my shadowbox. I used it for the
content box. I put them in an iframe positioned using a div in a
table. Works good except for 1 thing, when I use my scriptaculous
custom scrollbar, if my mouse goes outside of the frame/table (one of
the 2 not sure exactly but) then it no longer is observing when I
mouseup... so that when I bring the mouse back into the frame, it will
then act as if I was still mousedown and scroll the scrollbar as I
move the mouse up and down which is terrible. I don't mind using the
frames, it would make editing easy because each content window could
be a separate little html file, but at the same time I can't seem to
figure out how to fix this either. My attempts at both have failed so
now I'm asking for some help, 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.
[Proto-Scripty] IE problem
This code errors in IE. I get an invalid argument error concerning
the elementStyle object.
The area that i'm interested in is: setStyle: function(element,
styles) {
element = $(element);
var elementStyle = element.style, match;
if (Object.isString(styles)) {
element.style.cssText += ';' + styles;
return styles.include('opacity') ?
element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)
[1]) : element;
}
for (var property in styles)
if (property == 'opacity') element.setOpacity(styles[property]);
else
elementStyle[(property == 'float' || property == 'cssFloat') ?
(Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' :
'styleFloat') :
property] = styles[property];
return element;
},
Please advise!!!
--
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] Targeting all elements
Here is what I want to accomplish. I have a page with a structure like
this:
div id=jobs
h2Job Category Headline/h2
ul
lispan title=Show Position DetailsJob Title 1/span
div class=job-info
Details
div class=close title=Hide Position DetailsHide Position
Details/div
/div
/li
lispan title=Show Position DetailsJob Title 2/span
div class=job-info
Details
div class=close title=Hide Position DetailsHide Position
Details/div
/div
/li
/ul
/div
Each job-info div is hidden using this:
$$('.job-info').invoke('hide');
So far so good. Now, I want to loop through all spans (#jobs ul li
span) and add a listener for click. When the span is clicked, the job-
info below it should display (just the one below, not all). In
addition, within each div there is another div with a class called
.close which should hide that parent div when clicked.
It would appear that this is a simple task, but having never worked
with prototype, what I've tried so far hasn't worked.
If anyone could point me in the right direction, I'd appreciate it.
Thanks,
Ryan
--
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] Effect.appear doesn't function correctly when inside a function
I got a little problem with using the Effect.appear function, if I put
it like this
function checkLogin()
{
Effect.BlindDown('error'); return false;
}
It works crap that way, I have to click the button two times to make
the effect come, but if I put the text right inside the onClick
function it works flawlessly what is the difference of these actually?
input type=image src=images/login2.png id=submit
onclick=checkLogin() /
input type=image src=images/login2.png id=submit
onclick=Effect.BlindDown('error'); return false; /
I am beginner with this, sorry..
--
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: http://wiki.github.com/madrobby/scriptaculous/
i need to create 4 colomns for this photo gallery how to do this http://www.infolanka.nl/sllists/testSortable.php http://wiki.github.com/madrobby/scriptaculous/ -- 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] Help needed, its got to be simple
I'm pretty new to both JavaScript and Prototype, but have been
programming for over 30 years, and so this one is causing me to tear
out what little hair I have left. Basically, I can't seem to figure
out what is wrong when I move a function that works outside of a class
into a class, it is a very simple function, just wrap a piece of text
in double-quotes. But when called from within a class, the script
blows up and dies. I'm using Firefox, Firebug does see that the class
has the item and that it is a function; but the script dies as if it
could not find the function. The JavaScript console remains empty.
Why does the function quotes (within the class) fail when the exact
same function dquote (outside the class) works fine. I figure it's
something simple but it has eluded me.
html
head
script src=../prototype.js type=text/javascript/script
/head
body
script type=text/javascript
var printp = function( strStr ) { document.write( p + strStr
+ /p ); };
var dquote = function( strStr ) { return \ + strStr +
\; };
printp( Begin Test! );
printp( Test 1: + dquote( 'test 1' ) );
var Test_01= Class.create( {
initialize: function( strName ) {
this.name = String( strName );
},
quotes: function( strStr ) { return \ + strStr +
\; },
doc_name: function() { return quotes( this.name ); }
});
var test_02 = new Test_01( 'test' );
printp( Test 2: \ + test_02.name + \ );
printp( Test 3:+ test_02.doc_name() );
printp( End Test! );
/script
/body
/html
--
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] Issue after hiding divs on load
On 11 July 2010 05:01, Acryte acry...@gmail.com wrote:
Hi, I'm working on a site where I have it load the page, and then I
have a content box containing a textfield and customized scrollbar
(custom images,width, etc) for the field. I have multiple content
boxes and I used script.aculo.us to basically make them appear or fade
when the menu pics are clicked etc. This was great but then I wanted
to make them all hidden when the page loads, and then have them shown
if you click the link. Like for news, you click it and the content box
for news shows up. The problem I am having is that when I set the
display for the div with id ContentBox to display=none since prototype
uses display for show/hide/appear/fade I thought that would work fine.
but it doesnt. I'm sure its a simple fix that I'm just not seeing.
What happens is, if I say for example:
window.onload = function() {
$$('div.tabcontent').invoke('hide');
};
or
document.observe(dom:loaded, function() {
$$('div.tabcontent').invoke('hide');
});
then it will hide it to begin with, but later on, even if it's right
after that, if I tell it to show, and use something like toggle, show,
appear... etc. what happens is, it shows the content box, but the text
field and scrollbar inside it are both hidden.
if I use the div specifically like:
$('contentBox').hide()
it will still hide but once again it won't show when I tell it to show
or appear.
I know there must be a simple solution because when I say:
window.onload = function() {
$$('div.tabcontent').invoke('fade');
};
it works when later on I tell it to show or appear just hide makes
it not work.
Also, I made a temporary solution by using iframes since I was already
using them for the gallery with my shadowbox. I used it for the
content box. I put them in an iframe positioned using a div in a
table. Works good except for 1 thing, when I use my scriptaculous
custom scrollbar, if my mouse goes outside of the frame/table (one of
the 2 not sure exactly but) then it no longer is observing when I
mouseup... so that when I bring the mouse back into the frame, it will
then act as if I was still mousedown and scroll the scrollbar as I
move the mouse up and down which is terrible. I don't mind using the
frames, it would make editing easy because each content window could
be a separate little html file, but at the same time I can't seem to
figure out how to fix this either. My attempts at both have failed so
now I'm asking for some help, 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 have to apply the inline style=display:none;
Element.show cannot display elements hidden via CSS stylesheets. Note
that this is not a Prototype limitation but a consequence of how the
CSS display property works. [1]
Regards,
Richard.
[1] http://api.prototypejs.org/dom/element/show/
--
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: Help needed, its got to be simple
Hi,
Why does the function quotes (within the class) fail when the exact
same function dquote (outside the class) works fine.
The function's fine; what's happening is that you're trying to use an
undefined symbol (in `doc_name`, `quotes` is undefined). `this` is
*never* implicit in JavaScript the way it is in some other languages,
you have to write it explicitly.
You could fix it by adding this.:
doc_name: function() { return this.quotes( this.name ); }
...but since `quotes` doesn't need access to any of the instance
properties, there's no reason to put it on the object at all. I'd
probably use a closure instead and make it just a function within the
closure:
var Test_01= (function() {
function quotes( strStr ) {
return \ + strStr + \;
}
return Class.create( {
initialize: function( strName ) {
this.name = String( strName );
},
doc_name: function() { return quotes( this.name ); }
});
})();
There, I've wrapped up your Class.create call inside an anonymous
function (called a scoping function) and immediately called the
function. `quotes` ends up being in scope for any code inside the
scoping function, but out of scope for any code outside of it. It
makes `quotes` similar to a private class method in class-based
systems, although the mechanism at work (closures) is rather more
powerful than that. More on closures here:
http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html
I'd also steer away from using anonymous functions other than as
scoping functions (all of the functions in your Test_01 class are
anonymous); more here:
http://blog.niftysnippets.org/2010/03/anonymouses-anonymous.html
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Jul 14, 4:50 pm, Zortag zor...@rcn.com wrote:
I'm pretty new to both JavaScript and Prototype, but have been
programming for over 30 years, and so this one is causing me to tear
out what little hair I have left. Basically, I can't seem to figure
out what is wrong when I move a function that works outside of a class
into a class, it is a very simple function, just wrap a piece of text
in double-quotes. But when called from within a class, the script
blows up and dies. I'm using Firefox, Firebug does see that the class
has the item and that it is a function; but the script dies as if it
could not find the function. The JavaScript console remains empty.
Why does the function quotes (within the class) fail when the exact
same function dquote (outside the class) works fine. I figure it's
something simple but it has eluded me.
html
head
script src=../prototype.js type=text/javascript/script
/head
body
script type=text/javascript
var printp = function( strStr ) { document.write( p + strStr
+ /p ); };
var dquote = function( strStr ) { return \ + strStr +
\; };
printp( Begin Test! );
printp( Test 1: + dquote( 'test 1' ) );
var Test_01 = Class.create( {
initialize: function( strName ) {
this.name = String( strName );
},
quotes: function( strStr ) { return \ + strStr +
\; },
doc_name: function() { return quotes( this.name ); }
});
var test_02 = new Test_01( 'test' );
printp( Test 2: \ + test_02.name + \ );
printp( Test 3: + test_02.doc_name() );
printp( End Test! );
/script
/body
/html
--
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: Effect.appear doesn't function correctly when inside a function
Hi,
Think of the event handler as a function. What's the difference
between these two functions?
function handler1() {
checkLogin();
}
function handler2() {
Effect.BlindDown('error');
return false;
}
Right -- in the first one, you're not returning anything, and so the
default action continues. Just add a return:
input type=image src=images/login2.png id=submit
onclick=return checkLogin() /
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Jul 12, 6:15 pm, Silvershaft samppalehtonenle...@gmail.com wrote:
I got a little problem with using the Effect.appear function, if I put
it like this
function checkLogin()
{
Effect.BlindDown('error'); return false;
}
It works crap that way, I have to click the button two times to make
the effect come, but if I put the text right inside the onClick
function it works flawlessly what is the difference of these actually?
input type=image src=images/login2.png id=submit
onclick=checkLogin() /
input type=image src=images/login2.png id=submit
onclick=Effect.BlindDown('error'); return false; /
I am beginner with this, sorry..
--
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: Help needed, its got to be simple
Thanks, TJ. Especially for the explanation and the pointers, that
this is not automatic clears up a lot.
On Jul 15, 5:41 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Why does the function quotes (within the class) fail when the exact
same function dquote (outside the class) works fine.
The function's fine; what's happening is that you're trying to use an
undefined symbol (in `doc_name`, `quotes` is undefined). `this` is
*never* implicit in JavaScript the way it is in some other languages,
you have to write it explicitly.
You could fix it by adding this.:
doc_name: function() { return this.quotes( this.name ); }
...but since `quotes` doesn't need access to any of the instance
properties, there's no reason to put it on the object at all. I'd
probably use a closure instead and make it just a function within the
closure:
var Test_01 = (function() {
function quotes( strStr ) {
return \ + strStr + \;
}
return Class.create( {
initialize: function( strName ) {
this.name = String( strName );
},
doc_name: function() { return quotes( this.name ); }
});
})();
There, I've wrapped up your Class.create call inside an anonymous
function (called a scoping function) and immediately called the
function. `quotes` ends up being in scope for any code inside the
scoping function, but out of scope for any code outside of it. It
makes `quotes` similar to a private class method in class-based
systems, although the mechanism at work (closures) is rather more
powerful than that. More on closures
here:http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html
I'd also steer away from using anonymous functions other than as
scoping functions (all of the functions in your Test_01 class are
anonymous); more
here:http://blog.niftysnippets.org/2010/03/anonymouses-anonymous.html
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / comwww.crowdersoftware.com
On Jul 14, 4:50 pm, Zortag zor...@rcn.com wrote:
I'm pretty new to both JavaScript and Prototype, but have been
programming for over 30 years, and so this one is causing me to tear
out what little hair I have left. Basically, I can't seem to figure
out what is wrong when I move a function that works outside of a class
into a class, it is a very simple function, just wrap a piece of text
in double-quotes. But when called from within a class, the script
blows up and dies. I'm using Firefox, Firebug does see that the class
has the item and that it is a function; but the script dies as if it
could not find the function. The JavaScript console remains empty.
Why does the function quotes (within the class) fail when the exact
same function dquote (outside the class) works fine. I figure it's
something simple but it has eluded me.
html
head
script src=../prototype.js type=text/javascript/script
/head
body
script type=text/javascript
var printp = function( strStr ) { document.write( p + strStr
+ /p ); };
var dquote = function( strStr ) { return \ + strStr +
\; };
printp( Begin Test! );
printp( Test 1: + dquote( 'test 1' ) );
var Test_01 = Class.create( {
initialize: function( strName ) {
this.name = String( strName );
},
quotes: function( strStr ) { return \ + strStr +
\; },
doc_name: function() { return quotes( this.name ); }
});
var test_02 = new Test_01( 'test' );
printp( Test 2: \ + test_02.name + \ );
printp( Test 3: + test_02.doc_name() );
printp( End Test! );
/script
/body
/html
--
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.
