Develop Reference

Fancybox 1.3.4 - no overlay after reloading

I'm developing a ajax popup system. One of functionalities is, when ajax gathers any new data, to show it using Fancybox. There are two scenarios:
user reads data brought by ajax, and closes fancybox.
user is AFK. When another data comes in, it should be appended to already displaying fancybox content
my html container for fancybox looks like this:
<div id="notifications_fancybox">
<div class="notifications_fancybox_title">
Powiadomienia
</div>
<div id="notifications_fancybox_content">
</div>
</div>
where notifications_fancybox has display: none; in css.
Fist I wanted to just $('#otifications_fancybox_content').append('some html'); append some data, but it seems that after fancybox have been initialized, somehow it won't let me append anything.
So I found another way to do that:
When new data comes in, first check if fancybox is already opened:
nl.isFancyboxOpened = function(){
if($('#fancybox-wrap').is(':visible')) return true;
return false;
};
if it is opened, close it:
if(nl.isFancyboxOpened()){
$.fancybox.close();
}
append some data
$('#otifications_fancybox_content').append('some html');
and open fancybox
nl.openFancybox = function(){
if(nl.isFancyboxOpened() == false){
$.fancybox(
$('#notifications_fancybox').html(),
{
'autoDimensions' : false,
'overlayShow' : true,
'hideOnOverlayClick' : false,
'showCloseButton' : true,
'width' : 450,
'height' : 400,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
}
else{
$.fancybox.resize();
}
};
Now, the main problem:
When fancybox is displayed for the first time, everything is fine - there's overlay, buttons and so on.
When more ajax data comes for being displayed and I try to go through above procedure (close-append-reopen), everything again seems fine except... there is no overlay! So user can click on everything on the page, and I don't want him to.

Okay, I've managed to solve the problem. Not exactly what I wanted, but I'll work fine enough.
My solution uses onComplete callback to force display property of overlay to be set to block. It's packed in setTimeout because calling it instantly won't work. Also reducing timeout below certain time will cause this solution to fail. I believe there's a better way to solve this, but I haven't found one... yet ;)
$.fancybox(
$('#notifications_fancybox').html(),
{
'autoDimensions' : false,
'overlayShow' : true,
'hideOnOverlayClick' : false,
'showCloseButton' : true,
'onComplete' : function(){setTimeout(function(){$('#fancybox-overlay').css('display', 'block');}, 250);},
'width' : 450,
'height' : 400,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);

TinyMCE change language dynamically with Javascript?

I'm building an online editor where the language is set by the user settings that can be change dynamically with AJAX (page does not reload), so I init the tinyMCE object the first time correctly but after the user try to init it again, the text inside the editor controls has incorrect values ("advanced.bold" instead of "Bold", advanced.italic_desc instead of "Italic", etc), but the plugin popups are in the correct language!
Basically my code just do the init method each time the user changes the language in their preferences...
initMCE: function(lang) {
tinyMCE.init({
language : lang,
mode : "textareas",
theme : "advanced",
relative_urls : false,
editor_selector : "tinymce",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview,media,inlinepopups,xhtmlxtras",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "fontselect,fontsizeselect,bold,italic,underline,forecolor,|,bullist,numlist,|,blockquote,|,image,|,link,unlink,|,code,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "right",
theme_advanced_resizing : true,
content_css : "../_style/_css/style.css",
inline_styles : false
});
}
Any ideas of how to do it or what am I doing wrong?

I created a fiddle fork, trying to make it work and thought that you might need to shutdown your former instance correctly. The language did not change correctly - you might want to report a bugfix for this here.

I reported this as bug on their site and they told me to use a workaround while they fix it (seems the load lang call is just running one time instead inside the init). Using this line after the init, the language change works fine:
tinyMCE.ThemeManager.requireLangPack(THEME_IN_USE);
Check this fiddle to see it working

You can use something like this:
function init(lang) {
//language_url: lang === 'en' ? null : 'url to es file',
options.language = lang;
tinymce.remove(editor);
tinymce.init(options);
tinymce.execCommand('mceRepaint');
}
This fiddle works for me, note the comments in line 31:
https://jsfiddle.net/antd3tsf/19/

Javascript making text slide in from html

I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!

You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.

Fancybox script not working

I have used Fancybox on multiple occasions and never run into this problem. I have included both jQuery and Fancybox files in the header, linked up the first order button the the page to open up an iframe in a Fancybox. However I cant seem to get it to work at all. It doesn't open an iframe and instead goes straight to the page I was trying to open inside the Fancybox iframe.
Can somebody point out whatever blindingly obvious mistake I've made this horrible Monday morn?
Testing server can be found here:
http://www.designti.me/testing/flipstick/original.php

The error message is: Uncaught TypeError: Object #<an Object> has no method 'fancybox'
Which implies that fancybox hasn't loaded. Taking a close look at your source we see <script type="text/x-ecmascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> which you can see uses x-ecmascript rather than javascript. Change that and you should be fine.

You didn't put your code into the ready handler:
$(function() { // <-- you need this
$("a.iframe").fancybox({
//...
});
}); // <-- and this

Maybe to put it in document.ready?
$(document).ready(function() {
$("a.iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});

Use this:
jQuery(document).ready(function() {
jQuery("a.iframe").fancybox({
'type' : 'iframe', //<--missing comma here
'width':750,
'height':500 //<-- removed last comma here
});
});

Changing the parameters of a Javascript function using GreaseMonkey

There are a lot of questions here about Greasemonkey, but I didn't see anything directly related to my question.
I'm on a website that uses a text editor control, and it's really annoying that they don't allow horizontal resizing (only vertical). So if you are using a cheapo projector that only supports 1024x768, the text runs off of the screen and there's nothing you can do about it.
I looked at the page source, and found the section of code that I want Greasemonkey to modify:
<script type="text/javascript">
// TinyMCE instance type: CD_TinyMCE
tinyMCE.init({
convert_urls : "",
mode : "specific_textareas",
editor_selector : "rte",
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
**theme_advanced_resize_horizontal : false**,
...
I just want to change the boldfaced value to true. I tried to approach this the brute force way and replace the text this way:
function allowHorizontalResize() {
var search_string = "theme_advanced_resize_horizontal : false";
var replace_string = "theme_advanced_resize_horizontal : true";
var doc_text = document.body.innerHTML;
document.body.innerHTML = doc_text.replace( search_string, replace_string);
}
...but it doesn't work. However, I know the basic search and replace part works because I can use this script to replace text within the editor -- I just can't change the javascript code that initializes the text editor.
Can someone explain what I'm doing wrong? Is this even possible?

Try the simple direct approach, first. Your Greasemonkey script could be as easy as:
GM_addStyle ("#content_tbl {width: 900px !important;}");
-- which works on a default TinyMCE window.
Altering the javascript source code is probably not going to easily work. But, the Devil is in the details.
Provide a link to the page or pastebin the complete code.

No, the script will have already executed when you apply the function.
You will have to get the text editor's element, and apply the properties manually(assuming it is an element).
A link would make me more helpful.