Jump to content
MakeWebGames

content specific scroll bars


Lilith

Recommended Posts

OK, so I know that many pages in the mccodes engine can be paginated if they are exesivly long, such as userlist.php and inventory.php, however, I have found that this is not always effective when developing a browser game. I have considered the use of in content scroll bars. Of course this can be over killed very easy, but I'm interested to see how people would insert this into a mccodes game. For example, If I wanted to scroll a left side navigation menu separate from a main content area. This would allow me to use a custom user interface around a mccodes driven game and add some uniqueness in the appearance, separating it from the other games. How would I go about doing this?

I have found that I can create a javascript scroll bar with custom css to make it unique, but I have no idea where to place the code! Header.php, in each separate file, some kind of mixture to this? What do more experienced coders think is the best practice? Lets use userlist.php from the free mods section (don't care if the mod works, just want to use an example of where to place the code for the scroll bar from the free mods available here.) http://makewebgames.io/showthread.php/36303-New-Userlist!?highlight=userlist

If you would place it in the header.php, please describe very well where you would place it, and what code snipets you would use and why.

Keep in mind, the point of this discussion is for the sake of learning how to do something like this, not to bag on someone's coding skills (or the lack of mine).

For those who don't understand what I am talking about .... here is it in digital crayon:

layoutbar.thumb.jpg.7f22bc2976333f2dc0149d96b50cdedd.jpg

Link to comment
Share on other sites

Personally I think scroll bars are ugly as hell.

Try and think about how you can structure your game to reduce the amount of scrolling required. For example the main menu doesnt have to have everything in it. Certain links could be in the header for example.

As for things like the inventory. Split up the page so that equipment items load in the page when the equipment tab is clicked.

Come over to rulerofzu.com have a look if your not sure what I mean.

Link to comment
Share on other sites

The advantages I personally see with scrollbars are:

- Use the mouse wheel to navigate.

- Find easily with a simple / and type.

So even if the scrollbar doesn't always match the style, I still think they can actually be more practicable than having things split over multiple pages. Yet all remains to be seen how you implement things.

And without going to CSS for scrollbars (which sadly doesn't work on other browsers), you can use some JS / JQuery and images to have a nice replacement of the scrollbar and yet keep all the features (mouse wheel scroll and searchable).

Link to comment
Share on other sites

All valid opinions and some great suggestions, however, supposing that one was dead set (I'm not, but for the sake of discussion) on implementing scroll bars,

were is the best place to add the code?

What is the best type of code to use? (Javascript, CSS, HTML, whatever else)

Link to comment
Share on other sites

If you want stylish and cross browser compatible scrollbars? Then use javascript, html, and css. (A bit more coding: 100's of lines depending whether or not a library is used)

If you want a cross browser compatible scrollbar whos style is defined by the browser/os then use just css. (can be done with a minimum of two lines of code)

Link to comment
Share on other sites

Well yeah my point was that styled scrollbars does not work on all browsers and really I dont like them. Personal preference.

Ideally your keeping your css and js code compressed and in separate folders to be included into your code. It was recommended at the top but is now generally recommended at the bottom of the code. To be honest its marginal in speed wise either way.

Link to comment
Share on other sites

Ugh.

The only reason why you would want to put includes and the bottom is if you know it's a slow query.

If it's local it doesn't make any sense as Javascript is executed after the DOM is loaded.

Though, there are very valid and good reasons why stylesheets come before script includes.

As far as I'm concerned, use the head tag. Otherwise, if you want to load/change it at runtime use Javascript.

Link to comment
Share on other sites

If it's local it doesn't make any sense as Javascript is executed after the DOM is loaded.

Last time I checked JavaScript is executed as soon as it is loaded. The only way to have javascript execute After the DOM is loaded is by binding it to an onload event or placing it at the end of the DOM.

Consider the following:

http://pastebin.com/aYM00JHh

Edit: Had to link to paste bin because of the poor bbcode parsing.

Put this code into an html page and view it in your browser. "0" will be alerted because the JavaScript was loaded and executed before the DOM was loaded.

The same thing would happen if you were to put the JavaScript into a separate file.

HTML script tags by default are loaded synchronously so if the code is at the top of the page it will have no choice but to load first and execute. So if you don't want the code to run until after the DOM is loaded you will have to bind it to an onload event or place the code at the end of the DOM.

Edited by bluegman991
Link to comment
Share on other sites

Last time I checked JavaScript is executed as soon as it is loaded. The only way to have javascript execute After the DOM is loaded is by binding it to an onload event or placing it at the end of the DOM.

Consider the following:

http://pastebin.com/aYM00JHh

Edit: Had to link to paste bin because of the poor bbcode parsing.

Put this code into an html page and view it in your browser. "0" will be alerted because the JavaScript was loaded and executed before the DOM was loaded.

The same thing would happen if you were to put the JavaScript into a separate file.

HTML script tags by default are loaded synchronously so if the code is at the top of the page it will have no choice but to load first and execute. So if you don't want the code to run until after the DOM is loaded you will have to bind it to an onload event or place the code at the end of the DOM.

You are correct for most parts.

It should alert undefined, and depending from browser it may or may not throw an exception.

There is a twist in this tale though, since FF 3.5 Javascripts are loaded in the background and then returned to and executed.

There may be other newer browsers I don't know about, but for most part, as said, you are correct.

Link to comment
Share on other sites

CSS place at the top. Javascript place at the bottom where you can. This allows for a faster rendering of your site due to parallel limitations set as default on your browser.

Not all script code can be placed further down than where you need it. It really depends on if your just calling all your script or using it on the fly.

Link to comment
Share on other sites

Just to be clear, (at least in as far I can understand) best practice would be to place the javascript in another file (perhaps in my JS folder) and run this file somewhere in between the <head> and </head> tags preferably as near to </head> as possible?... yeah?

Link to comment
Share on other sites

No Lilith. Yes the JS should be in another file in order to be cached and save bandwidth. However it's better to put it on the bottom of the page such that when it starts the document is mainly there and you will not have issues. If you put in on the header then you need to have some sort of "onload" hook installed to start your code only when the page is loaded. So it's much easier to put it on the bottom and let the browser do the work for you.

Link to comment
Share on other sites

No Lilith. Yes the JS should be in another file in order to be cached and save bandwidth. However it's better to put it on the bottom of the page such that when it starts the document is mainly there and you will not have issues. If you put in on the header then you need to have some sort of "onload" hook installed to start your code only when the page is loaded. So it's much easier to put it on the bottom and let the browser do the work for you.

This. Is correct.

But I don't know why one would want to execute Javascript when the DOM isn't fully loaded.

Mind shedding light on the subject for me?

Link to comment
Share on other sites

Well, simply to have the JS on top, and be able to spot all the JS / CSS files directly in the header. Honestly not useful for me, however I do know many frameworks (even .NET) put JS code on top. There is also another small advantage, is that you can "stop" the execution of the page and still have the JS in it.

Link to comment
Share on other sites

Well, simply to have the JS on top, and be able to spot all the JS / CSS files directly in the header. Honestly not useful for me, however I do know many frameworks (even .NET) put JS code on top. There is also another small advantage, is that you can "stop" the execution of the page and still have the JS in it.

I mean event onLoad versus parallel execution.

Link to comment
Share on other sites

This. Is correct.

But I don't know why one would want to execute Javascript when the DOM isn't fully loaded.

Mind shedding light on the subject for me?

You can do all your pre-configuration before the document loads. Like:

  • Math
  • Send ajax requests to other pages
  • Parse data (cookies and other js environment data)
  • Retrieve data (cookies and other js environment data)

That way when the document loads all of your data will be ready for placement or whatever you plan to do with it after the DOM loads.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...