I want to hide signup popup and display login popup by clicking 'login' link on signup modal. Which is working fine BUT problem is that setTimeout is keep opening login popup after each 1 second whereas I want to have 1 second pause and simply execute it only once.
I've used clearTimeout(), it doesn't open login popup even one time.
Please guide me. Thanks in advance!
This is my script:
var Tid;
jQuery(document).ready(function ($) {
//trigger login link on signup popup
jQuery("#register-form #login-modal a").attr("href",
"javascript:void(0);");
jQuery("#register-form #login-modal").click(function () {
jQuery("#register-modal-wrap").find(".mfp-close").trigger("click");
openLoginModal();
});
function openLoginModal() {
Tid = setTimeout("jQuery('#login-modal a').trigger('click')", 1000);
//clearTimeout(Tid);
}
});
As #Thilo has pointed out that there is a recursive triggering of click event in your code which is causing the openLoginModal() function to be called, again and again, the only way to stop that is by making sure that openLoginModal() function is called only once. This should fix the issue.
var Tid;
jQuery(document).ready(function ($) {
//trigger login link on signup popup
jQuery("#register-form #login-modal a").attr("href",
"javascript:void(0);");
jQuery("#register-form #login-modal").click(function () {
jQuery("#register-modal-wrap").find(".mfp- close").trigger("click");
if (typeof Tid === 'undefined') {
Tid = setTimeout(openLoginModal, 1000);
}
});
function openLoginModal() {
clearTimeout(Tid);
jQuery('#login-modal a').trigger('click');
}
});
Related
Hello guys Here i have a function that reacts two time by a same button. One time when it's clicked it fades out other time it fades in, but the problem is one that after 2 clicks it stops responding. I am trying to make it loop but. I don't have any clue. I tried with the clickCounts ++ and if statements but it didn't give me any fruit.
so if you guys have any idea I'm quite opened to any suggestions.
$(function() {
$('#two').one("click", function() {
$("this").css({color:"#f790e8"})
$(".others:nth-child(1)").fadeOut("300")
$(".others:nth-child(2)").delay("150").fadeOut("300")
$(".others:nth-child(3)").delay("300").fadeOut("300")
$(".others:nth-child(4)").delay("450").fadeOut("300")
$(".tube1").delay("300").fadeIn("300")
$(".tube2").delay("450").fadeIn("300")
$(".tube3").delay("600").fadeIn("300")
$('#two').on("click", function() {
//this code will execute on second click and further clicks
$("this").css({color:"black"})
$(".others:nth-child(1)").delay("300").fadeIn("300")
$(".others:nth-child(2)").delay("450").fadeIn("300")
$(".others:nth-child(3)").delay("600").fadeIn("300")
$(".others:nth-child(4)").delay("750").fadeIn("300")
$(".tube1").fadeOut("300")
$(".tube2").delay("150").fadeOut("300")
$(".tube3").delay("300").fadeOut("300")
});
});
});
You'll probably have a better time setting a class on the element and using it to see which one of the two behaviors to trigger.
$(function () {
$("#two").on("click", function () {
const $this = $(this);
if ($this.hasClass("on")) {
//this code will execute on second click and further clicks
$this.css({ color: "black" });
$(".others:nth-child(1)").delay("300").fadeIn("300");
$(".others:nth-child(2)").delay("450").fadeIn("300");
$(".others:nth-child(3)").delay("600").fadeIn("300");
$(".others:nth-child(4)").delay("750").fadeIn("300");
$(".tube1").fadeOut("300");
$(".tube2").delay("150").fadeOut("300");
$(".tube3").delay("300").fadeOut("300");
} else {
$this.css({ color: "#f790e8" });
$(".others:nth-child(1)").fadeOut("300");
$(".others:nth-child(2)").delay("150").fadeOut("300");
$(".others:nth-child(3)").delay("300").fadeOut("300");
$(".others:nth-child(4)").delay("450").fadeOut("300");
$(".tube1").delay("300").fadeIn("300");
$(".tube2").delay("450").fadeIn("300");
$(".tube3").delay("600").fadeIn("300");
}
$this.toggleClass("on");
});
});
$('#start').click(function () {
window.location.href=window.location.href;
runme();
});
This is my simple goal, every time user click the start button, I want the page to reload but still call the custom rume function. Please let me know if this is possible or there are other way. Thanks in advance.
Whenever you reload the page JS run again from start, So you can't directly trigger some function after page reload.
But in order to achieve this, you can use, sessionStorage
So, you can do something like:
$('#start').click(function () {
sessionStorage.setItem('callRunMe', '1')
window.location.href=window.location.href;
});
//On Page load
$(document).ready(function () {
if (sessionStorage.getItem('callRunMe')) {
runMe();
sessionStorage.removeItem('callRunMe');
}
});
you can set a flag into sessionStorage or localStorage and get the flag after document ready.
var SOTRAGE_NAME = 'needRunme'
$('#start').click(function () {
sessionStorage.setItem(SOTRAGE_NAME, true);
runme();
});
$(document).ready(function(){
var isNeedRunme = sessionStorage.getItem(SOTRAGE_NAME);
if(isNeedRunme){
runme();
}
})
Place your runme inside $(document).ready, and just use location.reload() to reload the page. Use localStorage to make sure this only happens when you click a button:
$(document).ready(() => {
if (localStorage.getItem("clickedStart") runme();
});
$("#start").on("click", () => {
localStorage.setItem("clickedStart", "true");
location.reload();
});
Please help me how to unbind onbeforeunload event on javascript function call .
Also I want to unbind onbeforeunload on page refresh.
Actually I want to give pop up alert on page exit .For this I have successfully unbinded onbeforeunload from form submit button and anchor tags. Kindly help me. The code I have used is
var jQuery = jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(window).bind("onbeforeunload", function() {
return confirm("Do you really want to close?")
}
);
jQuery('a').on('click', function() {
jQuery(window).unbind('onbeforeunload')
});
jQuery("form").submit(function() {
jQuery(window).unbind('onbeforeunload')
});
});
Thanks
Do some minor change in your code, it will be work
jQuery(document).ready(function () {
window.onbeforeunload = function () {
return confirm("Do you really want to close?")
};
jQuery('a').on('click', function () {
jQuery(window).unbind('onbeforeunload')
});
jQuery("form").submit(function () {
jQuery(window).unbind('onbeforeunload')
});
});
Check this on jqfiddler, Message pop-up showing on refresh click here
I am creating a chat, everything works perfectly, it scrolls down when i click the "Send" button, but I want it to scroll all the way down when the document is ready. I have done this by adding the scrolling function to setInterval, but the problem with that is that the user basically cant scroll up to see previous chat messages because he gets scrolled down every 0.1 seconds. My code is:
$(function () {
//$("#messages").scrollTop($("#messages").prop("scrollHeight")); Doesnt work at all
function updateChat(){
$("#messages").load('chat/ajaxLoad.php');
//$("#messages").scrollTop($("#messages").prop("scrollHeight")); This works but the user cannot scroll up anymore
}
setInterval(function () {
updateChat();
}, 100);
$("#post").submit(function(){
$.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
$("#messages").append('<div>'+data+'</div>');
$("#messages").scrollTop($("#messages").prop("scrollHeight")); // This works but only when the user presses the send button
$("#text").val("");
});
return false;
});
});
Add this to your code.
var chat = $("#messages").html();
setInterval(function () {
updateChat();
if(chat !== $("#messages").html()){
$("#messages").scrollTop($("#messages").prop("scrollHeight"));
chat = $("#messages").html();
}
}, 2000);
I think this should work (didnt test), but there are some better ways you can optimise this like not saving the whole .html() into a variable.
The idea here is that it checks if the content is changed every 2 seconds. If it is, it scrolls down.
I see what's your problem and I have 2 ideas for you :
You scroll down only when a new message is post, for example with an Ajax request you could check if number of messages is > in compare with the last 0.1s, if yes you scroll if not you ignore.
You scroll down every 1-2s only if the scroll is at the maximum bottom position. If the scroll is not at the maximum you do not scroll. I feel this solution is better.
You need to seperate the actions on your application,
also you missed many checks that can make the application work properly and will
make it easy to maintain.
How i suggestion the code will look:
$(function () {
function updateMessages(){
var messages_before_update = $("#messages").html();
$("#messages").load('chat/ajaxLoad.php');
var message_after_update = $("#messages").html();
if(messages_before_update !== message_after_update){
scrollToBottom();
}
}
function scrollToBottom(){
var scroll_height = $("#messages").prop("scrollHeight");
var scroll_top = $("#messages").scrollTop();
if(scroll_height !== scroll_top){
$("#messages").scrollTop($("#messages").prop("scrollHeight"));
}
}
function addMessage(message){
$("#messages").append('<div>' + message + '</div>');
}
setInterval(updateMessages, 100);
$("#post").submit(function () {
$.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
addMessage(data);
scrollToBottom();
$("#text").val("");
});
return false;
});
});
My goal is to trigger a pop up function meanwhile the user is going out from my website.
So I want to show a exit popup and in the background show my pop up at the same time.
I already have found different code on internet but no one works well.
Code :
<script type="text/javascript">
function PopUp() { return 'Do you wnat to leave my site?'; }
function UnPopIt() { /* no data */ }
$(document).ready(function() {
window.onbeforeunload = PopUp;
});
</script>
Is it possible to trigger a function like a pop up in the background ?
I am trying this code but it doesn't work :
function PopUp()
{
alert ('Do you wnat to leave my site?'); triggerpopup();
}
1,not very understand your needs,but i can't add a comment right now.
2,suppose you want a selfdefined pop(not another alert),then this goes well
function PopUp() {
triggerpopup();
return 'Do you?';
}
function triggerpopup() {
console.info('called with default pop')
}
$(document).ready(function() {
window.onbeforeunload = PopUp;
});