Okay, So trust me I have googled, and searched this board before posting..
Maybe I dont know the correct searching phrase.
I want to be able to recreate a text area for news on my site, and I want it to have a scroll area that is sharp looking. I know very little javascript, and understand that I probably should, But I dont think this should be TOO difficult.
Anyways I have provided a site with an example of how I want it to work http://www.miserysignals.net/main.php
On the left side where their news is. HOW on earth would I create something like this??
My searches came back with numerous amounts of auto scrolling text areas, which is cool, but not what I want.
Any help would be amazing, Thanks JS, and AJAX gurus!
PS. I am using Dreamweaver cs3 if that may help at all???
14 4069
I can not see any auto-scrolling areas. I can see just area that can be scrolled manually. In this case, you can use "DIV" dom element with fixed height and width, while overflow style property will be set to auto.
[HTML]<div style="width:100px; height:100px; overflow:auto;">
<H1>You can put whatever you want here</H1><br>
And here ...<br>
And here ...<br>
All will be inside DIV (scrollable)<br>
</div>[/HTML]
But site you was refering to is made in Macromedia Flash not in JS.
I was really hoping to get the custom up and down and scroll bar part going.
I can do it by just making by the way you just said, but it gives me the plain ole' scroll bar.
I believe the only flash part of the site is the header. The news area was achieved using JS, if I am correct, if I disable flash in my browser the news still comes up.
I just cannot find anything on how to make this "Graphical scrollbar" on any of my searches..
Hoping for a miracle.
-myke
I can not see any auto-scrolling areas. I can see just area that can be scrolled manually. In this case, you can use "DIV" dom element with fixed height and width, while overflow style property will be set to auto.
[HTML]<div style="width:100px; height:100px; overflow:auto;">
<H1>You can put whatever you want here</H1><br>
And here ...<br>
And here ...<br>
All will be inside DIV (scrollable)<br>
</div>[/HTML]
But site you was refering to is made in Macromedia Flash not in JS.
I believe the only flash part of the site is the header. The news area was achieved using JS, if I am correct, if I disable flash in my browser the news still comes up.
I just cannot find anything on how to make this "Graphical scrollbar" on any of my searches.
You're correct. The first step is to use Firebug and right-click Inspect Element. You'll see it's a span with an img tag inside.
You're correct. The first step is to use Firebug and right-click Inspect Element. You'll see it's a span with an img tag inside.
k, I got firebug, inspected it, I still cannot figure out how they did it! Just lost.
The code used:
No idea what's going on there, looks long winded.
Haha, sorry for the lack of help.
Haha, thanks!
Man I didnt think something SO little could be so complicated, I have no idea what to do. Ill update if anything comes of it though.
Still open for suggestions.
With the plain ole' scrollbar, it's easy. If you want a "graphical" scrollbar, you're going to have to work for it!
It's not as complicated as you think. If you don't need to support IE4 and Netscape 4 (old and ancient browsers), you could cut out a lot of the code.
Don't forget that with the JavaScript, you will also need the HTML and CSS.
Thanks a ton. Well see how it goes...
Thanks a ton. Well see how it goes...
Wish you all the best :)
and let us know how you get along!
http://www.miserysignals.net/news_iframe.php
They did what I thought they did.
You create a rectangle, give it that nice "old-school paper" look and line up special images on the side. The "slider" is really a <img> that that y-coordinate is changed based on events (mouse clicks, drags etc).
Also based on those events, the scroll position for a <span> is changed to reflect approximate estimates for what text is shown. (Remember the overflow:auto )
If you'll notice, clicking the little up/down arrows makes the scroll very jumpy and not fluid, while dargging the slider is pretty smooth. You can use the "plain old" scroll bars for a more fluid control and just colorize them (I think that's a CSS standard now?)
http://www.miserysignals.net/news_iframe.php
They did what I thought they did.
You create a rectangle, give it that nice "old-school paper" look and line up special images on the side. The "slider" is really a <img> that that y-coordinate is changed based on events (mouse clicks, drags etc).
Also based on those events, the scroll position for a <span> is changed to reflect approximate estimates for what text is shown. (Remember the overflow:auto )
If you'll notice, clicking the little up/down arrows makes the scroll very jumpy and not fluid, while dargging the slider is pretty smooth. You can use the "plain old" scroll bars for a more fluid control and just colorize them (I think that's a CSS standard now?)
Ahem! There's no standard CSS for colouring scrollbars. That's specific to Internet explorer alone (thankfully).
Creating a customised scrollbar certainly isn't a cakewalk, it's something you'd need to work on and have a good understanding of HTML, CSS and Javascript, to be able to pull it off. If you want it done well, the scroll bar itself needs to represent the current amount of data shown, relative to the entire page size. It's a fairly simple calculation in itself. But then you have to control the movement of the nested content element whilst dragging the scrollbar. Also, scrollbars are a common user interface element which people are used to. So I wouldn't bother creating a customised scrolling area unless you're going to make it work with the mousewheel, as well as dragging, arrow keys aswell as the mousedrag on the bar and the arrow buttons. It's a lot of work. =]
Ahem! There's no standard CSS for colouring scrollbars. That's specific to Internet explorer alone (thankfully).
Creating a customised scrollbar certainly isn't a cakewalk, it's something you'd need to work on and have a good understanding of HTML, CSS and Javascript, to be able to pull it off. If you want it done well, the scroll bar itself needs to represent the current amount of data shown, relative to the entire page size. It's a fairly simple calculation in itself. But then you have to control the movement of the nested content element whilst dragging the scrollbar. Also, scrollbars are a common user interface element which people are used to. So I wouldn't bother creating a customised scrolling area unless you're going to make it work with the mousewheel, as well as dragging, arrow keys aswell as the mousedrag on the bar and the arrow buttons. It's a lot of work. =]
I am beginning to think the same thing about just not messing with it. I was just thinking the deisng I am going to be working with will just look a bit tacky with the normal scroll bars, But oh well, I guess if I really want to get it done, I may stick with the ole' flash. I just dont know anything about JS. I am out of my element, as the great Walter Sobchak once said.
Ahem! There's no standard CSS for colouring scrollbars. That's specific to Internet explorer alone (thankfully).
I knew it wasn't part of it like many many years ago, but I thought it might have been included in one of the newer drafts of CSS. All well.
I knew it wasn't part of it like many many years ago, but I thought it might have been included in one of the newer drafts of CSS. All well.
Don't expect it to ever be. A lot of people don't like their scrollbars coloured much like they don't like the browser resized.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Kai Grossjohann |
last post by:
It seems that Ctrl-N in Mozilla opens a new empty browser window.
That's fine, I don't need to do anything about it.
But Ctrl-N in IE appears to clone the current window. Is there a way
to...
|
by: D Newsham |
last post by:
Hi,
This javascript creates a table that has a header and side column that
do not move while scrolling through the table. I need to convert this
to vb script. Can anybody help, or do you have...
|
by: Karin Jensen |
last post by:
Hi - I am trying to use Javascript to put material inside a table
(i.e. alongside the previous material) if the user's screensize is
big enough and outide the table (beneath table) if it isn't.
...
|
by: Bernie V |
last post by:
Hi group,
I use some javascript on my page to scroll some text.
This is my situatiion:
1 aspx file : home.aspx with the main layout
in the layout i use custom controls (ascx files) to show...
|
by: Peter Bons |
last post by:
Hi all,
I have an asp.net page with a button that has a javascript onclick method
attached to it to display a modal dialog like this:
If reportHasParameters Then
'add client side onclick()...
|
by: rodchar |
last post by:
hey all,
am i running the following javascript as fast as possible: All i'm trying to
do is move an innerDIV via an outerDIV left and right. if i click real fast
on the button it only moves one...
|
by: Raffi |
last post by:
Hi,
I have an application screen with a CSS scroll area. Users click links
in the scroll area which open small popup windows to enter data. When
the data is submitted, the popup reloads the...
|
by: mevryck |
last post by:
Greetings
I have a huge Javascript with inclusion of external scripts and all. I
got this by doing a XSLT .
Now I have the contents in a Javascript variable, but I'm not able to
update the...
|
by: John L. |
last post by:
How do I invoke the scroll() method of a window object for a
scrollable IFRAME element in an HTML document?
I am using IE 7.0, and I thought the following would work:
...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
|
by: PapaRatzi |
last post by:
Hello,
I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
by: Shællîpôpï 09 |
last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
| |