I want my "X" button on website to appear every 30 seconds or so. So when people visit my site, they can close the "X" button and after they close, the "X" button will show up again in 30 seconds or so. How is it possible? I know how to delay the button to show
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function () {
// Hide the div
$("#button1").hide();
// Show the div after 2s
$("#button1").delay(2000).fadeIn(100);
});
</script>
Thanks for help
tell it to show every 30s.
setInterval(function(){
$('#button1').show();
},30000);
I would just add an onclick method for your button, and when it is triggered you do the same thing as when you fade in the button at start (hide then delay a fadein).
should be somthing like
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function () {
// Hide the div
$("#button1").hide();
// Show the div after 2s
$("#button1").delay(2000).fadeIn(100);
$("#button1").onclick(function() {
$("#button1").hide();
// Show the div after 30s
$("#button1").delay(30000).fadeIn(100);
});
});
</script>
Related
I am pretty new to CRM and Portals.
I want to know how to hide a button on portal page when the page loads and display it later when clicked on other button.
I have created these buttons on my Entity list as I am displaying view from an entity on portal.
You can use a css, javascript or jquery in this kind of instances for example this code might help you. I set the button to appear slowly after a delay of 3 seconds.
setTimeout(function(){
var x = document.querySelector('.hidden-btn');
x.style.WebkitTransition = "all 2s" // for safari.
x.style.transition = "all 2s"; // for chrome.
x.style.opacity = 1; // you can either use opacity or block
}, 3000); // 3000 is equivalent for 3 seconds
.hidden-btn{opacity: 0;} /* you can either use opacity or display: none here */
<button class="hidden-btn">Hidden Button</button>
I would just use jQuery to show the initially hidden button when another button is clicked. Set to hidden from the start with css and then show it whenever you want using the jquery .show() function.
The number in the .show() function is the speed for showing the button. 1000 = 1 second. If you want it to show instantly just take the number out.
Good luck.
$(document).ready(function() {
// show the hidden button when another button is clicked.
$("body").on("click", ".showHiddenButton", function() {
$("#hiddenButton").show(1000);
});
});
#hiddenButton {
display: none;
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hiddenButton">INITALLY HIDDEN BUTTON</button>
<button class="showHiddenButton">Show Hidden Button</button>
I am programming a survey online and want to delay the next button. I have the following code but I would like to improve it:
<script type="text/javascript">
$(document).ready(function(){
$("div.submit_div").slideUp(00).delay(10000).fadeIn(1000);
});
</script>"
I have two ideas, and will appreciate code for any of them:
-Is there any way to add a text that says "please note the button will appear in 10 seconds" while the button is being delayed?
-Is it possible to disable the button and present it with opacity, until the count down finishes and makes it possible to click it?
Assuming $("div.submit_div") to be the said button.
$(document).ready(function(){
$("div.submit_div").hide();
setTimeout(function() {
$("#init_text").remove();
$("div.submit_div").show();
}, 10000);
});
You can make one more div which shows the text you wanted to show while the button is hidden and manipulate that div similar to submit_div button.
Add <div id="init_text"> Please complete survey</div> before the code for the submit button.
Of course you can do it with success callback in animation.
<script type="text/javascript">
$(document).ready(function() {
$("div.submit_div").slideUp(00, function() {
/*
disable button here using `prop('disable',true)`
and do the rest
*/
}).delay(10000).fadeIn(1000, function() {
/*
enable button here using `prop('disable',false)`
and do the rest
*/
});
});
</script>
I have a problem with my updateprogress. Its working, but I want a close button to close it. Its not problem yet, but I want to display this button after display of updateprogress in 30 sec. I tried do it with jquery, but it didnt work.
Can you help me?
Here is a sample. My problem is, that I dont know, what kind of event show the updateprogress.
$('.UpdateProgress').on('display', function () {
$('.btnClose').hide(0).delay(30000).show(0);
});
I tried display, show, focus event, but I dont know how to do this.
Set your button to hidden to start:
<style>
input.btnClose
{
display: none;
}
</style>
<input type="submit" class="btnClose">
Now use setTimeout to show() it after 30000ms (30 seconds):
<script type="text/javascript">
$(document).ready(function(){
$('.UpdateProgress').on('display', function () {
setTimeout("showDelay();", 30000);
});
});
function showDelay() {
$('.btnClose').show();
}
</script>
The goal is to show one div when I click on another one. The problem with my code below is that it shows content when the page loads(you can click on a div to hide/show another one), but I want it to be hidden when the page loads(hidden by default). This is what I have now:
<div class="r-clickfeature">...click here to show another div</div>
<div class="r-productfeature">something...</div>
<script type="text/javascript">
$('.r-clickfeature').on('click', function(e) {
return $(".r-productfeature").slideToggle();
});
</script>
Adding some css to hide the second div by default is the way to go.
.r-productfeature {
display:none;
}
JSFIDDLE here.
Your code is faulty. Change it to this one
<script type="text/javascript">
$(document).ready(function () { // required for jQuery...
$('.r-clickfeature').click(function(e) { // on click
$('r-productfeature').slideToggle(); // slide the other div
});
});
</script>
I am currently trying to show a div 2 seconds after the page is loaded. I can successfully do the reverse by hiding the div two seconds after the page loads. The issue is that nothing occurs and the div stays hidden. How can I properly show a div after two seconds of page load? Extra: mean while the two seconds are running show an ajax loading gif and then fade in the div
<script type = "text/javascript">
$(window).load(function() {
setTimeout(function() {
$("#contentPost").show('fadeIn', {}, 500)
}, 2000);
});
</script>
html/css
<style>
.contentPost { display:none;}
</style>
<div class="contentPost">
<h2>Hi there</h2>
</div>
$(document).ready(function() {
$(".contentPost").delay(2000).fadeIn(500);
});
Will work perfectly.
Ive never seen your show method written like that. Try altering it into use the jquery method fadeIn:
<script>
$(function() {
$("#contentPost").delay(2000).fadeIn(500);
});
</script>
The show method does not accept any arguments and won't work as you want it to.