I'm trying to disable Foundation's Reveal animation, but it's still animating.
Here's my fiddle and code:
http://jsfiddle.net/ryanburnett/pSQjj/
<script>
$('#videoModal').reveal({
animation: 'none' //fade, fadeAndPop, none
});
</script>
Example Modal w/Video…
<div id="videoModal" class="reveal-modal large">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
</div>
<a class="close-reveal-modal">×</a>
</div>
Change your JavaScript call to the following:
$(document).foundation('reveal', {animation: 'none'});
Here's the jsFiddle: http://jsfiddle.net/pSQjj/1/
At least in this jsFiddle, it appears there may be a bug with closing the modal window with animation set to none, whereas it closes correctly if you change the configuration to fade or fadeAndPop. Let me know if you see the same bug in your app and I'll report it to the guys and gals at Zurb.
Change your JavaScript call to the following:
$(document).foundation('reveal', {animation: false});
The problem, is that if you turn the animation off, the modal does not animate to where you are on the page (if you have scrolled down the page) - so do take note of this.
Related
So there is this webpage:
<body class="" style="overflow: hidden;">
<div> <!-- stuff --> </div>
<div class="AbCde Zy1XW ">
<!-- unwanted crap -->
</div>
</body>
I want to remove
class="AbCde Zy1XW "
and
style="overflow: hidden;"
from
body
so I used this code:
d=document
e=d.getElementsByClassName("AbCde Zy1XW ")[0];
e.parentNode.removeChild(e);
document.querySelector('body').removeAttribute('style');
It works but the problem is that the scrolling of the webpage is buggy on iOS. You have to zoom in and out before you can scroll normally. But after a while, you can't scroll anymore and need to do the zoom out/zoom in trick again. Any ideas why? Thanks
EDIT:
Using
remove();
also has this same issue...
I am trying to run a script where ..a slider url is # and the name of slider button is "slide_8". when somebody clicks over it a youtube video pops out.
In my script below video is playing but cannot be seens anywhere on browser.
I have kept the youtube url inside the javascript.
<div class="overlay" style="display: none;"></div>
<div class="propose-video-wrap" style="display: none;">
<div id="propose_video"></div>
</div>
<script type="text/javascript">
$('#slide_8').click(function() {
var video_htm = '<a class="pop-close-btn" onclick="closeVideoPopup();"></a> <iframe id="propose_video_iframe" width="300" height="150" src="//www.youtube.com/embed/SQtxJ15vzOU?rel=0&autoplay=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>';
$('#propose_video').html(video_htm);
$('.overlay').css('display', 'block');
$('.propose-video-wrap').css('display', 'block');
$('body').css('overflow-y', 'hidden');
});
function closeVideoPopup() {
$('.overlay').css('display', 'none');
$('.propose-video-wrap').css('display', 'none');
$('#propose_video').html('');
$('body').css('overflow-y', '');
}
</script>
I pasted this code in JSfiddle, added a button and it works. The only changes I've made is adding an event listener for clicking on the closing button, because for some reason the inline didn't work on JSfiddle, as well as inserting some text inside the closing button, so it's possible to click it.
It's possible that the issue is with your styles, for example that any of your elements has a negative z-index or is positioned in a weird way. Disable the display: none attribute and insert some text inside those HTML elements first and see where they end up.
If you'd like to see what I ended up with, here is is.
I'm having a problem that I thought someone else might have a quick answer for. I'm attempting to use a Colorbox to display multiple hidden inline divs. The first div is displayed correctly on load. When I click on one of the anchors, nothing happens. If I click again, the correct div shows. Is there a way not to require the extra click?
Here's my HTML:
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<p><a class='inline' href="#inline_content2">More inline HTML</a></a></p>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>Inline content.</strong></p>
</div>
<div id='inline_content2' style='padding:10px; background:#fff;'>
<p><strong>Different inline content.</strong></p>
</div>
</div>
Here's my code
$(document).ready(function(){
$(".inline").colorbox({inline:true, open: true, rel: 'inline', current: "", width:"50%"});
});
Exhibits the behavior described above in Opera, Firefox, Chrome. Doesn't do anything in IE. I'm using the most current versions of jQuery, Colorbox.
I am using Zurb's jQuery Reveal Modal plugin to create a pop-up box with a Vimeo video. However, the last video displays over the content as soon as the page loads and doesn't disappear, and the other videos do not disappear after hitting the close button on their respective modal window. The box and the other content within it will disappear, but the iframe for the video does not.
Here is the markup for the trigger and modal box:
<div class="videoEntry">
<h3>Community Involvement</h3>
<img class="videoThumb" src="images/community-video_thumb.jpg" />
<p>Corvalent Corporation CEO Ed Trevis talks about Chirofit's Corporate Wellness programs and Dr. Mo's involvement in the Cedar Park and Austin communities.</p>
<div id="modal4" class="reveal-modal">
<h1>Modal Title</h1>
<iframe src="//player.vimeo.com/video/74992379" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Chirofit and Community from Chirofit on Vimeo.</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
The CSS and JS files have not been changed at all, and are included as they come. The reveal.css file is in the header and the jquery.reveal.js file is in the footer just below the call to the most recent version of jquery hosted on Google's CDN.
I'm at a loss about what could be causing this. I'm doing this for a friend and I'm starting to wonder whether his table-based site might be the problem. It often causes unexpected behavior. Any input with this would be tremendously appreciated.
The site can be viewed here, in case that helps.
There's a syntax error in jquery.reveal.js on line 118 (comma is missing) :
modal.css({'display' : 'none' 'visibility' : 'hidden', 'top' : topMeasure});
maybe this cause the problem?
I'm launching the fotorama jquery gallery plug-in from a standard HTML link. It works nicely but I'd like to launch in full-screen mode right away, rather than having to click the link within fotorama to change it to full screen after it's launched.
The code I have is this:
<div id="fotorama" class="fotorama"
data-width="100%"
data-height="100%"
data-nav="thumbs"
data-allowfullscreen="true"
data-transition="crossfade"
data-auto="false">
</div>
<p class="something">Something</p>
<script>
$(function(){
$('.something').click(function(){
var $gallery = $('#fotorama').fotorama();
var fotorama = $gallery.data('fotorama');
// Overwirte all the photos
fotorama.load([
{img: '0027.jpg'},
{img: '1759.jpg'}
]);
});
});
</script>
Since I can't find the API documentation (perhaps it's not complete just yet?) I was wondering if anyone knows how to do this?
Many thanks.
1. requestFullScreen()
Use Fotorama API call with prevented auto-initialization:
<script>
$(function () {
var fotorama = $('.fotorama')
.fotorama({allowfullscreen: true})
.data('fotorama');
fotorama.requestFullScreen();
});
</script>
<div class="fotorama"
data-auto="false"
data-height="100%">
<img src="1.jpg">
<img src="2.jpg">
</div>
But there will be a fullscreen-exit icon at the top-right, and users will be able to leave fullscreen. And even if you make the icon invisible, it will possible to close fullscreen by pressing esc button. So...
2. data-width="100%" data-height="100%"
I believe that it’s better to imitate fullscreen with this snippet:
<body style="margin: 0;">
<div class="fotorama"
data-width="100%"
data-height="100%">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
</body>
Example: http://fotorama.io/examples/full-window.html.
I've wasted a lot of time trying to hide Fotorama block.
Try to add class “fotorama--hidden”.
<div class="fotorama fotorama--hidden">
<!-- images -->
</div>
This will hide the block but all functions from Art's answer #1 will work normally.
And when you exit fullscreen Fotorama will just hide.