We Keep Coding

Scrolling to top inside an accordion

In my page I have 2 scrolls.
One is apparent in the page ( They are not loaded with ajax or something.)
The other one is inside an accordion.
I want these scroll to be always at the top. They have same class names.
With the snipets I can achieve my first goal, scrolling to top in apparent scroll
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
As well as with this one
var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
However, the scroll inside the accordion menu is not affected by this change.
If I open the accordion and run this snippets it scrolls to top.
So that either
I need to find a way to run this snippet not only to apperent but also all scrolls in the page or
when I click the accordion this javascript code needs to be executed.
I would like to solve this problem with the first solution.
I tried this and I couldn't succeed as well. If I put alert() rather than scrolltop inside this function, I got the alertbox.
$(".m-accordion__item").click(function() {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});
How can I achieve this goal?

This solved my problem. BTW this is bootstrap4. So that it may apply to any of bootstrap 4 templates.
$('.collapse').on('shown.bs.collapse', function(e) {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

Click on the menu / Slide on the screen to navigate to different pages

I developed a sample website . But i need to add a feature that when i click and drag horizontally the page will turn to next page ( menu2 page on menulist ). It should happen on click and drag. When i drag reverse (left to right) page turns to previous. and also on clicking in menu button, when i click to menu 4 . the page turns to forth page on horizontal move just like on mobile devices moving on swap.
I dont know how to implement it.I am new to this field. ;-(

If you're new you need to learn rather than implementing the technology!
However, all you need is to use mousedown and dragstart events.
If you're using jQuery then try to learn about onDrag event and set a function to change the page to the next menu item.

Finally i created it.
Click to see fiddle for slide and menu scrolling
JQuery for scrolling by menu click:
var total=$(window).width()*4;
$('.color').css({'width':''+$(window).width()+''});
$('.1').css({'position':'absolute','left':'0px'});
$('.2').css({'position':'absolute','left':''+$(window).width()+'px'});
$('.3').css({'position':'absolute','left':''+$(window).width()*2+'px'});
$('.4').css({'position':'absolute','left':''+$(window).width()*3+'px'});
$('a').click(function(){
var num=$(this).attr('id');
$('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
$('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});
JQuery for scrolling by slide(double-click and drag for touchpads) on screen:
var downX;
$('body').mousedown(function(event){
downX=event.clientX;
});
$('body').mouseup(function(event){
var s=$('html').scrollLeft();
var p=$('body').scrollLeft();
var upX=event.clientX;
var diff=downX-upX;
if(diff<0)
{
$('html').animate({'scrollLeft':''+s-$(window).width()+''});//For mozilla
$('body').animate({'scrollLeft':''+p-$(window).width()+''});//For other browsers
}
if(diff>0)
{
var g=s+$(window).width();
var k=p+$(window).width();
$('html').animate({'scrollLeft':''+g+''});//For mozilla
$('body').animate({'scrollLeft':''+k+''});//For other browsers
}
});
Click to see fiddle for menu click scrolling without animation
Changed ->
$('a').click(function(){
var num=$(this).attr('id');
$('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
$('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});
To ->
$('a').click(function(){
var num=$(this).attr('id');
$('html').scrollLeft($(window).width()*num);
$('body').scrollLeft($(window).width()*num);
});

set timer to slidedown and the button change after slideup

What should I put as after I surf the website and in 3 seconds later the ads will slide down from the top of the webpage, and the button name on that div will change to 'hide'. And after we click hide button, the ads will slide up and the button name back again to 'show'.
It's working for sliding down and sliding up and also the button HIDE and SHOW change successfully. But after the button changed back to 'SHOW' again. I clicked 'SHOW' button but it wont change back to 'HIDE'. and also i didn't set timer to slide down. because I don't know what to put as I can't find any answer on other questions.
This is my script for JavaScript and jQuery
$(document).ready(function () {
$(".showAds").click(function () {
$("#ads").slideToggle("slow");
$('a#showLink').text('SHOW');
});
});
This is what I want to show and hide
<div id="top">
<div id="adsBox">
<div id="ads"> <img src="assets/images/ads.jpg" alt="ads"> </div>
<p> HIDE </p>
</div>
</div>
And this is my CSS
#adsBox { display:none };
and also i tried something like this. And it's still not working too.
$(".showAds").click(function () {
$("#ads").slideUp("slow");
$('a#showLink').text('SHOW');
$("#ads").slideDown("slow");
$('a#showLink').text('HIDE');
});
I know my coding is quite messy. Please guide me to the right direction. And sorry for my bad english. Thanks.

The button label isn't changing back because, in short, you haven't told it to. Your call to slideToggle() switches the visibility of the element back and forth, but your call to .text("SHOW") only does one thing...sets the text to 'SHOW', every time.
Try something like this:
$(".showAds").click(function () {
$("#ads").slideToggle("slow");
$('a#showLink').text(text == "SHOW" ? "HIDE" : "SHOW");
});
Which is to say - 'if the text is SHOW, set it to HIDE. If not, set it to SHOW'.
For your timer, use setTimeout():
setTimeout(function(){ $("ads").slideToggle("slow");}, 3000);

jQuery scrolling issues with scrollTop

I am having 2 issues with scrolling, i figured it would just be easier to ask them both in one post.
Before I ask, below is my jQuery code im having issues with.
$("a").click(function() {
if(this.hash){
$("#main").animate({
scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120
},2000,"easeOutExpo");
}
});
Situation: What I have going on in my page is basically i have a side menu with a couple lists. Each item in each list links to a anchor in my main div section, or my 'content' section. When a list item is clicked, the code above runs and it scrolls to one of the anchors.
Issue 1: When i click on a item in one of the lists, it scrolls down to a anchor which works just fine. But when that same item is clicked again, the main area scrolls back up to the top of the div. My thought to fix this was to check the current 'scrolled to' location of the div, and then not allow the code to run again if the location hadn't changed since the first click but i couldn't get that to work. Any suggestions on how to fix this issue?
Issue 2: Again as stated above, when i click on a item in a list it scrolls down to a anchor. What i then want to be able to to is click on a different list item and have it scroll to that position. The problem is when i click on a different list item, it scrolls to some random position in the main div, positions i haven't even anchored yet. Can anyone explain how I can make it so i can scroll from anchor to anchor?
Note: Please respond by having issue 1 or issue 2 above your explanation so i know which one your referring to. Thanks
EDIT: Thanks to Roko's help i got it working. For future viewers here is the fiddle of a working demo: http://jsfiddle.net/TsUcc/3/ and below is what the finally jquery code looks like
$("a").click(function( e ) {
e.preventDefault();
if(this.hash){
var target = '#'+ this.hash.substr(1);
var destination = $(target).offset().top - 10;
$('#main').stop().animate({
scrollTop : '+=' + destination
}, 1000);
}
});

LIVE DEMO
ISSUE 1:
you probably use something like: goto and you did not prevented the browser default behavior which is simply done by passing the event to the click handler like:
$("a").click(function( e ) {
e.preventDefault();
// .....
});
ISSUE 2
The HTMLelement position you're using is just a passive position of an element relative to it's positioned parent element.
which means that an element can have a position of ie: 30 even if it's at the bottom of your page.
To fix that use
offset().top
Also worth reading: https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
ISSUE 3
H3 elements are not supposed to have a name attribute.
Use an ID for that purpose.
Why?
if you have a nice web and you have some sexy stuff at the bottom of your page, I can send a link to my friend by referencing your web page and the ID in a link like:
example.com#bottomLady
and he'll get immediately my thoughts without the need to scroll your page all the way down.

Only remove jQuery slide transition from first instance of function?

Alright, I'm using the UberMenu Plugin for Wordpress. When you click the parent item in a menu, the child-menu slides down into position underneath and stays put. After clicking on a child-menu link, the normal function is for the child-menu to disappear and be reactivated by click on the parent item again.
So, I wanted the child-menu to stay visible after going to a child-page and afterwards continue with the original functionality after that very first instance. Miraculously, I've gotten this far with success.
You can view the working menu/sub-menu here: http://goo.gl/MC8Aw
I added this code to the UberMenu.dev.js:
jQuery('document').ready( function($){
var id = $( '#megaMenu ul.megaMenu > li.current-menu-item, #megaMenu ul.megaMenu > li.current-menu-parent, #megaMenu ul.megaMenu > li.current-menu-ancestor' ).live().first().attr( 'id' );
uberMenu_openMega( '#' + id );
});
You can see the entire .js file here: http://goo.gl/xZd6g
Alright, so the only issue is that when the child-page loads and the child-menu is triggered immediately by the above code, it's retaining the slide transition from the primary functionality. This gives a delayed look/experience to the child-menu that I want to avoid/minimize.
Is it possible to amend the above code (which seems already set up to only affect the first appearance of the menu) so that it also ignores the slide transition needed throughout the rest of the plugin?