basic api call function w/ jQuery plugin - javascript

I'm using the PrettyPhoto jQuery plugin for an image gallery, and I'd like to make an API call with a basic text link using the following function to navigate to the next image in a series:
$.prettyPhoto.changePage('next');
Since I'll be making this call frequently throughout the site, I'd like to create a basic Javascript function "next" so that for each onclick instance, I can simply write "onclick=next();" rather than typing out the whole thing-- i.e. onClick="$.prettyPhoto.changePage('next');"-- each time. I've tried to write the function as follows, but it doesn't seem to be working:
$(document).ready(function(){
function next() {
$.prettyPhoto.changePage('next');
};
});
What am I doing wrong here? I'm obviously a novice at JS programming, but any direction here would be most appreciated; and please let me know if I should provide any more information.

There is no need to wrap your function in the document ready. Apart from that, you would be putting the next function in the global space which is something you should try to avoid. You could do something like:
$.nextPhoto = function() { $.prettyPhoto.changePage('next');}
and call it with
$.nextPhoto();
which puts it in the jQuery namespace but the better approach would be to use jquery event handlers .click() and bind the prettyPhoto function directly to the links rather than use inline javascript

Related

Call jQuery from inside Flash Canvas

I'm trying to call for a jQuery function when my Flash Canvas animation ends. I can't seem to figure out what code I need to add on that last keyframe in order to do that. I found something like this but it's not working:
this.stop();
ExternalInterface.call("javascript:start_website();");
Thanks in advance!
I managed to find a solution from browsing a few other websites. Basically at the end of my animation on the very last keyframe I added this bit of code:
this.animation_tracker = function() {
start_website();
return false; // prevent the function from being run over and over again
}
exportRoot.animation_tracker();
And within my website I created a jQuery function called start_website(); where I placed all the actions that I wanted to have happen once my animation was over.
in flash canvas you are already programming in javascript (and other js libraries flash uses), so you can't use and don't need the ExternalInterface.call and such.
You can and should call straight to the javascript function:
this.stop();
start_website();
Good luck!

jquery tools overlay - Two on same page

I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).

Prevent function from executing or removing anonymous event listeners

I'm creating a Chrome extension for a website that has no open API, so I'm stuck reading Closure Compiled spaghetti code for a long time. I've made a lot of progress but I seem to be stuck. On the page's onload, this function executes:
function comments_initReply(){
var b=$("#ajax_comm div.com");
for(var a=0;a<b.length;a++){var d=$(b[a]);
var c=d.find(".commentReplyLink");
if(c.length){
d.on("dblclick",function(){$(this).closest("div.com").find(".commentReplyLink").click()}).find(".t")}
}
}
What it does is it takes a comment div on a website and it makes it into a large double-clickable area for you to open a reply. All I want to do is remove the double-clicking property so you can double-click text and highlight it instead of opening a reply modal dialog.
Since the function is anonymous, it cannot using removeEventListener to detach it. Any ideas? I prefer to not use jQuery.
Well, although you prefer not to use jQuery, it's much easier to use it, and my solution here will be jQuery-based, and feel free to convert it into a normal Javascript, if you want to.
function comments_endReply() {
$("#ajax_comm div.com").off("dblclick");
}

Programmatically activating a custom TinyMCE button

I've got a lot of custom buttons on my TinyMCE toolbar, most of which open a dialog box with some further options in when you click them. This all works fine.
Here is an example of something in my tinyMCE_setup() function:
ed.addButton('link2', {
title: '{!link!}',
image: '../style/common/images/link_20x20.png',
onclick: function() {
replyBoxDialog('link', ed);
}
});
However, I want to be able to call these programatically, and faking a .click() on the button with jQuery won't cut it.
I've tried calling the function directly
replyBoxDialog('link',tinyMCE);
But no matter what I try as the second argument, I can't get the right object (so it fails when it's time to insert something into the editor, as it doesn't know what the editor is).
I've also had a try with various execCommand() calls, but I've no idea what to put in there.
Any clues?
All you have to do is to use a real editor object as paramter
var editor_instance = tinymce.activeEditor; // in case you just use one editor
var editor_instance = tinymce.get('my_special_editor_id'); // in case you have more than one editor
replyBoxDialog('link', editor_instance);
I've managed to make it work by creating a variable 'globalEd' at the top of the script and adding globalEd = ed; to tinyMCE_setup(), then I can call replyBoxDialog('dragndrop', globalEd);. This seems like a properly hacky way of doing things though, so I'd welcome any further advice.

How to pass parameters in jquery for a user defined function

I need to write a user defined function using jQuery to swap two div tags within the page. I created the function but it is not swapping them as desired. In fact, when I move the same code inline it works fine. Is there something I am missing?
It is impossible to debug something that I cannot see, but I wrote a "swapper function" for you:
function swapem($el1, $el2) {
var $t=$el2.clone().insertAfter($el1);
$el1.insertAfter($el2);
$el2.remove();
}
$('#swapper').click(function () {
swapem($('#div1'), $('#div2'));
});
jsFiddle Demo

Categories