I would like to inject, via a bookmarklet, my own code into a web page.
That code needs jQuery, jQuery UI and some plugins to be added too in the web page.
I read about noConflict but what about if some jQuery plugins (with different version) are also loaded by the web page and they uses the same CSS class names or ids.
how must I proceed to inject all my code?
What kind of bookmarklet are you trying to inject. If you can open an iframe using your bookmarklet and show your content there like RTM, Springpad etc then I believe you won't have a problem.
Related
I have question about posibility way to avoiding conflicts JS or CSS when I'm embed page from another site (Those both sites are on my own manage) without using iFrame or another framing solution.
i.e in my main page http://myfirstsite.com I want to show page from http://mysecondsite.com/page. I use same theme, javascript library, and css for both.
I already use $().load() and php file_get_contents() to show in my page (also using $.ajax). But it seems js library from http://mysecondpage.com/page doesn't work well.
Please see my captured image.
Note that why I'm using javascript load() because it will be a transaction request in the future.
Thanks for any advice and solution.
DK
Javascript on a primary page will not actually conflict with the javascript in an embedded element so that being said the javascript is not your issue.
I use the TinyMCE jQuery plugin to assign TinyMCE to an input field (on document ready).
Now, I wrote a plugin for TinyMCE and want to load it.
The problem is, since the jQuery plugin loads the TinyMCE js file only when it's required, I can't just include my plugin js file since the "tinymce" object isn't loaded at this point.
How can I load my plugin at the right time?
Found it: There is a configuration option called external_plugins
https://www.tiny.cloud/docs/configure/integration-and-setup/#external_plugins
I've noticed many websites (like Hulu.com), have very interesting page transitions. They manage to fade out of a page and into a new one.
How would this be accomplished with jQuery/Javascript. Would I somehow have to link a .js to both web pages? How would I do this?
You could do this with a combination of PushState part of the History API (pjax is an excellent way to add this to an existing site) and jQuery. This is how github handles it (try browsing folders of source code, and look at the URLs). What pjax lets you do is intercept any <a> click before the page redirects, fetch the page that would load via ajax, insert the HTML in your page (which you can control with jQuery animations like fadeIn()) and the update the browser URL so the page can be bookmarked.
No need for a .js reference on both pages, just the page before.
There are many plugins for jQuery that support most transitions.
This looks like a pretty comprehensive list, although 2010 dated.
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
I am trying to implement a split view, as we can see on jquery mobile demo:
http://jquerymobile.com/demos/1.1.1/
The plugin :
http://asyraf9.github.com/jquery-mobile/
Inside the archive, they are many (unneeded) files, and the author also include an old jquery mobile version.
I already have the latest version of jquery mobile, and i'm trying to add juste the files I need to make it work.
I have readen the readme files, the author show a basic html page to make it work, but don't provide any explaination about the installation.
I'm pretty sure i don't need everything.
The best way is opening the index.html in the zip file and check what files are included in header, which can make splitview run correctly. You need include all those files too. Another thing is you need to notice the different versions of jquery mobile and jquery (both js and css files ). For my experience, it seemly cannot work fine with latest versions of jquery mobile and jquery. What I did is open each js and css file and copy them to my library.
Hope this could be helpful for you.
Splitview makes changes INSIDE JQM (adds a class .forgotwhatitwas to events, so they can be disabled later on from inside splitview.js). Unless you port these tweaks over to the current version of JQM, the splitview script will not get you anywhere.
I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!
I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.
Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.