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.
Related
I'm new to JQuery. I'm trying to call vbscript function inside jQuery. I want to call vbscript on button click using jQuery. I tried calling vbscript function "callfun()" using button onclick() method of javascript for button "Say Hello", and it is working. But when I'm trying to call the same vbscript function "callfun()" using jQuery for button "Say MACRO". It is showing nothing.
(THE BELOW CODE REQUIRES ENABLING OF ACTIVEXOBJECTS.)
Steps to run the below code:
Copy and save the below code in notepad and save the file with .html extension.
Open chrome, search for "IE TAB" extension or download from here, install it, and add it to chrome to enable the plugin icon.
Now open the .html file, click on IE TAB extension.
The link or html page will open automatically directly inside the IE TAB plugin and then the html code can be tested.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/Vbscript">
Function callfun()
Msgbox("Hello!")
End Function
</script>
<script>
$(document).ready(function(){
$("#mac").click(function(){
callfun();
});
});
</script>
</head>
<body>
<input type = "button" onclick = "callfun()" value = "Say Hello" />
<input type = "button" id="mac" value = "Say MACRO" />
</body>
</html>
I even tried making changes in the jQuery script as:
Adding vbscript label before the function.
<script>
$(document).ready(function(){
$("#mac").click(function(){
vbscript:callfun();
});
});
</script>
Adding jQuery attr() function.
<script>
$(document).ready(function(){
$("#mac").attr("onclick", "callfun()");
});
</script>
Adding language in jQuery attr() function.
<script>
$(document).ready(function(){
$("#mac").attr("language", "vbscript").attr("onclick", "callfun");
});
</script>
But nothing called the vbscript function using jQuery.
Someone PLEASE help me or suggest me a way to get it done.
despite the fact you may be using this legitimately its not a 'nice' way to go about doing whatever your trying to do. and most browsers and even windows itself will try its hardest to block what you are doing on multiple levels because security wise this is a very VERY sketchy way of doing whatever your trying to accomplish lol
so the fact this doesnt work does not surprise me. what i would do is to get a packet sniffer running and read all the http data that occours to get clues on if its properly sent out and how server / page responds.
this probably violates the same-orgin policy DOM model of internet rules and stuff or atleast kinda close to violating it, your work is interesting i used to love vbscript but vbscript is becoming rapidly deprecated too
i dont recomend doing this at all: but just for test, you can lower your IE security settings level temporarily. and see if doing that allows sketchy scripts to go through
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);
});
I'm currently getting a fragment of a page and loading in bootstrap modal.
This fragment of page includes the jQuery required to load Google Maps but when the modal loads the content, all scripts are getting stripped so subsequently, the maps don't load.
Even if I directly insert the scripts inside the modal-body class, they still get stripped.
Is there a workaround to this at all?
What we're currently using to trigger the modal is:-
Launch demo modal
I can provide further code in use if needed to answer accurately.
=== Edit: Providing more code in use on request...
So we're including a sitewide link that triggers bootstrap modal. The link that is triggering modal can be seen above and here is the rest of the code in relation the modal.
What we wish to load in the modal is just a fragment of the page at /stores, all the code that is loaded at this URL can be seen here. From this page though, we only really wish to load everything inside .modal-container on line 192 but as necessary scripts reside outside of this div in the same file, we aren't capturing this when we try to load in modal. So previously, our modal trigger looked like:-
Launch demo modal
This then led us to try and just wrap entire file content inside div and call it's contents as the fragment of page in modal so that we can pull the necessary scripts required to load #map_canvas but alas, all scripts are stripped out of modal...
Hope this gives greater explanation into what we're trying to achieve.
=== Edit 2: We've actually fixed this via a workaround but it was a mammoth job so will post answer as soon as I can...
I'm using the following code to load view on boostrap modal :
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$(data).modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
With the following trigger :
<i class="icon-plus icon-white"></i>
By using this method you will ensure that all you script will be loaded when your modal will display. This is only this workaroung that I found to correctly showing my modal.
Everything that I have to show on my form (new.html) will be displayed perfectly.
Thus, I suggest that you put all you releavant code to Google Map on the page corresponding to /stores.
Edit
You trigger should be :
Launch demo modal
Instead of :
Launch demo modal`
Edit2
The problem that I see, is that you modal inclusion do not get the JS files because these are not within your inclusion section. I'm not a PHP expert, but here is to option that you might try :
Option1 (not very clean)
You can add <script>Google Map required JS File</script> tag inside the <div class="modal-container"></div> but you will get duplicate tag for the same JS file.
Option2 (Might be possible ?)
Create new file and add your section <div class="modal-container"></div> with your required JS files.
Replace the line 192 by including your new file and call your modal by passing your current store object in order to display your information in the modal.
Let me know if its help.
Has StackOverflow changed your code?
Launch demo modal
You have the classname within the href? This could be part of the problem.
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.
well Javascript confirmation gives the Ok/Cancel Button but I want to create a Confirmation with Yes and No in Javascript can anyone help ??
The buttons in a confirmation box cannot be changed by Javascript.
I would suggest rolling your own in the form of an inline popup. Just create a div with position:absolute; in the centre of the page and then show/hide it.
EDIT:
The code below will outline what you need to do in vanilla Javascript. You will probably want to spend more time styling it, but the key points are:
position:absolute; So that the popup will appear in the centre of the page.
display:none; So that the popup will be hidden when the page loads.
The link has a href so that it will still be functional even without Javascript.
The onClick attribute of the first link has return false; This stops the link from redirecting.
You can change the two onClicks inside the popup to do whatever else you want them to.
<style type="text/css">
div#popup
{
position:absolute;
display:none;
top:200px;
left:50%;
width:500px;
margin-left:-250px;
border:1px solid blue;
padding:20px;
background-color:white;
}
</style>
<a
href="http://example.com/"
onclick="document.getElementById('popup').style.display = 'block'; return false;"
>Go to example.com</a>
<div id="popup">
<p>Are you sure you want to go to example.com?</p>
<p>
<a onclick="document.location='http://example.com/'; return false;">
Yes
</a>
<a onclick="document.getElementById('popup').style.display = 'none'; return false;">
No
</a>
</p>
</div>
To get a more professional result I would recommend learning more about JavaScript and jQuery and investigating some of the options suggested by the other posters.
The basics are:
Create a transparent (or semi-transparent) iframe to cover the browser viewport, which does a couple of things for you:
Eats clicks outside your confirmation box
Prevents OS-drawn controls (like select boxes) from appearing on top of your confirmation box (which they'll do otherwise, on IE at least and possibly others)
And lets you (optionally) shade the rest of the page to highlight your confirmation box. Give the iframe a z-index (100, say, unless you have other elements on the page with a higher z-index than that).
Create a div that contains your yes/no question and buttons, append it to your main page's DOM, position it where you want it, and give the div a z-index greater than that of the iframe. Believe it or not, this means that the page is behind the iframe, but the div is in front of it. Exactly what you want.
Handle clicks on the buttons to tear the whole thing down (and to get your answer).
Remember that this will not be inline with your JavaScript logic. You use callbacks from the buttons instead.
It really is that easy (or that complicated). :-)
Having said that, this wheel has been invented. Look for "lightbox" or similar components. jQuery UI has one called Dialog, for instance, but just adding that to a page where you're not using jQuery UI for anything else may be a bit heavy.
You cannot impact the use of the usual window.alert, window.confirm and window.prompt() native popup windows.
However, you could use other existing libraries for this, for instance ExtJS's MessageBox.
MessageBox is part of ExtCore, so you wouldn't even need the whole library but simply the core functions.
Below is an easy example, using the Google AJAX Libraries API loader.
within the <head> section of my.html:
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_API_KEY_GOES_HERE"></script>
<script type="text/javascript" src="my.js"></script>
in my.js:
google.load("dojo", "1.5", {
uncompressed: true
});
function OnLoad() {
function processResult() {
/* do something here */
}
Ext.Msg.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
fn: processResult,
icon: Ext.MessageBox.QUESTION
});
}
google.setOnLoadCallback(OnLoad);
For more information, you can refer to my answer to another question on how to use the Google CDN.