simultaneously scroll multiple elements - javascript

I'm at a brick wall. I have a little project:
(LINK HAS BEEN REMOVED)
You can see lots of horizontal scrolls, when you bring the browser down to mobile width, you can scroll horizontally. My problem is, how do I get it so that if you horizontally scroll one item, all the others will follow too? I have tried the following:
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
})
But I'm getting nowhere fast. Any help would be appreciated.
UPDATE
Turns out it does work when you put the code into console AFTER the page has loaded.
I resorted to:
$(document).on('scroll', '.container', function(){
$('.container').scrollLeft($(this).scrollLeft());
});
UPDATE2
Big thanks to #George and everyone who answered to point me in the right direction. The tables are loaded with jQuery:
$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"");
All I had to do was attach my scroll code after the elements were loaded, like so:
$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"", function(){
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});

You told it works from console after page has loaded. So, try this out.
$(document).ready(function(){
$(document).on('scroll', '.container', function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
OR use the below code:
$(document).ready(function(){
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
Hope this helps.

Please try this
$('.container').scroll(function(){
var scrolled = $(this);
$('.container').each(function() {
$(this).scrollLeft(scrolled.scrollLeft());
})
})
Hope it helps.

Related

Button on-click scrolling not working

quite new to coding with javascript and such, having an issue with an on-click scroll where it goes to another div. I've checked a lot of the posts on here but can't seem to find out why it won't work. Any help would be greatly appreciated! It's probably a simple fix that I just don't have the experience to be able to notice..
Here's the code (I'll try to condense it but imagine there's a lot of content in between so it's actually worth scrolling to)
HTML
<div class="button-div"><button type="button">Click here</button></div>
<div class="div-2-under-top">Content here</div>
Jscript
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".div-2-under-top").offset().top},
'slow')
})
I have the latest jquery V3.3.1 so I wouldn't think that would be the issue... any ideas?
Here's a picture of the actual code itself in-case there's something important I missed (apologies if the code is dirty)
#TylerRoper found the answer for me.
I'll paste his answer here in-case anyone stumbles across this and is looking for the answer.
OP, your button click event needs to be inside of the $(function() { ... }) section. This section will be executed after waiting for the page to load. By trying to attach an event to $("button") outside of this, the button has not loaded yet, so the event can't be attached.
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".div-2-under-top").offset().top},
1000);
});
Try see can work or not ? hope this help you

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.
$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>
This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck
I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

Collapsing menu content

I have a ul menu that collapses, but the content inside each menu li is going a little funny when it's width is toggled.
i tried .slideToggle but couldn't get it to operate to slide into the right button div.
It works well it is just a little clunky. I'm assuming there is a css rule that could fix my issue but I'm a little stuck
JSFIDDLE
this is the rule i am using which you can see in the jsfiddle.
$(document).ready(function() {
$('#menu-active').click(function() {
$('#menu').animate({width: 'toggle'})
});
});
i'm new to javascript so I'm sure there is a better method that I'm unaware of.
Thanks.
I've made modifications on your codes. There are redundant $(document).ready(); and others. I've also modified your css code.
I just created an "illusion" in the modifications I've made and I hope this is what you're looking for.
Here's the updated jsfiddle.
Ok. Earlier i misunderstood your question. Here is the Updated answer with slide effect. But the thing is you need to use jquery ui also. check it out my fiddle.
$(document).ready(function() {
$('#menu-active').click(function() {
$('#menu').toggle('slide', {direction: 'right'}, 1000);
});
$('#close').click(function() {
$('#menu').toggle('slide', {direction: 'right'}, 1000);
});
});
Working JSFIDDLE DEMO

Equal height columns with jQuery not working?

I've tried numerous approaches to getting equal columns, and none have worked for me. I've tried every variation of jQuery plugin that I could find with different calls using both document ready and window load, in head and before the end of body... just no luck... the sidebar will not continue to meet my content.
I've created a fiddle with my latest shot (which is this method: http://www.outsidethebracket.com/equal-height-columns/), but am up for changing to whichever method will work.
http://jsfiddle.net/7WraW/
$(window).load(function(){
$("#sidebar").height(Math.max($("#content").height(),$("#sidebar").height()));
})
Appreciate any help!
Works fine if you use $(document).ready instead of $(window).load:
$(document).ready(function () {
var hgt = Math.max($("#content").height(), $("#sidebar").height());
$("#sidebar,#content").height(hgt);
});
http://jsfiddle.net/mblase75/7WraW/5/
Here try this...
$(document).ready( function() {
var contentHeight = $('#content').height();
$('#sidebar').css('height', contentHeight + "px");
});
There is The jQuery plugin for equalizing the height or width of elements that's far more better and with more utilities to accomplish this, and really easy to use:
http://tsvensen.github.io/equalize.js/
hope this helps, happy coding :)
here's a simple solution for equal height columns using jquery:
$(window).load(function(){
$("#left_side").height($("#right_side").height());
});
http://jsbin.com/iyirel/1/watch

.load() animation with external web page?

Here is basically what I want to do:
I want to slideUp() a div with my content. I want to .load() an external web page (on the same server) in that div and .slideDown() that div.
For now here is what I have:
$(document).ready(function() {
$('a').click(function(){
$('.content').slideUp('1000');
$('.content').hide().load('about.html');
$(".content").slideDown('1000');
});
});
Basically here's what I get: the div .content hides itself, loads the about.html page, and appears. But no slideUps or slideDowns.
Anyone has an idea?
Sorry if this is a noob question, this is the first real time I'm trying js/jquery.
Thanks in advance.
That's because those are asynchronous actions. You have to continue execution in callbacks:
$('a').click(function(){
$('.content').slideUp('1000', function() {
this.hide().load('about.html', function() {
this.slideDown('1000');
});
});
});
try:
$('a').click(function(){
var el = $('.content'), //cache content to avoid multiple calls
slidetime = 1000;
el.slideUp(slidetime,function(){ //slide up
el.hide().load('about.html',function(){ //afterwards, load
el.slideDown(slidetime); //afterwards, slide
});
});
});
you are passing string '1000' to slideUp or slideDown.
It should be number or string that it can take like 'slow'...
Try This
$(document).ready(function() {
$('a').click(function(){
$('.content').slideUp(1000);
$('.content').hide().load('index2.html');
$(".content").slideDown(1000);
});
});
Cheers :)

Categories