clueTip Plugin - Loading specific DIV ID in external html

[Aaron-60]

I am setting up the clueTip Plugin from http://plugins.learningjquery.com/cluetip/
and i see how you can load an external HTML file but it loads
everything in that file.

I want to have one html file with several divs in that file and have
cluetip plpugin call the file and only load a specific div from that
file.

so if i have

SomeFile.html

and in this file i have

Div ID="SomeID1"
Div ID="SomeID2"
Div ID="SomeID3"

I want the cluetip to call only one of those div's from the external
file.

Anyone know how to do this?

I tried setting up the rel="SomeFile.html#SomeID1" but that does not
work.

Can someone hep or is this even possible?

Thanks so much for the help! :)

[Karl Swedberg-2]

Hi Aaron,

The trick here is to use the ajaxProcess option. Here is an example:

$(document).ready(function() {
   $('a').each(function() {
     var thisHash = this.hash;
     $(this).cluetip({
       ajaxProcess: function(data) {
         var $div = $('<div></div>').append(data).find(thisHash);
      return $div;
       }
     });
   });
});


I put together a little demo page for you:

http://plugins.learningjquery.com/cluetip/demo/ajax-process.html


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On May 13, 2008, at 11:47 AM, Aaron wrote:

>
> I am setting up the clueTip Plugin from http://plugins.learningjquery.com/cluetip/
> and i see how you can load an external HTML file but it loads
> everything in that file.
>
> I want to have one html file with several divs in that file and have
> cluetip plpugin call the file and only load a specific div from that
> file.
>
> so if i have
>
> SomeFile.html
>
> and in this file i have
>
> Div ID="SomeID1"
> Div ID="SomeID2"
> Div ID="SomeID3"
>
> I want the cluetip to call only one of those div's from the external
> file.
>
> Anyone know how to do this?
>
> I tried setting up the rel="SomeFile.html#SomeID1" but that does not
> work.
>
> Can someone hep or is this even possible?
>
> Thanks so much for the help! :)

[Aaron-60]

Karl you are the BEST! This works great!

I have implemented but have a few questions.

This is what i have that works

jQuery.noConflict();
        jQuery(document).ready(function() {
                 jQuery.cluetip.setup({insertionElement: '#Maps'});
                 jQuery('area.load-local').each(function() {
      var thisHash = this.hash;
      jQuery(this).cluetip({
        ajaxProcess: function(data) {
          var $div = jQuery('<div></
div>').append(data).find(thisHash);
        return $div;
      }
      });
    });
        });

But where do i now declare this

jQuery('area.load-local').cluetip({local:true, width: '250',
positionBy: 'auto', hoverIntent: true});

Also i am having an issue with the tip on a page that the link is
close to the right hand side of the page and the bottom. I have an
image map and when you hover over an item that is close to the right
hand edge or bottom it shows the clue tip off to the right and some of
it is cut off by the edge of the screen and then adds scroll bars to
the screen. I have tried setting the positionby to the various setting
but none of them seem to work.

You can see an example here http://72.167.53.228/FloorPlans.aspx

If you hover over the green rooms on the first map on the right side
you will see how it shows up off the screen. How do i make it switch
so that it is on the screen or is there a way to have it appear in the
center of the screen or Div it is setup too?

Thanks again for all the help!!! i can not tell you how much
appreciate this help!

YOU ARE THE BEST KARL!!!! :)

[Karl Swedberg-2]

Hi Aaron,

You're too kind.
The first question I can answer right away. The second one is probably  
going to involve more work. I thought I had fixed the problems with  
areas before, but apparently not.

For question 1, you would just add the other options to the object  
literal:

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery.cluetip.setup({insertionElement: '#Maps'});
   jQuery('area.load-local').each(function() {
     var thisHash = this.hash;
     jQuery(this).cluetip({
       ajaxProcess: function(data) {
         var $div = jQuery('<div></div>').append(data).find(thisHash);
         return $div;
       },
       local:true,
       width: '250',
       positionBy: 'auto', // <-- unnecessary
       hoverIntent: true   // <-- unnecessary
     });
   });
});

If you're using one of the more recent versions of clueTip (>0.9.4),  
you shouldn't have to include the positionBy or hoverIntent options,  
since positionBy is "auto" by default, and hoverIntent will be used  
automatically if you include the hoverIntent.js script.

I'll try to track down the problem with positioning of areas as soon  
as I can.

--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On May 14, 2008, at 10:40 AM, Aaron wrote:

>
> Karl you are the BEST! This works great!
>
> I have implemented but have a few questions.
>
> This is what i have that works
>
> jQuery.noConflict();
> jQuery(document).ready(function() {
> jQuery.cluetip.setup({insertionElement: '#Maps'});
> jQuery('area.load-local').each(function() {
>     var thisHash = this.hash;
>     jQuery(this).cluetip({
>       ajaxProcess: function(data) {
>         var $div = jQuery('<div></
> div>').append(data).find(thisHash);
>         return $div;
>       }
>     });
>   });
> });
>
> But where do i now declare this
>
> jQuery('area.load-local').cluetip({local:true, width: '250',
> positionBy: 'auto', hoverIntent: true});
>
> Also i am having an issue with the tip on a page that the link is
> close to the right hand side of the page and the bottom. I have an
> image map and when you hover over an item that is close to the right
> hand edge or bottom it shows the clue tip off to the right and some of
> it is cut off by the edge of the screen and then adds scroll bars to
> the screen. I have tried setting the positionby to the various setting
> but none of them seem to work.
>
> You can see an example here http://72.167.53.228/FloorPlans.aspx
>
> If you hover over the green rooms on the first map on the right side
> you will see how it shows up off the screen. How do i make it switch
> so that it is on the screen or is there a way to have it appear in the
> center of the screen or Div it is setup too?
>
> Thanks again for all the help!!! i can not tell you how much
> appreciate this help!
>
> YOU ARE THE BEST KARL!!!! :)

[Aaron-60]

Awesome!

Thank you soooo much for helping me out and looking into the
posotioning issue for me! :)



On May 14, 12:46 pm, Karl Swedberg <k...@...> wrote:

> Hi Aaron,
>
> You're too kind.
> The first question I can answer right away. The second one is probably  
> going to involve more work. I thought I had fixed the problems with  
> areas before, but apparently not.
>
> For question 1, you would just add the other options to the object  
> literal:
>
> jQuery.noConflict();jQuery(document).ready(function() {
>    jQuery.cluetip.setup({insertionElement: '#Maps'});
>    jQuery('area.load-local').each(function() {
>      var thisHash = this.hash;
>      jQuery(this).cluetip({
>        ajaxProcess: function(data) {
>          var $div =jQuery('<div></div>').append(data).find(thisHash);
>          return $div;
>        },
>        local:true,
>        width: '250',
>        positionBy: 'auto', // <-- unnecessary
>        hoverIntent: true   // <-- unnecessary
>      });
>    });
>
> });
>
> If you're using one of the more recent versions ofclueTip(>0.9.4),  
> you shouldn't have to include the positionBy or hoverIntent options,  
> since positionBy is "auto" by default, and hoverIntent will be used  
> automatically if you include the hoverIntent.js script.
>
> I'll try to track down the problem with positioning of areas as soon  
> as I can.
>
> --Karl
> _________________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On May 14, 2008, at 10:40 AM, Aaron wrote:
>
>
>
>
>
> > Karl you are the BEST! This works great!
>
> > I have implemented but have a few questions.
>
> > This is what i have that works
>
> >jQuery.noConflict();
> >    jQuery(document).ready(function() {
> >            jQuery.cluetip.setup({insertionElement: '#Maps'});
> >            jQuery('area.load-local').each(function() {
> >                    var thisHash = this.hash;
> >                    jQuery(this).cluetip({
> >                    ajaxProcess: function(data) {
> >            var $div =jQuery('<div></
> > div>').append(data).find(thisHash);
> >            return $div;
> >                    }
> >                    });
> >            });
> >    });
>
> > But where do i now declare this
>
> >jQuery('area.load-local').cluetip({local:true, width: '250',
> > positionBy: 'auto', hoverIntent: true});
>
> > Also i am having an issue with the tip on a page that the link is
> > close to the right hand side of the page and the bottom. I have an
> > image map and when you hover over an item that is close to the right
> > hand edge or bottom it shows the clue tip off to the right and some of
> > it is cut off by the edge of the screen and then adds scroll bars to
> > the screen. I have tried setting the positionby to the various setting
> > but none of them seem to work.
>
> > You can see an example herehttp://72.167.53.228/FloorPlans.aspx
>
> > If you hover over the green rooms on the first map on the right side
> > you will see how it shows up off the screen. How do i make it switch
> > so that it is on the screen or is there a way to have it appear in the
> > center of the screen or Div it is setup too?
>
> > Thanks again for all the help!!! i can not tell you how much
> > appreciate this help!
>
> > YOU ARE THE BEST KARL!!!! :)- Hide quoted text -
>
> - Show quoted text -

[Aaron-60]

Also just wondering if it was possible/easier to have the tip show in
the center of the screen?




On May 19, 10:59 am, Aaron <AaronHBenning...@...> wrote:

> Awesome!
>
> Thank you soooo much for helping me out and looking into the
> posotioning issue for me! :)
>
> On May 14, 12:46 pm, Karl Swedberg <k...@...> wrote:
>
>
>
> > Hi Aaron,
>
> > You're too kind.
> > The first question I can answer right away. The second one is probably  
> > going to involve more work. I thought I had fixed the problems with  
> > areas before, but apparently not.
>
> > For question 1, you would just add the other options to the object  
> > literal:
>
> >jQuery.noConflict();jQuery(document).ready(function() {
> >    jQuery.cluetip.setup({insertionElement: '#Maps'});
> >    jQuery('area.load-local').each(function() {
> >      var thisHash = this.hash;
> >      jQuery(this).cluetip({
> >        ajaxProcess: function(data) {
> >          var $div =jQuery('<div></div>').append(data).find(thisHash);
> >          return $div;
> >        },
> >        local:true,
> >        width: '250',
> >        positionBy: 'auto', // <-- unnecessary
> >        hoverIntent: true   // <-- unnecessary
> >      });
> >    });
>
> > });
>
> > If you're using one of the more recent versions ofclueTip(>0.9.4),  
> > you shouldn't have to include the positionBy or hoverIntent options,  
> > since positionBy is "auto" by default, and hoverIntent will be used  
> > automatically if you include the hoverIntent.js script.
>
> > I'll try to track down the problem with positioning of areas as soon  
> > as I can.
>
> > --Karl
> > _________________
> > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > On May 14, 2008, at 10:40 AM, Aaron wrote:
>
> > > Karl you are the BEST! This works great!
>
> > > I have implemented but have a few questions.
>
> > > This is what i have that works
>
> > >jQuery.noConflict();
> > >    jQuery(document).ready(function() {
> > >            jQuery.cluetip.setup({insertionElement: '#Maps'});
> > >            jQuery('area.load-local').each(function() {
> > >                    var thisHash = this.hash;
> > >                    jQuery(this).cluetip({
> > >                    ajaxProcess: function(data) {
> > >            var $div =jQuery('<div></
> > > div>').append(data).find(thisHash);
> > >            return $div;
> > >                    }
> > >                    });
> > >            });
> > >    });
>
> > > But where do i now declare this
>
> > >jQuery('area.load-local').cluetip({local:true, width: '250',
> > > positionBy: 'auto', hoverIntent: true});
>
> > > Also i am having an issue with the tip on a page that the link is
> > > close to the right hand side of the page and the bottom. I have an
> > > image map and when you hover over an item that is close to the right
> > > hand edge or bottom it shows the clue tip off to the right and some of
> > > it is cut off by the edge of the screen and then adds scroll bars to
> > > the screen. I have tried setting the positionby to the various setting
> > > but none of them seem to work.
>
> > > You can see an example herehttp://72.167.53.228/FloorPlans.aspx
>
> > > If you hover over the green rooms on the first map on the right side
> > > you will see how it shows up off the screen. How do i make it switch
> > > so that it is on the screen or is there a way to have it appear in the
> > > center of the screen or Div it is setup too?
>
> > > Thanks again for all the help!!! i can not tell you how much
> > > appreciate this help!
>
> > > YOU ARE THE BEST KARL!!!! :)- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -