Is it possible to have Reveal JS only display the control arrows on the speaker view?
Setting controls: false disables the arrows on both the main display, and the speaker display. My presentation is in front of a live audience, so they don't need to see the controls, but it'd be handy for me to be able to see them, so I know when I've got slides "below" the current one, as well as "to the right" of it.
Assuming that your presentation is loaded as the main page (not in an iframe) adding the following to your presentation should work.
<style>
.reveal .controls {
visibility: hidden;
}
.notes .reveal .controls {
visibility: visible;
}
</style>
<script>
if (window.self !== window.top) {
document.body.className += " notes";
}
</script>
This adds a notes class to the body when the presentation is loaded within an iframe (as is done with the notes plugin). The styling then hides the controls unless it's on the speaker notes page.
If you add it before the call to Reveal.initialize() you shouldn't see the controls at all. Adding it after may result in the controls briefly appearing before being hidden.
Related
with WooCommerce 4.2, on iOS, FlexSlider (v2.7.2) show a bug with a horizontal slider: when the focus is on the slider as the user swipes left or right, the vertical scroll is still active, there is some level of vertical movement. That makes the slider "rebound".
You can see the bug in this video: https://youtu.be/bM8zcv3ciTo
EDIT: My question is similar to this one, but related to Flexslider.
I have this in functions.php:
/*PRODUCT PAGE FlexSlider Options*/
add_filter( 'woocommerce_single_product_carousel_options', 'filter_single_product_carousel_options' );
function filter_single_product_carousel_options( $options ) {
if ( wp_is_mobile() ) {
$options['controlNav'] = true; // Option 'thumbnails' by default
$options['direction'] = "horizontal";
$options['slideshow'] = false; // Already "false" by default
}
return $options;
}
Any idea how to prevent this vertical scroll while the focus is on the Flexslider?
Anybody also has this bug?
I installed a test site with only Wordpress and WooCommerce, and the bug is here, so it's not plugin-related: http://woo.makemy.biz/produit/produit-de-test/
Edit: Adapting the owl carousel solution would result in code that looks like this:
//You should replace ".myFlexslider" with an appropriate class.
jQuery('.myFlexslider').data('flexslider').vars.before = function(){
jQuery('body').css('overflow', 'hidden');
};
jQuery('.myFlexslider').data('flexslider').vars.after = function(){
jQuery('body').css('overflow', '');
};
which should work. https://codepen.io/Terrafire123/pen/YzWRXOJ
It's not possible to do this via PHP, because PHP doesn't expose the API necessary to do this.
You should know, that preventing vertical scroll when the slider swipes is usually discouraged because this can result in the slider being annoyingly difficult to scroll past.
Original answer: The fact that the issue seems to occur with both Flickity and Flexsider seems to indicate that it isn't a problem with either one, but rather with the user.
A careful review of the Youtube video you have seems to indicate it's working correctly, and there is no real bug. Every time the slider doesn't move in your video, it's because
a. He's sliding vertically, not horizontally, or
b. He's sliding in a direction he can't slide because loop is disabled and he's at the first element.
The rebound effect is normal when you scroll to the top of the page in iOS. If desired, you can disable the bouncing effect with a workaround like this:
html {
position: fixed;
height: 100%;
overflow: hidden;
}
body {
width: 100vw;
height: 100vh;
position:relative;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
I am using Element's Notification component but when it is activated the dialog appears but seems to be "behind" the grey background that is also introduced. Clicking anywhere removes the grey background and allows the interaction with the dialog box but without the greyed out background that should be filtering out the noise of the normal screen. Here is a short video that shows the various states:
video
The code to put the component in as follows:
<div class="add-address" #click="showAddDialog = true">
+
</div>
</div>
<el-dialog
title="Add New Address"
:visible.sync="showAddDialog"
width="30%"
:before-close="newAddressDialogClosed">
<span>Postal Address</span>
<el-input v-model="newAddress" type="text"></el-input>
<span slot="footer" class="dialog-footer">
<el-button #click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" #click="dialogVisible = false">Confirm</el-button>
</span>
</el-dialog>
I have used the inspector to poke around at the CSS but I haven't yet understood what's causing this from a CSS perspective nor a Vue/Element perspective. Any help would be appreciated.
I have further analyzed the HTML/CSS and the component appears to introduce two separate blocks in the DOM:
The lower block is the grey background which you'd expect to "blur" the page and focus attention on the modal. It, however, is in front of the dialog. Also of interest is that clicking anywhere seems to target the grey background and dismiss it but in so doing it also has a subtle effect on the placement on the dialog box as can be seen here:
Note that the z-index of the dialog box is greater than the background which intuitively makes sense to me but I'd have thought this would have put the dialog box on top. Guess that's not all there is to this.
I have hacked a work-around for now by changing the background to display: none and then adding the following HTML directly before the modal dialog in the DOM:
<div class="modal-background" v-if="showAddDialog"></div>
These seems to validate my underlying suspicion that placement within the DOM tree is important and the component's attempt to place the modal background at the very end of the DOM is somehow problematic.
I had the same issue and also found changing the z-index of the dialog had no effect. This was occurring when I had nested Element.Eleme.io elements, which appears to be the case for you also.
The z-index is not quite as simple as "higher always means on top". Elements are grouped into different stacking contexts; it is not possible for an element in a lower stacking context to appear above an element in a higher stacking context. Therefore depending on where the different elements were rendered in the DOM, they can land themselves in different stacking contexts, and are destined to remain at the same relation to one another, no matter how much the z-index has changed. (See https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ for a more detailed explanation on the z-index).
Examining with Chrome dev tools, I found that the obscuring modal is not rendered in the same place as the dialog; in fact it is appended to the body, i.e. on the outer reaches of the application, which appears to be the reason they are not within the same stacking context. There is a quick fix; the dialog element has a property "modalAppendToBody". If true, the modal is rendered to the body, and if false it is rendered to the parent element of the dialog. By specifying this as false I managed to solve the issue:
<el-dialog
title="Add New Address"
:visible.sync="showAddDialog"
width="30%"
:before-close="newAddressDialogClosed
:modalAppendToBody="false">
</el-dialog>
you can use the CSS property called z-index
either any object which you want to set to back ? you just have to set z-index: -1; // or more
or you want to set any object on to the front of another ? you just have to set z-index: 1; //or more
Check the Snipet For More Info :
.a {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.b {
margin-top:150px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> I am on Image</h1>
<img class="a" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">
<br>
<br>
<br>
<br>
<h1> Image is on me</h1>
<img class="b" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">
</body>
</html>
I have a jQuery UI accordion with Markup structure
<div id="accordion2">
<h3>title</h3>
<div>stuff texty</div>
<h3>title2</h3>
<div>stuff texty</div>
</div>
However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).
I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used
#media (max-width: 640px) {
.first {
display: none;
}
}
To make them disappear... but it didn't work. Does anyone know how I can go about doing this?
try this as a CSS3 option:
#accordion2 h3:first-of-type
{
display:none;
}
if you cannot support CSS3 then give that first heading a class name and target that.
I need to make a dropdown navigation, where for every parent navigation item, in the dropdown area I show the child pages + 3 images with a title linked to other pages.
I would need something like the 'Custom Navigation' module with an option to select images (or add a custom class, and get the image from the page).
Is there an extension which I could use for this? If not, would be easier/faster to change/extend a core module, or should I create a new one?
Thanks!
EXAMPLE ('Kollektion' menu-item hovered. The gray area is the submenu container)
I don't know of an extension that would allow including an image to a specific link in a navigation menu. But if you are willing to do it with CSS styles, here's how I would do it:
Any page can have multiple custom CSS classes and they do apply to the navigation (unless the navigation template has been changed in such a way that they don't anymore). The place where you enter these CSS classes is at the bottom of the Edit page view, under expert settings. Add any CSS classes you want and then edit the style sheet to make them look right.
If the three pages are not supposed to be subpages for the current page, but lead somewhere else, you can use the "Internal redirect" page type for them.
The CSS could be something like this in addition to your regular styling:
.level_2 li {
float: left;
clear: left; /* this is to stack them on top of one another*/
}
.level_2 li.special_class {
display: inline-block;
vertical-align: top;
}
.level_2 li.special_class:before {
display: block;
content: '';
width: /* the intended image width */
height: /* the intended image height */
}
.level_2 li.special_class.foo {
background-image: url('foo');
}
.level_2 li.special_class.bar {
background-image: url('bar');
}
...
Please remember that this isn't supposed to be a complete solution, but rather a principle upon which you can build your own. You may want to add backwards compatibility to older browsers (or not), etc.
I think there is an extension to allow you do that. check this link Navigation with images
and may be this one also Navigations-Bild
Either of this should give you what you want but with a little styling
I have a presentation set up with reveal.js which is meant to be used unattended. So, I want to be able to show a little footer (or another link somewhere) on all slides that points to an 'Information Slide' with data about the author, how to use the slides etc.
(This is to aid people who don't really know how to use reveal.js as well as to show authorship information in detail.)
I have not been able to find anything in the documentation and there does not seem to be a callback which I can utilize.
This works for me (aligns to left edge as I use built-in controls on right).
Add this to your css:
.reveal .footer {
position: absolute;
bottom: 1em;
left: 1em;
font-size: 0.5em;
}
And in your html:
<div class='reveal'>
<div class='footer'>
Use left and right arrows to navigate
</div>
...
If you want the footer to disappear as soon as user navigates (i.e. it should only be shown on first slide loaded because it is just a reminder), then add this to the end of your html:
<script>
// displayed upon load, hides when slide changes
Reveal.addEventListener('slidechanged', function(event) {
document.querySelector('.reveal .footer').style.display = 'none';
});
</script>
In order to get a fixed content in the PDF export (on all slides) you could find this answer useful.