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
Related
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
Okay so I am looking at this website, http://codetunnel.net/, and I saw that it only used one page, but jQuery was used to display different divs, therefore making it feel like a multipage website. I tried using the jQuery in my codepen, but it never worked. Can someone help me understand how the jQuery works, and how I can implement it into my own sites? The jQuery looks like this:
$(function(){
$("#nav-home").click(function(){
$("#home").show();
$("#projects").hide();
$("#contact").hide();
$(".selected").removeClass("selected");
$("#nav-home").addClass("selected");
});
$("#nav-projects").click(function(){
$("#home").hide();
$("#projects").show();
$("#contact").hide();
$(".selected").removeClass("selected");
$("#nav-projects").addClass("selected");
});
$("#nav-contact").click(function(){
$("#home").hide();
$("#projects").hide();
$("#contact").show();
$(".selected").removeClass("selected");
$("#nav-contact").addClass("selected");
});
});
https://codepen.io/orchtechnerd/pen/dRzGZV // my codepen
Actually, your code works.
Unfortunately, the visible div is covered by the #nav.
So the only thing you should do is add a "padding-top: 4em" style to the body.
I'm trying to toggle a div on click via jQuery.
But somehow on my live site it does not work at all.
I tried .toggle; hasClass .addClass .removeClass in if/else; also .show/.hide on if/else and so on.
But somehow the content does not get displayed or cannot be hidden.
Here is my working fiddle with the segment DOM of the livesite:
JSFiddle Example
$(".jsselect").click(function() {
var popup = $(this).next(".popup_select");
if (popup.hasClass('showit')) {
popup.removeClass('showit');
} else {
popup.addClass('showit');
}
});
Here is my livesite: Livesite
Well,
sometimes you just need to go to bed and figure out, that you've added the same script.js twice - so the code did execute twice.
Well, screw me then ;)
Thank you all so much!
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.
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.