I am using reveal.js for a presentation. I am using the white theme:
<link rel="stylesheet" href="reveal.js/css/theme/white.css" id="theme">
However, the last slide should have theme black.
Can I achieve this? How?
A good way to do this might be to add a marker on your last slide like this:
<section data-state="darkside">
In the initialization section of the slideshow put something like this:
Reveal.addEventListener( 'darkside', function() {
document.getElementById('theme').setAttribute('href','css/theme/night.css');
}, false );
This way the theme is changed when you reach the given slide. I think you should also consider marking all other slides and change the theme back.
Related
I'm able to navigate to specific slides using the reveal.js API like so:
<script>
$(document).on('click', '#goToMySlide', function() { Reveal.slide(6); return false; });
</script>
But that only jumps directly to the slide without any of the cool transitions that reveal.js is known for (zoom, fade, concave, etc.). Any idea how I can jump to a slide with a transition effect?
Looks like you can do this with the viewDistance parameter when configuring Reveal.
The author suggests using viewDistance: 100 (or some sufficiently large number) to make this work.
I have just migrated from TinyMCE3 to TinyMCE4 and I wonder how to remove the path in the status bar. But I want to keep my status bar in order to have the resize functionnality.
With TinyMCE3 we can do it with:
tinymce.init({
...
theme_advanced_path : false
});
How can I have the same result with TinyMCE4?
Thanks
In TinyMCE 4 you can remove just the path in the statusbar by setting the configuration elementpath to false, like this:
tinymce.init({ elementpath: false });
This works for me:
.mce-path {/* CSS */
display: none !important;
}
EDIT:
In TinyMCE4, I don't think there is an official way to do it by passing a parameter to tinymce.init(); to disable the path. You can pass statusbar: false but that will hide the path AND the resize icon, unfortunately!
The answer I gave by using CSS, hides the path but the resize icon stays there. But make sure you have the statusbar: true in the tinymce.init();
tinymce.init({
statusbar : false,
The CSS approach works, but is usually applied globally to each editor in the page. The old option of TinyMCE 3 could be applied individually for different editors.
I wanted to keep this flexibility and found the following solution:
a) Define a CSS rule like .myMceNoPath .mce-path{display:none;}
b) For an editor instance which should provide a resize handle without path display, define the following options:
resize: "both",
init_instance_callback : function (ed) {
ed.getContainer().className += " myMceNoPath";
}
This dynamically adds a class to the editor element, enabling us to apply the CSS only to the editors specifically marked this way.
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
From: Remove menu and status bars in TinyMCE 4
Unfortunately this feature is deprecated in TinyMCE 4. But you always can block this visually by CSS. It must look something like this:
.mce-path {
display: none;
}
I am using tinyMCE v5. And the following works.
In order to hide the Path, pass "elementpath": false in init object and "statusbar": false to hide the full status bar. If you hide the whole status bar then you will also lose your ability to increase or decrease the height.
One quick solution in TinyMCE 4 is to set the path element's opacity to transparent:
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("opacity", "0");
}
});
This should hide the path text without otherwise affecting the status bar. I've found that disabling the status bar's visibility through either the init() function or CSS display property also results in a floating word count and resize icon overlapping the scrollbar.
Credit to immo and others for pointing out the callback and CSS concepts. I like this particular (jQuery) solution because it's self-contained and applies only to its parent editor, though variations are possible.
Setting theme_advanced_statusbar_location to empty string worked for me.
tinyMCE.init({
theme_advanced_statusbar_location : "",
})
Mine is based on the opacity concept from Dustin Carr above:
For TinyMCE 4, I located skin.min.css, searched mce-path-item and right after display:inline-block, I added opacity:0. So it finally is something like display:inline-block;opacity:0; *display...
It's just a quick trick, as Carr says: the element is still there when I click on it, it's just the standard user don't see it.
Hope it helps some one...
EDIT:The same for mce-divider ;)
Thanks to #Dustin Carr for his answer.
I've extended his answer a little bit , that's what i did , it works fine for me and when user hover cursor over the area of the path it doesn't display cursor at all (with opacity 0 it displays cursor over the path and path remains clickable) .
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("visibility", "hidden");
},
});
HTH
I have three radio buttons which have the same theme in jquery. If I select one of them, the color of the button will change to the color specified in my .ui-btn-active class in the css. My radio buttons are named Can meet, not sure and Decline. I want my Decline radio button to have a different color than the two others when it is selected (the color red).
I'm using Jquery mobile and have customized the css for which colors I want to have on the different themes and I have changed the .ui-btn-active to .ui-btn-active-a and .ui-btn-active-b and made them with different values. I have tried to switch between the two ui-btn-active classes without no luck, and I have tried the addClass(..) and removeClass(..) without luck. I made a method in my jquery-mobile.js which look like this:
$.mobile.changeAction = function( activeBtn){
$.mobile.activeBtnClass = activeBtn;
}
where my activeBtn parameter will be a string to choose which activeBtnClass I want to have. I think the problem is that I have problems refreshing the activeBtnClass after overriding it, I have tried some refreshing methodes without no luck.
As long as the radio buttons have different colors when active I will be very thankful.
Following styles should do the trick:
.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
background-color:red;
}
Sample jsfiddle.
To style Horizontally stacked select options:
.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
background-color:red;
}
Sample jsfiddle.
Why not just create custom themes for all of the states that you might want? You can have multiple custom themes, and only use them when you'd like. I have 7 themes in my CSS, and this way you can always incorporate them later if you'd like without having to do so much custom coding.
You can just apply the theme with the data-theme="f" (or other letter swatch) element attribute.
Here's jQuery ThemeRoller 1.1.1 http://jquerymobile.com/themeroller/index.php. If you're just making small changes to the theme, such as an active state, just copy the theme, and make the changes and save as a new swatch. You can go from A-Z :)
I'm using the jquery datatables plugin and added some custom jquery-ui buttons to the table footer.
To use the datatables plugin with jquery-ui theming the "bJQueryUI" option has to be turned on.
So far no problem, but now I added the jquery-ui themeroller to my page.
When I change the theme, all the jquery-ui components change their style accordingly, just like the datatable, except for the buttons within the datatable.
I found out that it actually is a css-priority issue: the new styles applied by the themeroller got lower priority than the original styles, so these buttons never change their look.
As the jquery-ui components and the datatables plugin both are quite popular I thought I would find someone with similar problems, but had no luck so far..
That's how the initialization of the datatable and the creation of the custom buttons are done:
<table id="DataTable">
// ...
</table>
<script type="text/javascript">
$(function ()
{
var oDataTable = $('#DataTable').dataTable({
"aaData": result.aaData,
"bPaginate": false,
"bJQueryUI": true,
"bInfo": true,
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
"oTableTools":
{
"sRowSelect": "single"
}
});
// add buttons
$("div.toolbar").html('<button id="AddButton">New element</button>');
$("#AddButton").button().click(function () { /* ... */ });
// add more buttons...
}
</script>
Here's a screenshot of the actual html structure and applied css-styles:
http://i.stack.imgur.com/vbAuy.jpg
Any hint is greatly appreciated.
I found the solution myself:
If I add the "ui-widget-content" CSS-class to the toolbar-container div, the styles get applied correctly.
To remove the styles which that class applies (border and background), I added a more specific CSS style to remove these:
div.toolbar
{
float: right;
border: 0;
background: 0;
}
It's important here to use "div.toolbar" not ".toolbar", otherwise the ui-widget-content styles get applied.
Now the toolbar container doesnt get unwanted styles applied and the buttons inside correctly get the selected theme.
Maybe that's helpful for someone using the themeroller with custom jquery-ui buttons in datatables.
IF you want the theme to control the style of the button, then comment out the CSS that is overriding the theme roller style.
If they are themed buttons, then you will have to remove your CSS to allow the theme to take affect. Themes are made to be easily over-writable so you can add customization, only it sounds like you no longer want the customization.
Not sure if you had this problem but there are two separate css classes with datatables. Which one to use depends on if you have bJQueryUI:true or bJQueryUI:false
I know about css sprites.. Now i want some examples of css sprites....
How did you manage to get css sprites work?
I usaully use the CSS background property. This property allows you to set a scroll argument of top and left as you can see in the example below. So the idea is to create one image with all states and simply position it based on the event like hover or other custom event in which you alter the elements CSS. I hope this helps.
.mySprite a
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}
.mySprite a:hover
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}
http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/
http://www.w3schools.com/css/css_positioning.asp
http://template.joomlart.com/ja_iris/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=29
If you are using Firefox here is a simple way to get an idea of what a sprite is. Go to yahoo.com, right-click and View Page Info, click Media. Look for a file name having "sprite" in it.
This is one of the links:
http://d.yimg.com/a/i/ww/met/gsprite_071309.gif
You will see many background gradient images. You can use this file to play with. Now you have to adjust background position in your CSS depending on which background you want to use, like this:
background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;
This should give you an idea of how to manage sprites.
If you are looking to create a CSS sprite - you can check out the site spriteme.org, which is very cool and shows you how to easily create a CSS sprite.
For a nice example you can check out this page:
http://www.programmerinterview.com/index.php/general-miscellaneous/css-sprite-example-and-tutorial/
Gives a good explanation and shows how the website owner uses a sprite.
I use them for button images. I use the top half of an image for the normal button state and the bottom half for the mouse-over state. That way the mouse over image is loaded when the page loads and there's no delay which just looks bad and slow. CSS code is here.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great interactive example and everything you need to know about CSS Sprite.