I try to open a foundation reveal via Javascript but I always get an error, the reveal-bg is shown and the reveal itself is not visible.
$("#msgModal").foundation("reveal", "open");
The HTML:
<div id="#msgModal" class="reveal-modal small" data-raveal>
<h1>Advice</h1>
<a class="close-reveal-modal">×</a>
</div>
The error message in my console:
'undefined' is not an object (evaluating 'settings.css')
I read the documentation and also put the foundation.reveal.js under my foundation.min.js like this:
<script src="/layout/cyt/js/assets/foundation.min.js"></script>
<script src="/layout/cyt/js/assets/foundation/foundation.reveal.js"></script>
<script src="/layout/cyt/js/assets/foundation/foundation.abide.js"></script>
This drives my crazy. I don't want to trigger a click or something like this. The modal should open on page load.
This is an old question but are you doing the following?
Place this before the </body> tag.
<script>
$(document).foundation();
</script>
Then the following should be AFTER the above, but before the </body> tag.
$("#msgModal").foundation("reveal", "open");
Related
This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 5 years ago.
<script type="text/javascript" src="jquery-2.0.3.min.js">
alert("hello");
</script>
I wrote an inline function that for some reason when I ran onclick says it doesn't exists so I tried to simplify it completely till it works but I found out even this code doesn't work. It does work on a empty page though!It is located under all my other code in said page; no body tags only DIVs - right after the last div .Maybe it is because of the frameworks I'm using? I have firebase/angularjs/nodejs. I also tried to do document ready calls and console.log(); getting no errors but also nothing popping up either.
EDIT: it is literally not a duplicate because I tried all other solutions. Here is more code: I tried to put it into the last div and outside of it.
<!-- <a class="btn-for-pw" ng-href="">Forgot Password?</a> -->
</form><!-- end of #signupForm -->
</div>
<!--Footer-->
<div class="modal-footer text-center">
<a ng-href="#/register">Create an Account</a>
</div>
</div>
<!--/Form with header-->
</div>
</div>
<script type="text/javascript" src="jquery-2.0.3.min.js"/>
<script>
alert("hello");
</script>
Try putting another script tag after you include your jQuery source. as the script inside will be disregarded.
Here is a jjsFiddle
<script type="text/javascript" src="jquery-2.0.3.min.js"/>
<script>
alert("hello");
</script>
Good luck :-)
Please forgive me for not including any code, but I always struggle with front-end. I have found numerous blogs and how-to's for putting up a full-screen modal display, but all of them have disrupted my site's existing css or JavaScript in some way, some how. Can anyone point me to a simple, self-contained example that is guaranteed to be a drop-in solution for a website that already has its own things going on?
I googled full screen modal and found this. As close to a drop in solution as you could ask for I imagine. You'll need to download their lib though.
Taken from their site:
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>
<body>
<!--Call your modal-->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->
<div class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>
<script>
//This is your script
$("#demo01").animatedModal();
</script>
I would like my Wordpress site to have one of those redirects to a specific page if JavaScript is disabled on the site or display a message. Something that says something along the lines, "Please enable JavaScript to use this site.".
I am asking this, because all of the methods I've found do NOT work with Chrome because Chrome ignores the
<noscript> </noscript>
tag.
This is what I have now, in case anyone is trying to find a method for this like I was.
<div id="js-disabled">
// Shows when Javasript is disabled.
</div>
<div id="js-enabled">
// Shows when Javasript is enabled.
</div>
<style type="text/css">
#js-enabled { display:none; }
</style>
<script type="text/javascript">
document.getElementById('js-disabled').style.display="none";
document.getElementById('js-enabled').style.display="inline";
</script>
you can try like this
<div id="noscript">Java script is disabled ! </div>
<script type="text/javascript">
document.getElementById('noscript').style.display="none";
</script>
I tried Zclipboard.js for copying the value but it didn't work.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.steamdev.com/zclip/js/jquery.zclip.min.js"></script>
<script>
$(document).ready(function(){
$('#copy-description').zclip({
path:'ZeroClipboard.swf',
copy:$('#description').text()
});
});
</script>
<a id="copy-description" href="#" class="">Copy</a>
<p id="description">This should copy</p>
I referred it from this link. I am just getting a copy link with flash player embedded in it. But I cannot click it. What should I change in code, so that I can copy the description text on clicking copy link
I think the problem might be the swf file. Try this. Hope it works
$(document).ready(function(){
$('#copy-description').zclip({
path:'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy:$('#description').text()
});
});
Make sure that the swf is loaded (using Firebug > Network) and that it is located above the link, as well with Firebug. Most likely the first one will solve your problem
1) Here is what works just fine:
SearchTool.aspx (in the code snippet below) is a 3rd party product that will actually insert an iframe into the page at page load time with the search tool inside of it.
<html>
<head>....</head>
<body>
...
...
<h2>Search Tool</h2>
<script type='' src='http://foo.com/SearchTool.aspx</script>
...
</body>
</html>
2) Here is what I want to do:
I want my page to load quickly without the search tool being loaded at the same time. The user can read through my page and then, if they want, they can click on a button to load the search tool thereby delaying the tool load time to when they want it.
I want to be able to invoke the SearchTool.aspx from the click of a button as below, but I don't know what the code would look like in the showSearch() function below:
<h2>Search Tool</h2>
<script type='text/javascript'>
function showSearch(){
**** What would go here? *****
}
</script>
<input .....="" onclick="showSearch();"></input>
3) I have already explored creating the iframe manually:
In the code snippet #1 above that works just fine, if I do a view source and then create an iframe exactly like they do with all of the same properties, the Search Tool doesn't completely work properly. Weird I know, but true. So this is NOT an option.
Wrap your script tag in a div with the style display:none to hide it:
<h2>Search Tool</h2>
<div id="searchTool" style="display:none">
<script type='' src='http://foo.com/SearchTool.aspx</script>
</div>
...
Then, in your function, just show it :
function showSearch(){
document.getElementById("searchTool").style.display = 'block';
}