Jump to content
Hash, Inc. - Animation:Master

A:M Forum Header


Gerry

Recommended Posts

Looks great but it leaves some unsightly gaps. In Firefox, fullscreened on a pc, the "filmstrip" segments don't reach all the way to the left and right images. And on the iPad it forces a big gap down the right side of the screen. Can that be fixed? Would a screenshot help?

Link to comment
Share on other sites

  • Replies 59
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Admin

Yes, Gerry, while I think I know what some folks are seeing a screenshot will help, especially if you identify the browser.

 

The fix for the gap is to replace the individual film notches with a single scaleable image but that'll take at least a day. If this prevents you from working in the forum then I can push it up in priority or revert it back a little so the problem goes away.

 

I should have tested it off line first but I thought I could make it all work in short order.

Sorry about any problems.

 

I note that the view is best in Chrome and Firefox has the gaps on both sides (didn't know about the long gap though on the Ipad... so I'm curious about that one on the iPad. I went to check it on Internet Explorer but couldn't even find an icon to launch it. Evidently I've buried it really deep!

Link to comment
Share on other sites

No Rodney, there's no emergency, it's not keeping me from anything! Just letting folks know. It's so difficult testing this stuff on every possible permutation of viewing device I'm just trying to help. Unfortunately, as I type this, the header on this page actually shows the text name of the jpeg instead of the top filmstrip image! Just paused to make a screen shot. There's also some other weirdness at the very top. Hope this helps!

 

 

EDIT: It looks like you're working on it as we speak!

NewHeaderScreenshot.jpg

Link to comment
Share on other sites

Much better though still some minor alignment in the two end images in Firefox, looks like they could be raised up 2 or 3 pixels. I really like the way the filmstrip pauses when you mouse over! How is this coded? It's not Flash.

Link to comment
Share on other sites

  • Admin
Much better though still some minor alignment in the two end images in Firefox, looks like they could be raised up 2 or 3 pixels. I really like the way the filmstrip pauses when you mouse over! How is this coded? It's not Flash.

 

No, it's just straight up HTML with a bit of script.

 

I'm going to take one last look and then give it a rest because I think I may have broke more than I fixed. There must be a typo in there somewhere that is preventing me from getting the images to align properly with the film hole strips on the top and bottom. It's been a painful experience trying to track it down. I'm wishing I would have saved my earlier code so that I could compare it with the smaller strip I have now.

 

Edit: Let me know what else is broke!

Link to comment
Share on other sites

  • Admin

One really good thing came from breaking all that stuff. The header is about 2/3rds the size in height that is previously was. :lol:

 

We allow no wasted space around these here parts.

 

If anyone wants to add an icon/image with a link up there just say the word and we'll have it scroll through.

The hope is that over time not only will the images get better and better but the information at the links will be more thorough and organized.

 

All in all I'd say that works pretty well for just coming up with the idea last night.

Any and all ideas toward improving it will be most welcome.

I don't consider this anywhere close to being finished.

 

Thanks to everyone who created content and artwork! :)

 

P.S. Perhaps it should be scrolling left to right? :blink:

Link to comment
Share on other sites

I thought that too, so I updated it and still not correct.

 

I thinking it's a resolution issue. I have a wide screen laptop, if I scale the width of the browser down, it displays correctly.

 

If I zoom my browser/web page to 117%, it looks correct.

Link to comment
Share on other sites

  • Admin
Here's a suggestion as long as you're asking: can we have a "tool tip" type of label appear when you mouse over a particular frame, so the user has a clear idea where the link goes?

 

I added those but for some reason (probably the moving script?) those tool tips don't appear.

There may be a workaround but I'll have to research it.

 

I'm not sure about the oversized screens not displaying right, I might be able to overshoot the width and get that to display correctly. One long term fix is to replace the whole thing with flash but then anyone who can't view flash would see a glitch at the top of the forum.

 

While I haven't devoted myself to the idea I think it'd be fairly straightforward to have different scrolling images appear based on where you are in the forum. In other words you'd see a 'Tutorials Forum' and occasional other tutorial images slide by on the main page but when going to the Tutorials Forum you'd see a whole lot more. Going to the A:M Films forum you'd see more A:M Films links. Pop into user Groups and you'd see usergroup themed imagery. The sliding images would change but the framework itself would mostly remain 'normal'. In this way those who frequent the forum would have something of a context sensitive menu.

 

I'll look at the issue you've raised Mark. Make sure you clear your browswer caches though so that this isn't just a useless excursion. From what I'm seeing here, you should be seeing the header correctly in Chrome and Firefox. I can't speak to IE at the moment.

Link to comment
Share on other sites

  • Admin

Mark,

I made a minor adjustment in widen the width of the scroller and filmframes and all appears to look correctly in Chrome, Firefox and IE on my end. Since all is appearing normal here I'm operating blind with regard to anyone who isn't seeing it correctly. Hopefully this is just something locked into the cache of your browser.

 

Gerry,

The tooltips are really there, I'm not sure why they aren't appearing. If you right click and 'inspect element' in Chrome you can see them. They all have corresponding names (i.e. Particle Sprites image has an alt="Particle Sprites" tooltip). I'm not sure why they aren't appearing but I'll investigate.

 

Edit: Ha! All it took was typing it out and launching a google search. The alt tag is only for use when the image doesn't show up. The title tag produces the tooltip. Thanks Gerry for pushing me toward the solution! :)

 

Look for the tooltip fix to appear shortly.

 

Edit: Done. If you follow the tooltips you'll discover new ways to navigate and refresh the forum.

Link to comment
Share on other sites

  • Admin

Thanks Robert, that helps tremendously.

 

I'm not sure but the full fix may be to supply a really long/wide filmstrip image. I can't seem to get it to like any auto formatting for width/stretching.

 

Thanks to your video I can now test for the problem in Chrome as well.

Link to comment
Share on other sites

  • Admin
Let me know if you need any help with this Rodney.

 

I could use some guidance on how to on how to get a script to stay inside an area.

Perhaps it could be placed inside a table?

 

The problem I'm running into is that while I can use things like 100% and 'auto' to size almost everything in the header the scrolling script requires an exact number of pixels. By itself without the aid of some div or table it wont scale.

 

In the interim I've got it set where the sweet spot is from 100% to 125% magnification of the page. Anything less than that will show as unused space in the scrolling area. Anything more will move the right side of the scrolling images off the right side of the page.

 

I might be able to replace the script with the marquee tag but... I'm not sure if all browsers support that tag.

Here's a basic example of the marquee tag in operation:

 

<marquee hspace="0" vspace="0" behavior="scroll" scrollamount="3" direction="right" bgcolor="transparent"><img src="http://www.hash.com/img/content/mascot_2011.jpg" height=150px width=125px border="1"><img src="http://www.hash.com/img/content/mascot_2010.jpg" height=150px width=125px border="1"><img src="http://www.hash.com/img/content/mascot_2011.jpg" height=150px width=125px border="1"><img src="http://www.hash.com/img/content/mascot_2012.jpg" height=150px width=125px border="0"></marquee>

 

Here it what that basic code (with a few additions would display:

mascot_2011.jpgmascot_2010.jpgmascot_2011.jpgmascot_2012.jpgpost-1010-1352263756_thumb.pngpost-1010-1352268410_thumb.pngpost-1010-1352267986_thumb.png2007boxwhite.jpg

 

 

I'm not sure how that could be made continuous. This is the first time I've ever used the marquee tag.

 

More messing...

mascot_2011.jpg   &nbspmascot_2011.jpg   &nbspmascot_2011.jpg   &nbspmascot_2011.jpg   &nbsp

 

Tar looks a little 3D in these images. But the way the images are scrolling back and forth... gives me a headache.

Link to comment
Share on other sites

Did not even know about that element. is not standard-html. I'll have a look at that... in general something like this would be acomplished using JavaScript, HTML and CSS. (most people including me would do it that way, so it is a bit more complex)

I'll have a look at that code of this maquee-element this evening.

 

See you

*Fuchur*

Link to comment
Share on other sites

  • Admin
not even know about that element. is not standard-html. I'll have a look at that... in general something like this would be acomplished using JavaScript, HTML and CSS. (most people including me would do it that way, so it is a bit more complex)

I'll have a look at that code of this maquee-element this evening.

 

Marquee (don't forget the 'r') has been of nonstandard usage but with HTML5 apparently has been making a comeback as a CSS element.

I don't really know anymore about it than that.

 

Note that I am not currently using the marquee tag in the forum header. While it'd be easier to maintain I'm not sure it'd be a flexible as we'd want it.

Link to comment
Share on other sites

Everything is working great in IE, FF and chrome. Though, on the ipad there is about a 1/4" strip down the right side, where I can still see the scrolling images, but it's much better than it was.

 

Great job Rodney, keep it up. It will be a great addition to the forum.

Link to comment
Share on other sites

Hi Rodney,

 

wrote my own script which should do what you need it to do:

Ticker-Example

 

This is more or less resolution-independed (not really, but nobody should have a resolution that should be problematik with that... real resolution indepency is possible to but I am tired right now... and this script can easily be edited to even run on screens with 50.000px width (which is not available at all ;) ))

 

Can you use PHP? Or is it limited to JavaScript?

If first, you can just use the attached zip to get it running, otherwise I'll have to convert it. One disadvantage is that you would need to know the size of all the images put together.

 

Or you just put it in an iframe and display it there... like that it should work no matter what if PHP is available on the server (> Hash.com has php enabled)

If you need any help with that, let me know.

 

See you

*Fuchur*

 

PS: Just to be sure: Please test this out too guys :).

hash_ticker.zip

Link to comment
Share on other sites

  • Admin

Looks good Fuchur! The image height might have to be lowered in order to get all of the images to fit between the top and bottom of the film strip margins. I think you might be seeing something similar to what I was struggling with regarding the height and width of the scroller. It takes some experimentation to get everything aligning appropriately.

 

Can you use PHP?

 

I'm going to have to say 'no' mainly because I don't see any way to do that from my angle. I think Jason or someone with direct root access would have to do that. I don't have that kind of access as far as I know and that's probably a good thing that I don't... who knows what I might break otherwise.

 

I think the core of your code (at least what gets interpreted could probably just be pasted into div tags but the trick on my end would be to figure out how to upload the CSS. I'm sure I can but haven't done that yet. Managing the CSS would sure make it easier to format repetitious elements in the forum. I'm pretty sure I know where the CSS would need to be added by I want to be careful not to break the forum. Never mind. I now know where I'd need to add the CSS.

 

The header right now is more of a hack than it is programming but it seemed like an idea that could work. I'm a bit surprised that it even worked.

 

I'll keep my eye on this area (and your code) and press forward again as I learn more.

 

Added: Okay, I see how you did the repetition of the filmstrip holes via the background-image url. Very clever.

I have no idea how the code "overflow: hidden;" is working.

Link to comment
Share on other sites

Looks good Fuchur! The image height might have to be lowered in order to get all of the images to fit between the top and bottom of the film strip margins. I think you might be seeing something similar to what I was struggling with regarding the height and width of the scroller. It takes some experimentation to get everything aligning appropriately.

 

This is not important for my code... the images will be scaled up or scaled down (whatever is necessary) proportionally. I just updated the code so it will fit now. (just put a "img {height: 150px;)" and calculate the image-size of all the images based on the scaling by css using php. The width is not important at all and will be determined by your browser automatically and for the code itself by PHP.

 

Added: Okay, I see how you did the repetition of the filmstrip holes via the background-image url. Very clever.

I have no idea how the code "overflow: hidden;" is working.

 

Overflow: hidden; is nothing fancy... it will cut of everything that is "wider" or "higher" than the

which has overflow:hidden; applied to it.

It is a little bit like a mask.

 

Can you use PHP?

I'm going to have to say 'no' mainly because I don't see any way to do that from my angle. I think Jason or someone with direct root access would have to do that. I don't have that kind of access as far as I know and that's probably a good thing that I don't... who knows what I might break otherwise.

 

No biggy... you can use there, right?

We can just use a iframe for that. Just put int this for a test:

<iframe src="http://lab.patchwork3d.de/hash_ticker/html/ticker.php" scrolling="no" style="width: 100%; height: 120px; border: 0px;"></iframe>

(you may have to use a slightly different height-value in the style-attribute here... I am not totally sure)

 

If this is fine you could put it on the hash-server and use it there (or if you dont have access to it I will put it on the hash-server and give you another link.

 

See you

*Fuchur*

Link to comment
Share on other sites

I dropped the code you specified directly into the header and it can't find the images.

 

You can see the results here:

 

http://www.hash.com/forums/index.php?showforum=106

 

I think if it could find the images it'd work.

 

The problem is, that the iframe is referencing the file like this:

"http://lab.patchwork3d.de/hash_ticker/html/ticker.php/"

 

But it needs to reference it like this:

"http://lab.patchwork3d.de/hash_ticker/html/ticker.php"

 

Without the last slash, which would tell the server that ticker.php is a folder it seems that the server itself is intelligent enough to know that ticker.php is a file, but including the images (which are referenced relativly to the php-file do not know that and search at the wrong place.

 

Sorry, my fault. If you delete the slash it should work.

In your example you are using a height of 120px, while I am using a height of 150px for the ticker. I did change the code for the work with 120px now.

Additional to that you would need to set the html attribute scrolling="no" for the iframe. I refreshed the code in my other post, so it should work in your circumstances now.

 

See you

*Fuchur*

Link to comment
Share on other sites

  • Admin

You know what.. since it appeared to be a problem with file location I had thought about dropping the "/" from the end but then failed to test it.

If I'd trusted my instinct I would have saved everyone a lot of time there.

 

If you check out the link you'll see that worked!

 

I'm tempted to bring it over and test without the PHP because I see no reason why that also should not work.

 

Thanks Gerald!

Link to comment
Share on other sites

You know what.. since it appeared to be a problem with file location I had thought about dropping the "/" from the end but then failed to test it.

If I'd trusted my instinct I would have saved everyone a lot of time there.

 

If you check out the link you'll see that worked!

 

I'm tempted to bring it over and test without the PHP because I see no reason why that also should not work.

 

Thanks Gerald!

 

It will work... it is just much more work to maintain or change it.

 

See u

*Fuchur*

Link to comment
Share on other sites

  • Admin
It will work... it is just much more work to maintain or change it.

 

Id probably have to show you but I think it should be about the same or easier for anyone who doesn't have access to the PHP and CSS because IPBoard has a 'Look and Feel' Editing Page/Panel where all those settings are organized and can be edited. To someone with access to the server itself perhaps not but consider that as things stand an Admin wouldn't be able to change any of those attributes stored outside of IPB's overlaid code. I think that is probably the approach that IPB prefers because it keeps Admin types out of the root of the server.

 

One thing I really like about the iframe element is how that allows dropping in a workable element in very short order with very little code and this may be what you are talking about with regard to saving time in maintenance.

 

So the trade off is really one of no maintenance because the admin is limited in what they can change. On the front end they cannot maintain the PHP/CSS backend of the code. This is problematic because those images and links need to be changed and they can't be changed without access to the server. Having those element brought forward into the IPB front end means that any Admin change edit and maintain that code.

 

Perhaps better yet, through skinning, this grants the ability to further extend maintainence to the viewer of the board in that they can opt for whatever look and feel they want without interfering with everyone else's view of the board. There certainly would be a tradeoff here if everyone could choose from a wide variety of skins to view on the forum because on the one hand the viewer could tailor their experience to what was most important to them while on the other we'd lose that continuity of everyone seeing the same common interface (and therefore receiving the same basic information) via the board. I think the way to overcome that would probably be to lock down the skin for the main forum area but then allow the viewer to change skins in most of the subforums.

 

Sorry to get long winded here. Typing everything out helps me begin to understand what I don't yet know...

 

I hope this makes sense. I'm very wary of setting up systems that need to be changed quickly that cannot be changed quickly. We have too many of those as it is.

 

Added: As an example of what I'm talking about here. There is a gap at the bottom of the header that I can't seem to make go away. While this might be something I can control on my end its seems likely that this is somewhere coded into either the PHP or CSS. For a fix like this to take I would then have to edit that PHP/CSS or consult with someone with access just to figure out where the problem is and how to get it fixed. Not a terrible thing... it's best to have several people looking at a problem... but those types of delays can certainly be frustrating when otherwise they'd be an easy fix.

Link to comment
Share on other sites

It will work... it is just much more work to maintain or change it.

 

Id probably have to show you but I think it should be about the same or easier for anyone who doesn't have access to the PHP and CSS because IPBoard has a 'Look and Feel' Editing Page/Panel where all those settings are organized and can be edited. To someone with access to the server itself perhaps not but consider that as things stand an Admin wouldn't be able to change any of those attributes stored outside of IPB's overlaid code. I think that is probably the approach that IPB prefers because it keeps Admin types out of the root of the server.

 

One thing I really like about the iframe element is how that allows dropping in a workable element in very short order with very little code and this may be what you are talking about with regard to saving time in maintenance.

 

So the trade off is really one of no maintenance because the admin is limited in what they can change. On the front end they cannot maintain the PHP/CSS backend of the code. This is problematic because those images and links need to be changed and they can't be changed without access to the server. Having those element brought forward into the IPB front end means that any Admin change edit and maintain that code.

 

Perhaps better yet, through skinning, this grants the ability to further extend maintainence to the viewer of the board in that they can opt for whatever look and feel they want without interfering with everyone else's view of the board. There certainly would be a tradeoff here if everyone could choose from a wide variety of skins to view on the forum because on the one hand the viewer could tailor their experience to what was most important to them while on the other we'd lose that continuity of everyone seeing the same common interface (and therefore receiving the same basic information) via the board. I think the way to overcome that would probably be to lock down the skin for the main forum area but then allow the viewer to change skins in most of the subforums.

 

Sorry to get long winded here. Typing everything out helps me begin to understand what I don't yet know...

 

I hope this makes sense. I'm very wary of setting up systems that need to be changed quickly that cannot be changed quickly. We have too many of those as it is.

 

Added: As an example of what I'm talking about here. There is a gap at the bottom of the header that I can't seem to make go away. While this might be something I can control on my end its seems likely that this is somewhere coded into either the PHP or CSS. For a fix like this to take I would then have to edit that PHP/CSS or consult with someone with access just to figure out where the problem is and how to get it fixed. Not a terrible thing... it's best to have several people looking at a problem... but those types of delays can certainly be frustrating when otherwise they'd be an easy fix.

 

The gap is something very comon to iframes... one of the drawbacks of that way of doing things... a better way would be to do it with an ajax-request and importing it that way, but I did not know if you have the possibility to use that there, so I did it this way.

 

Anyway you are right about the edit of the php-page. You would need to have access to the webserver it will be saved on to manipulate it and you would have to understand a little tiny bit of php to do it... (I really made it easy to understand, but still a little knowledge is not wrong to have)

PHP is faster to maintain if that is given. (for instance: giving one pixel-value for the height everything will be changed accordingly (by some logic in the php-code) while otherwise you will need to change several things in the html-code to do the same thing. This is true for the changing of images and titles and links too. It is easier to do it in PHP, but of course if you dont have access to that it is not possible at all...

 

I could write something very equal (with a few draw backs like no automatic readout of the image-sizes used, etc.) in javascript too... but in the end if you are happy with what you've got:

Good for you ;).

 

See you

*Fuchur*

Link to comment
Share on other sites

..If anyone wants to add an icon/image with a link up there just say the word and we'll have it scroll through...

 

UV Layout/Decaling

http://www.youtube.com/playlist?list=PLDBD...mp;feature=plcp

74254839v3_150x150_disc.jpg?w=450

 

Smartskin/CP Weighting

http://www.youtube.com/playlist?list=PL0BF...mp;feature=plcp

74254838v3_150x150_disc.jpg?w=450

 

Patch Modeling Kong

http://zandoria.files.wordpress.com/2009/0..._disc.jpg?w=450

29449757v5_150x150_disc.jpg?w=450

 

Those are links to Youtube playlists for those training videos recorded for Siggraph. I can make new thumbnails, if these don't work.

 

This is a pretty popular tutorial that I did on Decaling:

http://zandoria.wordpress.com/tutorials/uv-tutorial/

balrogv13.jpg?w=450&h=337

Link to comment
Share on other sites

  • Admin

Thanks Will! Look for your icons to be there soon. :)

 

(Note: I'm trying to find the optimal size/quality ratio so if you see images that are of too low quality just say the word and we'll adjust. I want to avoid any lag in forum page loading.)

 

Those are links to Youtube playlists for those training videos recorded for Siggraph. I can make new thumbnails, if these don't work.

 

Uploading image to the forum creates thumbnails that view nicely on screen although they are fairly large for the header. Thus far most of the scrolling images are of that size and I haven't note much of a slowdown but there a little when the forum first loads. I'll keep my eye on it while trying to remember your comments regarding the special topics banners being too low quality. We want good quality images to represent everyone's work.

 

Added: The only downside of that last image (which of course is extremely cool!) is that it doesn't say 'UV Editor/Decaling' anywhere on the image. That's okay of course... in some ways the sense of mystery is preferred... the image will draw them in and then folks will figure the subject matter out soon enough. ;)

 

Here's what you're files would look like converted to thumbnail attachments in the forum. They weigh in very nicely in the filesize category:

UVDecaling.jpg

patchmodeling_150x150_disc.jpg

smartskin_150x150_disc.jpg

decaling_150x150_disc.jpg

Link to comment
Share on other sites

  • Admin

Changed all external links so that they open in a new window.

To return to the forum page you were on simply close the tab or window.

 

Forum links simply update the forum view.

Pressing the 'Back'button will take you to the page you were previously viewing.

 

Hopefully I'm not messing too much with everyone by changing things at the top of the forum. Here's an updated A:M Logo(I have th PSD file if it is ever required):

v17AMLogo_sm.png

Link to comment
Share on other sites

Changed all external links so that they open in a new window.

To return to the forum page you were on simply close the tab or window.

 

Forum links simply update the forum view.

Pressing the 'Back'button will take you to the page you were previously viewing.

 

Hopefully I'm not messing too much with everyone by changing things at the top of the forum. Here's an updated A:M Logo(I have th PSD file if it is ever required):

 

Just to mention it: THere is still the whitespae, etc. for larger resolutions...

 

See you

*Fuchur*

header_screen_shot.jpg

Link to comment
Share on other sites

  • Admin
Just to mention it: THere is still the whitespae, etc. for larger resolutions...

 

Yes, I still have to work on that one but I figure that once the text in the forum is so small that people can't read it they will l opt for a lower resolution. I suppose some folks can read text that small but... do people really read the forum at that resolution?

 

Edit: Apparently in my travels I unlocked the sides of the forum so that the banner is showing outside the margins again...

 

Thanks Gerald!

Link to comment
Share on other sites

Just to mention it: THere is still the whitespae, etc. for larger resolutions...

 

Yes, I still have to work on that one but I figure that once the text in the forum is so small that people can't read it they will l opt for a lower resolution. I suppose some folks can read text that small but... do people really read the forum at that resolution?

 

Edit: Apparently in my travels I unlocked the sides of the forum so that the banner is showing outside the margins again...

 

Thanks Gerald!

 

*grin* So your solution was to make the font-size smaller... funniest solution I have heard of in a long time ;).

 

I am using only FullHD/close to FullHD-Screens between 22" and 24"... (at work 2 displays with 1920px*1080px and at home one with 1920px*1080px and one 1680px * 1050px)

At that sizes the font-size is not really small at all. ;)

 

Have a look again at my solution... it will fullfil that and should be looking good on retina-displays, Full-HD and 1024px * 768px netbooks. (really a very bad resolution to surf on the internet or do any graphical work...)

You should be able to use the source-code of the generated page (php does nothing else but produces an HTML-file in the end)

 

See you

*Fuchur*

Link to comment
Share on other sites

  • Admin
*grin* So your solution was to make the font-size smaller... funniest solution I have heard of in a long time .

 

Hardly. It would be if that was my intention. ;)

 

I changed a lot of things in order to get back closer to the default that was being used when the forum was initially launched.

Changing the font size... was suppose to be for a few buttons but I accidentally changed the main forum text.

My apologies to anyone that was trying to read the forum while I did that and worse...

 

I'm moving back toward the html you provided and should be there tomorrow.

I just needed to get to an acceptable stopping point today.

 

Thanks for your patience.

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.
Note: Your post will require moderator approval before it will be visible.

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...