Our webs display a lot of text. They''re about readability more than imagery, so the readable text-width is a design consideration that figures into our layouts perhaps more so than other layouts. Displays are becoming so wide (1600px and wider), the challenge of designing the CSS / JavaScript to provide an "optimal" width of readable text is daunting. It''s somewhere around 40ems, but it varies by reader, and using min-width, max-width to calculate the content DIV width according to the ems size can be incorrect. Browsers settings of text-size sometimes change the displayed text size without altering the DOM ems size, so a DHTML min/max width approach based on ems doesn''t work well cross-browser, and it can be inaccurate in those that do support it. A layout with the following characteristic might be a good alternative: (this is where prototype.js comes in) If the right border of the content div were visible and provided a hover-effect, the user could click and drag the right border to increase or decrease the reading width. This border element should be about 3 to 6px wide. I assume it''s not possible to hover on the right 6px of the content DIV (am I wrong?), so another element, 6px wide along the right vertical border of the content DIV is needed. I''m struggling to conceive a reliable cross-browser element that will mimic a border of the content DIV. I don''t see any way to float an element against the right border of a content DIV and have it make the same height of the content DIV. The best I can come up with (which isn''t too bad) is tables. The right cell could be 6px wide. Maybe this is the solution. Before I run off and build a mock-up, is there any precedent to this? Any suggestions or comments on the approach appreciated. Sam
You want to look into handles. For the the "same height" thing: On your container div, set overflow:hidden, for the "border" do this position:absolute;right:0;top:0;width:5px;height:100000px to a div that''s a child of the container. Bit hacky, but should work fine, not sure of the Draggable, though. But it''s a start. Best, Thomas Am 17.08.2006 um 16:48 schrieb Sam:> Our webs display a lot of text. They''re about readability more than > imagery, so the readable text-width is a design consideration that > figures > into our layouts perhaps more so than other layouts. > > Displays are becoming so wide (1600px and wider), the challenge of > designing > the CSS / JavaScript to provide an "optimal" width of readable text is > daunting. It''s somewhere around 40ems, but it varies by reader, > and using > min-width, max-width to calculate the content DIV width according > to the ems > size can be incorrect. Browsers settings of text-size sometimes > change the > displayed text size without altering the DOM ems size, so a DHTML > min/max > width approach based on ems doesn''t work well cross-browser, and it > can be > inaccurate in those that do support it. > > A layout with the following characteristic might be a good > alternative: > (this is where prototype.js comes in) > > If the right border of the content div were visible and provided a > hover-effect, the user could click and drag the right border to > increase or > decrease the reading width. This border element should be about 3 > to 6px > wide. > > I assume it''s not possible to hover on the right 6px of the content > DIV (am > I wrong?), so another element, 6px wide along the right vertical > border of > the content DIV is needed. I''m struggling to conceive a reliable > cross-browser element that will mimic a border of the content DIV. > I don''t > see any way to float an element against the right border of a > content DIV > and have it make the same height of the content DIV. The best I > can come up > with (which isn''t too bad) is tables. The right cell could be 6px > wide. > Maybe this is the solution. > > Before I run off and build a mock-up, is there any precedent to > this? Any > suggestions or comments on the approach appreciated. > > Sam > > > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs-- Thomas Fuchs wollzelle http://www.wollzelle.com questentier on AIM madrobby on irc.freenode.net http://www.fluxiom.com :: online digital asset management http://script.aculo.us :: Web 2.0 JavaScript http://mir.aculo.us :: Where no web developer has gone before
Sam wrote:> If the right border of the content div were visible and provided a > hover-effect, the user could click and drag the right border to increase or > decrease the reading width. This border element should be about 3 to 6px > wide. > ... > Before I run off and build a mock-up, is there any precedent to this? Any > suggestions or comments on the approach appreciated.There''s Dojo''s SplitContainer. For a demo, go to http://dojotoolkit.org/ , click on "see it in action", then choose "Layout Widgets". The site is ajaxified, so I can''t give you a direct URL. -- We develop, watch us RoR, in numbers too big to ignore.
Talk about beauty and the beast. :) -Thomas Am 17.08.2006 um 20:05 schrieb Mark Reginald James:> The site is > ajaxified, so I can''t give you a direct URL.
I''ve got my first draft of a draggable content-width control. The
control
is a table cell 4px wide styled to appear like the right-border of the
content element.
I borrowed code sequences from the prototype windows-class add-in which also
supports dragging. There are a few new things I don''t understand.
First
among them is Event.stop() which calls Event.preventDefault(). I don''t
see
this in prototype.js. Anyone know what this is? Cancelling the bubbling I
understand.
Here''s my first hack.
I have completely faked the new width calculation using a hard-coded value
iWidthOffset, not knowing exactly how to get the width = function(
xPosition, contentDivLeftOffset).
Any comments, simplifications, clarifications or haiku appreciated.
var resize = {
iWidthOffset: 227, // Magic number which makes width calculation
come out right. Greater than the offset of the left side of the DIV.
mouseDown: function (event) {
// Once clicked, the hand is quicker than the code, so watch
the event on the entire document
Event.observe(document, "mouseup", resize._endDrag, false);
Event.observe(document, "mousemove", resize._updateDrag,
false);
// Stop selection while dragging. I assume this turns off
selection of body elements during drag?
document.body.ondrag = function () { return false; }; // I
have no idea
document.body.onselectstart = function () { return false; };
// I have no idea
Event.stop(event); // Not sure why this is needed.
},
_endDrag: function (event) {
// Mouse click is over. Stop the drag
Event.stopObserving(document, "mouseup", resize._endDrag,
false); // Kill the drag stop event handler
Event.stopObserving(document, "mousemove",
resize._updateDrag, false); // Kill the drag handler
// Store new location/size if need be
// this._saveCookie()
Event.stop(event); // Stop bubbling ?
// Restore selection
document.body.ondrag = null; // I have no idea
document.body.onselectstart = null; // I have no idea. I
guess this is enabling text-selection as a default.
},
_updateDrag: function (event) {
var dx = Event.pointerX(event); // Current x position of
mouse in the viewable area or document body? I don''t know which.
// Resize case, update width/height
$(''maincontent'').setStyle( {''width'':
parseInt(dx) -
resize.iWidthOffset + ''px''} ) ; // All this, just to do this
one statement.
Event.stop(event); // No bubbles please.
},
mouseOver: function (event) {
$(''contentresizecell'').addClassName(''contentresizecell-hover'');
// Add a
visible hover on this cell
},
mouseOut: function (event) {
$(''contentresizecell'').removeClassName(''contentresizecell-hover'');
// Remove
the visible hover on this cell
}
}
On Aug 18, 2006, at 5:54 AM, Sam wrote:> Any ... haiku appreciated.Javascript trouble? Ask the mailing list gurus-- It''s Scriptaculous.> I borrowed code sequences from the prototype windows-class add-in > which also > supports dragging. There are a few new things I don''t understand. > First > among them is Event.stop() which calls Event.preventDefault(). I > don''t see > this in prototype.js. Anyone know what this is? Cancelling the > bubbling I > understand.From Prototype: Event.stop = function(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; } } event.preventDefault() is a DOM event function equivalent to setting event.returnValue = false in IE or putting "return false;" in an inline event handler. It prevents the browser''s default action (e.g. form submission, following the link). TAG
Sam wrote:> Before I run off and build a mock-up, is there any precedent to this? Any > suggestions or comments on the approach appreciated.http://blog.craz8.com/articles/tag/prototype http://dev.rubyonrails.org/ticket/3660 http://recidive.com/sandbox/resizable/test.html This zip file was supplied by Kazuki Ohta to rails-spinoffs on 04/20/2006. I''m not familiar with the code and in no way is this an endorsement of any kind; it just seems relevant to what you''re trying to accomplish. His message was: I''ve rewrite resizable.js with using more prototype.js functionality (see attached file). I''m not a expert of prototype.js, so please check the contents if possible. * ChangeLog - provide is_vertical, is_horizontal, onResizeStart, onResizeEnd options - rewrite event handling with prototype.js functionality - now no need to include CSS, style is described in JavaScript I''ve not tried to use scropt.aculo.us''s Draggables. I didn''t notice the merit of using Draggables, does anyone describe its merit compared to prototype.js''s event handling functionality? Thanks in advance. Kazuki. Todd --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---