Develop Reference

Proper way to set default settings for each instance of jQuery plugin

I have been researching this for the past hour and I cannot seem to figure out what is wrong. I would like to make a simple plugin that allows for multiple instances each with their own settings I am not super versed in javascript so I am not using the object/prototype method.
When I run this plugin on two different elements, each with their own settings, only the last settings is being used as seen by the console.log
Here is what I have:
jQuery.fn.lighthouse = function(config) {
config = $.extend({}, jQuery.fn.lighthouse.config, config);
config.openDuration = config.openDuration || config.duration;
config.closeDuration = config.closeDuration || config.duration;
return this.each(function() {
var containers = $(this);
$(containers).click(open);
$(config.closeSelector).click(close);
console.log(config.contentType);
$(containers).each(function() {
if (config.contentType === 'img' && $(this).prop('tagName') === 'A') {
var href = $(this).href,
src = $(this).children('img').src;
if (href !== src) {
}
}
});
// Needs the container object
function open(link) {
link.preventDefault();
var current = {
close: $(this).children(config.closeSelector),
background: $(this).children(config.backgroundSelector),
container: $(this),
child: $(this).children(config.childSelector)
};
console.log($(current.child).is(':hidden'));
if($(current.child).is(':hidden')) {
link.preventDefault();
}
$(current.container).append('<div class="background"></div>').css({
background: config.background,
width: '100%',
height: '100%',
position: 'fixed',
zIndex: '2',
opacity: config.backgroundOpacity,
display: 'none'
}).fadeIn(config.secondaryDuration);
$(current.child).css({
position: 'fixed',
display: 'none',
width: '150px',
height: '150px',
left: current.container.offset().left,
top: current.container.offset().top,
zIndex: '3'
}).fadeIn(config.secondaryDuration).animate({
width: '100%',
height: '100%',
top: '0',
left: '0'
}, config.openDuration, function () {
$(current.container).append('<a class=".close">X</a>').css({
background: 'white',
color: 'black',
width: '50px',
height: '50px',
lineHeight: '50px',
textAlign: 'center',
position: 'absolute',
top: '0',
right: '0',
display: 'none'
}).fadeIn(config.secondaryDuration);
});
}
// Needs the close object
function close(link) {
link.preventDefault();
var current = {
close: $(this),
background: $(this).siblings(config.backgroundSelector),
container: $(this).parent(config.containerSelector),
child: $(current.containter).children(config.childSelector)
};
$(current.close).fadeOut(config.secondaryDuration).remove();
$(current.close).fadeOut(config.secondaryDuration).remove();
$(current.child).animate({
height: current.containter.height(),
width: current.containter.width(),
top: current.containter.offset().top,
left: current.containter.offset().left
}, config.closeDuration, function () {
$(current.child).animate({
opacity: '0',
}, config.secondaryDuration).css({
display: 'none',
zIndex: 'auto'
});
});
}
});
}
jQuery.fn.lighthouse.config = {
containerSelector: '.lighthouse',
childSelector: 'div',
closeSelector: '.close',
backgroundSelector: '.background',
captionSelector: '.caption',
duration: 350,
openDuration: null,
closeDuration: null,
secondaryDuration: 100,
background: 'rgb(230, 230, 230)',
backgroundOpacity: '0.7',
contentType: 'img'
}
This is what I am calling it with:
$('.image').lighthouse();
$('.click').lighthouse({
childSelector: '.site',
contentType: 'html'
});
Here is the jsfiddle: http://jsfiddle.net/yK9ad/
The proper output of console.log should be:
img
html
Any ideas? Thanks in advance for the help!

I think you are missing the class attribute for the anchor containing <img/> tag. Please see below
<a class="image" href="http://placehold.it/900x800&text=Image">
<img src="http://placehold.it/300x200&text=Image" />
<span class="caption">
test
</span>
</a>
The updated fiddle - http://jsfiddle.net/yK9ad/2/
I could see the following in the console.
img
html

I can't make jquery scroll pane horizontal

I have been using the following code successfully to make a vertical scroll bar with scroll pane:
function scrollPane(){
$('.custom-scroll').jScrollPane({
showArrows: true,
verticalDragMinHeight : 0,
verticalDragMaxHeight : 100,
mouseWheelSpeed: 120,
wheelSpeed: 120,
contentWidth: '100px'
});
}
I am now trying to make a horizontal scrollbar, but it is not working. Here is my code:
function scrollPane(){
$('.custom-scroll').jScrollPane({
showArrows: true,
verticalDragMinHeight : 0,
verticalDragMaxHeight : 100,
mouseWheelSpeed: 120,
wheelSpeed: 120,
contentWidth: '100px'
});
$('.horizontal_bar').jScrollPane({
showArrows: true,
contentWidth: '100px'
});
}
and this is the only css i have for horizontal_bar:
.horizontal_bar{
width: 100%;
height: 200px;
overflow: auto;
}
How do I make the horizontal scroll pane?

Keep QTip Tooltips from going off screen? (Bound to body?)

I have QTips:
eventRender: function (event, element, view) {
element.qtip({
content: event.title + event.hours,
position:{
target: 'mouse'
},
// show: { event: 'click' },
hide: { event: 'mousedown mouseleave' },
style: {
width: 200,
padding: 5,
color: 'black',
textAlign: 'left',
border: {
width: 1,
radius: 3
},
classes: 'custSideTip'
}
});
}
CSS:
.custSideTip
{
position:fixed !important;
right:0 !important;
max-width:200px !important;
}
But they go off the page...
I tried right and fixed position and nothing seems to work...
The right coordinate of the tip should never exceed the body.right / page.right... if that makes sense..
Thanks

Taken from here.
You can try to use viewport config:
position: { viewport: $(window) }

This worked for me and other examples didn't with some error in jQuery code. Perhaps some version discrepancy?
position: { viewport: $(document.body) }

onclick, click not working? jquery

I'm simply trying to change a hover trigger to a click but for some reason any click function I use does not work?
This my current code that works when you hover...
Current Script Thats Working on hover...
$showSidebar.hover(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
But see my attempts below to get it work when clicked, but weirdly nothing happens.
My Attempt One
$showSidebar.click(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
and
My Attempt Two
$showSidebar.on('click', function () {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
and a couple of others but nudda...
This is my mark up...
<span>//</span> MORE
and my var
$showSidebar = $("#show-sidebar");
Any ideas where I'm going wrong? Would be hugely helpful thanks!
See working code, thanks #hurshagrawal
$showSidebar.on('click', function () {
if ($showSidebar.html() == '<span>//</span> CLOSE') {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
} else {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
$showSidebar.html('<span>//</span> CLOSE');
}
});

I think you are looking for the .toggle() command:
$showSidebar.toggle(function() {
$wrapper.stop().animate({ left: "-178px" }, 300);
$sidebarSlider.stop().animate({ width: "452px" }, 300);
$latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
}, function() {
$wrapper.stop().animate({ left: "0" }, 300);
$sidebarSlider.stop().animate({ width: "274px" }, 300);
$latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});

I don't think $.click() takes 2 functions as parameters. Did you try taking the second function out? If you're trying to toggle between the two, you might have to write something with an if-else in there.
EDIT: Ah, or use .toggle().

Try using bind(), I've found that more reliable across browsers.
http://api.jquery.com/bind/
basic usage in your case would be (untested):
$showSidebar.bind('click', function() {
// do stuff
});

Jquery animation not working in IE7

I'm in the process of finishing up a site and just working on making it ie7 compat, however theres one basic script that moves 3 tabs up/down and it's failing to work what so ever. the code is below.
$(document).ready(function() {
$('.lower').click(function() {
$('#range-dropdown').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown2').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown3').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
$('.lower1').click(function() {
$('#range-dropdown2').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown3').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
$('.lower2').click(function() {
$('#range-dropdown3').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown2').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
});
any help would be greatly appreciated
*all css values are declared in the stylesheet.

You have stray trailing commas all over the place, for example:
$('#range-dropdown').animate({
top: '315', // <----------------- Right here
}, 2000, function() {});
Remove those so that it looks like this:
$('#range-dropdown').animate({
top: '315'
}, 2000, function() {});
IE7 gets upset by those trailing commas but most other browsers let it slide and DWIM (Do What I Mean) instead of complaining.

Try explicitly stating the units. You are saying '315', but what units is that in? Feet? Meters? Centimeters? Use '315px', as it explicitly states the units.
Also, you don't need to write function() {} over and over. Just omit it completely.