I am using twitter bootstrap and has a very long page that I divide into multiple sections.
I'd like to implement a Section Indicator on top left of the screen that always shows where the reader is currently reading, like the screenshot below:
I managed to get the layout correctly as shown here:
However, I've got some problems that I've been working for a few weeks but still can't solved:
How to mark the current section dynamically as the user scroll
How to animate the movement of the arrow from the source to the next (or directly to the destination if the reader click a farther away rather than scrolling)
I've tried with the simpler version from getbootstrap.com/components but still to no avail... Please help... this is very stressful as I'm particularly weak in javascript and css :(
EDIT:
To summarize the answer:
Take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
For a single-page website have a look at the One Page Navigation Plugin http://trevordavis.net/blog/jquery-one-page-navigation-plugin. It assigns a css-class to the current menu item upon clicking and as the user scrolls down the page.
Related
I am using bootstrap select plugin to generate custom dropdowns in one of my projects but I am stuck in a very critical issue. The dropdown list is big and when dropdown is opened the screen moves/scrolls toward bottom a bit so that first few options can't be seen.
Issue can be seen here in this video:
https://drive.google.com/file/d/1SWQVvfOgO0-iLy0KjIf3sPEANKu8Nkpv/view
And if you want to play around please check here the color filter:
https://www.stylorita.com/new1/outfit-ideas.php
Important: I can not use the max-height or add a scrollbar to it for fixing, I must display it without scrollbar. Please anyone can help?
If I understand you correctly, the solution is for whatever reasons NOT a scrollbar, but you want the first entries of your dropdown list to stay in view, right?
Maybe JS scrollIntoView() may help: If you have the chance to apply a class to your first list entry, you could use scrollIntoView when the list opens (which is normally the case at getting the focus or on click).
You can find a short description of scrollIntoView on this page: https://www.w3schools.com/jsref/met_element_scrollintoview.asp
Firstly i must say i am a complete novice in programming! That said, i need some help regarding an issue that seems for me impossible to solve.
What i need is a menu that on a single page remains fixed in the same position, (i'm not that sure but the idea is similar to a sticky menu that wouldn't be at the top) from which it's possible to scroll down to each page section with an anchorlink. I tried to use "scroll to page id" but sometimes it gets stuck, or doesn't even scroll down and worst of all, once the page scrolls the menu is gone. image for reference.
I've been looking for days through plugins, stickymenus and other stuff but still haven't found the right solution. Any suggestions?
You can define your areas as sections instead of "page ids". After that is simple to navigate through those.
The Bootstrap Scrollspy is a nice way to do that simple: Bootstrap Scrollspy example
I'd like to implement a sidebar, where each entry will have an Icon along to it's text.
In deactivated state, the sidebar shall display only the icons, wheres in activated state, the sidebar shall expand to its whole width, showing its entries with both icons and text.
Just like the menu button in Expanding Menu Button, but this behaviour for the whole sidebar.
Can this be done using Semantic UI?
I have asked a similar question a while ago here, and I managed to solve it myself, by modifying some of Semantic-UI's source code.
Unfortunately, the modifications were too extensive to post them directly in this answer, so I have created a github repo with an example here. Hopefully it helps. Due to the fact that the source code from Semantic-UI was modified, normal sidebars will probably be buggy.
A common problem I run into when building responsive websites is how to make a multi-level nav menu (3 or more levels) that works well for touch devices. I've seen a lot of plugins and techniques, but most of them fall flat because they don't allow a 2nd-level page to act as both a link to a page AND a parent of children in a sub-sub-menu. Some techniques address this by having an arrow icon that exposes the children menu items while clicking on the parent page name goes to the actual page... but on mobile devices these icons are usually very small targets and hence hard to use. Are there any other solutions to this problem (either jquery or javascript plugins, or straight-up CSS/JS code)?
I have a 'starting point' of sorts that I use for responsive web projects like this. I'm not sure if it's exactly what you need, but it allows for multi-level dropdown menus in desktop view. In mobile view, jQuery automatically creates an off-canvas menu.
Code:
https://github.com/kthornbloom/Responsive_Template
Demo:
http://rwd.kthornbloom.com/
Hope it helps!
Have you checked out any of the documentation surrounding touch-start events? I feel like you're going to get the best ux from this method. In your position, I'd be using tap to toggle classes onto your menu that would set the display to block (for example). Once your menu is open, you could then bind another touch event to the sub-level objects.
After our discussion in comments, it seems there isn't a straight forward way to get what you want due to the fact that we don't know what the user want after the submenu has been opened. There is no way for us to tell if they want to go to a link by clicking on the item again or collapse the submenu.
From this point, you have 2 options
Create a collapse once the menu is open and the user will know to use that to collapse the menu. If you think the size on most sites are small then make it bigger, however I don't think this will be an issue because it is so common.
Create a close button or something close to that for the entire menu. So when you click an item, it will expand, and if you click the same item again, it will go to the link. However there is collapsing the submenu until you click on the overall close button for the entire menu. This is only for tablets/phones as on desktop this should be a hover behaviour. This is similar to how the menu behaves on a tablet for http://www.lexus.ca. We actually have the menu closing if you click on the top most item again, you can see this behaviour on the phone or tablet. This is another option for you if the top level navs does not lead to pages.
Found a great write-up for a solution: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/