jQuery/JS/p5 - create a website that collapses when scrolling - text

Sorry for being so vague, but I don't know where to start.
Basically I want to create website inspired by Neo-TOkyo from AKIRA manga.
When entering the site the visitor will see two columns of text with images behind them.
When scrolling down, both text and images should start collapsing/falling down to the bottom of the page.
Quick mock up: http://imgur.com/a/Jwjd7
once everything is down, a button to purchase the t-shirt should appear in the middle of the page.
Is this possible to accomplish?

Related

Tabbing breaks slider if slides have links using glide.js

I have a slider built with Glide.js that has 6 slides, all with links. It needs to be tabbable for our keyboard users, but so far it's not working.
If the user tabs through the page, it stops on every photo and then jumps to the first bullet below.
Then if the user clicks the first bullet it does nothing. as the user progresses through the bullets, the images slide and eventually go right off the screen into empty space. The best the user can then do is tab back to the first bullet which only brings them as far back as image 3. Is this a bug or is there something that can be done? I feel like I've tried everything.
Here's my code on code pen:
https://codepen.io/cristenrh/full/ExpwRNz
or an example on my website:
https://hewettcentral.com/cristen/carousel.html
I've tried using different variables for bullet one, like "<<". I've tried using glide.update() once the user gets to the first bullet and I've even tried glide.mount(). Neither work. The closest I've come is to start using negative numbers in the bullets, but that really breaks it further.

How to create a user-impaired accessible website: surfing without a mouse?

I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.
You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement

How can I create scrolling areas like the ones on stackoverflow?

I'm currently working on a flash project, which will use multiple scroll areas.
I'm trying to find out how to create a scroll area like I see on stackoverflow, and make it function similarly.
Whenever someone posts their lines of code to stackoverflow, the scroll area scrollbar looks exactly like the scrollbar in the web browser, and is able to be scrolled with the mousewheel smoothly, without affecting the webpage scrolling.
Example: disable mouse wheel scrolling while cursor over flex app?
Could anyone please explain to me how I can do this in my flash project?
Thanks!!
You wouldn't need flash to do this... This is accomplished using CSS. You would just need to put the portion you wanted to function like that in a div (or any HTML container for that matter) and then define such properties as min-height, max-height, min-width, max-width, overflow, etc. I think there's one that determines the presence of the scroll bars but I don't remember what it is for sure. Very easy to do this and flash would be a bit of overkill.

Placing the right content into the right place

I'm in the proccess of creating my own web profilo and personal website.
I have a layout and a design already done.
Now I have no idea where to place my content and how.
I have a layout like this:
Menu
Header
Box 1 | Box 2 | Submenu
In the header I currently have "about me" information but I'm not sure it's the right place. Shouldn't the "about me" content be placed in the about me page?
Box 1 should be recent blog posts of that I am sure.
Box 2 might be the next pharagrap of the about me or maybe site news.
I am also not quite sure I need a sub menu in the index page but that section is empty if I don't have anything in it.
I have found this webblog a bit useful but I still want some advice on where to proceed ahead.
I think that it's a good approach to write about yourself on a different page, not everyone is interested in your personality.
Standart solution is to place it as a last item of menu or at the bottom of the page like a footer. I think that placing it in menu would be better.
If you want another example of a good blog layout, I could point you to our famous blog by one of Stack Overflow creators - Coding Horror by Jeff Atwood.

Building Nav Bars with rollovers in DreamWeaver CS3

I'm working with Dreamweaver CS3. The question here is what part of the code (listed below) do I need to replicate to have my secondary nav bar utilize the on-click action?
FYI...DW has two menu options or auto insert items...one for roll over images and one for "navbar". DW will only allow you to use the 'navbar' item once per page
the nav bar option builds all the rollover actions for you (listed below)
the "rollover" option ONLY builds normal and over, but no click
I guess I really have two questions...the first is what part of the code do I need to insert manually, the second is what does the "MM_nbGroup" code mean?
"../photogallery.html" target="_top" onClick="MM_nbGroup('down','group1','photoMainNav','../images/buttons/photography_down.gif',1)"
onMouseOver="MM_nbGroup('over','photoMainNav','../images/buttons/photography_over.gif','../images/buttons/photography_over.gif',1)" onMouseOut="MM_nbGroup('out')"><img src="../images/buttons/photography.gif"
Thanks for any help on this in advance!
For anyone wondering the same thing, here's what I've found so far...
The 'insert' bar provided in DWCS3 doesn't allow for two 'inserted' menu bars on one page. However, the 'Behaviors' palette will allow you to add effective roll-overs with the "Set Nav Bar Image" option. Unfortunately (as far as I can tell) DWCS3 is not as smart as Adobe's GoLive was, in that it won't automatically fill in the appropriate items if you name your files correctly. Even still, you should name your images accordingly (xxx_over, xxx_down, etc) to keep it straight in your own head.
As for the MM_nbGroup question, best I can tell this is WYSIWYG code that ships with DWCS3 (the kind of stuff that really mifs some of you developers, sorry guys), as it names items by group # and doesn't seem to have any real relevance in the lexicon of html. I could be mistaken on this however, and am open to enlightenment on the topic if anyone can offer.

Resources