So it works great on this page: zookacreative.com/blog/
But then it doesn't work on this page: zookacreative.com/blog/funny-stuff/were-stoked-at-zooka
I have no clue. Any help?
Yes, in sifr-config.js you have a relative path to the swf file containing your font. Change it to an absolute path:
var nfslab = { src: 'wp-content/themes/zooka-blog/flash/nfslab.swf' };
should be:
var nfslab = { src: 'http://www.zookacreative.com/blog/wp-content/themes/zooka-blog/flash/nfslab.swf' };
Hope it helps.
/Klaus
Related
I want to use in my Rails 4.2.6 app template from pixelarity (like this example http://pixelarity.com/elemental).
So, I've got interesting construction in main.js (snippet)
skel.init({
reset: 'full',
breakpoints: {
'global': { range: '*', href: 'style.css', containers: 1400, grid: { gutters: 48 } },
'wide': { range: '-1680', href: 'style-wide.css', containers: 1200 },
'normal': { range: '-1280', href: 'style-normal.css', containers: '100%', grid: { gutters: 36 } },
'narrow': { range: '-960', href: 'style-narrow.css', grid: { gutters: 32 } },
'narrower': { range: '-840', href: 'style-narrower.css', containers: '100%!', grid: { collapse: true } },
'mobile': { range: '-736', href: 'style-mobile.css', grid: { gutters: 20 }, viewport: { scalable: false } }
},
my layout.html.slim contains
= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"
so, when the resolution will be changed js will plug in another css. Perfect!
But I do not understand how to attach it to my app.
If I put files in application.scss it will be loaded for every page, which is wrong, and filename will be changed.
At this moment I use public dir, where all this stuff works, but it is not right, i feel it (and i have no minifing there).
How I can use it in rails way? How I can leave minifing of this css files, and leave them separately with their initial names?
Thank you!
You can achieve this functionality by using css3 media queries. You can read more about CSS3 media queries at following links.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3.org/TR/css3-mediaqueries/
https://css-tricks.com/css-media-queries/
Let me explain what you can do to solve this problem so you can move ahead quickly and read about media queries when you have time. You can add all this code in application.scss because it loads in the layout.html.slim. You can copy the styles of style-mobile.css and paste between the following block of code in the application.scss.
#media (max-width: 736px) {
// STYLES OF "style-mobile.css" GOES HERE
}
You can copy the styles of style-narrower.css and paste between the following block of code application.scss.
#media (max-width: 840px) {
// STYLES OF "style-narrower.css" GOES HERE
}
You can copy the styles of style-narrow.css and paste between the following block of code application.scss.
#media (max-width: 960px) {
// STYLES OF "style-narrow.css" GOES HERE
}
You can copy the styles of style-normal.css and paste between the following block of code application.scss.
#media (max-width: 1280px) {
// STYLES OF "style-normal.css" GOES HERE
}
You can copy the styles of style-wide.css and paste between the following block of code application.scss.
#media (max-width: 1680px) {
// STYLES OF "style-wide.css" GOES HERE
}
Please check and let me know if you need any help.
From my experience using Pixelarity on Drupal, I would suggest to include http://pixelarity.com/elemental template in your own index.html (or whatever you name it...), being sure links to required files are correct (all you need is into the pixelarity directory named 'assets').
Now, loading you app, you should see elementar in action.
From there, you can start feeding you app with data produced by your Rail App.
I created a plugin with a custom dialog window.
CKEDITOR.plugins.add('imggallery',
{
init: function (editor) {
var pluginName = 'imggallery';
editor.ui.addButton('Image',
{
label: 'Add image',
command: 'OpenWindow',
icon: CKEDITOR.plugins.getPath('imggallery') + 'lightbulb.gif'
});
editor.addCommand('OpenWindow', new CKEDITOR.dialogCommand('simpleLinkDialog'));
var html2 = "<h1>This is a heading</h1>";
CKEDITOR.dialog.add('simpleLinkDialog', function (editor) {
return {
title: 'LinkProperties',
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'general',
label: 'Settings',
elements:
[
{
type: 'html',
html: html2
}
]
}
]
};
});
}
});
My question is: Is it possible to somehow display ASP.MVC view in window content?
When I assign html2 to elements property the text is shown without formatting (plain text).
Are you sure it's plain text and not a H1 tag that is formatted to look like plain text? There's a big difference :). The CKE dialogs reset most of the standard browser styles so that elements appear like plain text, even though they are not.
As for the MVC view, I would recommend that you add an iframe within the CKE dialog and display the page normally there. Then you can control or get/set values from the iframe using JavaScript. It will be a bit tricky, but should work.
var html2 = '<iframe id="DialogIframe" src="/MyController/MyView?foo=bar"></iframe>';
The other option is to use something like jQuery to $.get() the HTML and then use it, should be relatively simple if you have worked with ajax before. If not, here's a good chance to start! :)
I am using jwPlayer 6.8 on a View in my Asp.Net MVC application.
I am using following javascript code for streaming a video on player:
var el = document.getElementById("player");
var player = jwplayer(el).setup({
file: "W-UNIT1",
streamer: "rtmp://my-server/live",
type: "rtmp",
width: 383,
height: 300,
controls: true,
primary: "flash",
modes: [
{ type: "flash", src: '/jwPlayer68/jwplayer.flash.swf' },
{ type: "html5" }
],
events: {
onReady: function () {
player.play();
}
}
});
The player plays video fine but if I right click on player surface it shows me regular window's context menu but not flash menu like Settings, Global Settings etc.
Also no controls appear on player like mute, play/pause etc.
Current version I am using is version 6.8. My browser is Firefox version 27.0.1
What am I missing?
you are using Jwplayer 6.8, then try using below setup instead of your.
jwplayer("myElement").setup({
playlist: [{
image: "/assets/myVideo.jpg",
sources: [{
file: "rtmp://example.com/application/mp4:myVideo.mp4"
},{
file: "/assets/myVideo.mp4"
}]
}],
height: 360,
primary: "flash",
width: 640
});
I think your setup is following old jwplayer parameters.
Jwplayer have guide for this here
Using RTMP streaming
RTMP single stream
Helpful Stackoverflow questions :
how-do-i-play-rtmp-streams-with-jw-player
streaming-with-cloudfront-to-jwplayer
using-dynamic-smil-file-with-jw-player
It seems like I have once again found answer to my own raised question.
Issue is neither related to rtmp streaming nor is specific to any specific version of JW Player. In fact it occurs not only on newer versions plus older versions.
It was occurring because of some custom css of mine, applied onto the JW Player HTML div container. For some reason I was overriding its CSS in my Asp.Net View and it was causing this issue.
My example code:
HTML:
<body>
<script src="http://jwpsrv.com/library/bfifOqXfEeOr_yIACi0I_Q.js"></script>
<div id="player"></div>
</body>
Javascript:
$(function() {
var el = document.getElementById("player");
var player = jwplayer(el).setup({
file: "http://techslides.com/demos/sample-videos/small.mp4",
width: 383,
height: 300,
controls: true,
events: {
onReady: function () {
player.play();
}
}
});
});
CSS:
div[id^=player_]
{
/* Comment this css for correct working of jwplayer */
min-width:383px !important;
min-height:300px !important;
}
Here is the jsFiddle for this:
http://jsfiddle.net/QCyzh/2/
At the moment I have this:
tinyMCE.init({
// General options
mode : "exact",
elements : "fkField, lkField, ukcField, khField",
theme : "advanced",
plugins : "table",
width : "300",
height: "185",
// Theme options
theme_advanced_buttons1 : "fontsizeselect, bold,italic,underline,bullist, cleanup, |,justifyleft,justifycenter,justifyright",
theme_advanced_buttons2 : "tablecontrols",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false
});
This gives me a editor with the size of 300x185.
Now in this editor, I would like to do so you can only write until the editor is full. (without the scroller)
So you are unable to enter more text, and the scroller should not appear (disable scrolling)
Right now you can at the bottom of inside the editor just make new line and it will add the scroller <- which i do not want to happen
How can i do this? Is this unpossible? I have made research for some time now, but maybe it's just me searching wrong..
Thanks
add in a ccs file the following code
.mceContentBody{
overflow-y:hidden!important;
}
and add the path of css file in content_css attribut of tinymce
content_css : /path/to/css/file.ss
You will need to write an own plugin. Check the editor height on each Keystroke (you may use the built in tinymce event onKeyUp). If the heigth changes remove the last inserted code.
EDIT: Howto get the current editor iframe heigth
var currentfr=document.getElementById(editor.id + '_ifr');
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
I got it to work by adding this to my extra tinyMCE CSS file:
IFRAME {overflow:hidden;}
Previously, the scrollbars were only off in Firefox. This fixes it for Chrome as well. However, it does add a gray bar the side of a scrollbar at the bottom, so I need to enlarge the height of my text editor.
for me it worked by just adding rules to a regular stylesheet, it wasn't needed to add a css file to content_css attribute (example is in scss)
.my-tinymce-container {
width: 200px;
.mce-edit-area {
height: 200px;
overflow-y: hidden;
}
}
A lot simpler and easy solution would be:
tinymce.init({
selector: '#container',
},
init_instance_callback: function (ed) {
tinymce.activeEditor.getBody().style.overflow = 'hidden'
},
});
Explanation:
In Init callback get the body for TinyMCE and change style as required.
In this case to remove scrollbar overflow = 'hidden'.
I spent a lot of time trying to configure a styleswitcher script that replace my html background and css from one color to another, I got some texts using SIFR3, mainly h1, h2 tahs and h2 a: links...
My only problem is that when I'm switching, the flash text doesnt take the color change into consideration, I've tried to play with rollBack but I'm out of luck.
I found an interessant solution here :
function changeColor(hexValue) {
var css = '.sIFR-root { color: ' + hexValue + '; }';
for (var i = 0; i < sIFR.replacements['h1'].length; i++) {
sIFR.replacements['h1'][i].changeCSS(css);
}
for (var i = 0; i < sIFR.replacements['h2'].length; i++) {
sIFR.replacements['h2'][i].changeCSS(css);
}
}
// after switching stylesheet:
changeColor('#FF9900');
It works for h1, h2 but not for my h2 a: links...
Can you tell me how to adjust this?? It would be really really nice.
Right now when firing this function, my links just turn in their old html look with underline text decoration. Thanks !!
You need to pass in the new (or existing) styles for the a as well.