hanashite

Are there any good resources out there for beginners on how to incorporate AJAX into a website? I want the text/image contents of my site to dynamically load into the pages without reloading the whole page (including the header, footer, navigation bar etc.), but unfortunately I'm no programmer. So I was hoping for soem "ready-to-use" cut/paste solution out there Thanks

That's pretty cool! Here's a rough sketch of my idea so far for the FAQ page: Is there a way to add a horizontal "slider" (something like this) for selecting the FAQ sections, while having a vertical slider (like the first link you suggested) for the actual contents (questions/answers)? For instance, while being on the "FAQ one" page I'd click on the "FAQ three" button on top of the page and the existing contents below would slide to the left and be replaced with the contents of that new page. To access the FAQ for the first time the user would click on one of the FAQ buttons from the main navigation menu (black "floating accordion" buttons on right hand side). Alternatively I could just have a single "FAQ" button from the main navigation which would link to a page quickly describing the FAQ along with the 3 FAQ section buttons (the colored buttons in my sketch) instead of duplicating the same navigation. I got the idea of the floating accordion from this page (scroll the page down and see how the menu keeps staying there). Here's a similar item which stays in the same place regardless (left hand side of page). Is this doable with say Mootools? How much content would clicking each of the FAQ section buttons load? All of the contents from that single FAQ section, just the contents from the vertical accordion being opened, or the contents of all 3 FAQs at once (everything is loaded, but only one section is actually being displayed at a time)?

I just got an idea after coming across Using MooTools ScrollSpy to Load More Items via JSON/AJAX. From what I understand after checking out the demo, more content can be added to a page without reloading etc. So, for my FAQ page, how about having each section of the FAQ being loaded as you keep clicking the different accordion navigation buttons, and if you decide to print the FAQ it's smart enough to load all the pages first, creating one long page?

My website needs an update, both for visual and functional reasons. I'm leaning towards a 3-column layout with header and footer, with CSS this time around and a more modern, streamlined appearance. I know how to write simple HTML (my existing site was written all manually in a text editor) and understand (more or less) the basics of CSS. I'm hoping to be able to use some of the free solutions out there for the rest (navigation, graphic buttons etc.) to complete the project. The FAQ section currently consists of a single, long page. But I have lots more contents to add, so I somehow need to split it up. I also want a way to navigate (the current page has an index at the top which isn't very functional) and have been looking into a Javascript accordion for this. Here are my efforts so far. Although I'm happy with the animation and graphic design it has some shortcomings -most notably the lack of nested buttons/links, so instead of wasting any more time with it I've decided to look elsewhere and have so found a Mootools nested accordion which seems to do what I want, hopefully easily adaptable for the graphic appearance I have in that other accordion. Back to the FAQ itself: One solution would be to use a single page for each question/a few questions (allowing for quick loading), such as this example. But I personally care more for the ability to scroll up/down to other sections without much effort (of course, the accordion would get closer to that ability than having to jump back to an index page each time you want to see what else the FAQ has to offer). Another issue with this solution is that you can't easily print out the whole FAQ. I've also thought about splitting the FAQ into 3 main sections (meaning 3 separate pages). With the accordion I could link them together, like this: SECTION A SECTION B SECTION C By clicking on one of those section buttons you'd be presented by a range of sub-section buttons ("question 1" etc.) and also sub-section for some of those questions (see my existing FAQ index layout which I'll be duplicating). SECTION A SECTION B question 1 question 2 question 3 question 4 question 4.1 question 4.2 question 4.3 [*]question 5 [*]SECTION C That would make everything fairly quick to access and partly solve the printing problem (instead of printing a gazillion small pages you'd print out 3 larger sections). Although I know nothing about how to implement it yet, perhaps I could use AJAX to load the 3 different FAQ section contents into the same page without actually reloading the whole page (accordion, header, footer etc. such as in this demo)? I'm open for suggestions/comments on what to do.

I'm looking for an accordion to be used for navigating an FAQ, and have found several, but being a novice I have a hard time figuring out which one to go for. I have no time to try them all out and neither do I know Javascript, so it has to be simple to set up -hopefully just a matter of cut/paste and easy tweaking for the accordion to function/look the way I want it. I first decided to go with the Dezinerfolio simple Javascript accordion (no demo there any longer, but have a look on the top right hand side of this page) which still uses it, and spent a lot of time tweaking it, but unfortunately found out that it doesn't do nested buttons (I probably need a couple of levels in order to link to the FAQ's sub and sub-sub sections). So I've searched the web and found a Mootools nested accordion which seems to do what I want. I'm not quite sure what Mootools is, but assume it's the "basic level" Javascript code which can then be used for a variety of different functions on a website without needing a whole new code for everything, right? If this is the case, will it take up unnecessary memory in my case compared to all those other accordions claiming to be very small, or have I misunderstood? What do you suggest I do?

Any ideas? Anyone?

I've worked out several of those issues now. Here's the result (For now, don't mind the orange dotted outlines surrounding the link-buttons). 1) I've defined the buttons with links on them (.linkbutton) and can now style all buttons the same way: /* All buttons (text style) */ #nav_menu h2,.df_menu_head,.linkbutton a { color: gray; cursor: pointer; text-align: center; font-size: 10px; display: block; text-decoration: none; width: 190px; height: 21px; } This works fine, so I've equally tried to do this with the .header_highlight class, but the linked buttons don't follow this for some reason. Try clicking on any of the buttons that reveal nested items (e.g. "Download", FAQ" etc.) and you'll see the button text turns red. Now try clicking on the linked buttons ("Home", "Page 2" or "Page 3") and you'll see that they stay the same. I assume some old code overrides the new stuff I've written, but can't find out where. Here's my new code: /* Button styling when selected or pre-selected ("header_highlight" class) */ .header_highlight { width: 190px; /* graphic button image */ background: gray url(../images/button_mouseover2.gif) no-repeat 0 0; color: red; font-weight: bold; /* colored line underneath selected button */ border-bottom: 1px red solid; } 2) I've created a new class (.submenu_header_highlight) in order to separate the expanded submenu items from the buttons as I would like to highlight which sub-menu is accessed on the current page: /* Nested links (pre-selected -"submenu_header_highlight" in HTML code) */ .submenu_header_highlight { text-decoration: none; width: 171px; font-style: italic; font-weight: bold; color: red; } Try this by clicking on the "Download" button, then one of the menu items underneath which will bring you to that page. The page title selected should now be shown in bold, italic and red, but for some reason the text color doesn't change -why? 3) The link-area on the buttons with links on them ("Home", "Page 2" or "Page 3") aren't aligned with the buttons themselves. I've worked on the .linkbutton a class for this and added an orange dotted border so it's easier to see. I finally found out that the margin and padding needed to be defined differenly from the rest of the button. Why wasn't it aligned to begin with, and what are the correct margin/padding dimensions to enter? (I've done my best by eye-measurement though, as you can see). Here's the relevant code: /* All buttons except link-buttons (general styling) */ #nav_menu h2,.df_menu_head { /* graphic button image */ background: gray url(../images/button.gif); background-repeat: no-repeat; margin: 8px 0 0 7px; padding-top: 8px; } /* All buttons (text style) */ #nav_menu h2,.df_menu_head,.linkbutton a { color: gray; cursor: pointer; text-align: center; font-size: 10px; display: block; text-decoration: none; width: 190px; height: 21px; } /* Link-buttons only (general styling) */ .linkbutton a { border: thin dotted orange; margin: -8px 0 0 -1px; padding: 5px 0px 0px 0px; }

Yes, i've heard about a Javascript solution as well involving "blur", but as I currently know nothing about JS I'll stick with your solution for now. In the meantime I've been looking at the rest of the code and could need a few pointers. Here's my updated navigation menu. You can click on the Home, Page 2, Page 3 and Download buttons which will lead you to those pages. When you click on the Download button you further chose a sub-category which are the actual links. As you can see I've used the "Header_highlight" string to highlight (with a blue underlining) which menu section you're currently at. Unfortunately this doesn't work for a sub-category's link (to test this, click on the "Download" button (which opens up a selection), then click on one of the 3 links). Is there a way I can highlight one of those links? Next, as you can see, only the "Home" button works the way I want it to regarding linked buttons (the whole button is clickable -actually it isn't, but that's another issue. Read on) and not just the linked text (as in the "Page 2" and "Page 3" buttons). Instead of definining each and every button on their own in the CSS code, like this: /* Button with link (define clickable area) */ #home-header a { display: block; height: 20px; width: 190px; text-decoration: none; color: #7D7D7D; } /* Button with link (text style/color when already visited) #home-header a:link, #home-header a:visited { color: #7D7D7D; */ /* Remove dotted outline of button links in Firefox border: none; } */ /* Button with link (text style/color when mouseover) */ #home-header a:hover, #home-header a:active { color: #B9B9B9; /* Remove dotted outline of button links in Firefox border: none; */ } ... is there I can style all my buttons (the ones that expand AND the link buttons) using the same code? That would avoid the need to duplicate all the styles (to get a common, identical look for all the buttons) and the need for separating each link-button in their own class. The confusing part for me is that the link buttons are also a part of the JS controlled navigation menu, so what i've tried so far messes with the JS and prevents the navigation menu from working. Finally, I mentioned that not all of the linked buttons are clickable. Try hovering the mouse-pointer over the "Home" button. When you get near the top it's no longer linkable. I could clearly see the clickable area before removing the dotted outline for the links, and it seems that the clickable area has been shifted a little below the actual button itself. What causes this, and how can I fix it?

I must be doing something wrong here because no matter what I do I seem to either get a dotted box when clicking the button with the mouse AND when navigating between the linked buttons (and other links) using TAB, or no dotted box with either navigation method. Among the many different solutions I've tried, here's the one I'm currently working on: /* Linked buttons: Mouseover response */ a:hover { outline: 0; } /* Linked buttons when keyboard-navigated (using TAB, CTRL-TAB) */ a:focus { outline: dotted thin; } /* Link state in moment of mouse-clicking */ a:active { outline: 0; } From what I understand this tells every "a" HTML tag (URL links) that it should have no dotted box (outline) when the mouse pointer hovers over it (a:hover), no dotted box when the link is clicked on (a:active), but the box should be present when navigating with the TAB keys (a:focus).

Happy new year all! When you talk about keyboard navigation, are you referring to the TAB key (and ALT-TAB to go back) which jumps from one link to the other and "highlights" the active link with a dotted rectangle? And is my understanding correct that it's possible for the rectangle to be present (around the links in my text-contents as well as the navigation buttons) when the user presses TAB (or ALT-TAB), but when the mouse is used the dotted rectangles will no longer be shown?

a { outline:0; } Que Kyle... You beat me to it! I found the problem/solution here. However I also read that it removes the keyboard navigation. Then again there's a solution for it, but it doesn't seem to work for me (the dotted line is still there): a:active { outline: none; } Why won't that work? I'm using Firefox 3.0.5. on a Mac. lwsimon: I've always tried to make my web pages usable for anyone, so shutting out those without Javascript isn't an option.

It worked! Thanks Some minor cosmetical issues however, and in the meantime I came across another solution which also seems to work: Home The above doesn't display the URL when hovering over the button, but I guess I can live with that. Your solution worked fine, but it breaks the appearance of the buttons' text as previously set up in the CSS code: .df_menu_head:hover{ background: gray url(../images/button_mouseover.gif) no-repeat 0 0; color: white; font-weight: bold; } (any idea why inserting code here puts a blank line in between each line-break?) The second issue is that when I click on the button a dotted white rectange surrounds it. I seem to recall having read about this issue somewhere and that there's an easy fix for it, but can't remember how and where. It might also be a browser issue for all I know. I was going to ask you what the disadvantage of using the other solution I found is, but I figured that one out easily: it won't let the user click on the button unless Javascript is switched on. At least for the rest of the navigation system it works if Javascript is off (all the buttons are shown expanded, which doesn't look nice, but it allows the user to navigate). So all in all your solution is probably the most user-friendly one. I'll see if I can reapply the code to sort out those issues.

I'm trying to modify an "accordion" type navigation menu so that some of the buttons are linkable. I've figured out how to do this in HTML, but then you have to click on the text on the button. I want to be able to click anywhere on the button. Can this be done by modifying the CSS code somehow? The buttons already change their looks whenever a "mouseover" is detected, so I'm thinking this function can also be used with a , but I'm afraid my CSS skills aren't good enough to figure it out myself. Here's my navigation menu so far. I would like the "Home" and "Contact" buttons to link to somewhere else.

I'm trying to add some new features to a nice Javascript based "accordion" navigation menu that I found at the Dezinerfolio website. Here's my result so far. Here's what I'm having trouble figuring out (not knowing if it's an HTML, CSS or Javascript issue): Linkable buttons: In my example, the topmost ("Home") button doesn't expand as I want it to link to another page. Adding a normal HTML link to the text is easy, but I want the whole button to be linkable. Highlighting of sub-sections: Whenever I click a button it is highlit with a blue line underneath it. However, I would also like the same to happen when I click on a sub-section link. Nested buttons: it would be nice if I could press a button, then one or several nested buttons would appear with sub-sections inside. Is any if this doable?