Develop Reference

Anchor hidden by overflow moves into view on focus

I have a simple scroller (similar to the tag scroller at the top to Google images), which uses jquery/javascript.
<div class="chip-scroller widget">
<a class="chip-scroller_nav chip-scroller_nav--prev">
<span class="md-icon">arrow_back_ios</span>
</a>
<ul>
<li>
<a class="chip-scroller_chip">anchor</a>
</li>
<!-- more items here -->
</ul>
<a class="chip-scroller_nav chip-scroller_nav--next">
<span class="md-icon">arrow_back_ios</span>
</a>
</div>
The UL (list) has overflow-x: hidden set, so depending on the screen width and the number of items in the list, some items will be out of view, either to the left or the right of the visible area.
In the example below, 2 are hidden to the left, 3 are visible and 1 hidden to the right.
(hidden) (hidden) [visible visible visible] (hidden)
The list is positioned using javascript, and in the main navigated using the prev/next navigation buttons at each side.
The issue I have is that any of the items can be focused, whether they are visible or not, and focus means that they're immediately brought into view.
However, the scroller doesn't realise things have changed and it breaks my design. For instance the nav buttons may still show when there is nothing more to scroll in a particular direction.
The first thing I tried was to use e.preventDefault() to try and stop any default browser action, but it still bring the item into view. I'm using the on "focus" to capture the event:
$("body").on("focus", ".chip-scroller_chip", moveFocus);
This seemingly has no effect.
I could tag non-visible anchors with tabindex=-1 but I don't want to stop the focus event happening, just regain control back from the browser.
Any ideas would be great.

What if you would add an if on move focus, assign another class with js to which elements you want to do actions, and with an if check if has a class .hassClass(), then if it does do something, else dont.
Add the class while you create an element. To the class that you dont want to show, add overflow: none, do the wanted thing to the other ones.
Atleast I would oreantate towards this.

How to move element on slide change using jQuery cycle2?

I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});

You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck

fullPage.js utilizing .active and .fp-viewing-firstpage-X classes

I have a webpage that utilizes fullPage.JS. There is a firstPage section with 5 horizontal slides that is navigated to with a header menu via data-menuanchor. Additionally there is a secondPage section with 3 horizontal slides that is navigated with a footer menu, also via data-menuanchor.
I would like for each li menu item to change color when it's corresponding section is navigated to. Right now I am accomplishing MOST of this by using the :focus CSS selector. However this only works when a menu item is clicked. I also need the highlights to change when navigation is done via touchscrolling, keyscrolling, etc.
Initially I thought I could accomplish this by using the "active" class as it is passed to the menu, but I quickly realized that, because of the structure of my page, the "active" class is simultaneously passed to every li in the menu....either all five items in my header menu or all 3 items in my footer menu.
After concluding that I would not be able to use the "active" class to differentiate as needed, I began looking at the "fp-viewing-firstpage-X" class that is given to the body as each section and slide is navigated to...
However, I am not having luck with either approach I've come up with.
First I tried to do it all with CSS with something like this:
.fp-viewing-firstpage-1 .item {
color:white;
}
After not having success with that I tried using this javascript in the onLoad, onLeave, afterRender callbacks, etc...:
if ( $('body').hasClass('fp-viewing-firstpage-1') ) {
$('.item').addClass('white');
}
So far neither approach has accomplished my goal of changing the color of whichever menu item's corresponding section is navigate to, regardless of HOW is is navigated to.
Your assistance is appreciated!

Remember div hover state after page refresh

I have a navigation bar that grows in width when it is hovered over.
Here's an example:
http://jsfiddle.net/Gsj27/822/
Now, if for example I have a home button in the area that the hover effect applies to, when it is clicked and the home page is loaded the result is as follows:
The page is loaded with the navigation area in default size (small width), and after an instance it increases in width, as per the hover effect, when the hover effect "kicks in".
The Question
How to make the page load with the hover effect keeping its state right before a hyperlink is clicked? So in my example, if the home button is clicked then load home page with the hover effect already active (since home button is on navbar area so hover effect will necessarily be on). But if a hyperlink elsewhere (e.g. gray area in my example) is clicked then load page with hover effect off.
I think this can be achieved using js toggleClass? Something like
$(document).ready(function(){
if(/* hover effect was on */) {
$('nav').toggleClass('hovered');
}
})

You can save status in url:
<a href="?active=true">
if(window.location.href.indexOf('active=true') > 0) {
$('.nav').addClass('hovered');
}
Code: http://jsfiddle.net/Gsj27/824/
Demo: http://fiddle.jshell.net/Gsj27/824/show/
You can also use hash(#) to save status.

How to hide balloon tooltip on touch screen smartphones?

I'm newbie to JavaScript. I used the search to find solution for my problem, but I couldn't find what I was looking for.
I am using this jquery.balloon.js, which transforms the default browser rendering of the tooltip to customized one (with adding some CSS to it – background, border, etc.).
This is the JavaScript code:
$(document).ready(function(){
$('a').balloon({
position: "bottom",
tipSize: "0"
});
});
Everything works just fine: when I hover the mouse on a link with included title attribute, the tooltip shows up customized. When I hover out the mouse the tooltip hides.
The problem comes when browsing on touch screen devices.
There is no mouse for hovering, so I tap once on the link and the balloon tooltip shows up (the link does not activate, the link is activated only when I tap twice), but then the tooltip does not hide. I tap somewhere on the body, but the tooltip remains on the screen.
I know how to hide elements in JavaScript by clicking/tapping outside them (in the html or body) with $('html').click(function() { //code });, but here the problem is that the tooltip is not an element, but attribute...
How to hide only the tooltip with tapping somewhere in the body?
You can test this behavior on the jquery.balloon.js site here with any touch screen device to see that once activated by tapping the tooltip can't hide.

Thanks for the only answer, but I figured it out.
I have created a class with the following code:
$.balloon.defaults.classname = ".balloon";
$.balloon.defaults.css = null;
This way I created .balloon class which allowed me to customize the tooltip by myself. I used this code to hide the tooltip by hiding the .balloon (which hides the newly customized jQuery tooltip):
$(document).ready( function(){
$('body').click( function(event){
event.stopPropagation();
$('.balloon').hide();
});
});

You can call the hideBalloon function.