Scroll modal to top after clicking navigation - javascript

i have the following code which loads wordpress posts into a modal which works great. The only problem is that when one of the nav links are clicked it loads the next post without scrolling to the top.
Is there any way i can make the modal scroll to the top when one of the nav links are clicked ?
(function($) {
$(document).ready(function($){
$(document).on("click", ".esg-grid a, .postmodal .post-navigation a", function(event) {
event.preventDefault();
var post_url = $(this).attr("href");
var post_id = $(this).attr("rel");
$(".postmodal").load(post_url + " #main-content" );
$(".postmodal-container").removeClass("hidden");
//window.history.pushState("object or string", "Title", "/new-url");
return false;
});
});
})(jQuery);
Thanks,
Scott

This should scroll to the top of your modal. You can put it right after your load in the click listener to get it to scroll.
$(".postmodal-container").scrollTop(0)

Related

jQuery slidetoggle keeps toggling after window resize/ready combined

I want to add slidetoggle only when screen size is less than 768px. I also want this to work when user for some reason would resize the window manually.
I have come across a bug with jQuery where my dropdown menu will keep toggling after I resize the window. I've looked up this issue and tried adding return false; to click function and adding position: relative; overflow:hidden; to toggleable div(these should be a workaround according to some forums). No luck there. What causes this bug. I will include the whole function with the click function
//Call function on ready and window resize
$(document).ready(navigationMobile);
$(window).on('resize', navigationMobile);
function navigationMobile() {
const windowWidth = $(window).width();
if (windowWidth < 768) {
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a class="js-all-link" href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(".js-second-title").click(function () {
$(this).siblings('.js-menu').slideToggle();
$(this).toggleClass('js-open');
});
} else {
//Add href back to main link
$('.js-second-title').each(function () {
if ($(this).attr('href') === undefined) {
const allHref = $(this).siblings('ul').find('.js-all-link').attr('href');
$(this).attr('href', `${allHref}`);
$(this).siblings('ul').find('.js-all-link').remove();
}
});
}
}
Cheers!
I don't exactly know what is causing this bug. But I came up with this workaround.
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
$(this).addClass('js-closed');
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a class="js-all-link" href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(document).on("click", '.js-second-title.js-closed', function (e) {
$(this).removeClass('js-closed');
$(this).siblings('.js-menu').slideDown();
$(this).addClass('js-open');
});
$(document).on("click", '.js-second-title.js-open', function (e) {
$(this).siblings('.js-menu').slideUp();
$(this).removeClass('js-open');
$(this).addClass('js-closed');
});
So here I am basically extening SlideToggle function. Before I call slide functions on click I give each js-second-title classes an extra class .js-closed so the browser is aware that the menu is closed. After that I call slideDown function when I click on closed menu title and slideUp when I click on open menu title.
I do not think that this is the best or most sematic solution so I would like to keep this topic open.

close side menu when clicked outside

this is my code for a menu that comes in from the right side... heres is the js
jQuery(document).ready(function($) {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap'),
$sidebarArrow = $('.sidebar-menu-arrow');
$content = $('.content');
// Hamburger button
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
$content.toggleClass('content-background');
});
// Sidebar navigation arrows
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
i want it to close automatically when clicked outside anywhere out side the menu. how can i do this.
Simply do as follow:
$(document).click(function (e)
{
var container = $(".toggle-button");
if ((!container.is(e.target))) // if the target of the click isn't the TOGGLE BUTTON...
{
// Code to hide the menu
$('.toggle-button').toggleClass('button-open');
$('.menu-wrap').toggleClass('menu-show');
$('.content').toggleClass('content-background');
}
});
That's it
Enjoy coding :)
Hope this helps you.
$('body').click(function() {
//add your code here to hide the menu
});

jQuery not scrolling to anchor tag

I can't seem to get this functioning the way that I want. I want a user to click a link, in this case Learn More then open a tab and scroll down the page to where that tab is. I have the functionality of opening the tab working but it will not scroll. The only time I can get it to actually scroll is to copy:
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
into chrome's console and activate it. Below is the code in its entirety:
jQuery(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
});
Here is a link to a fiddle
It's because when you click the link, it's triggering the hash change. Because there is no anchor to go to, it scrolls to top after you call scrollTop. Adding return false; to the end of your click event or adding e.preventDefault(); for more modern browsers should correct the issue.
http://jsfiddle.net/jmarikle/dL41forj/
jQuery(document).on("click", ".learnMore", function() {
...
return false;
});
or
jQuery(document).on("click", ".learnMore", function(e) {
e.preventDefault();
...
});
Setting a timeout and targeting the body also works: http://jsfiddle.net/o2whkLyu/1/
$(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
setTimeout (function(){
$('body').scrollTop( $("#" + descriptionID).offset().top );}, 20);
});

cannot make window scroll to desired position with window.scrollTo(0,content_scroll_pos);

I've a simingly simple task at hand, but something is not working correctly :|
There is a button that opens full screen menu, fading out all other content. There is another button that closes menu and fades-in content.
But menu window height can be quite different from content height. So when user clicks open menu, he jumps to the top of the window. But when user closes window he should return to the original window scroll position (exactly where be clicked open menu).
I've this so far *window.scrollTo(0,content_scroll_pos); doesn't work! Well it jumps to 0 0. But for given I know content_scroll_pos variable is not 0.
//Content window position, before calling menu
var content_scroll_pos;
//Show menu
$("#open_nav").on("click", function(){
//
content_scroll_pos = $(document).scrollTop();
//
$("#grid_index, #sidebar-big").fadeOut("fast", function(){
window.scrollTo(0,0);
$("nav").fadeIn();
});
return false;
});
//Hide menu
$("#close_nav").on("click", function(){
$("nav").fadeOut("fast", function(){
window.scrollTo(0,content_scroll_pos);
$("#grid_index, #sidebar-big").fadeIn();
});
return false;
});
Fixed problem, by just rearranging events:
//Content window position, before calling menu
var content_scroll_pos;
//Show menu
$("#open_nav").on("click", function(){
//
content_scroll_pos = $(window).scrollTop();
//
$("#grid_index, #sidebar-big").fadeOut("fast", function(){
window.scrollTo(0,0);
$("nav").fadeIn("fast");
});
return false;
});
//Hide menu
$("#close_nav").on("click", function(){
$("nav").fadeOut("fast", function(){
$("#grid_index, #sidebar-big").fadeIn("fast");
window.scrollTo(0,content_scroll_pos);
});
return false;
});

How to slide down to show content of DIV using CSS/jQuery?

I would like to create a slide down button to show the content of a DIV that has no height. I did an example here:
fiddle
I looked for this special form of sliding buttons but all I have found were examples where a DIV and its content has given width and height.
In my example the structure is different to that but it is quiet simple. There are three different divisions. A head with given height, the content div (depends from padding) that should be shown and below that the slider/trigger (also with given height) as a button.
Now I would like click on the trigger that slides down about the height of the content div and finally the content div should be appear.
It would be great if someone could help me out.
Thanks alot.
I think this is what you are looking at.
Fiddle
$(document).ready(function () {
$('.content').hide(); //hide initialy
$('.slide').click(function () {
var $this = $(this);
// target only the content which is a sibling
$(this).siblings('.content').slideToggle(200, function () {
$this.text($(this).is(':visible') ? 'click to close' : 'click to open');
});
});
});
You should try slideToggle() instead (it also helps when jQuery is loaded, but that was probably just an oversight when you made it):
$(document).ready(function () {
$('.slide').click(function () {
$(this).prev('.content').slideToggle(500, function () {
$this = $(this);
$slide = $('.slide');
if ($this.is(':visible')) {
$slide.text('Click to close');
} else {
$slide.text('Click to open');
}
});
});
});
fiddle

Categories

Resources