[jQuery] Jquery cluetip plugin behavior
Hello, The jquery plugin for cluetip (http://plugins.learningjquery.com/ cluetip/) currently defaults to showing a cluetip on left. I want to modify the behavior to show X pxl from the right of the element (table row).Is there a known work around for this? I digged in to the options for cluetip and found only leftOffset available.
[jQuery] Problem with the jQuery cluetip plugin and jboss Richfaces ajax submit
Hello,
I am trying to re-render through ajax a richfaces element contained in a
cluetip tooltip div and it is not working. Can anyone help please?
Here is the code for the div:
a id=aa rel=#tttoto/a
div id=tt style=display: none
a4j:outputPanel id=sculptureSuggereeTT
ajaxRendered=true
p
rest:link id=detailTT
value=sculptureAction styleClass=miniature-link
f:param name=id
value=#{suggestionOeuvreView.sculptureSuggeree.sculptureID} /
f:param name=titre
value=#{jbm:normaliserURL(suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre)}
/
h:graphicImage
value=#{initParam['com.jeanbaptistemartin.static.url']}/#{suggestionOeuvreView.sculptureSuggeree.photoDetail}
styleClass=miniature-image /
/rest:link
/p
p
rest:link id=texteTT
value=sculptureAction
f:param name=id
value=#{suggestionOeuvreView.sculptureSuggeree.sculptureID} /
f:param name=titre
value=#{jbm:normaliserURL(suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre)}
/
h:outputText
value=#{suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre},
/
h:outputText
value=#{suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].matiere},
/
h:outputText
value=#{suggestionOeuvreView.sculptureSuggeree.annee}
f:convertDateTime pattern=
timeZone=Europe/Paris/
/h:outputText
/rest:link
/p
/a4j:outputPanel
/div
Here is what I posted on jboss Richfaces forum:
http://www.jboss.org/index.html?module=bbop=viewtopicp=4231946
Any comment or clue welcome,
Julien.
[jQuery] Problem with jQuery Cluetip plugin and jboss Richfaces
Hello,
I am trying to re-render through ajax a richfaces element contained in a
cluetip tooltip div and it is not working. Can anyone help please?
Here is the code for the div:
a id=aa rel=#tttoto/a
div id=tt style=display: none
a4j:outputPanel id=sculptureSuggereeTT
ajaxRendered=true
p
rest:link id=detailTT
value=sculptureAction styleClass=miniature-link
f:param name=id
value=#{suggestionOeuvreView.sculptureSuggeree.sculptureID} /
f:param name=titre
value=#{jbm:normaliserURL(suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre)}
/
h:graphicImage
value=#{initParam['com.jeanbaptistemartin.static.url']}/#{suggestionOeuvreView.sculptureSuggeree.photoDetail}
styleClass=miniature-image /
/rest:link
/p
p
rest:link id=texteTT
value=sculptureAction
f:param name=id
value=#{suggestionOeuvreView.sculptureSuggeree.sculptureID} /
f:param name=titre
value=#{jbm:normaliserURL(suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre)}
/
h:outputText
value=#{suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre},
/
h:outputText
value=#{suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].matiere},
/
h:outputText
value=#{suggestionOeuvreView.sculptureSuggeree.annee}
f:convertDateTime pattern=
timeZone=Europe/Paris/
/h:outputText
/rest:link
/p
/a4j:outputPanel
/div
Here is what I posted on jboss Richfaces forum:
http://www.jboss.org/index.html?module=bbop=viewtopicp=4231946
Any comment or clue welcome,
Julien.
[jQuery] Re: jQuery cluetip plugin
Hello Karl, My apologies for the hasty post. The plugin works perfectly fine. It was my programming error. I had forgotten to remove the totally vanilla declaration on my shared partial that was overriding the adustments that I has making in my master layout file! I only discovered it after I started to attach help text to the links not contained in the partial. This is a really nice piece of work. Thank you. Bharat
[jQuery] Re: jQuery cluetip plugin
Hello Karl, I sent you a login to my beta site. I am not sure if you had a chance to look at it yet? Thanks. Bharat
[jQuery] jQuery cluetip plugin
In my Rails 2.3.2 application, the plugin is working for me, but I am
unable to customize anything. Here is my setup:
1. In my application.html.erb file, I have the following:
%= javascript_include_tag jquery.js, jquery-ui.js,
jquery.hoverIntent.js, jquery.cluetip.js, jrails.js %
%= stylesheet_link_tag 'web_app_theme', themes/#...@current_theme}/
style, 'web_app_theme_ext',
'ui.theme.css', 'ui.core.css',
'ui.accordion.css','jquery.cluetip.css' %
script type=text/javascript
$(document).ready(function() {
$(#accordion).accordion({ autoHeight: false, event:
'mouseover' });
$(.tip).cluetip();
});
/script
This is in the head section. The accordion plugin works perfectly and
customizations are working too, but not in the cluetip plugin.
The javascript files are stored in public/javascripts per Rails
convention. Similarly, the stylesheet files are stored in the public/
stylesheets directories.
Even the changes that I am making to the default section of
jquery.cluetip.css file are not being picked up. My Rails application
is loading the CSS file fine since I can see it in the footnotes
display. Is there a way to debug this problem?
Thanks.
Bharat
[jQuery] Re: jQuery cluetip plugin
I am now able to load images/colors out of the CSS file but cluetip
iteself refuses to recognize any options that I set so for example if
I say
$(.tip).cluetip({arrows: true});
It does not honor the arrows options setting same thing for sticky:
true, etc.
Any ideas?
[jQuery] Re: jQuery cluetip plugin
Do you have a page somewhere that I can take a look at? Which version
of clueTip are you using?
thanks,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On May 8, 2009, at 12:29 PM, Bharat wrote:
I am now able to load images/colors out of the CSS file but cluetip
iteself refuses to recognize any options that I set so for example if
I say
$(.tip).cluetip({arrows: true});
It does not honor the arrows options setting same thing for sticky:
true, etc.
Any ideas?
[jQuery] cluetip plugin: how to implement a cluetip picture to a homepage logo?
Hi I try to implement a picture as a cluetip that should show up when the user touches the homepage logo. I tried different things but did not make it properly. the logo had an awful border in the colors of the links and in Firefox 3 the cluetip did not show. any solutions? txs in advance Markus
[jQuery] clueTip plugin - onClose option in the API?
Hi there,
I am using Karl's clueTip plugin in a table. When the user clicks a
link in the table, the clueTip pops up, and the CSS of the table cell
changes using the addClass method (adds a class called
'selectedCell'). This is all well and groovy, but what I want to do in
addition, is that when the user closes the clueTip window, the CSS of
the selected table cell reverts to its previous class. I was looking
for an onClose in the clueTip API options list and could not find
one.
Does anyone know how I could achieve this desired behavior? What I
have right now is that when the user clicks one cell all the current
table cells are reset (have the class removed) and then a class is
applied ('selectedCell'). When another a link is clicked in the table,
all the current table cells with that class have it removed, and the
newly clicked cell has the class applied:
$(a.jTip).click( function() {
$('table tbody tr td').removeClass('selectedCell');
$(this).parent().addClass('selectedCell');
}
clueTip is called thus:
$(a.jTip).cluetip({
cluetipClass: 'jtip',
arrows: true,
hoverIntent: false,
mouseOutClose: true,
sticky: true,
activation: 'click',
splitTitle: '|',
closeText: 'X',
closePosition: 'title',
tracking: true,
showTitle: true
}) ;
I want to add another option (in pseudo-code):
onClose: function(e) {
e.parent().removeClass('selectedCell')
}
Is this worth modifying the plugin for? Am I even going about this the
right way? Thanks in advance.
[jQuery] cluetip plugin - Need beforeSend() and error handling override
Hi there, Recently I've been using cluetip with asp.net in particular calling ajax pagemethods. I recently came across this problem: http://stackoverflow.com/questions/361467/is-there-any-way-to-suppress-the-browsers-login-prompt-on-401-response-when-usin Basically what is happening is my pagemethod needs to be autheniticated, as such when an ajax request is made to this method a 401 status is given and NTLM prompt is given. The workaround involves sending a custom header that will help suppress this error. The problem is cluetip doesn't recognize beforeSend unless I physically edit the cluetip script. Also having the ability to override the error method would be handy so that redirection can be applied instead of displaying an error in the cluetip Let me know what your thoughts are on this? Regards DotnetShadow
[jQuery] cluetip plugin issues
I am trying to use the cluetip plugin to no avail. Instead of the
cluetip coming up, I am taken to the website URL like a normal link.
I am using this within the Liferay portal and am using the livequery
plugin. I've tried this with ajaxCache set to false and true.
The cluetip code is getting executed when the page loads - verified
with firebug. Here is the cluetip related html that is written when
the cluetip code executes:
div id=cluetip-waitimage style=position: absolute; z-index: 95;
display: none;/
div id=cluetip style=z-index: 96; display: none; position:
absolute;div style=z-index: 90; opacity: 0.1; top: 6px; left: 6px;
position: absolute; background-color: rgb(0, 0, 0);/div style=z-
index: 91; opacity: 0.1; top: 5px; left: 5px; position: absolute;
background-color: rgb(0, 0, 0);/div style=z-index: 92; opacity:
0.1; top: 4px; left: 4px; position: absolute; background-color: rgb(0,
0, 0);/div style=z-index: 93; opacity: 0.1; top: 3px; left: 3px;
position: absolute; background-color: rgb(0, 0, 0);/div style=z-
index: 94; opacity: 0.1; top: 2px; left: 2px; position: absolute;
background-color: rgb(0, 0, 0);/div style=z-index: 95; opacity:
0.1; top: 1px; left: 1px; position: absolute; background-color: rgb(0,
0, 0);/div id=cluetip-outer style=position: relative; z-index:
97;h3 id=cluetip-title/div id=cluetip-inner//divdiv
id=cluetip-extra/div class=cluetip-arrows id=cluetip-arrows
style=z-index: 97;//div
Here is my relevant code:
jQuery(a.hTip).livequery(function() {
jQuery(this).cluetip();
});
a href=someurl class=hTip title=the titleTest Me/a
[jQuery] cluetip plugin crashing Firefox with external style sheet
When using the cluetip plugin, I am loading an external url. The tip loads fine if my external page is plain text/html, however if I reference an external style sheet (using the rel tag), the plugin crashes Firefox. It's happened more than once. Is there a workaround for this other than inline style? I need to use a .css file since I have multiple pages to show with the cluetip. Thanks!
[jQuery] clueTip plugin mouseOutClose with sticky:true problem
The clueTip plugin mouseOutClose option does not work fully if you hav
sticky set to on.
it only closes the cluetip if you hover over the cluetip itself.
It should also close when the mouse moves out of the element that
fired the cluetip (but not when the mouse is moving into the cluetip).
here are the options I have used:
$('a.popupOptions').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: true,
hoverIntent: false,
sticky: true,
fx: { open: 'fadeIn', openSpeed: 'fast' },
mouseOutClose: true,
closePosition: 'title',
local: true,
hideLocal: true,
topOffset: 5,
leftOffset: 10
});
and the HTML for it is:
div class=optionsPopupWrapper
a title=Menu options. class=popupOptions
rel=#popup1 href=#img src=/.png alt=V. //a
div class=diaryDayEntryOptions
id=popup1
h3Menu options/h3
ul
lia href=#Edit diary
entry/a/li
lia href=#Add entry to
my favourites/a/li
lia href=#Delete entry
from diary/a/li
/ul
/div
/div
do you have any suggestions:
[jQuery] ClueTip plugin
The ClueTip plugin seems to reject html objects when loading locally. I have a div object that loads fine if I have text in it, but if I put a table in it, the cluetip becomes empty. Can anyone else confirm this? Is it possible to load a local table in a different tooltip implementation? Thank you for your time, Steve
[jQuery] clueTip plugin DOM manipulation clarification.
Hello all -
I downloaded and used Karl Swedberg's (of www.learningjquery.com)
excellent clueTip plugin. The scenario under which I used it led me
to identify a small issue that I believe was a design decision by Karl
but that behaved differently than I expected it to and, as such, made
me spend a couple hours figuring it out.
I was listing a bunch of products on a page for the company I work for
and, when you clicked on a picture of the product, a tooltip was to
come up listing some of its information as well as containing some
links that allowed you to edit some of the content in there. So in
the tooltip, which was local and sticky, there were some links with
onclick events that manipulated some of the DOM elements in that same
tooltip. The onclick events were firing, and the DOM appeared to be
affected when I logged the objects using firebug's console.log API,
but no difference appeared on the screen.
After some frustration, thinking my JavaScript was the culprit, I
noticed that if I clicked a part of the tooltip that incited a change,
closed the tooltip, then clicked the picture of the product again, the
tooltip that came up on that second click would show the DOM
differences. Upon further investigation and the suggestion of my
coworker, I searched in the source code and noticed that when a
tooltip is opened and has local content, that element is cloned
using .clone(true), which meant that when I selected the tooltip using
'#tooltip_id', it was actually selected the original, not the cloned
one. I tried passing through a reference to the cloned element using
the 'this' keyword in the onclick attribute, which worked but failed
to redraw the dropshadows on the tooltip for some reason.
For this reason I edited the source code to read
[code]
var localCluetip = $.fn.wrapInner ? $localContent.wrapInner('div/
div').children() : $localContent.html();
[/code]
rather than the original
[code]
var localCluetip = $.fn.wrapInner ? $localContent.wrapInner('div/
div').children().clone(true) : $localContent.html();
[/code]
Many thanks to Karl for this plugin, which I will continue to use.
[jQuery] cluetip plugin and IE6
Has anyone else noticed that in IE6, select menus show up in front of the cluetip? Is there a fix for this?
[jQuery] clueTip Plugin - Loading specific DIV ID in external html
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! :)
[jQuery] [clueTip plugin 0.9.6] The CSS will not show at the first time of mouse over
Hi pros! (Sorry for my bad english. I'm from Germany.) This is my first project with jQuery. It's cool but hard to understand for me. I'm (just) a designer. The problem is that nothing happens when I move over the images with the mouse. At the second time the clueTip appears. BUT somtimes with the correct stylesheet and sometimes without the style. Just the text appears over the content. It locks very unprofessional :-( -- Has anyone a good idea? You will find the site here: http://bizlernsol.com/business_learning_solution.php Thank you so much!!! Kind regards Andreas And in german: Hi Profis! Das ist mein erstes Projekt mit jQuery. Es ist cool, aber für mich schwer zu verstehen. Ich bin (nur) ein Designer. Das Problem ist, dass nichts erscheint, wenn ich mit der Maus das erste Mal über die Bilder fahre. Beim zweiten Mal geht es. ABER manchmal mit dem korrekten Stylesheet und manchmal nicht. Dann liegt der geladene Text einfach nur über dem Inhalt. Das sieht sehr unprofessionell aus :-( -- Hat jemand eine gute Idee? Die Site findet Ihr unter: http://bizlernsol.com/business_learning_solution.php Vielen, vielen Dank!! Viele Grüße Andreas
[jQuery] clueTip plugin: Passing values via AJAX to the clueTip, then passing values back to the parent page to update div content
Hi there,
First up a big thanks to Karl for writing a great jQuery plugin. And
sorry if this is a bit of a newbie issue. My question is related to
AJAX content. I have a page that has a variety of links, that look
like the following:
a class=jTip title=TITLE href=this.php?
construction=1155492714online=1160506275installation=1161683112
rel=this.php?
construction=1155492714online=1160506275installation=1161683112
This is just a series of key-value pairs that list the type of action
and the epoch time that action took place.
There is a div on this page that I want to insert content into, lets
call it 'mydynamiccontent':
div id=mydynamiccontent
pThis content will get replaced/p
/div
My clueTip call looks like:
$(document).ready(function() {
$('a.jTip').cluetip({
cluetipClass: 'jtip',
arrows: true,
hoverIntent: false,
mouseOutClose: true,
sticky: true,
activation: 'click',
closeText: 'X',
closePosition: 'title',
ajaxCache: true
});
)};
When the user clicks on the link, the clueTip window pops up and show
the content that looks like (using the example above, the source of
'this.php' with the GET parameters passed):
this.php
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
meta http-equiv=Content-Type content=text/html; charset=utf-8/
/head
body
ul class=reportlist
li class=constructionconstruction: a href=#1155492714/
a/li
li class=onlineonline: a href=#1160506275/a/li
li class=installationinstallation: a href=#1161683112/a/
li
/ul
/body
/html
Great. This works as expected. What I now want is for those links in
the unordered list in the clueTip window to have an onClick event that
updates the contents of the 'mydynamiccontent' div on the initial
page. So my question is, do I define that in a clueTip ajax call? Or
do I define it in some jQuery code in 'this.php'? If the latter, how
can I ensure I load the content back into the correct div on the main
page?
Thanks in advance!
[jQuery] cluetip - Plugin with .load() not working
Hi Jqueries
The cluetip-Plugins works fine, as long as you have content and Script
on the same page.
But when it comes to use cluetip with the .load()-function, it's not
working (no errors whatsoever).
index.html-file in demo-folder:
[code]
$('#inc').load('inc.html',
function(){
$('[EMAIL PROTECTED]').cluetip(); -- no response
alert( 'file loaded!' ); -- works
}
)
[/code]
inc.html:
[code]
pspan title=This text should show up in cluetipMouseover test
(title)/span/p
[/code]
It does not help to put
[code]
$('[EMAIL PROTECTED]').cluetip();
[/code]
in the $.document(ready)-Container
Any suggestions?
Am I missing something?
Thanks for inputs and clues :-)
QT
[jQuery] cluetip plugin prevents click event
I am using cluetip to put tooltips on the links in a search results page. I have the 'activation' setting as 'hover' but unfortunately cluetip cancels the normal click event and I can't actually follow the links. I don't see any examples or settings that will let me actually click on the links. Is this possible? Thanks, -Dan
