I want to create a 5s time delay modal like this
I have done many googling and research but have been stuck with creating a modal like this that is not triggered by a button. I tried following the instructions (using just javascript) from W3Schools https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp and https://www.w3schools.com/howto/howto_css_modals.asp but nothing works. And both are trigged by a button.
I don't know if it is because I am using JQuery codes for featherlight and slider. I also tried following the site https://www.sitepoint.com/show-modal-popup-after-time-delay/ but nothing pops up. I will appreciate a lot someone can kindly help and provide me with relevant scripts/css/js codes as I am quite new to coding. Thank you so much!
<div class="modal">
<div class="modal-content">
<span class="closebtn">×</span>
<h4>WELCOME</h4>
<label for="email">Don't miss out on the latest updates!</label>
<input placeholder="enter your email here" id="email">
<button class="subscribe">SUBSCRIBE</button>
</div>
</div>
I also tried using http://jquerymodal.com/ but does not work from a button nor I know how to use that with the settimeout function without using a button to trigger the modal box.
Please upload your code as well to see where you are wrong, Your approach is good but while questioning make sure that all elements are covered the languages tags, the reference and your code
Mostly these modals are used to display newsletters or any discount a site has to offer
The code at the reference website looks good
You can put the code at end before the closing body tag in the script which will display the newsletter once the page is loaded and then add the time delay you want to set
Assuming you want a modal that will automatically hide or disappear after a certain timeout, here's a JsFiddle that does it.
$(document).ready(function(){
$('#modal').click(function(){
$('#exampleModal').modal('show');
setTimeout(function() {$('#exampleModal').modal('hide');},
1000);
});
});
EDIT:: If you want your modal to load when the page loads (Not triggered by a button) you can just do:
$(document).ready(function(){
$('#exampleModal').modal('show');
setTimeout(function() {$('#exampleModal').modal('hide');},
1000);
});
Related
I'm trying to create a basic Chrome Extension that comes up with some kind of alert when the extension is clicked. I was able to create this using the following Javascript:
function spoilerAlert() {
confirm('Warning, there are spoilers on this page!');
}
document.addEventListener('DOMContentLoaded', spoilerAlert())
and then adding the following to my HTML file:
<body onload = 'spoilerAlert()'>
whilst also referencing the .js file in the body:
<script language='javascript' src='popup.js'></script>
This works, but since the extension icon is in the corner of chrome, when it is clicked the alert box appears in the top corner of my browser, mostly off screen:
This box can be moved but obviously this is not ideal. After extensive googling it appears that the positioning of these built in alerts cannot be changed, and everywhere suggests using a customised dialogue box. So I have been trying to use a modal (which seems to be more appropriate for what I want to achieve in the long run which is considerably more complicated than where I am up to currently), but applying the same logic as before does not seem to work with modals. I have changed the Javascript is the following:
var modal = document.getElementById('myModal');
function spoilerAlert() {
modal.style.display = "block";
}
document.addEventListener('DOMContentLoaded', spoilerAlert())
and in the HTML file I have:
<body onload = 'spoilerAlert()'>
<div id='myModal' class='modal'>
<div class="modal-content">
<p> Spoiler Alert </p>
</div>
</div>
</body>
I also have some styling in the head. However the HTML no longer seems to be reading the Javascript, is ignoring all of the styling and is simply giving me this:
which seems to be the complete default. Any suggestions on how to get my HTML to read the modal functions in my Javascript file would be appreciated, or any other easier ways to create a custom dialogue box. Please note my Javascript knowledge is limited! Thanks.
I apologize if this question is answered somewhere, but I couldn't find it.
I am working on editable javascript grid for MS Dynamics CRM and I am trying to display loading screen when user clicks "Save" button on the grid (the loading spinner should only be covering my grid - which is actually a HTML web resource displayed inside the CRM window). It takes about 2-5 seconds until CRM system saves the data and reloads my grid. So I want to display the loading screen during that time.
I found spin.js http://spin.js.org/ and it seems that it can be easily implemented but I am failing to realize on what event should I display the loading screen?
Basically, I have a table and when user clicks "Save" or "Delete" button, I wish to show that there is something going on under the hood.
Thank you very much for you time and help!
It sounds like you know what you want to call from spin.js, you're just trying to figure out where to call it from. You can try adding this to your javascript, where "#saveButton" and "#deleteButton" are the css identifiers for the buttons you want to fire the script off of.
$("#saveButton").click(function(){
displayLoadingPage();
});
$("#deleteButton").click(function(){
displayLoadingPage();
});
function displayLoadingPage() {
//call your spin.js code here.
}
Let me know if this answers what you were getting at.
I know you have got your answer but I think you can do it using vanilla JS code rather than using a library like spin.js
All you need is :
1) A div which is hidden on page load covering your table with spinner aligned center in it
2) On Save/Delete button click you can just make the div visible.
3) Hide the div again once you receive response from the rest api that saves or delete the data.
Below is the HTML:
<div class="container">
<div id="loading" class="loading" onClick="hideSpinner()">
Loading…
</div>
<input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>
JS Code:
var loadingDiv = document.getElementById('loading');
function showSpinner() {
loadingDiv.style.visibility = 'visible';
}
function hideSpinner() {
loadingDiv.style.visibility = 'hidden';
}
Here is a demo : http://codepen.io/AshutoshD/pen/dMEGqM
Click anywhere on the overlay to close it.
I have used the overlay that #MattIn4D has created here
I have an Iframe embedded like this:
<iframe id="foo" src="http://www.something.com" style="width: 90%; height: 300px"></iframe>
Each time the page loads focus gets lost from the top of the page and switches to this Iframe that is in the footer.I was wondering how can i remove the focus from this and make the page load "normally"?
Thanks!
Update: Yes, iframe is being loaded from another source (not the same domain)
if assumed the iframe is not served from the same domain.. you can place any other focusable dom element after the iframe in the footer with autofocus set as true. And if that does not work please try the following in the parent main window:
$(window).on('load', function() {
setTimeout(function(){$("body").focus()}, 100);
};
OR going by vanilla JS
window.onload = function() {
document.getElementById("some-focusable-element-from-parent-window").focus();
};
Well there is too much things we can do, for example on window load we scroll to the top with scrollTop function, ...etc
But with such methods, where we take off the focus and move back to the top when the window is completely loaded, it will come with a glitch and no well effect.
After a while of thinking, and experiences, i come with that:
We remove the iframe with display:none, when the dom is ready. Next when the window is completely loaded, we bring it back. To do that efficienly, we write a style class like that:
.display_none{
display:none;
}
and we will add this class to our iframe, when the document is ready, and remove this class when the window is fully loaded. There is the code :
$(document).ready(function(){
$("#myFrame").addClass("display_none");
$(window).load(function(){
$("#myFrame").removeClass("display_none");
});
});
Now there is a situation where this will not work! if the iframe is created and added with another script, then the dom may be loaded but not the iframe element itself (because the script may not have create it yet)! And that was the case in my case .
SOLUTION:
put the iframe in a container, let say a div container, and apply the method above to this container. All should work nickel! On dom load the div is hidden, next when the window is fully loaded, it restore it back! and you get your iframe, which will be loaded and get displayed. No glitch, and efficient.
We can use sandbox attribute to block automatically triggered features (such as automatically playing a video or automatically focusing a form control).
<iframe src="https://muthukumaran-m.github.io/" sandbox></iframe>
Check this for more info
Assuming you have iframe in a same domain:
You can do this :
$("#foo").on('load', function() {
$("body",parent.document).focus()
};
It is already 2019 and I kept on having the same issue on some of my mobile websites. The focus kept on being stolen by the contact form near the footer.
My rushed method may not be the most elegant way of doing this, but by modifying your iframe form to be hidden on mobile devices, with an expand/collapse button to make it visible on demand, you'll stop this jump from happening.
The simplified code:
<div class="d-block d-sm-none visible-xs"><!-- show only on mobile devices -->
<a class="btn" data-toggle="collapse" href="#blockToControlID" role="button"
aria-expanded="false" aria-controls="blockToControlID">
Expand/Collapse iframe Block
</a>
<div class="collapse" id="blockToControlID">
<div class="card card-body">
<iframe src="path-to-form"></iframe>
</div>
<div>
</div>
<div class="d-none d-sm-block hidden-xs"><!-- hide on mobile devices -->
<iframe src="path-to-form"></iframe>
</div>
For bootstrap 3 you would use visible-xs and hidden-xs to hide or show the snippets of code.
For bootstrap 4 you would use the "d-block d-sm-none" to show the mobile-only code; and "d-none d-sm-block" to hide the mobile-only code.
Scripts needed on footer:
<script src="js/jquery/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
The jQuery version will depend on your bootstrap 3 or 4 setup.
popper.js must be loaded before bootstrap.js, otherwise it'll fail to work.
Prior to reaching this hack, I tried every possible thing. Sadly, none of the JS, jQuery and reCaptcha hacks posted by other members and forums worked. The page load would always default to the form.
While the solution could be nicer with some js/ajax/jquery or even php, this simple code is quick and works fine with bootstrap enabled websites. Modify as needed.
I hope this helps
I use the tabber script shown on http://www.barelyfitz.com/projects/tabber/ to provide a tabbed page. Generally it works well, and my only complaint is that the tabs don't show until the content has fully loaded, and then there is a jump as the screen writes itself properly. (See www.littlehotels.co.uk/spain/noves.php for an example of what I mean.)
I thought the solution would be to hide the div containing all the tabbed content like this
<div class="tabber" id="tabber" style="display:none">
and then reveal it with a small javascript function which is called by
<body onLoad="ShowTabber()">
The javascript itself is
<script type="text/javascript">
function ShowTabber() {
document.getElementById('tabber').style.display = "block";
}
</script>
My little function appears to stop the external javascript (tabber.js) from working because the page displays the content of all the tabs in line, without the the tabs themselves at the top. This is the same result as if I delete the reference to the external script from the of the page.
What am I doing wrong?
More explanation:
When the tabber.js file is missing, the page displays the content of all the tabs one after the other(as you would expect). Running the script as explained above has exactly the same effect; hence I am concluding that the script blocks the main javascript from running.
'onLoad': function(argsObj) {
/* Display an alert only after tab */
if (argsObj.tabber.id == 'tab') {
alert('Finished loading tab!');
}
}
By default select a tab.Then after completion loading that tab it will show a message.
see here
Well, I solved the problem (sort of) with jQuery, but it has now raised another problem.
In response to PSR, I looked more deeply into jQuery. It would have been too complicated to change over to .tabs(), but I did use jQuery to hide and show some divs at the appropriate moments.
I placed a simple little line in fron of the tabber div to show a "Loading" message.
<div id="loading" align="center" style="position:relative;top:70px"><h6>Loading ...</h6></div>
Then I put this script in the head, under the jQuery line.
<script type="text/javascript">
$(document).ready(function(){
$("#tabber").hide();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").fadeIn(300);
});
function checkResize(id){
var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
alert(win);
}
</script>
That works fine, but a couple of the tabs have iframes for their content, and this script breaks autoResize script I use on those iframes. I'll open a new question to see if anyone has an answer to that.
I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.
Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");
I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});
jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.