I want to make a reveal modal, but its not working. I don't know why. This is my code:
Add Policy
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="<?= site_url('assets/js/foundation.min.js'); ?>"></script>
<script src="<?= site_url('assets/js/foundation/foundation.reveal.js'); ?>"></script>
I'm pretty sure my browser loaded the js as it does not show any error in the debugger. I copy paste from foundation docs, but I don't know why this is not working.
Initialise foundation..
Have this at the end of your body
Related
While trying to create a modal using Foundation Reveal, I found that I couldn't close it. Not by using the reveal-modal-close class, not by javascript, nothing was working.
I tried to put this example from the documentation into the page:
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
When the page loads, it's open, but I can't get it to close. Also, not sure why it loads open.
At the bottom of my <body>, I have this:
<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.6.2.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.reveal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script type="text/js" src="js/modal.js"></script>
<script>
$(document).foundation();
</script>
you don't need to load both foundation.min and foundation.reveal, just load min unless you need only reveal. Also you don't need modal.js - might be a conflict there.
See documentation here and follow it, should work once you fix the above issues: http://foundation.zurb.com/docs/components/reveal.html
i tried since friday to install a playlist plugin to videojs but it dosent work for me.
i want this plugin : https://github.com/Belelros/videojs-playLists i red the documentation but i cant figured out what the problem is.
here are my Code snippets
<video class="video-js vjs-default-skin"
controls preload="auto" width="530" height="298"
data-setup='{"plugins":{"videojs-playlists"} } '>
<source src="../../../../../fileadmin/Film01.mp4" type='video/mp4' />
</video>
</div>
<div class="vt-video-player-playlist">
<ul>
<li data-videoplaylist="0">Critical Chain - in 5 Minuten erklärt</li>
<li data-videoplaylist="1">Critical Chain Multi Projektmanagement</li>
<li>Results of Critical Chain at von Ardenne..</li>
<li>Zuverlässige Projekte - Sichere Liquidität</li>
</ul>
</div>
</div>
and at the end of the site i load the js files
<script src="../../../Public/3rd/jquery-1.10.2/jquery-1.10.2.min.js"></script>
<script src="../../../Public/Js/common.js"></script>
<script src="../../../Public/Js/menuslider.js"></script>
<script src="../../../Public/3rd/video-js/video.js"></script>
<script src="../../../Public/3rd/videojs-playLists-master/dist/videojs-playlists.js"></script>
<script src="../../../Public/Js/videoplayer-settings.js"></script>
i hope you can help me. thanks in advance!
Well, there is currently an issue with the playlist which is basically this one:
https://github.com/Belelros/videojs-playLists/issues/6
The thing is that I was using some minified var name for getting videojs instance. I need to fix that ASAP. However, as a workaround, you can edit in Line 22 of videojs-playlist, and replace this:
player.pl.el = player.N;
By this:
player.pl.el = player.a;
Worked for me on another file... Not an optimal solution but should at least work.
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.
I'm using the following script to create a toggle effect for opening and closing div's.
<script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(".content").hide();
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
<div class="main_text_faq"
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum</div>
</div>
Now I can't just seem to figure out how I can let Header 1 to always be open and to have Header 2 open when entering the content.
Any ideas how I can start coding this? I am in the process of learning how to use Jquery so please forgive me for not having anything to show for what I allready tried to fix my "problem"
Thanks in advance.
Regards!
If I've understood your question correctly, you want the first .content element to stay visible when the others are initially hidden. To do that you can use the :not and :first pseudo-selectors to exclude the first element:
jQuery(".content:not(:first)").hide();
Here's a working example.
So I have something like this:
<html>
<body>
<div id="jqt">
<div id="page1">
...
</div>
....
<div id="generic">
Some generic page to use as a template
</div>
</div>
</body>
</html>
and I want to create a new page on after everything is loaded and the user does some action.
$('#generic').clone().attr('id', 'some_new_page').appendTo('#jqt');
What happens is the new page ends up showing up in front of everything and doesn't seem to have and jqtouch events or styles added.
How do initialize this page (or at least have jqtouch reinitialize the whole html file)?
I don't want it to show up at first, I just wanted loaded and ready in the background.
Have you tried to do a deep clone with data and events instead?
$('#generic').clone(true, true).attr('id', 'some_new_page').appendTo('#jqt');