How do I add an animated scrolling option on a html webpage? - javascript

I've recently started learning html and CSS. I have no knowledge of javascript, but I will learn soon. I want to know how to use a link on a page to scroll the page down to another portion of the same page in an animated fashion. For instance if the page has 2 parts, a "home" and an "about me" part, I want a link that will scroll the page down to the about me part from the home part. Is it possible to do this without javascript?

For the section you want to jump to, like the "about me" section, what you do is you create an anchor tag and you give it an id and then in your link, you set the link href source to the id of the anchor tag. This will make your link, when clicked, jump to the section that has the matching ID. Now this will jump you to the section, not necessarily animate it in a scrolling fashion.
Example:
link:
About Me
About me section
<a id="about_me">About Me section</a>
You could even leave the anchor tag blank and the link will still jump to that section like so:
<a id="about_me"></a>

Related

Different Functions for Rollover and Click Using jQuery/JS and href

Sorry if something like this has been asked, but I've spent a long time Googling it and searching it here.
I'm trying to build a homepage for a website where the menu is along the top, rolling over the menu items should show a description of the page in the middle of the screen, which they do, and this is working.
The problem is that because jQuery/JS is using the href tag to find the page the description is on, clicking on the menu item takes the user to a description page and not the actual page.
I've put the description paragraphs on separate pages from those they're describing since it'd be redundant if the description showed up on both home and the page the user wants to navigate to. I've also tried display=none in the CSS to get the description to be hidden in the main page and show on the homepage, but as the description carries the CSS from the main page, it's also being hidden on the homepage.
I'll post any code if asked, I wasn't sure whether to dump it all here or just certain parts.
Thanks

How to build accessible gallery?

I'm working on a website, and I want to add gallery to it. But I have a problem - the gallery must be accessible to blind etc, and I have no idea how to do it.
Usually, in those kinds of galleries, I would do the html like this:
<ul>
<li data-src="path/to/image/1.jpg"></li>
<li data-src="path/to/image/2.jpg"></li>
<li data-src="path/to/image/3.jpg"></li>
<li data-src="path/to/image/4.jpg"></li>
<li data-src="path/to/image/5.jpg"></li>
<li data-src="path/to/image/etc.jpg"></li>
</ul>
and using css and jquery I would use the data-src and add it as a background to the li (because not all photos are squers, so I'll use background-size: cover;). Then, when user will click on the li, a popup will appear with the full size image.
There are some problems with that. For example, it must be clickable using tab in the keyboard. I can add a to the li, but is it ok not having href? And what the machine will "think" when it'll see empty ul list? Another problem is the popup. The html of the popup and it's img tag located at the bottom of the page, so the machine won't be able to see it immediately after click. Another problem is the alt. There won't be description to photos (because they aren't uploaded by me), so I'll leave the alt empty?
Thanks!
Principles:
Images that convey information must have a text description. Best practice is to always use am <img> for an informational image, however, you could also use a title attribute on the anchor around the image.
Everything must be keyboard operable. Anchors without an href will not be tab focusable, add href="#" to fix that problem.
Blind people are not the only keyboard users. Make sure that you can control the gallery with the keyboard only.
Manage the focus when dynamic content appears and disappears. Make sure that the focus goes onto the full size popup and that the "close" control is keyboard operable. When closed, focus should go back to the anchor that opened the image.
Controls should have the correct role. Links are used to go to different pages. Buttons are used to control things on the same page. Your "anchor" around the image is acting like a button so add role="button" to the anchor.
You will have to give the image uploaders a way to add the alt text for the images. Facebook is not a good example of accessibility - it is a bad example. Look at EasyChirp for a good example of how to do alts on images that are uploaded.

Different Behavior between a direct link and href tag in a site made in bootstrap

I have a problem in a site made with bootstrap
If I set an href tag from an external page that landing on a section of my page, I have a strange behavior : the link sends me to the correct section but the navbar at the top of the menu marks the next item.
If the same link is typed directly from browser, instead, everything is working fine (the positioning of the page and the navbar menu).

Back to top link on php included footer?

I have a footer section on my website where I want to include a back to Top link.
Problem is that it can't detect on which page of the site the user is so it sends it in the index html top. Is there any way to achieve this?
I can't use Back to top since I have a base href that links to the index page of the website.
This code worked well, cross browser too:
TOP
Add a named anchor in your page just before the content, to specify the top of your current page. Like:
<a name="top"></a>
<!-- Rest of your content here -->
Then in your footer, link to the anchor with:
Back to top
You don't need php for this.
Just add a link like this:
Back to top

JavaScript page jump when updating element using ajax

I have a page which FITS vertically into the windo. When user clicks on the link, I get another page via ajax and plug it into the required element.
Everything works, But when user clicks on another link, page jumps up and it is annoying me.
I have tried using
<a href="#" onClick="showRoom('five');return false;" class="highlight">
//and
<a href="javascript:void(0);" onClick="showRoom('five');return false;" class="highlight">
and it did not work in both IE and Firefox - it continues to jump.
Is there any good working trick that could help?
I THINK that it has to do something with the renew. When I click the link - first, the LOADING ICON is showing. Only then, when reports table is available, it loads into the instead of icon. Therefore browser adds vscrolling bars when information is shown, but goes away in between reports switches and being replaced by small LOADING icon.
I think that I need to capture the scrollbar location when I click on the update link, then, after ajax updates the page, I need to call in another function that would scroll back to previous scrollbar location
This is how I "fixed" the problem, until real solution is discovered:
document.getElementById(showCoursesArea).innerHTML= '<center><img src=\"images/working.gif\"><h1><br><h1><br><h1><br><h1><br><h1><br><h1><br></center>';
pretty much it kepps my page LONG; therefore ajax updates are fitting right in.
'#' will take the user back to the top of the page, so I usually go with void(0). or if as you are saying second option is also not working than remove href and try out
or just try out
Link Text
or
<a onclick="javascript:myJsFunc()">Link Text</a>
or
Link Text
as id "0" will never be present on a page so that nothing happen.
When you click on a link with href="#" it is actually linking to the top of the document. You can actually just remove the href attribute completely.

Categories