tooltip which brings external page in it - javascript

m looking for a tooltip which can dispaly external php page in to it and which can adjust itself up and down with respext to screen size,can some one suggest me jquery or javascript code.It should work on ajax page also.if i delete something by using ajax then tooltip should appear on ajax

have you tried jquery.cluetip
look at basic ajax,

Since you are not saying which JavaScript library you are using, I am suggesting a prototype-based solution:
Prototip
It has many awesome features you can see on the demo page, including loading tooltips via AJAX.

Related

Loading whole pages with ajax in wordpress

Im having a problem loading pages in wordpress with ajax. I have to make animated page transition, so i decided to use ajax and put page content into a div which i will animate into view. I created this logic, that works 50% of the time. There are generally a lot of weird bugs.
So my question did anyone create ajax page loader in wordpress? I read a bit about using ajax with wordpress, and that i had to use wordpress built in features, but I didn't get why is that. Also I don't know how to get the back button to work properly.
$( links ).click(function(e) {
var link = $(this).get(0).href;
$('body').append('<div class="contain-all"></div>');
$('.contain-all').load(link);
if(link!=window.location){
window.history.pushState({path: link},'',link);
}
e.preventDefault();
});
Hope somebody has the anserws I need. :)
Okay i read a bit about ajax in wordpress and loading pages, and you can achieve this by creating template parts which you will fetch by a function in wordpress functions.php, by calling it with ajax. It sounds complicated, (and it partly is), but you can read more about it here:
https://premium.wpmudev.org/blog/load-posts-ajax/
Also if anybody have questions they can ask them here, so everyone will have access to them.

jquery .html doesn't process certain tags and functions

At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div

jQuery simple dialog not working

I'm trying to figure out why my jQuery dialog is not working properly on this page:
http://bit.ly/nOKwYz
This is the code snippet:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#dialog22").dialog();
});
</script>
and I also have:
<div id="dialog22">test</div>
For some reason it does not load the dialog, any ideas?
It's gotta be the library order. See this fiddle. Your sample works just fine if you have the library order right:
http://jsfiddle.net/mikethomsen/a25gw/
The way it works is you need to load jQuery.js, jQuery UI's JS and then the jQuery UI CSS, then throw in your custom code.
Edit
I replaced my fiddle's libraries with your sample and Firefox says jQuery('#dialog').dialog is not a function. That means you are missing the dialog code from the build of jQuery UI you made. You need to go back to the jQuery UI site and build a new distribution of jQuery UI that includes the other pieces you need.
To show the dialogo you should first hide it i think:
<div id="dialog22" style="display:none;">test</div>
and then show it with a button for example
EDIT - look at the fiddle here : http://jsfiddle.net/LCPJe/
Where do you load jQuery (and jQuery UI) on that page? You need to reference those libraries in the page (specifically before any code that uses them). Unless I'm just not seeing the reference, you do have quite a few script tags in the header.
You don't have to host a copy, though. You can reference a CDN link.

I need examples for adding a throbber during page loads

Does someone have a code example of running an animated throbber during asp.net page loads? More than one example would be appreciated.
A throbber is generally just an animated .gif that holds the place of content. When the content is loaded, that image is hidden or removed from the dynamic element and replaced with the actual content (or vice versa if you're making a form or similar).
Here's a link to the Facebook "throbber" -
http://static.ak.fbcdn.net/rsrc.php/v1/zb/r/GsNJNwuI-UM.gif
Here's a link to a Wikipedia asset: https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif
Matching article: https://en.wikipedia.org/wiki/Throbber
As you can see, it's an animated gif.
Update: If you're still using this for reference then please check out the CSS throbbers in various projects.
On http://ajaxload.info/ you can generate your own :)
You can use asp.net AJAX UpdateProgress control. Put your throbber image in the ProgressTemplate.
The issue with that is you will have to use UpdatePanel for that. If you are already using it nice.
Another options you might want to look into:
Use jQuery to show/hide your throbber.
jQuery UI's progressbar plugin.

jQuery Thickbox Issue

I'm a jQuery newb. I'm building a Online Shop and I'm using jQuery plugin 'Thickbox' (http://jquery.com/demo/thickbox). The Online Shop is set up to display a 'Enlarged Image' which runs the Thickbox JS script and shows an image.
A problem occurs as the data is placed on the page thru a CMS system (using Ajax I believe?). When you choose another product from the 'Choose Type' select drop down new data from the CMS system is placed on the page and the Thickbox script isn't applied as it can't see the new data.
I've been playing around with a fix I've found (http://www.codynolden.com/blog/2009/01/thickbox-and-ajax-using-livequery) but I can't seem to apply it to my website?
A live example of my site: http://madisonlane.businesscatalyst.com/_product_36331/AAA-_Autumn_Dress
Any ideas?
in thickbox.js:
$(domChunk).click(function(){
was replaced with this:
$(domChunk).live(click, function(){
Stuart got it right: thank you so much!
I was stuck with a similar problem issue: in my case, the target of an appended link (through jQuery .append() method ) was not loaded in a thickbox.
My jQuery code was executed in a document.ready() function:
$("#subpages").append('','<a href="..." class="thickbox" [...]');
Simply adding:
tb_init('.thickbox'); //required to reinitialize thickbox as DOM was manipulated
just after the last line fixed the problem.
Are you using an IFRAMED thickbox? You may have better luck with that, since by default thickbox is just displayed in a DIV. You need to add &TB_iframe=true to your URL's querystring to get this
I may not be reading your question right, but from the way it sounds, content is being destroyed and created with new item selections, right?
If that's the case, you'll need to call tb_init('.some-selector') when you load new content. I recall having to do this for conditionally setting up a thickbox once. Thickbox works by going through your page and wiring up click events to link with class "thickbox." By using tb_init(), you can wire your stuff up at any time on any selector you like. Check out the source code for Thickbox to see what I mean.

Categories