ScrollSpy show wrong active tab when used with JS tabbed content - javascript

I have a project in which I use ScrollSpy and I have a section with tabbed content. The problem is that the script from this tabbed content blocks ScrollSpy showing the correct active item in the nav bar. This tabbed content is in the 3rd section of the page, all goes well until I select 4th menu item and from there on all goes wrong. I think that ScrollSpy is looking for the hidden tabs and somehow counts them too. Is there a way of forcing ScrollSpy to skip searching in one particular section and just move on? Or do you have any other idea on this? Here's the link to the problematic page http://oz.zz.mu/HongKongExpats/ maybe it will help you.
PS. The menu works correctly, it scrolls to the correct section, it only show the wrong menu item as active.
PPS. ScrollSpy it's showing as active the last menu item because I have to have body height: 100%, but I've managed to hide that with a last hidden menu item.

try this: jsfiddle
if Scrollspy highlight final element, you can add
height: 100%
to html and body tag

Related

Drupal, How to create a side bar menu with a pop out module/panel?

I am trying to create a sidebar navigation alot like this website:
http://www.josephleonard.com/
I am currently using the Adaptive Theme in drupal and using panels. I have the whole layout perfectly. All I need to figure out is how to trigger a panel after selecting an item on the menu as it does on this website. Any help will be appreciated!
Use CSS to hide your pop out panel by default. display: none; then use JQuery to show your pop out panel when a menu link is clicked. See this post for both a CSS and jQuery solution. https://css-tricks.com/snippets/jquery/styled-popup-menu/

Jquery/CSS3 slide up/down page transition

so i have a website with multiple pages and a navigation menu with links to the other pages.
i need a Jquery and/or CSS page transition that'll slide the page down, load new page and then slide that page back up.
This would be easy to do if the content of all the pages was in one single page, in different divs, and then i could just make a sort of carousel to show the div corresponding to the link that was clicked. Most of the answers i found applied to that situation. this is not the case though so that wouldn't work and i can't touch the html of the site!
css3 transitions work great when the page loads, but they also need to happen onbeforeunload, which is where the problem lies. i can use jquery to give the divs a class onbeforeunload, which works, but it unloads before the animations even start happening.
I've tried this plugin:
https://rawgit.com/votum/page-transitions/master/demo/index.html
but it looks very glitchy and doesn't work properly.
any ideas?
You can check out accordion to show content of selected menu item.
https://jqueryui.com/accordion/

How to scroll and load a hidden id at the same time

My problem goes like this.
I have a tab on the left side and the content for each tab shows in the right side.the tab extends long way down so I should use page scroll to get bat to the top in order or the content to be viewed but I cant scroll and load the same time.
So whats happening is I need to double click the tab to load and scroll to the id to the top.can someone help me with this?
perhaps you could wrap the tabs in an anchor tag with href: and wrap the content in a div tag with the id <div id="content"></div>, this way, when you click on the tab it will redirect you to the content div without having to scroll yourself.

Swiper Navigation And Page

A few days ago I asked help for a kind of website. Now I kinda made it using idangero's swiper but since I need the bullet to desappear and show my own linked menu I'm forced to create a div menu.
The problem is that when I slide with mouse or tapping with my phone the menu doesn't activate the name of the page on the menu that I'm visiting.
Any hint?
Here is my page: http://www.meowgraphix.it/prova
I fixed the problem. The only thing is that hashes doesn't load the right panel but the main one automatically :'(

Tab Names Included in Scrollbar

I have a problem on my website using JavaScript tabs where the tab names are included in the scrollbar, rather than just the content of the tabs, and so when the user scrolls down, the tab names disappear. I've put the code I have on JSFiddle linked below. If it's relevant, I'm embedding this in my site's main page by using:
<iframe class='demo' src='tabs.html' style='height:350px; width:700px' frameborder='0'></iframe>
http://jsfiddle.net/08ghjmnv/
Can someone please show me how to change my code so that the tab names/headers are not included in the scrollbar, so they're always visible for the user to click to change tabs?
Thanks in advance :) .
Try this.
.tabs {
position: fixed;
}
Demo here

Categories