What I have now is:
var a = document.getElementsByTagName('a');
I use this to get all elements with an 'a' and when I scroll it autoscrolls to the next 'a' element.
The problem with that is that I also use links (that use an a href="") so sometimes it scrolls to a link instead of an <a name="name"></a>. Is their anyway to fix this? Like:
var a = document.getElementsByTagName('a name=""');
(this one doesnt work)
If full code is needed I will add it below, but its probably not needed.
(function () {
var delay = false;
$(document).on('mousewheel DOMMouseScroll', function (event) {
event.preventDefault();
if (delay) return;
delay = true;
setTimeout(function () {
delay = false
}, 800);
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var a = document.getElementsByTagName('a');
if (wd < 0) {
for (var i = 0; i < a.length; i++) {
var t = a[i].getClientRects()[0].top;
if (t >= window.innerHeight * 0.95) break;
}
}
else {
for (var i = a.length - 1; i >= 0; i--) {
var t = a[i].getClientRects()[0].top;
if (t < -window.innerHeight * 0.5) break;
}
}
$('html,body').animate({
scrollTop: a[i].offsetTop
}, 800);
});
})();
You can use QuerySelector for HTML 5 supporting browsers .You can check its support from http://caniuse.com/#feat=queryselector
QuerySelectorAll
document.querySelectorAll("a[name='<setname>']");
For older browsers use Jquery
$("a[name='<setname>']")
If you don't want to set a specific name just leave it blank. The selector is same for both JQuery and HTML 5 querySelector
document.querySelectorAll("a[name]");
or
$("a[name]")
Try with querySelectorAll()
document.querySelectorAll("a[name='examplename']");
find a empty
document.querySelectorAll("a[name='']");
Related
I implement a custom dropdown, and I have a problem when I move by keyboard: hover works too and I don't know how to disable it. I've paste my code here http://jsfiddle.net/4o0bcv1d/, but here my code works correct. When I copy code to index.html - hover works again, when I move by keyboard.
How I can fix it?
var doc = document;
var keydown_count = -1;
var dropdown_content = doc.querySelector('.dropdown-content');
var dropdown_items = doc.querySelectorAll('.dropdown-item');
var dropdown_items_length = dropdown_items.length;
var clear_navigation_hover = function () {
for (var i = 0; i < dropdown_items_length; ++i) {
dropdown_items[i].classList.remove('dropdown-item--hover');
};
}
var navigation_hover_by_keydown = function (event) {
var event = event || event.window;
var UP = 38;
var DOWN = 40;
var SCROLL_STEP = 66;
if (event.keyCode === UP) {
keydown_count--;
if (keydown_count < 0) {
keydown_count = dropdown_items_length - 1;
dropdown_content.scrollTop = 66 * dropdown_items_length;
}
if (keydown_count < (dropdown_items_length - 3)) {
dropdown_content.scrollTop -= 66;
};
} else if (event.keyCode === DOWN) {
keydown_count++;
if (keydown_count >= dropdown_items_length) {
keydown_count = 0;
dropdown_content.scrollTop = 0;
}
if (keydown_count > 3) {
dropdown_content.scrollTop += 66;
};
}
clear_navigation_hover();
dropdown_items[keydown_count].classList.add('dropdown-item--hover');
}
var dropdown_input = doc.querySelector('.dropdown-input');
dropdown_input.addEventListener('keydown', navigation_hover_by_keydown, false);
var navigation_hover_by_hover = function () {
clear_navigation_hover();
this.classList.add('dropdown-item--hover');
keydown_count = this.getAttribute('data-index');
console.log('hover');
}
for (var i = 0; i < dropdown_items_length; ++i) {
dropdown_items[i].addEventListener('mouseover', navigation_hover_by_hover, false);
}
You can use the CSS pointer-events feature to disable hovering on any of the page element. On keypress you need to add this attribute to the body tag like this
document.body.style.pointerEvents = 'none';
and again on key release you could remove this property so that mouse over starts working again. So at key release you need to do
document.body.style.pointerEvents = 'auto';
The pointer-events property allows to exclude an HTML element from being a mouse target. All the descendant elements are also excluded from being a mouse target unless the pointer-events property has been explicitly overridden for that node.
you can set the css selector, instead :hover, anything like :hover:not(.unhover), the class .unhover can be added using js
I'm working on some web pages that use a button to scroll to the next div. I can get it to work on every page, except in this particular instance (see jsfiddle).
My problem is that the buttons don't work on loading the page, the user first has to start scrolling manually, before the buttons work. I'm assuming that's because of some fault in my jQuery coding, which I've looked over and over, but I can't seem to find the problem. Is there anyone who is a bit more familiar with jQuery than I am who can offer me a solution?
http://jsfiddle.net/y5wx7nst/3/
$(document).ready(function () {
var currentElement = $("#bodytext > div:nth-child(1)");
var onScroll = function () {
var container = $("#bodytext");
var children = $(".section");
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
var childLeft = container.offset().left < child.offset().left;
if (childLeft) {
currentElement = child;
console.log(currentElement);
return;
}
}
};
var scrollToElement = function ($element) {
var container = $("#bodytext");
var children = $(".section");
var width = 0;
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
if (child.get(0) == $element.get(0)) {
if (i === 0) {
width = 0;
}
container.animate({
scrollLeft: width
}, 500);
onScroll();
}
if (child.next().length > 0) {
width += child.next().offset().left - child.offset().left;
} else {
width += child.width();
}
}
};
var buttonright = function (e) {
scrollToElement(currentElement.next());
};
var buttonleft = function (e) {
var container = $("#bodytext");
if (currentElement.prev().length > 0) {
if (container.offset().left == currentElement.prev().offset().left) {
currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
} else {
currentElement = currentElement.prev();
}
}
scrollToElement(currentElement);
};
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
});
You are only calling the onScroll() function after you initially scroll:
$("#bodytext").scroll(onScroll);
I added this before that declaration and it all worked:
onScroll();
jsfiddle: http://jsfiddle.net/y5wx7nst/5/
When code run value of currentElement is not correct. So you should calculate it calling a function onScroll();
...
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
onScroll();
});
I'm trying to create a menu of social media icons that slides into and out of the page. The following code works, but it is too fast. It doesn't look like sliding. I think I could adjust the timing using the setInterval() method, but I can't get it to work. This is the code so far:
var socialMedia = document.getElementById("socialmedia");
var stalkMe = document.getElementById("pleasestalkme");
function SM() {
socialMedia.style.position = "fixed";
socialMedia.style.right = "-330px";
}
SM();
stalkMe.addEventListener("click", function(){
if (socialMedia.style.right === "-330px") {
for (i = -330; i <= -30; i++) {
var j = i +"px";
socialMedia.style.right = j;
}
} else if (socialMedia.style.right === "-30px"){
for (i = -30; i >= -330; i--){
var j = i +"px";
socialMedia.style.right = j;
}
}
}, false);
You should have a look at CSS transitions. Basically you just need to change the right style from 300px to 0px and using transition: right 1s; you would see your element being animated
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Otherwise, you could have a look at jQuery.... (I feel bad).
Prior to the solution, a word of warning: you actually should not use this code snippet. Instead heed the advice of floribon and look into css transitions.
However, if you absolutely must do it the outmoded way:
for (i = -330; i <= -30; i++) {
var j = i +"px";
socialMedia.style.right = j;
}
write
var hnd;
i = -330;
hnd = setInterval ( function () {
var j = i +"px";
socialMedia.style.right = j;
i++;
if (i > -30) {
clearInterval(hnd); // end activity
}
}, 50 ); // interval length in ms
I tried to count an element clicks, and, in the right number call some action.
var count = 0;
document.getElementById("rolarbaixo").onClick = function(e) {
if( count >= 3 ) {
var elem = document.getElementById("noticia");
elem.setAttribute("style","top: 0px;");
}
else {
count ++;
}
};
When i clicked 3 times in the link "rolarbaixo" the div "noticia" set the "top: 0px;", but this doesn't work.
Why?
count ++ should be count++. If you press F12, you will be able to get to the developer tools and debug the javascript.
It's onclick in lowercase
var count = 0;
document.getElementById("rolarbaixo").onclick = function (e) {
if (count >= 2) {
var elem = document.getElementById("noticia");
elem.style.top = "0px";
} else {
count++;
}
};
FIDDLE
And it's >= 2 for three clicks (zero based and all).
AS the question is tagged jQuery, this would be it
$('#rolarbaixo').on('click', function() {
var clicked = $(this).data('clicked') || 0;
if (clicked >= 2) $('#noticia').css('top', 0);
$(this).data('clicked', ++clicked);
});
FIDDLE
Misprint in else statement and change onclick to lowercase:
var count = 0;
document.getElementById("rolarbaixo").onclick = function(e) {
if( count >= 3 ) {
var elem = document.getElementById("noticia");
elem.setAttribute("style","top: 0px;");
} else {
count++;
}
};
I was using a script (that I probably found here) to add / remove classes on elements while scrolling. The scripts associates href from a menu to add / remove classes to corresponding element in the page. The script works fine when using one menu and one set of elements, but I tried to make it usable with multiple menus and I can't seem to find what's wrong. I get an error with the getTargetTop() function, but I can't resolve it.
Here is the code I'm using :
$(window).scroll(function(e){
checkSectionSelected($(window).scrollTop());
});
function getTargetTop(elem){
console.log(elem.attr('href'));
var id = elem.attr("href");
var offset = 0;
return $(id).offset().top - offset;
}
var sections = $('ul.ctrl a');
var mainmenu = $('nav a');
function checkSectionSelected(scrolledTo){
var threshold = 100;
var i;
for (i = 0; i < sections.length; i++) {
var section = $(sections[i]);
var target = getTargetTop(section);
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
$('.char').removeClass('active');
$('.char'+section.attr('href')).addClass('active');
sections.parent('li').siblings('li').removeClass("active");
section.parent('li').addClass("active");
}
};
var m;
for (m = 0; m < mainmenu.length; m++) {
var link = $(mainmenu[m]);
var newTar = getTargetTop(link);
if (scrolledTo > newTar - threshold && scrolledTo < newTar + threshold) {
sections.parent('li').siblings('li').removeClass("active");
section.parent('li').addClass("active");
}
};
}
Thanks for helping!