[Proto-Scripty] Re: Using the appear effect with IE7 yields crappy-looking text
hey,
Yes i looked at it [alpher.js]
Event.observe(window, 'load', page_loaded_alpha);
function page_loaded_alpha(evt) {
if($('firstTimeAlphaLink')) {
$('firstTimeAlphaLink').onclick=show_first_time_alpha_form;
}
if($('alphaRegisterBack')) {
$('alphaRegisterBack').onclick=show_initial_alpha_page;
}
}
function show_first_time_alpha_form() {
$('firstTimeAlphaLink').onclick=;
// $('addEmailToWaitListForm').removeClassName
('paddedAddEmailToWaitListForm');
// Effect.Fade('initialFormsArea', { duration: 0.9, queue: 'front' });
// Effect.Appear('alphaRegistrationFormsArea', { duration: 0.9, queue:
'end' });
// $('alphaRegistrationFormsArea').style.opacity=1;
$('alphaRegisterBack').onclick=show_initial_alpha_page;
$('initialFormsArea').style.display = 'none';
$('alphaRegistrationFormsArea').style.display = 'block';
}
function show_initial_alpha_page() {
$('alphaRegisterBack').onclick=;
// Effect.Fade('alphaRegistrationFormsArea', { duration: 0.9, queue:
'front' });
// Effect.Appear('initialFormsArea', { duration: 0.9, queue: 'end' });
// $('initialFormsArea').style.opacity=1;
// $('addEmailToWaitListForm').addClassName
('paddedAddEmailToWaitListForm');
$('firstTimeAlphaLink').onclick=show_first_time_alpha_form;
// //$('firstTimeAlphaLink').style.display=none;
// //$('firstTimeAlphaLink').style.display=block;
// $('firstTimeAlphaLink').style.opactiy=1;
$('alphaRegistrationFormsArea').style.display = 'none';
$('initialFormsArea').style.display = 'block';
}
initially did the above eliminating one issue after another, at start
just showing next div with minimum 'block' / 'none'. i think the
problem is with the effect function from scriptaculo.
analyzing it now. But creating a basic fade in/ fade out function is
not hard if resolving the issue might take long: but still infinate
love for scriptaculo now we try making it better.
Also why have:
$('firstTimeAlphaLink').style.display=none;
$('firstTimeAlphaLink').style.display=block;
just curious...
[be patient].
Isaac
javamaasai, Africa, Kenya
On Feb 19, 12:39 am, jack7890 jackgr...@gmail.com wrote:
Hi,
I'm using the scriptaculous fade and appear effects together to swap
in new content in an area of my website. So first I call the fade
effect to remove the old content, and then I call the appear effect to
bring in the new content.
This works perfectly in Firefox, but in IE7, the text in the newly-
appeared region looks terrible. The problem is particularly bad for
italicized text.
I've searched around online for a solution to this, and some people
indicated that setting a background color for the wrapper div would
solve the problem. But I have tried this and it does not help.
Here is an example of what I'm talking
about:http://www.scribnia.com/main/alphawelcome
To see the problem, using IE7, click the First time visiting as an
alpha user? Create your account. link. Then click the back
button. You will see that the new text in IE7 looks terrible
(particularly the italicized text).
Can anyone lend any advice? It would be much appreciated. I'm
copying the JS I'm using below, in case that is helpful:
Event.observe(window, 'load', page_loaded_alpha);
function page_loaded_alpha(evt) {
if($('firstTimeAlphaLink')) {
$('firstTimeAlphaLink').onclick=show_first_time_alpha_form;
}
if($('alphaRegisterBack')) {
$('alphaRegisterBack').onclick=show_initial_alpha_page;
}
}
function show_first_time_alpha_form() {
$('firstTimeAlphaLink').onclick=;
$('addEmailToWaitListForm').removeClassName
('paddedAddEmailToWaitListForm');
Effect.Fade('initialFormsArea', { duration: 0.9, queue: 'front' });
Effect.Appear('alphaRegistrationFormsArea', { duration: 0.9, queue:
'end' });
$('alphaRegistrationFormsArea').style.opacity=1;
$('alphaRegisterBack').onclick=show_initial_alpha_page;
}
function show_initial_alpha_page() {
$('alphaRegisterBack').onclick=;
Effect.Fade('alphaRegistrationFormsArea', { duration: 0.9, queue:
'front' });
Effect.Appear('initialFormsArea', { duration: 0.9, queue: 'end' });
$('initialFormsArea').style.opacity=1;
$('addEmailToWaitListForm').addClassName
('paddedAddEmailToWaitListForm');
$('firstTimeAlphaLink').onclick=show_first_time_alpha_form;
$('firstTimeAlphaLink').style.opactiy=1;
}
--~--~-~--~~~---~--~~
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
[Proto-Scripty] Re: Multiple droppables in overflowed div!
Dear David and All,
Still a newbie in the group, humble apologies again! Thank you for
taking time to respond to my issue, i'm also looking inside the class
to see if there's any thing i can change to make it work. Taking
javascript programming to new frontier in Africa creating, free
javascript tutorials for students here. was just pressured with time
since i'm free and soon to go back to work schedule.
Hope to soon become pro-javascriptor, senior scriptaculous african
Rep, will spread this good deed also by helping others in the forum.
Again humble apologies for rude way of problem presentation.
Thanks
Isaac
On Feb 18, 2:22 pm, david david.brill...@gmail.com wrote:
Hi Isaac,
As I say in your previous post, modify the for loop and you will have
some gain !
For the problem of the overflowed DIV, I think it's an error in
Scriptaculous, because it did not take the scrolled offset to parent.
So you could look at this inside the class.
if some guys around could confirm, I personnally thing it is a bug ??
I will be very curious, why drop inside a scrollable div, this is not
standard in design ??
And please don't repost, people take on there personnal time to help
others, and the way you present the problem, it seems that you want us
to do your (paid?) job !!
--
david
On 17 fév, 12:20, david david.brill...@gmail.com wrote:
Hi javamaasai,
try this portion of code to create droppable (instead of the FOR
loop):
$R(1,4).each(function(i){
Droppables.add('droppable_demo'+i, {
accept: 'draggable',
hoverclass: 'hover',
onDrop: function(){
alert(i);
$('droppable_demo'+i).highlight();
}
});
});
At this moment, you will see that there is not only the droppable 1
that accept drops; but droppable 1 2 !
This an an evolution ??
But for the other problem you could still not drop on droppable 3
4 !!
I didn't really know what it is, but you could see at the function
cumulativeScrollOffset().
I think it's because the droppable don't know that the element have
scrolled and always take first element??
btw, to drop on a scrollable zone is, to my opinion, not a good
practice ! But you should have a good reason !
--
david
On 16 fév, 15:09, javamaasai ikhag...@gmail.com wrote:
Hey All,
I'm creating a small online traditional Shop, where tourists can buy
African traditional goods. These include things like beads, Warrior
spears clothing e.t.c My web application has pictures of african items
draggables in an overflowed div and droppables pictures of visit
locations where one.
Issue is when multiple droppables are put in overflowed div and
scrolled, they kind of virtually remain fixed, i.e. droppable3 scrolls
to position of droppable1 but on dropping on droppable3 the active
drop area is for droppable1!
Here is small sample code test code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/...;
html xmlns=http://www.w3.org/1999/xhtml;
head
script src=javascript/prototype.js type=text/javascript
script src=javascript/scriptaculous.js type=text/
javascript
/script
/head
body
style type=text/css
div#droppable_container {
margin-bottom: 30px;
height: 300px;
width: 500px;
background: black;
padding: 10px;
}
div#droppable_demo {
width: 160px;
height: 120px;
font-size: 15px;
background: #ff;
border: 5px solid #ccc;
text-align: center;
float: right;
}
.droppable_demo {
width: 100px;
height: 100px;
font-size: 15px;
background: #ff;
border: 5px solid #ccc;
text-align: center;
float: left;
margin: 5px;
}
#draggable_demo {
background: yellowgreen;
margin: 5px;
border: 3px solid green;
width: 100px;
height: 100px;
cursor: move;
font-size: 15px;
float: left;
}
.spaceHolder {
background: orange;
margin: 5px;
border: 3px solid orangered;
width: 100px;
height: 100px;
font-size: 15px;
float: left;
}
div#droppable_demo.hover {
border: 5px
[Proto-Scripty] Re: Multiple droppables in overflowed div!
Dear David, All
Yes i do have a good reason, imagine you have multiple baskets which
can be for example type of rooms in a hotel e.g average one bedroom,
master sweet or a case where a university has multiple students. For
easier management of resources [hotel equipment or student courses]
the administrator can drag drop. However i'm open to criticism and
suggestions on how to have multiple scrollable baskets in a div or
otherwise.
i believe as complex it might be it can be good example for fellow
colleagues, students hoping to forster creating of remarkable Desktop
like javascript, web based applications. Checking protype.js and
dragdrop.js to better understand this.
Thanks you for your time.
Isaac
javamaasai
On Feb 17, 2:20 pm, david david.brill...@gmail.com wrote:
Hi javamaasai,
try this portion of code to create droppable (instead of the FOR
loop):
$R(1,4).each(function(i){
Droppables.add('droppable_demo'+i, {
accept: 'draggable',
hoverclass: 'hover',
onDrop: function(){
alert(i);
$('droppable_demo'+i).highlight();
}
});
});
At this moment, you will see that there is not only the droppable 1
that accept drops; but droppable 1 2 !
This an an evolution ??
But for the other problem you could still not drop on droppable 3
4 !!
I didn't really know what it is, but you could see at the function
cumulativeScrollOffset().
I think it's because the droppable don't know that the element have
scrolled and always take first element??
btw, to drop on a scrollable zone is, to my opinion, not a good
practice ! But you should have a good reason !
--
david
On 16 fév, 15:09, javamaasai ikhag...@gmail.com wrote:
Hey All,
I'm creating a small online traditional Shop, where tourists can buy
African traditional goods. These include things like beads, Warrior
spears clothing e.t.c My web application has pictures of african items
draggables in an overflowed div and droppables pictures of visit
locations where one.
Issue is when multiple droppables are put in overflowed div and
scrolled, they kind of virtually remain fixed, i.e. droppable3 scrolls
to position of droppable1 but on dropping on droppable3 the active
drop area is for droppable1!
Here is small sample code test code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/...;
html xmlns=http://www.w3.org/1999/xhtml;
head
script src=javascript/prototype.js type=text/javascript
script src=javascript/scriptaculous.js type=text/
javascript
/script
/head
body
style type=text/css
div#droppable_container {
margin-bottom: 30px;
height: 300px;
width: 500px;
background: black;
padding: 10px;
}
div#droppable_demo {
width: 160px;
height: 120px;
font-size: 15px;
background: #ff;
border: 5px solid #ccc;
text-align: center;
float: right;
}
.droppable_demo {
width: 100px;
height: 100px;
font-size: 15px;
background: #ff;
border: 5px solid #ccc;
text-align: center;
float: left;
margin: 5px;
}
#draggable_demo {
background: yellowgreen;
margin: 5px;
border: 3px solid green;
width: 100px;
height: 100px;
cursor: move;
font-size: 15px;
float: left;
}
.spaceHolder {
background: orange;
margin: 5px;
border: 3px solid orangered;
width: 100px;
height: 100px;
font-size: 15px;
float: left;
}
div#droppable_demo.hover {
border: 5px dashed orange;
background: #efefef;
}
.droppable_demo.hover {
border: 5px dashed orange;
background: #efefef;
}
#dragContainer {
background: yellow;
border: 5px solid blue;
float: left;
width: 60%;
height: 120px;
overflow: auto; /*This is where the weirdness
happens*/
}
#dropContainer {
background: blue;
border: 5px solid red;
float: left
[Proto-Scripty] Re: Multiple droppables in overflowed div!
Dear David, All, Looked at the Dragdrop.js and prototype, would be nice if one can explain how the droppable is obtained, i presume it might be by pointer position passed also had some revelations in show: function (point, element). Anyway looked at the functional tests [scriptaculous- js-1.8.1/test/functional/dragdrop8_test.html ] and i think i can structure my tutorial like it multiple baskets table cells? Although any resolution achieved regarding my issue is highly welcomed. Thank you. Isaac Khaguli javamaasai ,Africa , Kenya --~--~-~--~~~---~--~~ 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: Multiple droppables in overflowed div!
Dear David, All
Successful, thank you for the tips on browser compatibility issue and
yes [Position.includeScrollOffsets = true;] is the key plus adding
scroll capability of the parent container. Glancing over the posts
with craving of wanting to know more fast, wishing it was possible to
hire you T.J. Crowder as personal tutors and other great minded
javascriptors.
Honoured for the time, now time to take a dive into posts!
Isaac
javamaasai [From the land where the river Nile is a scar on its face,
Africa]
On Feb 18, 6:25 pm, david david.brill...@gmail.com wrote:
About the idea of using table == could be interresting, but IE have
some trouble with it !!!
About usability:
the problem is that while dragging, you should scroll to drop in the
fourth droppable, I personnaly think that people will don't have the
idea to do this even if there is a scrollbar, but I can be wrong.
So instead, I should use an automatic scrolling (perhaps on the onDrag
event fire by the droppabe/Draggable, and detect if your inside the
droppable area, and see where you are inside this droppable area, and
if you are at the bottom of the visible view, just change position to
scroll down automatically.
Just one thing, You could revert your change in scriptaculous, that
works too.
Another point while doing some test (I'm not what I consider a
javascript PRO, so try to learn while helping), with the
Position.includeScrollOffsets set to true, if you are on the Draggable
zone, and the Droppable is scrolled, you could still drop on the first
and second element == Funny. It seems that scriptaculous did not wait
to be on the Droppable area to test if mouse pointer is on a
element !!
--
david
On 18 fév, 16:13, david david.brill...@gmail.com wrote:
Hi Isaac,
I've resolve your problem, I did not have the same version of
scriptaculous as you, but afetr modifying what you change, here is how
it works:
The problem was that the Draggable/Droppable method use
Position.within to verify if the mouse pointer is on an element or
not.
This function could use scrolled offset or not with the parameter:
Position.includeScrollOffsets which is set to false by default, just
apply the change on the for loop to use $R instead as I first
mention.
And set Position.includeScrollOffsets=true
== now it work as you expected.
btw, Don't worry, As I say I do help in this group in my spare time,
but I WANTED it !!!
--
david
On 18 fév, 15:47, david david.brill...@gmail.com wrote:
Hi Isaac,
Hope to soon become pro-javascriptor, senior scriptaculous african
Rep, will spread this good deed also by helping others in the forum.
Again humble apologies for rude way of problem presentation.
Hope I can help you !!!
On 18 fév, 13:23, javamaasai ikhag...@gmail.com wrote:
Dear David and All,
Still a newbie in the group, humble apologies again! Thank you for
taking time to respond to my issue, i'm also looking inside the class
to see if there's any thing i can change to make it work. Taking
javascript programming to new frontier in Africa creating, free
javascript tutorials for students here. was just pressured with time
since i'm free and soon to go back to work schedule.
Hope to soon become pro-javascriptor, senior scriptaculous african
Rep, will spread this good deed also by helping others in the forum.
Again humble apologies for rude way of problem presentation.
Thanks
Isaac
On Feb 18, 2:22 pm, david david.brill...@gmail.com wrote:
Hi Isaac,
As I say in your previous post, modify the for loop and you will have
some gain !
For the problem of the overflowed DIV, I think it's an error in
Scriptaculous, because it did not take the scrolled offset to parent.
So you could look at this inside the class.
if some guys around could confirm, I personnally thing it is a bug ??
I will be very curious, why drop inside a scrollable div, this is not
standard in design ??
And please don't repost, people take on there personnal time to help
others, and the way you present the problem, it seems that you want us
to do your (paid?) job !!
--
david
On 17 fév, 12:20, david david.brill...@gmail.com wrote:
Hi javamaasai,
try this portion of code to create droppable (instead of the FOR
loop):
$R(1,4).each(function(i){
Droppables.add('droppable_demo'+i, {
accept: 'draggable',
hoverclass: 'hover',
onDrop: function(){
alert(i);
$('droppable_demo'+i).highlight();
}
});
});
At this moment, you will see that there is not only the droppable 1
that accept drops; but droppable 1 2 !
This an an evolution ??
But for the other problem you could still
[Proto-Scripty] Multiple droppables in overflowed div!
Hey All,
I'm creating a small online traditional Shop, where tourists can buy
African traditional goods. These include things like beads, Warrior
spears clothing e.t.c My web application has pictures of african items
draggables in an overflowed div and droppables pictures of visit
locations where one.
Issue is when multiple droppables are put in overflowed div and
scrolled, they kind of virtually remain fixed, i.e. droppable3 scrolls
to position of droppable1 but on dropping on droppable3 the active
drop area is for droppable1!
Here is small sample code test code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://
www.w3.org/TR/xhtml1/DTD/...
html xmlns=http://www.w3.org/1999/xhtml;
head
script src=javascript/prototype.js type=text/javascript
script src=javascript/scriptaculous.js type=text/
javascript
/script
/head
body
style type=text/css
div#droppable_container {
margin-bottom: 30px;
height: 300px;
width: 500px;
background: black;
padding: 10px;
}
div#droppable_demo {
width: 160px;
height: 120px;
font-size: 15px;
background: #ff;
border: 5px solid #ccc;
text-align: center;
float: right;
}
.droppable_demo {
width: 100px;
height: 100px;
font-size: 15px;
background: #ff;
border: 5px solid #ccc;
text-align: center;
float: left;
margin: 5px;
}
#draggable_demo {
background: yellowgreen;
margin: 5px;
border: 3px solid green;
width: 100px;
height: 100px;
cursor: move;
font-size: 15px;
float: left;
}
.spaceHolder {
background: orange;
margin: 5px;
border: 3px solid orangered;
width: 100px;
height: 100px;
font-size: 15px;
float: left;
}
div#droppable_demo.hover {
border: 5px dashed orange;
background: #efefef;
}
.droppable_demo.hover {
border: 5px dashed orange;
background: #efefef;
}
#dragContainer {
background: yellow;
border: 5px solid blue;
float: left;
width: 60%;
height: 120px;
overflow: auto; /*This is where the weirdness
happens*/
}
#dropContainer {
background: blue;
border: 5px solid red;
float: left;
width: 60%;
height: 120px;
overflow: auto; /*This is where the weirdness
happens*/
}
h3 {
color: black;
float: left;
}
/style
div id=droppable_container
div id=dragContainer
div class=draggable id=draggable_demo
DRAG ME!!!
/div
!-- space holders added to create overflow --
div class=spaceHolder
Space Holder
/div
div class=spaceHolder
Space Holder
/div
div class=spaceHolder
Space Holder
/div
/div
div id=dropContainer
div class=droppable_demo id=droppable_demo1
Drop here1!
/div
!-- space holders added to create overflow --
div class=droppable_demo id=droppable_demo2
Drop here2!
/div
div class=droppable_demo id=droppable_demo3
Drop here3!
/div
div class=droppable_demo id=droppable_demo4
Drop here4!
/div
/div
/div
h3Draggables in yellow container with blue border,
droppables in blue containter with red border. Drag green box to Drop
here 1, it will change bourder on hover. Then scroll the droppables in
blue until you can see half-botttom of Drop here 1 Drop here 2 and
the last two Drop here 3 4./h3
script type=text/javascript
new Draggable('draggable_demo', {
revert: true,
ghosting: true // this is needed to avoid the
craziness of the overflowed div's scroll bars
});
for (var i = 1; i = 4; i++) {
[Proto-Scripty] Droppables in overflowed div!
Dear Team,
Humble apologies for spamming, but was using the framework to create
an urgent job. forgive me! I have multiple droppables in an overflowed
div, the draggable seem to only remember the offset position of the
droppables. If i move the droppables in the overflowed div there's no
correct drop registration.
Here's My sample code!
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://
www.w3.org/TR/xhtml1/DTD/...
html xmlns=http://www.w3.org/1999/xhtml;
head
script src=scriptaculous/prototype.js type=text/javascript
/script
script src=scriptaculous/scriptaculous.js type=text/
javascript
/script
/script
/head
body
style type=text/css
div#droppable_container {
margin-bottom: 30px;
height: 300px;
width: 500px;
background: black;
padding: 10px;
}
div#droppable_demo {
width: 160px;
height: 120px;
font-size: 15px;
background: #ff;
border: 5px solid #ccc;
text-align: center;
}
.droppable_demo {
width: 100px;
height: 100px;
font-size: 15px;
background: #ff;
border: 5px solid #ccc;
text-align: center;
float: left;
margin: 5px;
}
#draggable_demo {
background: yellowgreen;
margin: 5px;
border: 3px solid green;
width: 100px;
height: 100px;
cursor: move;
font-size: 15px;
float: left;
}
.spaceHolder {
background: orange;
margin: 5px;
border: 3px solid orangered;
width: 100px;
height: 100px;
font-size: 15px;
float: left;
}
div#droppable_demo.hover {
border: 5px dashed orange;
background: #efefef;
}
.droppable_demo.hover {
border: 5px dashed orange;
background: #efefef;
}
#dragContainer {
background: yellow;
border: 5px solid blue;
float: left;
width: 60%;
height: 120px;
overflow: auto; /*This is where the weirdness happens*/
}
#dropContainer {
background: blue;
border: 5px solid red;
float: left;
width: 60%;
height: 120px;
overflow: auto; /*This is where the weirdness happens*/
}
#setter {
background: blue;
border: 5px solid red;
width: 100px;
height: 100px;
position: absolute;
}
h3 {
color: black;
float: left;
}
/style
div id=droppable_container
div id=dragContainer
div class=draggable id=draggable_demo
DRAG ME!!!
/div
!-- space holders added to create overflow --
div class=spaceHolder
Space Holder
/div
div class=spaceHolder
Space Holder
/div
div class=spaceHolder
Space Holder
/div
/div
div id=dropContainer onScroll=add();
div id=container style=top: 0px;
div class=droppable_demo id=droppable_demo1
Drop here1!
/div
!-- space holders added to create overflow --
div class=droppable_demo id=droppable_demo2
Drop here2!
/div
div class=droppable_demo id=droppable_demo3
Drop here3!
/div
div class=droppable_demo id=droppable_demo4
Drop here4!
/div
/div
/div
h3Draggables in yellow container with blue border, droppables in
blue containter with red border. Drag green box to Drop here 1, it
will change bourder on hover. Then scroll the droppables in blue until
you can see half-botttom of Drop here 1 Drop here 2 and the last two
Drop here 3 4./h3
script type=text/javascript
new Draggable('draggable_demo', {
revert: true,
ghosting: true // this is needed to avoid the craziness of
the overflowed div's scroll bars
});
Droppables.add('dropContainer', {
accept: 'draggable',
onHover: function(){
if (!activate) {
makeDroppable();
activate = true;
testerbox.value = activate;
}
}
});
makeDroppable();
function makeDroppable(){
for (var i = 1; i = 4; i++) {
Droppables.add('droppable_demo' + i, {
accept: 'draggable',
hoverclass: 'hover',
onDrop: function(){
$('droppable_demo' + i).highlight();
