We Keep Coding

jquery - dynamic menu - click function not working

I have a horizontal category bar. this is populated by php - i set a data-cat-id property on the anchor. then use a jquery click function to get this value like this:
$('.filterCat').click(function() {
alert('cat id is:'+$(this).data("cat-id"))
return false;
});
This works fine. But the horizontal bar has a function that adds list elements to a "more" sub menu when the width gets smaller than its content. using the code:
$(function() {
alignMenu();
$(window).resize(function() {
$("#horizontal").append($("#horizontal li.hideshow ul").html());
$("#horizontal li.hideshow").remove();
alignMenu();
});
function alignMenu() {
var w = 0;
var mw = $("#horizontal").width() - 150;
var i = -1;
var menuhtml = '';
jQuery.each($("#horizontal").children(), function() {
i++;
w += $(this).outerWidth(true);
if (mw < w) {
menuhtml += $('<div>').append($(this).clone()).html();
$(this).remove();
}
});
$("#horizontal").append(
'<li style="position:relative;" href="#" class="hideshow">' + 'More ' + '<span style="font-size:13px">↓</span>' + '<ul>' + menuhtml + '</ul></li>');
$("#horizontal li.hideshow ul").css("top",
$("#horizontal li.hideshow").outerHeight(true) + "px");
$("#horizontal li.hideshow").click(function() {
$(this).children("ul").toggle();
});
if (menuhtml == '') {
$("#horizontal li.hideshow").hide();
} else {
$("#horizontal li.hideshow").show();
}
}
});
This also works but now when there is a "more" button (because the content is bigger) the click function does not work anymore.
i have made a fiddle - if you click on a normal menu item it shows the alert, but if you click on a item that is places under "more" it does nothing see FIDDLE: https://jsfiddle.net/quosa60e/

For dynamically created elements .click() does not work
document.on('click','SELECTOR',function(){});
So you should use:
$(document).on('click','.filterCat',function() {
alert('cat id is:'+$(this).data("cat-id"))
return false;
});

Change URL on scroll not working in chrome and opera

I use the following script to change the url hash when scrolling to a section of a one page website. This is working perfect in ie and firefox, but not in chrome and opera and i cant figure it out.
(jQuery)(function ($) {
// CHANGE URL ON SCROLL
$(function () {
var currentHash = "#intro"
$(document).scroll(function () {
$('section').each(function () {
var top = window.pageYOffset;
var distance = top - $(this).offset().top;
var hash = $(this).attr('id');
if (distance < 30 && distance > -30 && currentHash != hash) {
window.location.hash = (hash);
currentHash = hash;
}
});
});
});
});

Try using $("body").offset().top instead of window.pageYOffset

Scroll to see all dynamically added elements in div

I'm trying to scrape google play store page after search is done, i.e. this one:
https://play.google.com/store/search?q=stackoverflow&c=apps
As you can see, new apps load when you scroll to the end of page, and sometimes there appears an 'Show more' button also. I'm making an bookmarklet which needs to do all this scrolling, but I can't make it work. This is my current code:
var appContainerDiv = document.getElementsByClassName("card-list two-cards")[0];
var numberOfApps = appContainerDiv.childNodes.length;
var numberOfApps2 = numberOfApps;
do {
numberOfApps = numberOfApps2;
window.scrollTo(0, document.body.scrollHeight);
if (document.getElementById('show-more-button') !== null) {
document.getElementById('show-more-button').click();
}
numberOfApps2 = document.getElementsByClassName("card-list two-cards")[0].childNodes.length;
}
while (numberOfApps2 > numberOfApps);
appContainerDiv is div in which all apps are nested.

var delay = 2000;
var height = document.body.scrollHeight;
window.scrollTo(0, document.body.scrollHeight);
var interval = setInterval(function() {
window.scrollTo(0, document.body.scrollHeight);
if (document.getElementById('show-more-button') !== null) {
document.getElementById('show-more-button').click();
}
if (height == document.body.scrollHeight) {
clearInterval(interval);
}
} else {
height = document.body.scrollHeight;
}
}, delay);

Jquery functions - Ignore particular link within a function

The following single page site uses a waypoint script to navigate and highlight nav items - http://www.jbleitch.co.uk/dt/
It works well - the issue is that we need to alter a link to navigate to an external website - but the script prevents default on any links - so its reasonably complicated!
this is the original script -
//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
var dataslider = 1;
var clicked = false;
var windowWidth = window.innerWidth;
var narrow = (windowWidth <= 1000);
var navblock = $('.navBlock');
var dataslide = 1;
var myDirection = 'down';
var curSlide = 0;
slide.waypoint(function(direction) {
if (direction === "down") {
dataslide = $(this).attr('data-slide');
curslide = dataslide;
if (narrow) {
navScroll(dataslide);
}
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
}, {
offset: '25%'
}).waypoint(function (direction) {
if (direction === "up") {
dataslide = $(this).attr('data-slide');
curslide = dataslide;
if (narrow) {
navScroll(dataslide);
}
links.removeClass('active');
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active');
}
}, {
offset: '-25%'
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
//if (dataslide === 0 && $('.slide[data-slide=2]').offset().top > 10) {
// navblock.hide();
//}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
//alert(myDirection);
//alert(dataslide + ' ' + curSlide);
var scrollto = $('.slide[data-slide="' + dataslide + '"]').offset().top
//if (dataslide > curSlide) {
// scrollto = scrollto + 1;
// //alert("down");
//}
//else if (dataslide < curSlide) {
// //alert("up");
// scrollto = scrollto - 1;
//}
htmlbody.stop().animate({
scrollTop: scrollto
}, 3200, 'swing', function () {
if (narrow) {
navScroll(dataslide);
}
else {
navblock.removeClass('nofix');
navblock.removeAttr('style');
}
curSlide = dataslide
});
//setTimeout(function () { }, 3300);
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
});
function navScroll(dataslide) {
//alert('div[data-slide="' + dataslide + '"]');
var slidepos = $('.slide[data-slide="' + dataslide + '"]').offset.top;
navblock.addClass('nofix');
//navblock.hide();
navblock.css({ top: $('.slide[data-slide="' + dataslide + '"]').offset().top });
navblock.fadeIn('slow');
//alert(navblock.attr('class'));
//alert("nav scroll");
}
this is the navigation list -
<ul class="navigation">
<li data-slide="2" class="nv1 active">Services</li>
<li data-slide="3" class="nv2">Fees & Reporting</li>
<li data-slide="4" class="nv3">News</li>
<li data-slide="5" class="nv4">Meet the Team</li>
<li data-slide="5" class="nv4"><a style="color:inherit!important; text-decoration:none" href="http:www.othersite.com">Careers</a></li>
<li data-slide="7" class="nv6">Our Credentials</li>
<li data-slide="8" class="nv7">Contact</li>
</ul>
I need to change the careers site to navigate to the url but the script above prevents it from doing so - I have tried the following alteration -
links.click(function (e) {
if(!=".nv5"){
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});
But no luck - can anyone suggest an alternative!?

Usually I get the info i want in a data attribute, and then i can make anything
<li data-slide="5" class="nv4">
Careers
</li>
Then, in the click handler:
links.click(function (e) {
if($(this).attr("data-ref") != ""){
//get the link
var link = $(this).attr("data-ref");
//go to link
window.location.href = link;
} else {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});

You can simply add a condition to your link method whereby it will check for an attribute or some other property and follow through with the link if required
You were on the right track with your initial attempt. This should work
links.click(function (e) {
if(!$(this).hasClass("nv5")){
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});
That's assuming you have the class nv5 on the links you want to remove the behaviour from

scroll other scrollbars with scrollbar

i have 3 divs with scrollbars.
If i scroll in div 1 i want to scroll div 2 and 3 in the opposite direction.
The distance scrolled should be half the distance of div 1.
This is what i have now (small part, rest is in jsfiddle), which works for 1 div.
$("#textBox1").scroll(function () {
console.log("scroll 1");
var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
var half_offset = offset/2.0;
disable1 = true;
if(disable2 == false) {
$("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
}
if(disable3 == false) {
$("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
}
disable1 = false;
});
However, if i try to get the same for the other 2 divs then i can't scroll anything anymore.
This is because div 1 triggers div 2 and div 2 triggers back to div 1 for example.
I tried to fix this with the disable code but it doesn't help.
Can someone help me?
http://jsfiddle.net/XmYh5/1/

No disrespect to #EmreErkan and #Simon for their effort. Here's a no-click version of this.
var $boxes = $("#textBox1,#textBox2,#textBox3"),
active;
$boxes.scrollTop(150);
// set initial scrollTop values
updateScrollPos();
// bind mouseenter:
// 1) find which panel is active
// 2) update scrollTop values
$boxes.mouseenter(function () {
active = this.id;
updateScrollPos();
});
// bind scroll for all boxes
$boxes.scroll(function (e) {
$this = $(this);
// check to see if we are dealing with the active box
// if true then set scrolltop of other boxes relative to the active box
if(this.id == active){
var $others = $boxes.not($this),
offset = $this.scrollTop()-$this.data("scroll"),
half_offset = offset / 2;
$others.each(function(){
$this = $(this);
$this.scrollTop($this.data("scroll") - half_offset);
});
}
});
// utility function:
// assign scrollTop values element's data attributes (data-scroll)
function updateScrollPos() {
$boxes.each(function(){
$this = $(this);
$this.data("scroll",$this.scrollTop());
});
}
Fiddle

You can use a variable to determine active textbox with .mousedown() and do the trick if it's active;
var activeScroll = '';
$("#textBox1").on('mousedown focus mouseenter', function () {
activeScroll = 'scroll1';
}).scroll(function () {
if (activeScroll == 'scroll1') {
console.log("scroll 1");
var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
var half_offset = offset / 2.0;
$("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
$("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
}
});
You can check your updated jsFiddle here.

Finally got a dynamic solution for this, was more complex than I thought but I think I got it:
http://jsfiddle.net/XmYh5/14/
var initialTop = 150,
factor = 2;
$(".textBox")
.addClass('disabled')
.scrollTop(initialTop)
.on('scroll', function () {
var $this = $(this);
if(!$this.is('.disabled')) {
this.lastOffset = this.lastOffset || initialTop;
var offset = $this.scrollTop(),
step = (offset - this.lastOffset) / factor;
$this.siblings().each( function() {
var $this = $(this),
offset = $this.scrollTop() - step;
$this.scrollTop(offset);
this.lastOffset = offset;
});
this.lastOffset = offset;
}
})
.on('mouseenter', function() {
$(this).removeClass('disabled').siblings().addClass('disabled');
});