I'm using Jquery-SimpleSlider to make a lightbox out of a group of images each with its respective description.
As you can see in this demo the box has a white space for the description next to the image,
i want to add html code (a bunch of divs to add a title, a descriptiom, price etc) in there instead of the description thats already there but i can't figure out how to do it.
I've tried a couple of things but no success
Here is the relevant html
<ul class="product-gallery">
<li class="gallery-img">
<img src='uploads/img1.jpg' alt="img01">
<div data-desc="Image Descript 1"></div>
</li>
<li class="gallery-img" style="display: none;">
<img src='uploads/img2.jpg' alt="img02">
<div data-desc="Image Descript 2"></div>
</li>
<li class="gallery-img" style="display: none;">
<img src='uploads/img3.jpg' alt="img03">
<div data-desc="Image Descript 3"></div>
</li>
<li class="gallery-img" style="display: none;">
<img src='uploads/img4.jpg' alt="img04">
<div data-desc="Image Descript 4"></div>
</li>
</ul>
This is the div containing the text that appears next to the image, but it's inside an attribute so I can't put html in it, or can i?
<div data-desc="Image Descript 4"></div>
Here is the Simpleslide js file
(function ($) {
jQuery.fn.Am2_SimpleSlider = function () {
//popup div
$div = $('<div class="product-gallery-popup"> <div class="popup-overlay"></div> <div class="product-popup-content"> <div class="product-image"> <img id="gallery-img" src="" alt="" /> <div class="gallery-nav-btns"> <a id="nav-btn-next" class="nav-btn next" ></a> <a id="nav-btn-prev" class="nav-btn prev" ></a></div> </div><div class="product-information"> <p class="product-desc"></p> </div> <div class="clear"></div>X</div></div>').appendTo('body');
//on image click
$(this).click(function () {
$('.product-gallery-popup').fadeIn(500);
$('body').css({ 'overflow': 'hidden' });
$('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src'));
$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));
$Current = $(this);
$PreviousElm = $(this).prev();
$nextElm = $(this).next();
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//on Next click
$('.next').click(function () {
$NewCurrent = $nextElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//on Prev click
$('.prev').click(function () {
$NewCurrent = $PreviousElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//Close Popup
$('.cross,.popup-overlay').click(function () {
$('.product-gallery-popup').fadeOut(500);
$('body').css({ 'overflow': 'initial' });
});
//Key Events
$(document).on('keyup', function (e) {
e.preventDefault();
//Close popup on esc
if (e.keyCode === 27) { $('.product-gallery-popup').fadeOut(500); $('body').css({ 'overflow': 'initial' }); }
//Next Img On Right Arrow Click
if (e.keyCode === 39) { NextProduct(); }
//Prev Img on Left Arrow Click
if (e.keyCode === 37) { PrevProduct(); }
});
function NextProduct() {
if ($nextElm.length === 1) {
$NewCurrent = $nextElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
}
}
function PrevProduct() {
if ($PreviousElm.length === 1) {
$NewCurrent = $PreviousElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
}
}
};
} (jQuery));
I have also tried changing the pop up div($div) in the JS file (line 5) adding another 'p' element next to the already existing 'p' element that has the description in it and added another div in the html file with data-title="title" in it instead of data-desc="......". I also added this line:
$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));
inside //onimageclick replacing data-desc with data-title but it didn't work either
Any suggestions?
Somewhere in the code you have this line:
$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));
Why don't just edit this line and use the DIV element content instead of the data-desc attribute? It would be like
$('.product-popup-content .product-information p').text($(this).find('div').html());
If you are concerned about the div content being shown you can hide it by CSS
Related
When i click on .mfp-img the event does not trigger up to .mfp-wrap and is stoped in .mfp-container and i can not understand why this is happening.
var clickedImgIndex;
$(".galleryList").magnificPopup({
delegate: ".zoomOnHover" ,
type: "image" ,
gallery: { enabled : true } ,
removalDelay : 650 ,
image: {
cursor: 'mfp-zoom-out-cur',
titleSrc: function(item){
clickedImgIndex = item.index;
return "<small>Photo Title</small>";
} ,
verticalFit: true
}
});
$(".zoomOnHover").click(function(){
var boundPositionImg = positionImg.bind(this);
setTimeout(boundPositionImg,0);
});
function positionImg() {
var mfpContent = $(".mfp-content") ,
link = $(this) ,
linkWidth = link.outerWidth() ,
linkX = link.offset().left ,
linkY = link.offset().top ,
mfpContentWidth = mfpContent.outerWidth(),
closeAndBar = $(".mfp-close , .mfp-bottom-bar");
closeAndBar.css({
opacity:0
});
mfpContent.css({
width: linkWidth + "px" ,
visibility: "visible"
});
mfpContent.offset({
top: linkY - 40 ,
left: linkX
});
mfpContent.animate({
width: mfpContentWidth + "px" ,
top:0 ,
left:0
} , 500);
setTimeout(function(){
closeAndBar.css({
opacity:1
});
} , 750);
zoomOnHovers = link.closest(".pageContent").find(".zoomOnHover") ;
$(".mfp-wrap").click(function(e){
console.log("Wrap event triggered");
var arrows = $(".mfp-arrow-right , .mfp-arrow-left") ,
currentLink = zoomOnHovers.filter(":eq(" + clickedImgIndex + ")") ,
target = e.target ,
mfpFigure = $(".mfp-figure");
if( (target !== arrows[0]) && (target !== arrows[1]) && (target !== mfpContent[0]) ){
linkWidth = currentLink.outerWidth();
linkX = currentLink.offset().left;
linkY = currentLink.offset().top;
closeAndBar.css({
opacity:0
});
mfpContent.css({
width: linkWidth + "px" ,
position: "static"
});
mfpContent.offset({
top: linkY - 40 ,
left: linkX
});
}
else{
mfpContent.css({
width: ""
});
mfpContent.css({
width : mfpContent.outerWidth() + "px"
});
}
});
}
a{
display:block;
}
ul{
list-style-type:none;
padding:0;
margin:0;
}
img{
max-width:100%;
}
.filter-gallery{
width:25%;
float:left;
}
.mfp-content{
visibility: hidden;
transition: all 0.5s ease-out;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<meta name = "viewport" content = "width=device-width,initial-scale=1,shrink-to-fit=no" />
</head>
<body>
<section class="pageContent">
<div class="galleryList">
<ul class="clearfix">
<li class="filter-gallery">
<a class="zoomOnHover" href="http://demo.themesurf.com/plumbing/image/gallery/g8-lg.jpg">
<div class="item">
<img src="http://demo.themesurf.com/plumbing/image/gallery/g8-lg.jpg" alt="">
</div>
</a>
</li>
<li class="filter-gallery">
<a class="zoomOnHover" href="http://demo.themesurf.com/plumbing/image/gallery/g7-lg.jpg">
<div class="item">
<img src="http://demo.themesurf.com/plumbing/image/gallery/g7-lg.jpg" alt="">
</div>
</a>
</li>
<li class="filter-gallery">
<a class="zoomOnHover" href="http://demo.themesurf.com/plumbing/image/gallery/g4-lg.jpg">
<div class="item">
<img src="http://demo.themesurf.com/plumbing/image/gallery/g4-lg.jpg" alt="">
</div>
</a>
</li>
<li class="filter-gallery">
<a class="zoomOnHover" href="http://demo.themesurf.com/plumbing/image/gallery/g1-lg.jpg">
<div class="item">
<img src="http://demo.themesurf.com/plumbing/image/gallery/g1-lg.jpg" alt="">
</div>
</a>
</li>
</ul>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
</body>
</html>
As you see, when image is clicked no log is displayed but by clicking on left and right arrows and close button the log is displayed and event is triggered to .mfp-wrap.
Why is this happening and how can i fix it?
Thanks
$(document).ready(function() {
$('#input').focusin(function() {
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
});
});
$('#input').focusout(function() {
$('#div').hide();
});
});
#div {
display: none;
position: absolute;
bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='website.com'>Link From AJAX<a>
<a href='website.com'>Link From AJAX<a>
<a href='website.com'>Link From AJAX<a>
</div>
<input id='input' type='text'>
In this jquery code, the #div shows when i type something inside the #input but if i tried to click on the #div it disappears and the link doesn't work,
How can i keep the #div shown if i clicked on #div or #input only, But anything outside will hide it as normal?
The Problem happens because of position: absolute; bottom 20px line in CSS.
Updated the code and suddenly it worked as intended after adding if statement after .focusin function, For previous error solution, remove the position and bottom in the CSS
You could disable the effect of the focusout handler by the use of a flag:
var noHide = false;
$(document).ready(function() {
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
});
$('#div a').hover(
function() { noHide = true; },
function() { noHide = false; $('#input').focus(); }
);
$('#input').focusout(function() {
if(!noHide) {
$('#div').hide();
}
});
});
#div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='#'>HellWorld</a>
</div>
<input id='input' type='text'>
When you blur out of the input, check if the currently active element is the DIV, and hide it if it isn't.
Also, if you're positioning an element absolutely, you need to give it a z-index so you can click on it. Otherwise, the click is sent to the normally-positioned element at that location.
$(document).ready(function() {
$('#input').focus(function() {
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
}).blur(function() {
if (!$("#div").is(":focus,:active")) {
$("#div").hide();
}
});
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
var search = $('#input').val();
$.post('search.php', {
search: search
}, function(data) {
$('#div').html(data);
});
});
});
#div {
display: none;
position: absolute;
bottom: 20px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='www.someplace.com'>HellWorld</a>
</div>
<input id='input' type='text'>
I am working on an image slideshow, and the fadeOut() functionality working with every image change, but the next image appears abruptly. I want it to fade in. I can't seem to get it working.
Here is the code without any fadeIn():
HTML:
<div id="backgroundChanger">
<img class="active" src="background1.jpg"/>
<img src="background2.jpg"/>
<img src="background3.jpg"/>
CSS:
#backgroundChanger{
position:relative;
}
#backgroundChanger img{
position:absolute;
z-index:-3
}
#backgroundChanger img.active{
z-index:-1;
}
Javascript:
function cycleImages(){
var $active = $('#backgroundChanger .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#backgroundChanger img:first');
$next.css('z-index',-2);
$active.fadeOut(1500,function(){
$active.css('z-index',-3).show().removeClass('active');
$next.css('z-index',-1).addClass('active');
});
}
$(document).ready(function(){
setInterval('cycleImages()', 7000);
})
I'd recommend something like this for your interval function:
window.setInterval(function (){
var images = $('#backgroundChanger img');
var active, next;
images.each(function(index, img) {
if($(img).hasClass('active')) {
active = index;
next = (index === images.length - 1) ? 0 : index + 1;
}
});
$(images[active]).fadeOut(1000, function() {
$(images[next]).fadeIn(1000);
});
$(images[next]).addClass('active');
$(images[active]).removeClass('active');
}, 3000);
And this is all you'd need for your css:
#backgroundChanger img:first-child {
display: block;
}
#backgroundChanger img {
display: none;
}
And keep the same HTML and you should be good to go!
You can fadeIn() the next image in the callback of fadeOut() as shown below:
$(window).load(function() {
var $slider = $("#backgroundChanger"),
$slides = $slider.find("img"),
$firstSlide = $slides.first();
function cycleImages() {
var $active = $('#backgroundChanger .active'),
$next = ($active.next().length > 0) ? $active.next() : $firstSlide;
$active.fadeOut(1000, function() {
$active.removeClass('active');
$next.fadeIn(1000).addClass('active');
});
}
setInterval(cycleImages, 3000);
})
#backgroundChanger img {
position: absolute;
width: 150px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundChanger">
<img class="active" src="http://i46.tinypic.com/2epim8j.jpg" />
<img src="http://i49.tinypic.com/28vepvr.jpg" />
<img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
Notes:
Since we're dealing with images, It's better to use load() handler than ready() to make sure the slide show starts after the images are loaded
You can slightly improve the performance by caching the elements accessed frequently
You don't have to play with z-index property at all since both fadeIn() and fadeOut() changes the elements `display property itself
I've written an image scroller in html/css/js, a very simple one: right button is clicked, I go through all images inside "holder"-div and change the class of the image after the one with classname="current".
But that's not where the problem lies, I think. Whenever I successively click on the left or the right button, the image in the div gets selected (blue selection box). If I successively click the left button, even the text above it gets selected.
<div class="grid_4 omega image_box">
<div id="txt_choose" class="image_txt">
this is helpful text
</div>
<div id="alt_spacer"></div>
<div id="image_content" class="image_content" onclick="chooseImageType(this)">
<div id="current" class="current"><img src="images/default1.png" /></div>
<div id="current" class="hidden"><img src="images/default2.png" /></div>
</div>
<!--- left button --->
<div class="image_btn_left" onclick="showPrev()"></div>
<!--- right button --->
<div class="image_btn_right" onclick="showNext()"></div>
</div>
and this is the css:
.image_btn_right
{
width : 20px;
height : 20px;
position : relative;
float : left;
margin-top : -170px;
margin-left : 260px;
z-index : 4;
cursor : pointer;
background-image: url('../images/right.png');
}
.image_btn_left
{
width : 20px;
height : 20px;
position : relative;
float : left;
margin-top : -170px;
margin-left : 20px;
z-index : 4;
cursor : pointer;
background-image: url('../images/left.png');
}
.image_content
{
height : 280px;
background-color: white;
margin : 10px;
}
on request, my javascript:
function showNext()
{
//vars
var shown = false;
var current;
$('#image_content > div').each(function()
{
if($(this).attr('class') == "current")
{
current = $(this);
shown = true;
}
else if($(this).attr('class') == "hidden" && shown == true)
{
current.hide();
current.attr('class', 'prev');
current.attr('id', '');
$(this).show();
$(this).attr('class', 'current');
$(this).attr('id', 'current');
shown = false;
}
});
}
Is there anyway to stop the image and the text above to be selected like that (without actually making them not selectable)?
Could it be because of the relative position of the buttons and their z-index..?
This works in your JS fiddle.
function showNext()
{
//vars
var shown = false;
var current;
window.getSelection().removeAllRanges();
$('#image_content > div').each(function()
{
if($(this).attr('class') == "current")
{
current = $(this);
shown = true;
}
else if($(this).attr('class') == "hidden" && shown == true)
{
current.hide();
current.attr('class', 'prev');
current.attr('id', '');
$(this).show();
$(this).attr('class', 'current');
$(this).attr('id', 'current');
shown = false;
}
});
}
function showPrev()
{
window.getSelection().removeAllRanges();
//vars
var prev_present = false;
var prev;
$('#image_content > div').each(function()
{
if($(this).attr('class') == "prev")
{
prev = $(this);
prev_present = true;
}
else if($(this).attr('class') == "current" && prev_present == true)
{
$(this).hide();
$(this).attr('class', 'hidden');
$(this).attr('id', '');
prev.show();
prev.attr('class', 'current');
prev.attr('id', 'current');
prev_present = false;
}
});
}
best regards
Jonas
I found the answer and it was painfully easy.. >_>
I just needed to wrap the buttons in another div, so they became more eperated from the rest of the html.
Like so:
<div>
<!--- left button --->
<div class="image_btn_left" onclick="showPrev()"></div>
<!--- right button --->
<div class="image_btn_right" onclick="showNext()"></div>
</div>
I want to just click a button create my object which is a form but when the button fires it loads the form. My constructor could all be wrong so if you find any faults or suggestions they would be appreciated. I've commented my code where Im having trouble
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
current = jQuery('.wikiform .wizard :first');
var width = 0;
function positionForm() {
jQuery('.wikiform .wizard .view').each(function () { width += jQuery(this).width() });
jQuery('body')
.css('overflow-y', 'hidden');
jQuery('<div id="overlay"></div>')
.insertBefore('.wikiform')
.css('top', jQuery(document).scrollTop())
.animate({ 'opacity': '0.8' }, 'slow');
jQuery('.wikiform')
.css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height() + 10)
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width() + 10)
.css('left', -jQuery('.wikiform').width())
.css('overflow', 'hidden')
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('width', width)
.css('height', jQuery('.wikiform .wizard .view:first').height());
}
if (this.Mode == "Wizard") {
return this.each(function () {
/* <-- this function here not binding */
jQuery(this).bind('load', function (){
positionForm();
});
jQuery('.wikiform .navigation input[name^=Next]').click(function () {
if (current.next().length == 0) return;
jQuery('.wikiform .wizard').animate({ marginLeft: '-=' + current.width() + "px" }, 750, null, function () {
current = current.next();
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function () {
if (current.prev().length == 0) return;
jQuery('.wikiform .wizard').animate({ marginLeft: '+=' + current.prev().width() + 'px' }, 750, null, function () {
current = current.prev();
});
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
/*
jQuery(window).bind("load", function () {
});
*/
jQuery('button[name=button1]').bind('click', function (e) {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed: 750, ease: "expoinout" });
/* problem here initalizing the load */
e.preventDefault();
});
});
</script>
<style type="text/css">
* { margin: 0; padding: 0 }
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute; display:block;
}
.wizard
{
overflow:hidden;
}
.wizard .panel
{
}
.view
{
float:left;
}
.wizard .panel .view
{
float:left;
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:400px;
height:400px;
}
#view3
{
background-color:Lime;
width:300px;
height:300px;
}
</style><form action="" method="">
<div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
<button id="button1" name="button1" value="1"> Click Me! </button>
</div>
<div id="footer">
Footer
</div>
</div>
<div id="formView1" class="wikiform">
<div class="wizard">
<div id="view1" class="view">
<div class="form">
Content 1
</div>
</div>
<div id="view2" class="view">
<div class="form">
Content 2
</div>
</div>
<div id="view3" class="view">
<div class="form">
Content 3
</div>
</div>
</div>
<div class="navigation">
<input type="button" name="Back" value=" Back " />
<input type="button" name="Next " class="Next" value=" Next " />
<input type="button" name="Cancel" value="Cancel" />
</div>
</div>
Could you just place the call to positionForm() at the end of the initialization code? Something like this:
if (this.Mode == "Wizard") {
return this.each(function() {
jQuery('.wikiform .navigation input[name^=Next]').click(function() {
if (current.next().length == 0) return;
jQuery('.wikiform .wizard').animate({
marginLeft: '-=' + current.width() + "px"
}, 750, null, function() {
current = current.next();
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function() {
if (current.prev().length == 0) return;
jQuery('.wikiform .wizard').animate({
marginLeft: '+=' + current.prev().width() + 'px'
}, 750, null, function() {
current = current.prev();
});
});
positionForm();
});
}
I updated your code in a fiddle here: http://jsfiddle.net/andrewwhitaker/vztcq/
Edit: To center your modal dialog vertically, use $(window).height() instead of window.screen.availHeight when calculating the vertical position. See jQuery's documentation for height for more info. Updated fiddle here: http://jsfiddle.net/andrewwhitaker/bBCeq/
A few other things I noticed:
You could be using $ instead of jQuery inside of your plugin code. The anonymous function that sets up the plugin takes a parameter called $ and takes jQuery in as a parameter. This will make your code a little more readable, in my opinion.
When you're setting multiple CSS rules with jQuery, you can use an object that defines multiple properties: $(..).css({'width': '10px', 'height': '10px'}); for example.
Make sure your <form> has an ending </form>. In the code you posted the closing tag was missing.
Cache commonly used queries (e.g. var $wikiForm = $(".wikiform"))
Use id selectors rather than class selectors whenever possible.