Move to top on click of button - javascript

I am using intro.js in my code to implement the walkthrough. I want to implement a sceanrio where on clicking the done button(.introjs-donebutton) the page should scroll to the top but with this code It is not happening. Can anyone please help me with this one?
//$('.col-new-four').attr('id','essentials');
const intro = introJs();
intro.setOptions({
steps:[
{
element:'#featured_apps_2_0',
intro:'welcome'
},
{
element:'#myTopnav',
intro:'Quickly access the apps and portals you need on and off the clock.'
},
{
element:'.slideshow-container',
intro:'This space features topics you care about the most.'
},
{
element:'.card',
intro:'Stay up-to-date on trending stories.'
},
{
element:'#stepextra',
intro:'View your recommended and favorite pages.'
},
{
element:'#step4',
intro:'Find promotional content, latest additions and more here.'
},
{
element:'#essentials2',
intro:'Learn about what’s trending with your favorite topics.'
},
{
element:'.col-new-7525',
intro:'Explore benefits, tools and new features available to you.'
}
]
})
$('.introjs-donebutton').click(function() {
$(window).scrollTop(0);
});
function callintro(){
intro.start();
console.log("called intro")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.2.2/intro.min.js"></script>

I assume that you want to scroll the client view page to top on clicking a button. if so you can use this code
HTML
<div class="button-parent">
<button type="button" class="button-to-top">Click Here</button>
</div>
jQuery
$(document).ready(function () {
$('.button-to-top').on('click', function () {
$('body').scrollTop(0);
});
});
Don't Forget to add jQuery cdns to your html header file. If it's not working share your html code. we will look forward

Using pure javascript, no framework
window.scrollTo({ top: 0, behavior: 'smooth' })

So i used this and It started running fine, the reason being the button was dynamically being created after the inital page load, so this should work
$(document).on("click", ".introjs-donebutton", function(){
$(document).scrollTop(0);
})

function upsideItem() {
$(document).ready(function(upsideItem) {
$('.button-to-top').on('click', function(upsideItem) {
console.log(button-to-top)
$('body').scrollTop(0);
});
});
}

Related

How to show modal newsletter popup only once in per session?

This is my code for using modal popup only once in per session,My problem is, everytime I visit the homepage, the div will show up. Instead I would like to show the div only once per session. I've tried to fix it with cookies but it didn't work.
<script>
if (!Cookies.get('popup')) {
setTimeout(function() {
$('#myModal').modal();
}, 600);
}
$('#myModal').on('shown.bs.modal', function () {
// bootstrap modal callback function
// set cookie
Cookies.set('popup', 'valid', { expires: 3, path: "/" }); // need to set the path to fix a FF bug
})
</script>
Set a cookie.
$(document).ready(function() {
if ($.cookie('noShowWelcome')) $('.yourDivClass').hide();
else {
$("#close-welcome").click(function() {
$(".yourDivClass").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
You need to include jQuery.cookie javascript file.
Download jQuery.cookie
Hope this helps :)

How do I simplify the following code?

So I have a selection of images and would like a div to appear on('hover'). My current code is very bulky and manually adds that div for each of the images.
$("#TheNook").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});
$("#TheNook-cover").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});
$("#ManCave").hover(function() {
$("#ManCave-cover").toggleClass("hidden");
});
$("#ManCave-cover").hover(function() {
$("#ManCave-cover").toggleClass("hidden");
});
$("#AnchorsAweigh").hover(function() {
$("#AnchorsAweigh-cover").toggleClass("hidden");
});
$("#AnchorsAweigh-cover").hover(function() {
$("#AnchorsAweigh-cover").toggleClass("hidden");
});
$('#BatCave').hover(function() {
$('#BatCave-cover').toggleClass('hidden');
});
$('#BatCave-cover').hover(function() {
$('#BatCave-cover').toggleClass('hidden');
});
$('#CountryChic').hover(function() {
$('#CountryChic-cover').toggleClass('hidden');
});
$('#CountryChic-cover').hover(function() {
$('#CountryChic-cover').toggleClass('hidden');
});
$('#BohemianBungalow').hover(function() {
$('#BohemianBungalow-cover').toggleClass('hidden');
});
$('#BohemianBungalow-cover').hover(function() {
$('#BohemianBungalow-cover').toggleClass('hidden');
});
My new solution that I have tried is much more condensed, but I'm not entirely sure how to make it work. I'm new to declaring and using variables in JQuery so please help.
var cover = $('.theme-img:hover').attr("alt");
$('.theme-img').hover(function() {
$('#'+cover+'-cover').toggleClass('hidden');
});
Here is a JSFiddle: https://jsfiddle.net/w6pbp4Lz/2/
The first image should behave like the second.
You can use this code in order to achieve that:
JQUERY:
$('img.theme-img').hover(function() {
$(this).parent().children('div').toggleClass('hidden');
});
Here is your JSfiddle with my edits: https://jsfiddle.net/w6pbp4Lz/6/
Assuming they all have the class "theme-img" this might work
// "var cover = $('.theme-img:hover').attr("alt"); (not needed)
$('.theme-img').hover(function() {
$(this).toggleClass('hidden');
});
function toggleHover(srcElements, tarElement) {
srcElements.forEach(function(srcElement) {
srcElement.hover(function() {
tarElement.toggleClass('hidden');
});
});
}
call toggle hover with an array of the jQuery elements and the target jQuery element to toggle hidden. example
toggleHover([$('#TheNook'), $('#TheNook-cover')], $('#TheNook-cover'));
just an idea, might clean the code up a bit

Jquery Menu that on click toggles class to expand one list level at a time

issue#1 So I have a menu that asks for the Make, model and year of a car. I have got the basic functionality working but my code isn't clean. How can I make this DRYer?
jQuery(document).ready(function( $ ) {
$('li.menu-item-type-custom').on('click', function () {
$(this).closest('ul.sub-menu').toggleClass('expand-menu');
});
$('li.menu-item-type-custom').on('click', function () {
$(this).find('> ul.sub-menu').toggleClass('expand-menu');
});
});
issue#2
I also want only one child of each make or model to be shown at a time. Right now if I click on make 1 and make 2 then the text overlaps and it looks bad. I tried
$('li.menu-item-type-custom').on('click', function () {
$(this).find('> ul.sub-menu').toggleClass('expand-menu');
if( $(this).hasClass("expand-menu") ) {
$(this).siblings().removeClass("expand-menu")
} else{}
});
but my approach is wrong and it isn't working
DEMO:
http://jsfiddle.net/BbF9K/
Thanks for the help
I'm too tired to sort out all your classes, so I just used hide() and show(). Feel free to translate it back into CSS-driven statements.
http://jsfiddle.net/isherwood/BbF9K/2/
jQuery(document).ready(function ($) {
$('li.menu-item-type-custom').on('click', function () {
$(this).siblings().find('ul.sub-menu').hide();
$(this).children('ul.sub-menu').show();
});
});
Here's a version with slide effects:
http://jsfiddle.net/isherwood/BbF9K/3/
You could also tighten up your jQuery like so:
http://jsfiddle.net/isherwood/BbF9K/4/
jQuery(function($) {
$('li.menu-item-type-custom').click(function () {
$(this).siblings().find('ul.sub-menu').slideUp();
$(this).children('ul.sub-menu').slideDown();
});
});

Javascript toggle function my version

I've found this js toggle function yesterday. It worked perfectly but today... it just doesn't work. I have my news feed and i wanted that each news is in a new container.... the first is opened by default the others are closed. It worked but today when I open a div it just closes itself again. And if I close the first div wich is opened by default it doesn't open again...
JAVASCRIPT FILE
$(document).ready(function() {
$('#news').show();
$('a#sprozilec').click(function() {
if (!$('#news').is(':visible')) {
$('.prikaz').hide(400);
}
$('#news').slideToggle(400);
});
});
$(document).ready(function() {
$('#news2').hide();
$('a#sprozilec2').click(function() {
if (!$('#news2').is(':visible')) {
$('.prikaz').hide(400);
}
$('#news2').slideToggle(400);
});
});
NEWS FILE
New official video!
<div id="news" class="prikaz">
</div>
Bla Bla Bla!
<div id="news2" class="prikaz">
</div>
Rewrite your JS as,
$(document).ready(function()
{
$('#news').show();
$('a#sprozilec').click(function()
{
if (!$('#news').is(':visible'))
{
$('.prikaz').hide(400);
}
$('#news').slideToggle(400);
});
$('#news2').hide();
$('a#sprozilec2').click(function()
{
if (!$('#news2').is(':visible'))
{
$('.prikaz').hide(400);
}
$('#news2').slideToggle(400);
});
});
You just need one document.ready(). And that will do.
Enclose your code in single document.ready, because if you create multiple document.ready, both will be executed at same time. In your case execution sequence of your code matters!
$(document).ready(function(){
$('#news').show();
$('a#sprozilec').click(function() {
if (!$('#news').is(':visible')) {
$('.prikaz').hide(400);
}
$('#news').slideToggle(400);
});
$('#news2').hide();
$('a#sprozilec2').click(function() {
if (!$('#news2').is(':visible')) {
$('.prikaz').hide(400);
}
$('#news2').slideToggle(400);
});
);
Demo jsFiddle

Refresh parent page after closing modal

When a user opens this modal, they can see their shopping cart information and delete items(other jquery) on the modal.
But how could I refresh the parent page after a user closes up the modal?
I read several posts but did not find any useful information for my situation. I know I need to use something like window.location.reload(true); Where should I put that in the code?
$(function(){
$('#main').off('click.login').on('click.login',function(){
$('body').loadmodal({
id:'cart',
title:'Shopping Cart',
url:'/cartDisplay/',
width: '550px',
});
});
});
Update
$(function(){
$('#main').off('click.login').on('click.login',function(){
$('body').loadmodal({
id:'cart',
title:'Shopping Cart',
url:'/polls/cartDisplay/',
width: '550px',
});
});
$('#cart').on('hidden', function () {
window.location.reload(true);
})
});
Try this.
$("#cart").on('hide', function () {
window.location.reload();
});
I assume that you are using Twitter Bootstrap
Bootstrap 3
$('#cart').on('hidden.bs.modal', function () {
window.location.reload(true);
})
Bootstrap 2.3.2
$('#cart').on('hidden', function () {
window.location.reload(true);
})
As far as I can tell, jquery.loadmodal.js has bootstrap.js as a dependency, so its modals are still subject to bootstrap's methods.
In that case, you can simply bind to hidden.bs.modal
...
$('#yourModal').on('hidden.bs.modal', function () {
location.reload();
});
...
Where you open the nyroModal window, just add this callback function:
callbacks: {
afterClose: function() {
window.location.reload();
}
}

Categories