Converted JavaScript to FBJS - tabs still not working - javascript

I tried my best to convert JavaScript to FBJS according to this page: http://wiki.developers.facebook.com/index.php/FBJS.
Yet my tabs are still not working properly. Does anyone have any suggestions how to fix this so I can click through the tabs and display and hide content accordingly:
<script type="text/javascript"><!--
var tabLinks = [];
var contentDivs = [];
function init() {
var tabListItems = document.getElementById('tabs').getChildNodes();
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].getNodeName("LI") ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].addEventListener(onclick, showTab)
tabLinks[id].addEventListener(onfocus, function() { this.blur() };
if ( i == 0 ) tabLinks[id].setClassName('selected');
i++;)
}
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].setClassName('tabContent hide');
i++;
}
}
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].setClassName('selected');
contentDivs[id].setClassName('tabContent');
} else {
tabLinks[id].setClassName('');
contentDivs[id].setClassName('tabContent hide');
}
}
return false;
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.getChildNodes().length; i++ ) {
if ( element.getChildNodes[i].getNodeName(tagName) ) return element.getChildNodes[i];
}
}
function getHash( url ) {
var hashPos = url.getLastIndexOf ( '#' );
return url.getSubString( hashPos + 1 );
}
init();
--></script>
Thanks for any response.

FBML tabs (which use FBJS) are deprecated now and will be disabled in the future. You should create a new application with IFRAME tab (which is by default now).
IFRAME tabs are just tabs with IFRAME inside, and your code is loaded into this iframe from a specified URL as any other web page. You can use any Javascript frameworks in it (like jQuery), so you don't need to learn how to write FBJS.

Setup a Facebook page that uses a Facebook app. Make sure you set up your app using an iFrame that points to a file on your server. You'll get a lot more freedom using an iFrame when it comes to Javascript and it's a great way to leverage a CMS if you're going to need to do that as well. Best of Luck!

Related

How to ensure plugin menu items are correctly greyed out or not (enabled / disabled) ( javascript, Adobe Bridge)

I'm making some Adobe Bridge (CS 5.1) plugins.
My problem is that I cannot figure out how to ensure that their respective menu items will be greyed out unless the user has selected valid items for the script.
I can reach the desired state by coding something like
function greyOutMenu () {
var doc = application.document;
var these = [];
these = doc.selections;
menuItem.enabled = true;
if ( these.length < 1 ) {
menuItem.enabled = false;
return;
}
for ( var i in these ) {
if ( these[i] /* is invalid */ ) { menuItem.enabled = false;
return;
}
}
but how do I get this check to run directly when the menu is opened? If I use
myMenu.onSelect = greyOutMenu();
It just runs the check on startup instead of when the menu is opened!
Okay, I figured out what was wrong. I have changed it to...
function greyOutMenu () {
var doc = app.document;
var here = doc.presentationPath;
var thisFolder = Folder ( here );
if ( decodeURI ( thisFolder.name ) === "correct folder name" ) { menuItem.enabled = true; }
else { menuItem.enabled = false; }
if (!app.document.selectionsLength > 0 ) { menuItem.enabled = false; }
}
menuItem.onDisplay = greyOutMenu;
I could have sworn that I had already tried menuItem.onDisplay, but I must have made a syntax error.
Also, In my case it is enough to be in the right folder and have something selected, as the files are added directly by a camera. More complex checks are instead added to the function itself, to prevent stuttering every time the menu is opened.

Ckeditor not working with angular App

I am having issue with ckeditor4.When I run it independently its working fine.But when I trying to run it with my angular app its not working.Here is my sample code:
var initSample = ( function() {
var wysiwygareaAvailable = isWysiwygareaAvailable(),
isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' );
return function() {
var editorElement = CKEDITOR.document.getById( 'editor' );
// :(((
if ( isBBCodeBuiltIn ) {
editorElement.setHtml(
'Hello world!\n\n' +
'I\'m an instance of [url=http://ckeditor.com]CKEditor[/url].'
);
}
// Depending on the wysiwygare plugin availability initialize classic or inline editor.
if ( wysiwygareaAvailable ) {
CKEDITOR.replace( 'editor' );
} else {
editorElement.setAttribute( 'contenteditable', 'true' );
CKEDITOR.inline( 'editor' );
// TODO we can consider displaying some info box that
// without wysiwygarea the classic editor may not work.
}
};
function isWysiwygareaAvailable() {
// If in development mode, then the wysiwygarea must be available.
// Split REV into two strings so builder does not replace it :D.
if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
return true;
}
return !!CKEDITOR.plugins.get( 'wysiwygarea' );
}
}
When I console after "isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' )" line its consoling fine.But it is not entering inside return function() { }.Any suggestion?

Check if link contains javascript

How can I tell, in JavaScript/jQuery if a link is Javascript?
For example:
Trigger
Trying to make sure a script only logs links, and not javascript, anchors, etc.
Basically I need to capture the href of the link as I .each through them (already done) I just need a reliable way to check that variable to see if it is javascript, ie, function w/e
var rand = function() {
return Math.random().toString(36).substr(2);
};
$(function(){
$('#lhcb a').each(function() {
var rawlink = $(this).attr("href");
var link = encodeURIComponent( rawlink );
var token = rand();
var href = $(this).prop('href');
var proceed = $.get( "lhc/link.php?link=" + link + "&a=c", function( data ) {
if ( data == 1 ) {
return true;
} else {
return false;
}
});
if ( href.match("^javascript:") ) {
proceed = false;
}
if ( rawlink.charAt(0) != '#' ) {
if ( proceed ) {
$(this).after( " <span style='font-size:xx-small;'>( Hits: <span id='" + token + "'></span> )</span>" );
$.get( "lhc/link.php?link=" + link + "&a=q", function( data ) {
$('#' + token).html(data);
});
$(this).attr( "href", "lhc/link.php?link=" + link + "&a=g" );
}
}
});
});
This is what I have, but as mentioned below, it wouldn't be able to see if the href is just a function without the JavaScript declaration.
A little script can help. I wrote a sample:
http://jsfiddle.net/qXkHX/
var normalLinks = [];
$("a").each(function(i) {
var a = $(this);
var href = $.trim(a.attr("href"));
if(href.indexOf("javascript:") !== 0) normalLinks.push(href);
});
$("#result").text(normalLinks.join(","));
It iterates through the anchors in the document and pushes every link that does not start with javascript:. Maybe this helps.

multiple window.onload function

I have Javascript functions called start() that have multiple functions to load using window.onload function. However, I have below function that works independently fine. However, if I write it inside the window.onload, then it doesn't work.
//START()
window.onload = start;
function start()
{
loadValues();
showState4();
}
Code that does work independently fine.
window.onload=function(){
document.getElementById("src2TargetAll").onclick = function() {
sureTransfer(document.getElementById("net"), document.getElementById("target"), true);
};
};
I tried re-writing the code as follows in window.onload but it doesn't work. How to re-write the below code in single window.onload function.
window.onload = start;
function start()
{
loadValues(); //loadValues() and showState4() works fine without sendValues().
showState4();
sendValuess(); // tested this sendValues without above two functions and that also works fine. but three functions in window.onload creates a problem
}
function sendValuess(){
document.getElementById("src2TargetAll").onclick = function() {
sureTransfer(document.getElementById("net"), document.getElementById("target"), true);
};
};
Error that I get after adding sendValues() to window.onload is as follows:
STOP RUNNING THIS SCRIPT?
A SCRIPT ON THIS PAGE IS CAUSING YOUR WEB BROWSER TO RUN SLOWLY. IF IT CONTINUES TO RUN, YOUR COMPUTER MIGHT BECOME UNRESPONSIVE.
below is the code for loadValues and other functions as requested by a person who trying to help me:
function showState4(){
var me = document.getElementById('stk1');
var values = ''; //populate selected options
for (var i=0; i<me.length; i++)
if (me.options[i].selected)
values += me.options[i].value + ',';
values = values.substring(0, values.length-1);
var selected=[values];
var temp= new Array();
temp = values.split(",");
var del = document.getElementById('StakeHolder');
for(var i=0; i<del.length; i++)
{
for(var j=0;j<temp.length;j++)
{
if(temp[j] == del.options[i].value)
{
del.options[i].selected = true;
}
}
}
}
function loadValues()
{
var RD_REQ_RT_ID = "<%=RD_REQ_RT_ID %>";
if(RD_REQ_RT_ID=="null")
{
document.getElementById('requestType').value="";
}
else{
document.getElementById('requestType').value=RD_REQ_RT_ID;
}
)
_
function sureTransfer(from, to, all) {
if ( from.getElementsByTagName && to.appendChild ) {
while ( getCount(from, !all) > 0 ) {
transfer(from, to, all);
}
}
}
function getCount(target, isSelected) {
var options = target.getElementsByTagName("option");
if ( !isSelected ) {
return options.length;
}
var count = 0;
for ( i = 0; i < options.length; i++ ) {
if ( isSelected && options[i].selected ) {
count++;
}
}
return count;
}
function transfer(from, to, all) {
if ( from.getElementsByTagName && to.appendChild ) {
var options = from.getElementsByTagName("option");
for ( i = 0; i < options.length; i++ ) {
if ( all ) {
to.appendChild(options[i]);
} else {
if ( options[i].selected ) {
to.appendChild(options[i]);
}
}
}
}
}
How to add sendValuess() to window.onload without any issue?
window.addEventListener will not work in IE so use window.attachEvent
You can do something like this
function fun1(){
// do something
}
function fun2(){
// do something
}
var addFunctionOnWindowLoad = function(callback){
if(window.addEventListener){
window.addEventListener('load',callback,false);
}else{
window.attachEvent('onload',callback);
}
}
addFunctionOnWindowLoad(fun1);
addFunctionOnWindowLoad(fun2);
The error:
STOP RUNNING THIS SCRIPT?
A SCRIPT ON THIS PAGE IS CAUSING YOUR WEB BROWSER TO RUN SLOWLY.
IF IT CONTINUES TO RUN, YOUR COMPUTER MIGHT BECOME UNRESPONSIVE.
It occures when IE is running in compatibility mode. (happens while using FB and Google+)
goto "Tools" menu and select the "Compatibility View Settings" option. This will open a window where you can turn off the feature "Display all websites using Compatibility View".

removing scripts from html data... using javascript

So I have this function to strip out scripts from the page, but some scripts that are many lines long are still showing up. Is there a way to remove all scripts from the page that loads.
function filterData(data){
// filter all the nasties out
// no body tags
data = data.replace(/<?\/body[^>]*>/g,'');
// no linebreaks
data = data.replace(/[\r|\n]+/g,'');
// no comments
data = data.replace(/<--[\S\s]*?-->/g,'');
// no noscript blocks
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
// no script blocks
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
// no self closing scripts
data = data.replace(/<script.*\/>/,'');
// [... add as needed ...]
return data;
}
Here is an example of the script that comes through in the html
<script type="text/javascript">
var ccKeywords="keyword=";
if (typeof(ccauds) != 'undefined')
{
for (var cci = 0; cci < ccauds.Profile.Audiences.Audience.length; cci++)
{
if (cci > 0) ccKeywords += "&keyword="; ccKeywords += ccauds.Profile.Audiences.Audience[cci].abbr;
}
}
</script>
If I got you right, you need to remove all <script> tags with inner code from piece of HTML string. In this case you can try the following regular expression:
data.replace(/<script.*?>[\s\S]*?<\/script>/ig, "");
It should successfully work with one-liners and multi-liners, and does not affect other tags.
DEMO: http://jsfiddle.net/9jBSD/
checkout sugar.js - http://sugarjs.com/
it has a removeTags method that should do what you want
http://sugarjs.com/api/String/removeTags
function filterData(data){
var root = document.createElement("body");
root.innerHTML = data;
$(root).find("script,noscript").remove();
function removeAttrs( node ) {
$.each( node.attributes, function( index, attr ) {
if( attr.name.toLowerCase().indexOf("on") === 0 ) {
node.removeAttribute(attr.name);
}
});
}
function walk( root ) {
removeAttrs(root);
$( root.childNodes ).each( function() {
if( this.nodeType === 3 ) {
if( !$.trim( this.nodeValue ).length ) {
$(this).remove();
}
}
else if( this.nodeType === 8 ) {
$(this).remove();
}
else if( this.nodeType === 1 ) {
walk(this);
}
});
}
walk(root);
return root.innerHTML;
}
filterData("<script>alert('hello');</script></noscript></script><div onclick='alert'>hello</div>\n\n<!-- comment -->");
//"<div>hello</div>"

Categories