• Listen to a special audio message from Bill Roper to the Hive Workshop community (Bill is a former Vice President of Blizzard Entertainment, Producer, Designer, Musician, Voice Actor) 🔗Click here to hear his message!
  • Read Evilhog's interview with Gregory Alper, the original composer of the music for WarCraft: Orcs & Humans 🔗Click here to read the full interview.

Width of Jass Textbox

Status
Not open for further replies.
Level 14
Joined
Jun 27, 2008
Messages
1,325
I never understood why the Jass Textboxes dont use the full width of the page. Having to scroll in both vertical and horizontal direction to read jasscode is a complete pain in the ass.

Example:
JASS:
library Track /* v3.0.2.1
*************************************************************************************
*
*   Manages trackable objects, allowing for easy event registrations, data retrieval,
*   and adds the capability of retrieving which player interacted with the trackable.    
*
*************************************************************************************
*
*   */uses/*
*   
*       */ Table /*       hiveworkshop.com/forums/jass-functions-413/snippet-new-table-188084/
*
************************************************************************************
*
*   SETTINGS
*/
globals
    private constant integer PLATFORM = 'Otip'
endglobals
/*
************************************************************************************
*
*    Functions
*
*        function CreateTrack takes string modelPath, real x, real y, real z, real facing returns Track
*            - Creates a trackable of "modelPath" at the coordinates ( x, y, z ) with 
*            - "facing" in degrees.
*        function CreateTrackForPlayer takes string modelPath, real x, real y, real z, real facing returns Track
*            - Same as the function above, except it will create it for only one player.
*
*        function RegisterAnyClickEvent takes code c returns nothing
*            - The code will be executed every time a trackable is clicked.
*        function RegisterAnyHoverEvent takes code c returns nothing
*            - The code will be executed every time a trackable is hovered.
*        function RegisterClickEvent takes Track obj, code c returns nothing
*            - The code will be executed every time a trackable of the instance
*            - "obj" is clicked.
*        function RegisterHoverEvent takes Track obj, code returns nothing
*            - The code will be executed every time a trackable of the instance
*            - "obj" is hovered.
*
*        function EnableTrackInstance takes Track obj, boolean flag returns nothing
*            - If an instance is enabled, it will enable its events to fire.
*            - All instances are enabled by default.
*        function IsTrackInstanceEnabled takes Track obj returns boolean
*            - Returns whether or not an instance has its events enabled.
*
*    Event Responses
*
*        function GetTriggerTrackInstance takes nothing returns Track
*            - Returns the Track instance that had a player interaction.
*        function GetTriggerTrackable takes nothing returns trackable
*            - Returns the trackable object that had a player interaction.
*        function GetTriggerTrackablePlayer takes nothing returns player
*            - Returns the player that had interacted with the trackable object.
*
*******************************************************************

Why?

(Credits to PurgeandFire for the code :p)

€: oh and when ur working on that stuff you could also add wurst tags :>
 
Level 23
Joined
Apr 16, 2012
Messages
4,041
I disagree on forcing the Jass box to be as wide ad the longest line within Jass tags

Try opening 3000x3000 image in forum and you will see why

If you still dont get it, not every one has fatass 1900+ reaolutions wide screen(I have 1680 or w/e on max resolution) and if it just so happens that the tag is wider than 1600 - width of the left side and the columns, than you will not have to scroll the Jass block, but the whole page

Idc if it gets resizable, but if it gets resizable, you could also add button to copy all content eithin given Jass tags, its annoying to press left mouse button and scroll down just to get Jass snippet/system
 
Level 23
Joined
Apr 16, 2012
Messages
4,041
yes, but editor's box has changable size, and up to around 1100 pixels, if you are on fatass monitor, maybe even more, while this has, like muzzel said, maybe 640 px, so you can have around 2times longer lines inside editor than on hive
 
If you can test and suggest better CSS for that box I am all in.

Just make the width like 90% or something.

CSS:
div.jassblock{
    text-align:left; 
    margin:0px; 
    color:#000; 
    padding:$stylevar[cellpadding]px; 
    width:90%; 
    height:{$blockheight}px; 
    overflow:auto; 
    background-color:#fff; 
    border:1px solid black;
}
 

peq

peq

Level 6
Joined
May 13, 2007
Messages
171
If you can test and suggest better CSS for that box I am all in.

You could just remove the max-width: 640px; from the two divs.
Then set width: calc(100vw - 450px); for the inner div. That is css3 (see calc and vw). For older browsers you could keep a width of 640px as a fall-back.



HTML:
<div style="margin: 5px 20px 20px; font-weight: normal; font-style: normal;">
    <div style="margin-bottom:2px; text-align:left;" class="smallfont">
        Jass: 
        <img onclick="var pre = this.parentNode.parentNode.getElementsByTagName('pre')[0]; if (pre.style.height == '2px') { pre.getElementsByTagName('span')[0].style.display = ''; pre.style.height = '52px'; pre.style.padding = '6px'; this.src = 'http://www.vbadvanced.com/forum/images/buttons/collapse_tcat.gif'; this.setAttribute('alt', 'Collapse'); this.setAttribute('title', 'Collapse'); } else { pre.getElementsByTagName('span')[0].style.display = 'none'; pre.style.height = '2px'; pre.style.padding = '0px 6px'; this.src = 'http://www.vbadvanced.com/forum/images/buttons/collapse_tcat_collapsed.gif'; this.setAttribute('alt', 'Expand'); this.setAttribute('title', 'Expand'); }" style="vertical-align:middle;" type="button" src="http://www.vbadvanced.com/forum/images/buttons/collapse_tcat.gif">
    </div>
    <div style="text-align: left; margin: 0px; color: rgb(0, 0, 0); padding: 6px; height: 52px; overflow: auto; background-color: rgb(255, 255, 255); border: 1px solid black; white-space: nowrap; width: calc(100vw - 450px);"><span><div style="font-family:monospace;" class="vjass">CODE HERE</div></span></div>
</div>

PS: Seems to work only in firefox, chrome is bugged :/
 

peq

peq

Level 6
Joined
May 13, 2007
Messages
171
Yeah, media queries are probably the best solution then. I don't like them so much, because it's always just a fixed number of resolutions which are supported. Another solution would be to set the width using javascript, but that is also ugly. Still, all solutions are better than the current 640px box :D
 
First off, you can set default-styles for all the non-thought-off-resolutions, that's exactly what you are doing with the current CSS anyway.

Secondly, if removing max-width kills the site if you have long-text you should change the workflow or childs width. This way it will be 100% to the parent and still have normal word-break.
 
This discussion is absolutely atrocious.

Code tag snippets have a small width because most coding standards dictate maximum width between 80 and 100 characters for any given line

Don't use a % based width. That is NOT responsible web design.

Indeed, for jass where lines are sometimes unavoidably longer, a wider width to accommodate ~120 characters could be done like:

Code:
.vjass-box{
    max-width: 800px; //25% increase for large monitors, no issues for small ones
}

Edit: PS, your vjass class doesn't use width attributes, it's being put in a parent div that has a 640px limit whose style is being computed on an individual basis (technically bad). Let me know if you'd like me to make this work with the existing code.
 
You should probably use 120em, not pixels

Why? They're both abstract measurements. If you really want the box to be a width in font-size units, go ahead - but if you're doing it because you think em is somehow more accurate than px, forget it. See http://omnicognate.wordpress.com/20...angular-measurement-and-it-is-not-non-linear/ for more

, but I don't care about "most coding standards", there is no reason for code boxes not to be wide enough when everything else on the page is.

How about the fact that "most writing standards" also dictate margins? Or the fact that web design professionals recommend a maximum width for all text containers?

Do you seriously believe the flowing width of hiveworkshop forums is the easiest way to read text, and indeed the best?
 
Yes, I prefer most of the screen being filled with text rather than a black void (or useless images, borders, etc.)

For some reason the experts in readability within the realm of web design, document typesetting, and programming disagree with you.

Perhaps you like it because it feels useful instead of actually considering what's more readable.
 
Level 14
Joined
Jun 27, 2008
Messages
1,325
@Cokemonkey

Blabla coding standards, you can try to follow them when you write your next jass library. But right now there are a shitload of vJass resources on this website which just dont fit into the textbox. I dont care what experts about webdesign say, when i read a text and i have to scroll from the left to the right and back for every single line it really pisses me off.

really, a wall of text is one of the worst things to see in a computer screen...

Except if that wall of text is exactly what you want to read. Let me remind you of an example with a fairly successfull history, its called "book". Its a device that displays text and which doesnt require scrollbars. You only need to interact with the device when you finshed reading a full page (not after every single line).
 
I don't like that much. Can't we have a code that flows with the width of its container and scrolls if its too long?

.... That's precisely what it already does, and my suggestion wouldn't change that.

Edit: See: http://i.imgur.com/aJjzsFg.png

Edit2: The 640px two lines above would also need to be changed
 

peq

peq

Level 6
Joined
May 13, 2007
Messages
171
So here would be some css code for using media queries:

JASS:
.codebox {
	margin:20px; 
	margin-top:5px; 
	font-weight: normal; 
	font-decoration: none; 
	font-style: normal; 
	/** default max width */
	max-width:640px;
}

.codebox_inner {
	text-align:left; 
	margin:0px; 
	color:#000; 
	padding:6px;
	max-height:516px; 
	overflow:auto; 
	background-color:#fff; 
	border:1px solid black; 
	white-space: nowrap;
}

/* media queries for most common resolutions */
@media (min-width: 1000px) { .codebox { max-width: 800px; }}
@media (min-width: 1200px) { .codebox { max-width: 900px; }}
@media (min-width: 1550px) { .codebox { max-width: 1250px; }}
@media (min-width: 1900px) { .codebox { max-width: 1600px; }}

/** totally dynamic for good browsers (Firefox :P) */
.codebox { 
	max-width: calc(100vw - 450px); 
	min-width: 400px;
}

Html example:
JASS:
<div class="codebox">
    <div class="smallfont" style="margin-bottom:2px; text-align:left;">
        Jass: 
        <img src="jassbox_files/collapse_tcat_002.gif" type="button" style="vertical-align:middle;" onclick="var pre = this.parentNode.parentNode.getElementsByTagName('pre')[0]; if (pre.style.height == '2px') { pre.getElementsByTagName('span')[0].style.display = ''; pre.style.height = '516px'; pre.style.padding = '6px'; this.src = 'http://www.vbadvanced.com/forum/images/buttons/collapse_tcat.gif'; this.setAttribute('alt', 'Collapse'); this.setAttribute('title', 'Collapse'); } else { pre.getElementsByTagName('span')[0].style.display = 'none'; pre.style.height = '2px'; pre.style.padding = '0px 6px'; this.src = 'http://www.vbadvanced.com/forum/images/buttons/collapse_tcat_collapsed.gif'; this.setAttribute('alt', 'Expand'); this.setAttribute('title', 'Expand'); }">
    </div>
    <div class="codebox_inner"><span><div class="vjass" style="font-family:monospace;"><span style="font-weight: bold">library</span> Blub</div></span></div>
</div>
 
Level 23
Joined
Apr 16, 2012
Messages
4,041
Im happy you put html to Jass tags, I can actually read it :D

I have one question tho, is there 1600 pixels on 1900+ monitor for the messages? because there are the borders and the space for avatar is also not fixed, it may be wider when users with long names make posts
 

peq

peq

Level 6
Joined
May 13, 2007
Messages
171
That's literally the shittiest example I've ever seen of the media directive.

If you want the box to take up almost the whole parent, you use margins, not a series of discrete resolution cases.

I think it is the shortest solution, but I would like to learn a better way to do it.

The problem is, that the container does not have a defined width and uses tables, so when there is a big box in the container, the container will just stretch out to make place. If you add margins it will just stretch out more instead of making the box smaller. If you wanted to fix this, you would have to remove the tables or change the table-style to display:block or something like that. The cleanest solution would probably be to replace all the tables with modern Html, but that would require much more effort.

Here is a jsfiddle showing the problem with tables: http://jsfiddle.net/K6ptD/
 
I understand now why you say it's the shortest solution. You could make all table elements block style (or better yet use divs instead of tables, which I agree with)

JASS:
    table, tr, tbody, td{
        display: block !important;
    }

But it will introduce some visual changes that would need to be repaired if undesired.

Also, simply increasing to max-width: 800 instead of a 640 fixed width would therefore cause problems on screens below 800px width (indeed, the current version already causes issues on screens below 640px width)

Given the fact that the forums are already using terrible code in terms of compliance and performance, I can't actually recommend against using the media directive (it won't make any difference, all things considered)

Still, I would use min-width 800px. Bigger width just encourages using more characters per line.
 

Ralle

Owner
Level 79
Joined
Oct 6, 2004
Messages
10,183
Yep, display: block is not an option here. The reason is that when doing that you cannot have two boxes next to each other always have the same height. That is only possible with tables. That is the reason why with Hive 2 I have done it like this:
<div class="post">
<div class="profile"></div>
<div class="message"></div>
</div>
.profile and .message don't have backgrounds, but .post does. A background that consists of two pictures. One column in the left (for .profile) and a repeatable one for the rest (.message). This allows for that sort of thing.
Anyway. If I change this to 800px, I think it will become too wide. Not everybody wants their browser to be 100% width of the display, I know I don't. Text is completely unreadable if you have that wide of a browser. I know some people will disagree (GhostWolf), but I don't think I'd like to increase the constant. If we can get something flowing it'd be better.
 

Rui

Rui

Level 41
Joined
Jan 7, 2005
Messages
7,550
Isn't it possible to just make it stretch to the right as far as it can before it overlaps the post border?

For some reason the experts in readability within the realm of web design, document typesetting, and programming disagree with you.
I too didn't like the fixed width when I first met the concept, but I've grown to appreciate it. It's just a matter of getting used to it. Background images are pleasing for visuals if they're not too invasive of the sight.
 
Status
Not open for further replies.
Top