I am trying to show a simple confirmation message of successfully logging out following this but I am not sure how to proceed.
This message is going to appear for 5 seconds, after the user clicks the logout button (which simply does the log out and redirects to the home page).
This confirmation message, along with the logout button is located at the header.
I have the text wrapped in a div, with id="confirmation".
The onClick event on a link calls the informUser function which does this:
$("#confirmation").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);
The css of the div wrapper is this:
#confirmation {
position: absolute;
top: 0;
left: 45%;
text-align: center;
font-size: 1.25em;
}
Now, I needed to hide this element, I tried with visibility: hidden; but the element never showed up.
I tried hiding it using
$(document).ready(function() {
$("#confirmation").hide("slow"); });
and the element showed up for less than a second and then disappeared (due to document.ready being loaded again).
Because you are changing pages (when you redirect to the home page), the javascript that handles an event on the logout button won't do anything to show and hide the message on the home page. Instead, I would try setting a cookie with a somewhat short life span, and letting a separate script on the home page handle the displaying of the message if that cookie is set.
You can see a basic overview of cookies here: http://www.quirksmode.org/js/cookies.html
It's probably just a typo in the post, but I can't leave comments yet, so here's my answer (just in case).
$("#confirmation").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);
should be
$("#confirmation").show();
setTimeout(function() { $("#confirmation").hide(); }, 5000);
Related
I am using Laravel 6. I have a button which gets triggered when it has been clicked. The click event does two things. It adds a css class to the button which shows an animated svg spinner to indicate that something is loading and it sends information to my controller which sends an e-mail.
The spinner class is set as soon as the button is clicked, but the problem is that the spinner is only shown when the mail has been sent. But I want the spinner to be shown while the gets sent so the user knows that he has to wait.
This is my .spinner class
.spinner {
background-image: url(storage/app/public/img/spinner.svg);
background-size: 100% 100%;
height: 40px;
width: 40px;
}
This is the button from my child component which can be clicked:
<button class="btn btn-success teamplayerButton" #click="addSpinner($event.target); $emit('del-match', match.id);">Add
</button>
The addSpinner method on the child component:
addSpinner(match) {
match.classList.toggle('spinner');
match.innerText = "";
}
The parent component gets the emitted match.id and makes a get request to a route which sends a mail like this:
Mail::to($email)->send(new ReceivedInvitation(Auth::user()->name, $receiverName));
Here is a short video to show you what I mean.
click here
Why does the css depends on what php(laravel) on the backend does?
The css gets set instant but the animation is shown after a few seconds.
When I remove the call of the mail function in my controller, and try it again, the spinner is shown instantly.
It would appear that the CSS changes instantly, but the actual image isn't being loaded until after the AJAX call finishes.
I would check your network tab to understand how the spinner file is being loaded, and see if its being blocked for some reason by the AJAX call. If it isn't just a static file, something else might be going on.
I want the popup to show once the page is load. I have made the popup everything working fine I but there is one issue page shows just for a split second before the popup. I want the popup to load first without showing the page.
This is the link of the page http://test2429d.vinnugrunnur.is/home popup has video which runs for 7 second and disappear.
Looking at your sample site, you will have to hide the content and unhide it when you hide the popup.
The reason being your popup is dynamically being added using Javascript. So the popup won't get shown until the page is completely loaded.
There are several ways to do this. If this popup is only limited to this page, you can perhaps use the body class as a reference to hide your .jupiterx-site.
body.elementor-page-10 .jupiterx-site {
display: none;
}
And your Javascript should unhide it after 7 seconds
jQuery(document).ready(function(){
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
jQuery('.eael-lightbox-popup-window').fadeOut('slow');
jQuery('.jupiterx-site').show();
}, 7000);
});
I'm using a form in a css-only modal window (checkbox hack) opened by a checkbox label styled like an 'Apply' button. The form has php content from Perch cms and is working fine, as expected. Perch returns a success message after submit but seeing as the page is re-loaded after submit the checkbox returns to its unchecked state and the user would have to re-open the form modal to see the success message.
I'm looking for a way to either re-open the modal after submit (or after page reload), or not close the modal on submit.
The css that controls the modal is like so by default:
.modal-window .outer {
display: none; etc.
On opening the modal the css becomes this:
.modal-window .trigger:checked + .outer {
display: block; }
.modal-window and .outer are divs, and .trigger is a checkbox.
I've read all similar questions here but cannot apply/modify the existing answers to this case. I'm good with html and css but very weak with js. The page already loads jQuery for a different function, so it could be used.
In case it's useful to anyone I'll post my own solution. Used some jQuery after the form and so after Submit the css modal stays open, but hides the original form and shows the success message:
<script>
$("#contact-form").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $("#contact-form").serialize(),
success : function(){
$(".form-field, p.form-notes, p.success-message").toggleClass("hide-show 200");
}
});
return false;
});
</script>
The ajax prevents the form from dismissing and prevents page reload after Submit and the css class '.hide-show' has display:none; as its only value.
'p.success-message' has '.hide-show' applied in page's initial state. So all default form content (divs with class .form-field and p.form-notes) are hidden after Submit and p.success-message is unhidden.
The cms, Perch, using its own Forms App, adds a snafu by outputting a prefix on the form id (eg, form1_), so the id in the original code is not the same as in the output page and one must allow for that in the script.
I'm not a js coder and don't really understand what ajax is doing here, but it works. If there's a drawback to this method or a better way, please improve this.
I have a webpage which is supposed to redirect to another page after a user clicks on a button named "I Want It" with class ".et_bloom_submit_subscription". This button is part of a mailchimp form.
This button appears as part of a form on the sidebar, footer and on two different kinds of pop ups. The form also asks for name and email of the visitor.
This is the code that i used -
<script type="text/javascript">
(function($) {
function setup_onclick_redirect() {
$('.et_bloom_submit_subscription').on("click", function() {
setTimeout(function() {
if ($('.et_bloom h2.et_bloom_success_message.et_bloom_animate_message').css('display') == 'block') {
$(location).attr('href', 'http://startupstrong.com/webinar-on-building-brand-with-social-media/');
}
}, 4000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_onclick_redirect();
}, 700);
});
})(jQuery);
The above code successfully redirects a visitor after he gives his name and email on the form present in sidebar and footer.
But it fails to redirect when user enter details on the pop up screen.
It should work on the popup too, I am not sure what is happening :(
This is the link where problem appears - http://startupstrong.com/purple-cow-by-seth-godin-take-all-my-detailed-notes/
Note that, if you want to see the pop up multiple times just clear the cache and refresh the page. Then go to the end of the page, it should reappear. Please let me know if there is some problem.
I am looking for a solution where on a select box if user selects
a item, the page refreshes with updated data.This is done using
onChange function. In the meanwhile if user clicks on submit and then reset button whatever changes made were reset because the subit is not happened after onChange.
One solution I thought is bringing up the modal window when
onChange function is called but it involves a lot of work for processing
So I am looking if there is any alternate to this
I'd go down the modal and/or overlay route, it's a nicer user experience as the user can see that something is happening. Simplest solution is just stick a div somewhere on the page
<div id="overlay"></div>
and add some css:
#overlay {
height: 100%;
width: 100%;
background-color: #ffffff;
opacity: 0.7;
z-index:10;
position:fixed;
display:none;
}
NB: opacity doesn't work in IE 8 and older, but there are alternatives that a quick Google will uncover.
Then in your onChange (assuming your using jQuery) just put a $('#overlay').show() or .fadeIn(), and either hide it when complete or if the page refreshes there no need to do anything.
If you don't want anything visible take out the background-color and opacity and it will be invisible.
I would recommend sticking a loading gif in the middle of #overlay for the sake of clarity.
Hope that helps.
disable the buttons in the method which is called in onchange. Then on page load enable them back.
function onChangefunc()
{
document.getElementById("button1").disabled = true;
document.getElementById("button2").disabled = true;
document.getElementById("button3").disabled = true;
// do rest of your logic here
}
Then place this at the end of the page in tag:
<script>
document.getElementById("button1").disabled = false;
document.getElementById("button2").disabled = false;
document.getElementById("button3").disabled = false;
</script>