I'm looking to see if it's possible to implement a "bar" like you guys have, along with Digg, Stumble upon and other websites.
I have no idea what it's even called - frameset, iframe of sorts but I can't even think of a proper title to search google..
Can you help?
You can have a normal div tag (or whatever tag you want to use) with CSS position property set to 'fixed'. Then the element can be positioned where ever you want and scrolling the page doesn't affect the position.
Related
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
It's currently impossible for a user to tell if clicking on something will load something in their current page or take them to a new page. I feel that this is why many sites use hoverable dropdown menus, so that they don't have to click anything. This can be messy, though, if you don't intentionally hover over something and forms the habit of hovering over things and expecting a result.
There should be a standard way to identify links as external or internal. Maybe a little hover effect or symbol used in the link?
Is there anything like this, and if not, should there be?
I believe by "internal" you mean that the link does some javascript thing, and does not load a new page.
I think an effective way to indicate an immediate action is by using a button style, rather than a standard looking link. A blue underlined link somehow seems much more likely to jump to a new page than something that looks like a button.
Give the button an appropriate label and/or symbol that indicates an instant action. For example, a button that expands a section open might use a little triangle that rotates as the expanding happens.
You can also establish a consistent style for "internal" actions, use a particular color or style for links that don't take the user to a new page. Sometimes I use blue for normal links and a shade of purple for internal ones.
In general, I find it isn't that important to specify. If a user sees a link or button that like it will get them what they want, they will click it. It is up to you as the designer of the website to decide if the most appropriate action is a new page, or an action on the current page. Unless the user is going to lose some work they have done, going to a new page shouldn't be a problem. If it really took the user by surprise, they can always go back. In my experience, users don't worry about it either way.
I need to put a map in a webpage and I need that when the users clicks on certain area inside city limits on the map the user is redirected.
Wich is the best way without using Flash?
Define Hover polingons on a image.
SVG on the browser.
Some sort of Javascript, jQuery magical plugin out there?
Google Maps?
And example could be this but It's flash.
You should check this jquery plugin , I think that is exactly what you need
http://plugins.jquery.com/project/maphilight
Well, for the basic functionality, a good ol' fashioned client side image map (http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.6.1 ) would do the job nicely.
I'm not sure that there's any built-in way to get them to display hover behaviors, though. The cursor will definitely change, but I don't think you can style <area> elements.
With Google maps: what you're looking for is KML (http://code.google.com/apis/kml/documentation/whatiskml.html ).
You could use the HTML map tag.
http://www.w3schools.com/tags/tag_map.asp
Can the browser feature of Ctrl+F to find text be integrated with text in popup windows.
I'd like to have some scientific reference information given when someone hovers over a species name in a web page. Generating the popup, tooltip style text is no problem, the problem is that anyone using Ctrl+F won't be able to find it, or if I position the text out of view when not required, it will be found but be invisible.
The same sort of effect applies to "accordion" style expanding text areas.
I'm looking for some sort of event generated when find is highlighting a result.
Unfortunately there is no such event, you can't interfere with the built-in find.
About the best you can do in this case is to provide your own search function in-page, which searches the DOM for Text nodes containing the given text, highlights them, and opens up any closed accordions they're in.
The only idea I have, is to put all the text from your popups in one additional scrollbox (maybe at the bottom of the page) with a height just large enough to display one set of detail information at a time. This way, it doesn't take up too much space on the page, and the text can still be found using Ctrl+F.
For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!