I found a good example of using cookie alert based on bootstrap. I am trying to amend the code and use it as a form to ask user to rank a page/website.
<div id="cookie-alert" data-expire="30" class="alert alert-primary alert-position-bottom">
<div class="container">
<button type="button" class="close" data-dismiss="alert">
<span class="cookie-close-btn" aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<p class="fs-13">
<i class="fa fa-warning"></i>
We use cookies to provide you with a better service.
Carry on browsing if you're happy with this, or find out how to
manage cookies.
</p>
</div>
</div>
Is there any way to show it after a delay 5-10 mins or after a number of visits of a specific page?
i found the code here:
https://theme.stepofweb.com/Smarty/v2.1.0/HTML_BS4/page-cookie-alert.html
This is just a simple example. Add the following to the file.
CSS:
#cookie-alert{
display:none;
}
JS:
(function(){
setTimeout(showAlert, 2000)
})();
function showAlert()
{
document.getElementById("cookie-alert").style.display = "block";
}
Change the time to whatever you'd like. Keep in mind that this is just a simple example.
To show that message with a delay you can use something simple like this:
// Vanilla JS to show it after period of time
var cookieDiv = document.getElementById('cookie-alert');
cookieDiv.style.display = 'none';
setTimeout(function(){
cookieDiv.style.display='block';
},5000) // Show it after 5000ms
Example here:
https://jsfiddle.net/cgn6qj98/2/
Related
I am trying to implement Bootstrap 5 toasts in my ASP.NET web application, using the following code...
HTML
<div class="row">
<div class="toast" id="companyUpdOK" name="companyUpdOK" role="alert" data-delay="5000" data-autohide="true" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
JavaScript
$('#companyUpdOK').toast(); // code to set up toast
...
$('#companyUpdOK').show(); // and later, the code to display the toast
So, the toast shows up, but the autohide doesn't work, and the close button doesn't work either. I have tried every combination I could find, including setting the options when initializing the toast, as in:
$('#companyUpdOK').toast({delay: 5000, autohide: true});
None of these work. What am I doing wrong?
Your code works with some changes
Bootstrap 5 doesn't require jQuery and the native JavaScript library is very easy to use. Yet, if you do use jQuery then keep in mind that the documentation may not show you the right way to do something using jQuery.
Here are a few issues to watch for:
1. Initialization
When Bootstrap 5 detects jQuery it loads jQuery plug-ins on the DOMContentLoaded event. Importantly, this appears to happen AFTER the jQuery ready event. If you need to do something with Bootstrap when the page loads then add a handler like:
document.addEventListener("DOMContentReady", function() {
$("#mytoast").toast();
});
2. jQuery plug-ins
The plug-ins that Bootstrap adds to jQuery are just wrappers for Bootstrap native JavaScript methods. The syntax is different and looking at the documentation can mislead you about how to do it with jQuery.
For example, the native JavaScript way of showing a Toast:
let toast = bootstrap.Toast.getOrCreateInstance(myToastEl);
toast.show();
Yet, if you are using jQuery this will not work, even though it might seem so from the documentation.
let toast = $(myToastEl).toast();
toast.show();
With jQuery you instead need to do this:
$(myToastEl).toast("show");
3. Data Attributes
Be aware that attributes have a new prefix: data-bs-<name> So if you use data-delay rather than the correct data-bs-delay then it will not work correctly.
Demo Snippet
The snippet incorporates these changes into the original code and the Bootstrap toast displays as expected.
test.onclick = function() {
$('#companyUpdOK').toast("show");
}
document.addEventListener("DOMContentLoaded", function() {
$('#companyUpdOK').toast();
});
<button id="test" class="btn btn-primary m-1">Show Toast</button>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast" id="companyUpdOK" name="companyUpdOK" role="alert" data-bs-delay="2000" data-bs-autohide="true" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.js"></script>
if you are using bootstrap 5 then you should use data-bs-autohide="true" and data-bs-delay="10000" you missed bs
I am new to HTML coding and JavaScript.
I am preparing a report in HTML displaying popup's and associated messages multiple times.
I came to know that id should be unique.
Can anyone help me with code if there is another way of achieving the requirement
function dFunc() {
var popup = document.getElementById(id);
popup.classList.toggle("show");
}
<div onclick='dFunc()'>
OK
<span class='popuptext' id='dPopup'>
Message
</span>
</div>
<div onclick='dFunc()'>
OK
<span class='popuptext' id='LPopup'>
Something
</span>
</div>
<div onclick='dFunc()'>
OK
<span class='popuptext' id='SPopup'>
new thing
</span>
</div>
function dFunc(){ var popup = document.getElementById('dPopup') popup.classList.toggle("visible");}
Avoid using onclick in the HTML Pages..
Have Look at this Link and next time try to google stuff before you submit a request.
I am in the process of learning jQuery and JS, so I apologize if this is a stupid, easy question.
I am working with a tour plugin called intro.js that adds hints to a web page (bootstrap page). I got the intro.js hints working, however I need to be able to show and hide all of the hints by toggling one button. The way the plugin currently works, you show the hints by clicking a button, then you have to manually click on each hint icon to view the tooltip, then click a button on the tooltip to hide the hint icon. The web pages could have several hints displayed (anywhere from 10-15) and users may not want to see what all hints are, as they may want to just see what 1 or 2 are then close all the hints - so I want to be able to toggle all of them on/off with one button.
According to the plugin API (view it here: https://introjs.com/docs/hints/api/), the hints are added when the button is clicked using this function: introJs.addHints(). You are supposed to be able to hide all of the hints using this function: introJs.hideHints().
So, how can I toggle both of these functions with one button?
Also, another issue I am having is if a user does not close all of the hint icons and they open a new page, the hint icons are still visible. If I refresh the page, they disappear. Related to this, if someone opens the hints and closes them, but decides to reopen the hints again, they do not open unless the page is refreshed. The API documentation has a function called: introJs.refresh() that says it refreshes and rearranges the hints. I think this is what I need to clear the existing hints (but I could be wrong). How can I clear/refresh the hints when the hints are closed so users can reopen the hints if needed, without refreshing - and so the hints disappear if a new page is opened and some hints were not closed.
Please help me with these questions and make a newbie's Christmas/holiday even better!!!
Here is a jsfiddle with hints added to a bootstrap modal. The Show Hints link is what I need to toggle on/off: http://jsfiddle.net/beaver71/fc0rkakn/
Thank you to everyone reading - and Happy Holidays to all of you.
Sample HTML:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="middle-right" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The API allows introJs to be commanded and for callbacks to be attached to various internal events, however it doesn't provide for inspection of state (in particular whether or not a hint is currently showing).
To achieve the toggle function, you will need to manage a state variable of your own.
Something like this ...
jQuery(function($) {
var hintShowing = false; // a variable by which to track the state of introJs.
introJs("#targetElment");
$("#myToggleButton").on('click', function() {
if(hintShowing) {
introJs.hideHints();
hintShowing = false;
} else {
introJs.showHints();
hintShowing = true;
}
});
function setShowing() {
hintShowing = true;
}
function resetShowing() {
hintShowing = false;
}
introJs.onchange(setShowing).oncomplete(resetShowing).onexit(resetShowing);
// add hints and set options here
});
That should work, at least to a certain extent. It depends on whether onchange fires when the initial hint is shown. If not, setShowing() will also need to be called manually (from your own code when the hint sequence starts) or maybe just initialise var hintShowing = true;
I have a form that has to redirect the user (part of Salesforce's redirect requirement). I would like to keep the user on the page, so the redirect link is the same page with "?submitted=1" added to it. I have tried so many different scripts found online to check for the submitted url, then change the div from none to block. It does not work and I'm not sure why. Here is the latest code I have, but keep in mind, I have been searching and trying all sorts of answers from here and around the web, so I may have already tried something else.
Here is my HTML:
<div id="savingsSuccess">
<div id="alertSuccess" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>Your inputs have been sent to our team, we will send your savings estimate to email</strong>
</div>
</div>
My CSS is here:
#alertSuccess {
display: none;
}
My script is as follows:
<script type="text/javascript">
if (/submitted/.test(window.location.href)) {
document.getElementByID('alertSuccess').style.display = 'block';
}
</script>
What am I doing wrong?
You are misspelling the method getElementById, must be Id instead of ID.
Here are the docs.
I made some changes to your script.
Firstly: Id not ID, and just to make things a bit less hackish, I went ahead and split/substringed the URL
HTML:
<div id="savingsSuccess">
<div id="alertSuccess" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>Your inputs have been sent to our team, we will send your savings estimate to email</strong>
</div>
</div>
CSS is here:
#alertSuccess {
display: none;
}
Script
<script type="text/javascript">
if (window.location.href.substring(window.location.href.lastIndexOf("?"),window.location.href.length-1).split("&").indexOf("submitted=1")==-1) {
document.getElementById('alertSuccess').style.display = 'block';
}
</script>
The Twitter Bootstrap library now has Javascript plugins available, and one of them is supposed to give your alerts an automatic close button.
The documentation is here
I can't figure out how to get it to work. See this code and fiddle:
<div class = "alert-message fade in" data-alert = "alert">
<p>This is an alert!</p>
</div>
http://jsfiddle.net/SBQcp/
I'm sure there's a syntax piece that I'm missing, but I don't get it.
Alerts are not supposed to be auto-closed because the intention is to the user to notice any message before closing.
Although you can add a link so the user can close it manually this way.
<div class = "alert-message fade in" data-alert = "alert">
<a class="close" href="#">×</a>
<p>This is an alert!</p>
</div>
Or can be closed programatically this way:
$(".alert-message").alert('close')