Related
This issue is very similar to jQuery: Fancybox produces a loop of errors in chrome using ajax, although in the other issue ajax is being used. I'm using inline to present a div.
I can open the fancybox containing the div once, and close it again. But if I open it again, I see the following error in the console, and the page changes to a random portion of text from the page from a completely different section:
Uncaught TypeError: Cannot call method 'width' of undefined
I have Fancybox set up on this page with the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#admin_link").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'slide',
'transitionOut' : 'fade',
'type' : 'inline'
});
});
</script>
<link rel="stylesheet" type="text/css" href="./includes/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
The div is:
<div style="display: none;">
<div id="admin_why_text" style="width:400px;height:300px;overflow:auto;">
Some text about why this is needed.
</div>
</div>
And this div is opened via this link:
<ul><li>example point <br />=> <a id="admin_link" href="#admin_why_text" title="Why is.....?">why is...?</a></li></ul>
As you can see, based on the previous issue that the other user saw with ajax (not my issue, see link above), I have tried defining the type manually in my code. This unfortunately made no difference.
Would anybody have any other suggestions? Or has anyone seen this before when using the inline type?
Edit: Minor addition, other types are working fine. I'm using the iframe type to display youtube videos, and they can be closed and reopen without any issues.
Edit2: I've found that when the inline box loads, my div is replaced with the following:
<div style="display: none;">
<div class="fancybox-inline-tmp" style="display: none;"></div>
</div>
When the box is closed, my div isn't put back. I need to find where this has gone, I can probably use the onCleanup callback to set it back.
I've found the answer to this problem. I'm using the latest jQuery, in which global events are deprecated. There are two key issues I have found in using the v1 FancyBox with the latest jQuery:
The issue described in
https://github.com/fancyapps/fancyBox/issues/485
This issue.
Further to the edits suggested from issue 1, the following changes fixed this for me:
In the affected page, find:
<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Change to the following to use the non packed version:
<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.js"></script>
In the "jquery.fancybox-1.3.4.js" file, make the following changes.
Find: $.event.trigger('fancybox-cancel');
Replace with: $('.fancybox-inline-tmp').trigger('fancybox-cancel');
Find: $.event.trigger('fancybox-change');
Replace with: $('.fancybox-inline-tmp').trigger('fancybox-change');
Find: $.event.trigger('fancybox-cancel');
Replace with: $('.fancybox-inline-tmp').trigger('fancybox-cancel');
Find: $.event.trigger('fancybox-cleanup');
Replace with: $('.fancybox-inline-tmp, select:not(#fancybox-tmp select)').trigger('fancybox-cleanup');
Hopefully this will help others who get stuck on the same issue.
The following may work for you without needing to hack the fancybox.js file.
$(document).ready(function() {
$("#admin_link").on("click", function (e) {
$.fancybox($(#admin_why_text).text(), {
'title' : $(this).attr('title'),
'titlePosition' : 'inside',
'transitionIn' : 'slide',
'transitionOut' : 'fade',
'type' : 'inline'
});
});
});
This effectivly changes your code to operate with the 'ajax method' rather than the 'inline method' but still sources your information from the same place & will not replace your id="admin_why_text" element with the class="fancybox-inline-tmp" element.
A more generic version, which will target the text element based on the href of the trigger element would work as follows :
$(document).ready(function() {
$("#admin_link").on("click", function (e) {
$.fancybox($("#" + $(this).attr('href').substring(1)).text(), {
'title' : $(this).attr('title'),
'titlePosition' : 'inside',
'transitionIn' : 'slide',
'transitionOut' : 'fade',
'type' : 'inline'
});
});
});
Just use one Jquery Library file.you can use either
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
or
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
but not both!
I have added following into function that loads fancybox,
var txt1 = "<div id='inline1' style='width:400px;overflow:auto;font-size:12px;'></div>";
if ($("#inline1").length) {
}
else {
$("#ix01").append(txt1);
}
so if div inline1 not exists add it to parent div "ix01" , works fine for me.
I am using tinyMCE as a plugin in my ASP.NET MVC4 web application. I am also using SignalR to establish an open connection between the server and the clients. What I am trying to do is a real-time editor similar to Google Docs.
Until now I managed to find a way to write in an editor in one browser and have it displayed in another open document in another browser. I previously had a problem with the cursor position since when I was using the setContent() method in tinyMCE, the cursor was being put to the front and therefore the output was reversed.
This was solved by these two statements:
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
However now the problem I have is that with Chrome the output is as I wish for it to be i.e. writing with the cursor at the back however when I write from a Firefox browser, the space button is ignored, when I press space, the cursor goes back.
Is there a particular reason why this happened? Also, there seems to be a speed issue with the connection i.e when I type fast the latest content (1 or 2 letters) are not submitted.
This is all the code I have regarding this problem:
#{
ViewBag.Title = "- Editor";
ViewBag.ContentStyle = "/Content/CSS/editor.css";
}
<script src="/Scripts/jquery-1.6.4.min.js" ></script>
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript" src="~/Content/tinyMCE/tiny_mce.js" ></script>
<script type="text/javascript" src="~/Scripts/EditorHandler.js"></script>
<script type="text/javascript">
$(function () {
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "emotions,spellchecker,advhr,insertdatetime,preview",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
setup: function (ed) {
ed.onKeyUp.add(function (ed, e) {
var chat = $.connection.editorHub;
chat.client.broadcastMessage = function (message) {
tinyMCE.activeEditor.setContent(message);
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
tinyMCE.activeEditor.focus();
};
$.connection.hub.start().done(function () {
var text = tinyMCE.activeEditor.getContent();
chat.server.send(text);
});
});
}
});
});
</script>
<form method="post" action="somepage">
<textarea id="editor" name="content" cols="100" rows="30"></textarea>
</form>
Looks like you might want to check out the possibility to get a tinymce bookmark.
There are html bookmarks which are implemented using hidden spans with a certain class.
And there are non-html bookmarks - i would use those.
// gets you a non-html bookmark which you can transfer to another server if need be
var bookmark = editor.selection.getBookmark(2, true);
editor.setContent(content);
editor.selection.moveToBookmark(bookmark);
Are someone succed to use the method FB.Canvas.setUrlHandler please?
I've already read the following URL's
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setUrlHandler
http://developers.facebook.com/blog/post/555
but it still don't work... Someone to help me please?
Thanks in advance.
Here is my source code , when I execute this, nothing gets logged in the console:
<html>
<head>
</head>
<body >
<div id='fb-root'> </div>
<script type="text/javascript" src="http://?connect.facebook.net/en_US/?all.js"> </script>
<script type="text/javascript">
FB.init({
appId : 'MY_APP_ID',
oauth : true,
status : true,
cookie : true,
oauth : true,
xfbml: true
});
function testUrlHandler(data) {
if (data.path.indexOf("test1"?) != -1)
console.log('test1');
else if (data.path.indexOf("test2"?) != -1)
console.log('test2');
else
console.log('default');
}
FB.Canvas.setUrlHandler(te?stUrlHandler);
</script>
</body>
</html>
Per the documentation, the callback is only for links on the parent iframe (Facebook UI)
Registers the callback for inline processing (i.e. without page
reload) of user actions when they click on any link to the current app
from Canvas, including:
All ticker stories
Bookmarks
Requests from the bookmarks drop-down list
Request Notifications stories.
Your links in app wont fire the event.
I've spend 3 hours trying to understand what's wrong with it. Sometimes (really rare occasions ) this thing works just fine, and sometimes FB api just ignores this callback.
Solution - set the callback with delay after init, solution: How to work with facebook setUrlHandler?
I am using below code for sample menu.
<html>
<head>
<title>Tree Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* $("#main").jstree({
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : false
},
"plugins" : [ "themes", "json_data", "ui"],
"json_data" : {
"ajax" : {
"url" : "jsondata.json",
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
}
}
}
});
$("#main").bind("open_node.jstree", function (e, data) {
// data.inst is the instance which triggered this event
console.log(data);
console.log($.data(data.rslt.obj[0],"folder_name"));
});
$("#main").bind("select_node.jstree", function (e, data) {
// data.inst is the instance which triggered this event
console.log(data);
console.log($.data(data.rslt.obj[0],"folder_name"));
}); */
$("#main1").jstree({
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : false
},
"plugins" : [ "themes", "html_data"]
});
});
</script>
</head>
<body>
<div id="main1">
<ul>
<li>Home Folder
<ul>
<li>Sub Folder1</li>
<li>Sub Folder2</li>
</ul></li>
<li>Shared Folders
<ul>
<li>Shared Folder1</li>
<li>Shared Folder2</li>
</ul></li>
</ul>
</div>
<div id="main">
</div>
</body>
</html>
when i run the above code in IE browsers it shows top of the page(below the URL bar) like
" To help protect your security , internet explorer has restricted this webpage from running scripts or Activex controls that could access your computer. click for options.. "
when i rightclick and click allowed blocked content, it runs.but i want without this popup message i need to run the code...how can i automatically run this one?...
There is a code solution too. I saw it in a training video. You can add a line to tell IE that the local file is safe. I tested on IE8 and it works. That line is <!-- saved from url=(0014)about:internet -->
For more details, please refer to https://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
alert('hi');
});
</script>
</head>
<body>
</body>
</html>
I believe this will only appear when running the page locally in this particular case, i.e. you should not see this when loading the apge from a web server.
However if you have permission to do so, you could turn off the prompt for Internet Explorer by following Tools (menu) → Internet Options → Security (tab) → Custom Level (button) → and Disable Automatic prompting for ActiveX controls.
This will of course, only affect your browser.
You have two options:
Use a Mark of the Web. This will enable a single html page to load. It See here for details. To do this, add the following to your web page below the doctype and above the html tag:
<!-- saved from url=(0014)about:internet -->
Disable this feature. To do so go to Internet Options->Advanced->Security->Allow Active Content... Then close IE. When you restart IE, it will not give you this error.
If you are to use the
<!-- saved from url=(0014)about:internet -->
or
<!-- saved from url=(0016)http://localhost -->
make sure the HTML file is saved in windows/dos format with "\r\n" as line breaks after the statement.
Otherwise I couldn't make it work.
Steps to configure IE to always allow blocked content:
From Internet Explorer, select the Tools menu, then the Options...
In the Internet Options dialog, select the Advanced tab...
Scroll down until you see the Security options. Enable the checkbox
"Allow active content to run in files on My Computer".
Close the dialog, and quit Internet Explorer. The changes will take
effect the next time you start IE.
The Blocked Content is a security feature of Windows XP Service Pack 2. If you do not have SP2 installed, then you will never see this message.
From: How To Allow Blocked Content on Internet Explorer
That's something I'm not sure that you can change through the HTML of the webpage itself, it's a client-side setting to tell their browser if they want security to be high. Most other browsers will not do this but from what I'm aware of this is not possible to stop unless the user disables the feature.
Does it still do what you want it to do after you click on 'Allow'? If so then it shouldn't be too much of a problem
Alternatively, as long as permissions are not given, the good old <noscript> tags works. You can cover the page in css and tell them what's wrong, ... without using javascript ofcourse.
I'm using the YUI Rich Text editor on my site. I'm loading it using the load javascript from Google. When I try to create a link (or any other action that creates an "settings" box, the title bar is missing, see picture here. You can see how it supposed to look over here at Yahoos site for YUI.
I'm using this code in the <head>-tag:
<!--Include YUI Loader: -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/",
require: ["editor"],
loadOptional: true,
combine: false,
filter: "MIN",
allowRollup: true,
onSuccess: function() {
var Editor = new YAHOO.widget.Editor('content', {
height: '300px',
width: '802px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
Editor.render();
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script>
And in my webpage:
<div class="sIFR-ignore yui-skin-sam">
<textarea name="content" id="content" cols="50" rows="10">
</textarea>
</div>
I got some help from David Glass, one of the developers of YUI RTE. The error I had make was actually an CSS thing, some where in my CSS-files it was a line that read "h3 {visibility: hidden;}" which made this error. Any how, thanks for your help!
Try forcing your own title for the editor:
var Editor = new YAHOO.widget.Editor('content', {
height: '300px',
width: '802px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
Editor._defaultToolbar.titlebar="<b>Use my title</b>";
Editor.render();
I might be wrong here but, due to SOP (Same Origin Policy) I don't think JavaScript hosted in Google will be able to modify the DOM (unless you are google).
Try placing JavaScript in your web server and linking from there:
<script type="text/javascript" src="http://your.web.server.com/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>