Develop Reference

Fancybox - set widths for different overlays

I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?
I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.
Here's my javascript:
$(document).ready(function() {
$(".fancybox").fancybox({
margin: [20,20,20,20],
padding: [20,20,0,20],
openEffect: 'fade',
openEasing: 'easeInQuad',
openSpeed: 400,
title: false,
//closeBtn: false,
//autoCenter: false,
scrolling : 'no', // turns off scrolling in box.
fitToView : false, // allows box to overflow out of viewport.
autoSize: false, // needs to be turned off for width/maxWidth to work.
height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
width: '100%',
maxWidth: 960,
helpers: {
overlay: {
// locked: false, // Prevents jump to top of window when opening a fancybox.
showEarly : false
}
},
tpl: {
closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
}
});
});
As you can see I'm using maxWidth to see the width of the default size. I couple of boxes could be almost half that. I've tried setting auto so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.
Any ideas that don't involve writing a whole need block of script for $(".fancybox-narrow")?
EDIT
I actually found an example on the Fancybox page which uses data-fancybox-width to set the width of an overlay: http://jsfiddle.net/wgPTR/
Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting fitToView to false seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.
UPDATE
Just to update, here's a CodePen of the working (default) fancybox: http://codepen.io/moy/pen/YGgjqv
I've also created a forked version which uses data-fancybox-width to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out fitToView: false which breaks my vertical scrolling.
Any ideas?

I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:
beforeLoad: function() {
if ($(this.element).hasClass('fancybox--small')) {
this.maxWidth = 600;
}
}
Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.
Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)

jquery booklet lib - how to display a cover image

jquery booklet lib allows creating an HTML5 flipbook with turning pages effects.
None of the direct options in the documentation seem to allow displaying a cover image. It does have a closedFrontTitle option.
Any idea how to set a cover image?

Managed to do it.
It turns out the "closed:false" displays the covers (would have been nice if it would have been 'covers:true', but anyhow...
Here's the code snippet:
$(function() {
$('#mybook').show();
$('#mybook').booklet({pageNumbers:false, arrows: true, hoverWidth: 120, closed: false, startingPage: 7, direction: "LTR", height: 675, width: 860});
});

Adjust position of some tool tips based on class of trigger using jqueryTOOLS

I am using the jqueryTOOLS plugin for jquery to generate tooltips for a set of form fields on my site.
The event trigger is dictated by a small piece of javascript:
$(function() {
$("#myform :input[title],label[title]").tooltip({
position: "top center",
offset: [-10, 0],
effect: "fade",
opacity: 1.0
});
});
As you can see, this triggers the title attribute of s and s as a tooltip onFocus.
You can also see that the configuartion of the tooltip takes place as part of this javascript, position is set, as well as an offset etc.
My problem:
There is no one position the tooltip can occupy relative to the fields in the form which is suitable. Some elements I need it to appear on the left, some to the right, and some above. I am looking for a way, based on the class of the element, to dictate an alternative position for the element.
I have tried:
Setting the class of a element for which I need the tip to appear to the left like so:
<input
title="This text becomes the tooltip"
class="errorleft"
type="radio"
name="somename"
value="value"
id="elementID"
/>
and then adjusting my javascript to include an additional trigger:
$(function() {
$("#myform :input[title],label[title]").tooltip({
position: "top center",
offset: [-10, 0],
effect: "fade",
opacity: 1.0
});
});
$(function() {
$("#myform.errorleft :input[title],label[title]").tooltip({
position: "center left",
offset: [0, 0],
effect: "fade",
opacity: 1.0
});
});
This does not work (and I can see why) and I know there is a way to do this, but I can't see a way to it, so far non of the documentation I can find on the jqt website has discussed this.
Any ideas much appreciated
jsFiddle
Here is a jsfiddle of my situation using a demo form, and the code I have attempted - in this example the Email field has the class "errorleft" where as all the others are classless. All tooltips display on the right
http://jsfiddle.net/DjHr7/1/

You are missing a space in your selector. As currently written,
$("#myform.errorleft :input[title],label[title]")
means, find the element that has an id #myform AND a class .errorleft. It should work with the following syntax:
$("#myform .errorleft")
This means, find an element with class .errorleft inside an element with an id of #myform
(You don't have to worry about adding :input[title],label[title] if you give each input field a class

Why doesn't qTip tooltip stay open so I can click link on it?

Here is my example in jsfiddle, hover over Minnesota to see the qtip popup. I am using qTip jquery plugin and I am getting stuck on making the qtip stay around long enough for someone to click the link on the tooltip. I have tried all kinds on scenerios to make it stay open. Reading the documentation it seems to be easy to do so but I tried these and no luck. I tried these
hide: { when: 'mouseout', fixed: true }
and
hide: { fixed: true, delay: 1000 }
and many others and nothing will keep the tooltip up so the user can click on a link. The thing that is irritating is that on the reference page. If you click on any of the example links they are doing exactly what i want to do and i went to the source and if seems that they are using
hide: 'unfocus',
and
hide: {
fixed: true,
delay: 240
},
but I tried both and the tooltip won't stay open. Am I missing something?

Since it appears the position of your tip is off to the right some, try this:
$(this).qtip(
{
hide:{ //moved hide to here,
delay:500, //give a small delay to allow the user to mouse over it.
fixed:true
},
content: $("." + test).html(),
style: {
name: 'dark',
style: {
border: 1,
cursor: 'pointer',
padding: '5px 8px',
name: 'blue'
},
border: {},
tip: true // Apply a tip at the default tooltip corner
}
});
Updated fiddle.

You've got 2 styles in your code and it's just all sorts of wonky. Here is your code, working.
http://jsfiddle.net/JDVTM/

Tooltip (qTip) is not closed, jQuery

with following code qTip works for me and generates tooltips:
$('a.ppname[rel]').live('mouseover', function() {
$(this).qtip( {
content : {
url : $(this).attr('rel')
},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true, // Give it a speech bubble tip with
// automatic corner detection
name : 'cream' // Style it according to the preset
// 'cream' style
}
});
});
});
But the qTip is not removed from the dom, well sometimes it just disappears and appears again and I get a lot of opened tooltips:
I looked at the dom, the qtip seems not to be removed but just set invisible. I need some simple logic to destroy the tooltip. E.g. if a.ppname was focused and is not focused any more I could destroy it. But how would that look like in javascript? Any Ideas?
Update: I downgraded my jQuery to 1.3.2 recommended for qTip. I don't get tooltips that stay open anymore but there is another problem now:
The tooltips, which for now I can not delete seem to appear when I hover the next item. Please, provide some suggestions how to destroy the tooltip.
Update: using
$('a.ppname[rel]').each(function(){
in the first line of the code the problem is solved. But that leads to another problem another problem that I describe here qTip tooltip does not appear, jQuery. seems to be a dilemma^:D

I think what you want is
$('a.ppname[rel]').qtip({
content : {stuff},
style : {stuff},
position: {stuff},
show: 'mouseover',
hide: 'mouseout'
})

You can remove the tooltip from the DOM by calling the destroy method when the tooltip is hidden. Try this (kudos to Matt for his example that I copied and ammended):
$('a.ppname[rel]').qtip({
content : {stuff},
style : {stuff},
position: {stuff},
show: 'mouseover',
hide: 'mouseout',
onHide: function() { $(this).qtip('destroy'); }
});