Try to see the following jsFiddle
http://jsfiddle.net/TtSub/1/
When i drag the "splitter" element it does not stay in place.
What am I missing here?
Html
<div id="start"></div>
<div id="stop"></div>
<div id="container">
<div id="index" class="float"></div>
<div id="splitter" class="float"> </div>
<div id="content" class="float"></div>
</div>
Css
#container
{
width:600px;
height:400px;
}
#index
{
width:200px;
height:400px;
background-color:#dedede;
}
#splitter
{
width:5px;
height:400px;
cursor:w-resize;
background-color:#fff;
}
#content
{
width:395px;
height:400px;
background-color:#d1d1d1;
}
.float
{
float:left;
}
Javascript
jQuery(document).ready(function () {
$("#splitter").draggable({
axis: "x",
start: function (event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
var startLeft = (Startpos.left - $("#container").position().left);
var startRight = (startLeft + $("#splitter").outerWidth());
$("#start").text("START: \nLeft: " + startLeft + "\nTop: " + startRight);
},
stop: function (event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var stopLeft = (Stoppos.left - $("#container").position().left);
var stopRight = (stopLeft + $("#splitter").outerWidth());
$("#stop").text("STOP: \nLeft: " + stopLeft + "\nTop: " + stopRight);
$("#index").css({ "width": stopLeft });
$("#content").css({ "width": ($("#container").outerWidth() - stopRight) });
}
});
});
I found a solution, by changing css to absolute position and change html and javascript a little
Javascript
<script type="text/javascript">
jQuery(document).ready(function () {
$("#splitter").draggable({
axis: "x",
containment: "parent",
start: function (event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
var startLeft = ($("#container").position().left - Startpos.left);
var startRight = (startLeft + $("#splitter").outerWidth());
$("#start").text("START: \nLeft: " + startLeft + "\nTop: " + startRight);
},
stop: function (event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var stopLeft = (Stoppos.left);
var stopRight = (stopLeft + $("#splitter").outerWidth());
$("#stop").text("STOP: \nLeft: " + stopLeft + "\nTop: " + stopRight);
$("#index").css({ "width": stopLeft });
$("#splitter").css({ "left": stopLeft });
$("#content").css({ "width": ($("#container").outerWidth() - stopRight), "left": stopRight });
}
});
});
</script>
Css
<style>
#container
{
width:1200px;
height:600px;
position:relative;
}
#index
{
width:200px;
height:600px;
position:absolute;
left:0;
background-color:#dedede;
}
#splitter
{
width:5px;
height:600px;
cursor:w-resize;
position:absolute;
left:200px;
background-color:#fff;
z-index:1;
}
#content
{
width:995px;
height:600px;
position:absolute;
left:205px;
background-color:#d1d1d1;
}
</style>
Html
<div id="start"></div>
<div id="stop"></div>
<div id="container">
<div id="index"></div>
<div id="splitter"></div>
<div id="content"></div>
</div>
Related
I have a problem. I'm creating a divs from input form, but when I hover my mouse with .hover function, it works only on every second div element (first, third, 5th, 7th...). How do I solve that? What's wrong with JS function?
Thanks for answers.
JS:
$("#entryButton").click(function(){
event.preventDefault(); //stops refreshing
var query = $("#entry").val(); //string z inputa
if (query !== "") {
var trashButton = "<button class='trash'>DEL</button>"
var registry = "<div class='drag'>" + "<p>" + query + "</p>" + trashButton + "</div>"
$("#list").append(registry); //add div with query and ubbton
$("#list").sortable({
//axis: "y",
});
$(".drag").hover(function() {
$(this).toggleClass("mousehover")
});
$("#entry").val(""); //clear value
return false; //also stops refreshing
console.log(registry);
}
})
HTML:
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>
CSS:
body {
font-size: 14px;
}
form {
float:right;
}
.container {
min-width:300px;
width:20%;
margin: 0 auto;
margin-top:5px;
}
.drag {
margin-top:5px;
background-color:lemonchiffon;
display:inline-flex;
width:100%;
}
.trash {
position:absolute;
margin-left:190px;
}
.mousehover {
opacity:0.5;
}
The problem is that you are adding the hover event multiple times. It is better to do it only once, using $(document).on().
$("#entryButton").click(function(){
event.preventDefault(); //stops refreshing
var query = $("#entry").val(); //string z inputa
if (query !== "") {
var trashButton = "<button class='trash'>DEL</button>"
var registry = "<div class='drag'>" + "<p>" + query + "</p>" + trashButton + "</div>"
$("#list").append(registry); //add div with query and ubbton
$("#list").sortable({
//axis: "y",
});
$("#entry").val(""); //clear value
return false; //also stops refreshing
console.log(registry);
}
});
$(document).on("mouseenter mouseleave", ".drag", function() {
$(this).toggleClass("mousehover");
});
body {
font-size: 14px;
}
form {
float:right;
}
.container {
min-width:300px;
width:20%;
margin: 0 auto;
margin-top:5px;
}
.drag {
margin-top:5px;
background-color:lemonchiffon;
display:inline-flex;
width:100%;
}
.trash {
position:absolute;
margin-left:190px;
}
.mousehover {
opacity:0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>
Here you go with a solution https://jsfiddle.net/wcu4w1mn/
$("#entryButton").click(function(){
event.preventDefault(); //stops refreshing
var query = $("#entry").val(); //string z inputa
if (query !== "") {
var trashButton = "<button class='trash'>DEL</button>"
var registry = "<div class='drag'>" + "<p>" + query + "</p>" + trashButton + "</div>"
$("#list").append(registry); //add div with query and ubbton
$("#list").sortable({
//axis: "y",
});
$(".drag").last().hover(function() {
$(this).toggleClass("mousehover")
});
$("#entry").val(""); //clear value
return false; //also stops refreshing
console.log(registry);
}
})
body {
font-size: 14px;
}
form {
float:right;
}
.container {
min-width:300px;
width:20%;
margin: 0 auto;
margin-top:5px;
}
.drag {
margin-top:5px;
background-color:lemonchiffon;
display:inline-flex;
width:100%;
}
.trash {
position:absolute;
margin-left:190px;
}
.mousehover {
opacity:0.5;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>
Only changed code
Add hover event to only last added element.
$(".drag").last().hover(function() {
$(this).toggleClass("mousehover")
});
Hope this will help you.
I programmed an img element to "fall" down the window with parseInt(its.style.top) triggered by a setInterval(fall,1000) function in the body.
An error occurs after the Moves() function is triggered, and the fall() function stops being called. Is there an if-statement for Moves() function to call the setInterval(fall,1000) again after the img s.style.left >= r.style.width??
Thanks! :-)
<html>
<body onload="setInterval(fall,1000)" onkeydown="Moves()">
<img id="square" style="position:absolute; left:10px; top:0px;
width:50px; height:50px; background-color:red;" />
<img id="rectangle" style="position:absolute; left:10px; top:130px;
width:150px; height:10px; background-color:blue;" />
<script>
function fall(){
var s = document.getElementById("square");
s.style.top = parseInt(s.style.top) + 25 + 'px';
var r = document.getElementById("rectangle");
r.style.top=130 + 'px';
if(s.style.top>=r.style.top){s.style.top=r.style.top;}
}
function Moves(){
var s = document.getElementById("square");
if (event.keyCode==39) {
s.style.left = parseInt(s.style.left)+10+'px';}
var r = document.getElementById("rectangle");
r.style.width=150 + 'px';
if(s.style.left>=r.style.width){setInterval(fall,1000);}
}
</script>
</body> </html>
I believe this is what you were trying to do:
<html>
<body onload="setTimeout(fall,1000)" onkeydown="Moves()">
<img id="square" style="position:absolute; left:10px; top:0px;
width:50px; height:50px; background-color:red;" />
<img id="rectangle" style="position:absolute; left:10px; top:130px;
width:150px; height:10px; background-color:blue;" />
<script>
var over_edge = false;
var can_fall = true;
function fall(){
var s = document.getElementById("square");
s.style.top = parseInt(s.style.top) + 25 + 'px';
var r = document.getElementById("rectangle");
//r.style.top=130 + 'px';
if(!over_edge) {
if(parseInt(s.style.top) >= parseInt(r.style.top) - parseInt(s.style.height)) {
s.style.top = parseInt(r.style.top) - parseInt(s.style.height);
can_fall = false;
}
}
if(can_fall || over_edge)
setTimeout(fall, 1000);
}
function Moves(){
var s = document.getElementById("square");
if (event.keyCode==39) {
s.style.left = parseInt(s.style.left)+10+'px';}
var r = document.getElementById("rectangle");
//r.style.width=150 + 'px';
if(parseInt(s.style.left) >= parseInt(r.style.left) + parseInt(r.style.width)) {
if(!over_edge) {
over_edge = true;
fall(); // trigger falling over the edge but only once
}
}
}
</script>
</body>
</html>
I am using lazyYT to load youtube video's faster. The loaded lazyYT videos are then placed in the slick slider. What then happens is that the video's are sticking together instead of a nice margin between every video. So I manually added a class to the video div
<div class="js-lazyYT" id="video-slide" data-youtube-id="<?php echo $video['video_link']; ?>" data-width="500" data-height="425"></div>
and gave it a margin which is working fine until the first video comes loaded back again. They paste together until all three first video's are visible again.
#video-slide{
width: 500px !important;
height: 425px !important;
margin-right: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
It looks like the first 3 entries in the slider reload the slider again when they are visible. Any idea?
;(function ($) {
'use strict';
function setUp($el) {
var width = $el.data('width'),
height = $el.data('height'),
ratio = $el.data('ratio'),
id = $el.data('youtube-id'),
aspectRatio = ['16', '9'],
paddingTop = 0,
youtubeParameters = $el.data('parameters') || '';
if (typeof width === 'undefined' || typeof height === 'undefined') {
height = 0;
width = '100%';
aspectRatio = (ratio.split(":")[1] / ratio.split(":")[0]) * 100;
paddingTop = aspectRatio + '%';
}
$el.css({
'position': 'relative',
'height': height,
'width': width,
'padding-top': paddingTop,
'background': 'url(http://img.youtube.com/vi/' + id + '/hqdefault.jpg) center center no-repeat',
'cursor': 'pointer',
'background-size': 'cover'
})
.html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>')
.addClass('lazyYT-image-loaded');
$.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) {
$('#lazyYT-title-' + id).text(data.entry.title.$t);
});
$el.on('click', function (e) {
e.preventDefault();
if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
$el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe>')
.removeClass('lazyYT-image-loaded')
.addClass('lazyYT-video-loaded');
}
});
}
$.fn.lazyYT = function () {
return this.each(function () {
var $el = $(this).css('cursor', 'pointer');
setUp($el);
});
};
}(jQuery));
I was looking at the lazyYT site and found their example:
<div class="container">
<div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>
Given that, you might try:
.myclass {
margin-left: 5px;
}
<div class="container">
<div class="js-lazyYT myclass" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>
or
<div class="container">
<div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"> style='margin-left: 5px'</div>
</div>
or
.myclass div {
margin-left: 5px;
}
<div class="container myclass">
<div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>
How to create circular animation with different objects using jQuery. I have tried myself but the issue is that my scrip is not running smoothly.
I want this animate but in smooth way:
Efforts :
http://jsfiddle.net/eT7SD/
Html Code
<div id="apDiv1"><p><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/></p></div>
<div id="apDiv2"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZv4hqGcyV6OqP0hI3uAiQVwHHgPuqcTl2NppFRyvbxXLVokbs" width="200" height="115" id="img-2"/></p></div>
<div id="apDiv3"><p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQaplzZIaF-uTQKnvfK9N9i-Rg27F6aHtSchQZaGR-DITgO1bDwzA" width="200" height="115" id="img-3"/></p></div>
<div id="apDiv4"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjTbe5WfEnT840gIChKfbzlVnoPPoZsyrT4zjMReym9YpsRdOFvA" width="200" height="115" id="img-4"/></p></div>
<div id="apDiv5"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWtiMAcxGe-RQw2gRwUUiyB5aRTMeVMG5LSCPF0Qpzes-USpgyTw" width="200" height="115" id="img-5"/></p></div>
<div id="apDiv6"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXDhOygDcNsNVsv0eIXLYdBx4C-tmedIRhFfxGlCoCfNy04YU_" width="200" height="115" id="img-6"/></p></div>
<div id="apCenterDiv"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR42cgsKsYMWey79jT0XsTkMOyxc9oej9fVt-udxQvnVFOadpPQ" width="200" height="115" /></div>
Css Code
<style type="text/css">
#apCenterDiv {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 571px;
top: 209px;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 570px;
top: 4px;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 821px;
top: 134px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 822px;
top: 328px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 572px;
top: 385px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 319px;
top: 329px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:7;
left: 319px;
top: 135px;
}
</style>
Script
<script>
$(document).ready(function(e) {
setInterval(function() {
var imgfirstSrc = $("#img-1").attr("src");
var imgSecSrc = $("#img-2").attr("src");
var imgthirdSrc = $("#img-3").attr("src");
var imgfourthSrc = $("#img-4").attr("src");
var imgfifthSrc = $("#img-5").attr("src");
var imgsixthSrc = $("#img-6").attr("src");
$("#img-2").attr("src",imgfirstSrc);
$("#img-3").attr("src",imgSecSrc);
$("#img-4").attr("src",imgthirdSrc);
$("#img-5").attr("src",imgfourthSrc);
$("#img-6").attr("src",imgfifthSrc);
$("#img-1").attr("src",imgsixthSrc);
},1000);
});
</script>
EDIT
I have to add more animation with click/stop events. When user click the red image place of 270 they have to replace the place of 90 and animation will be stop; for more clarification you have to see the image below. I have tried #Cristi Pufu code but I want more modification
Efforts
http://jsfiddle.net/SaNtf/
Using jQuery Animation: http://jsfiddle.net/eT7SD/6/
Using mathand jQuery : http://jsfiddle.net/eT7SD/7/
Using CSS3 Rotation (just for fun): http://jsfiddle.net/dMnKX/
Just add a class 'box' to your animating divs like in the fiddle and use this js:
$(document).ready(function(e) {
var animate = function(){
var boxes = $('.box');
$.each(boxes, function(idx, val){
var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();
$(val).animate({
"left" : coords.left,
"top" : coords.top
}, 1500, function(){})
});
}
animate();
var timer = setInterval(animate, 2000);
});
EDIT:
$(document).ready(function(e) {
var angles = [90, 45, 315, 270, 225, 135];
var unit = 215;
var animate = function(){
$.each($('.box'), function(idx, val){
var rad = angles[idx] * (Math.PI / 180);
$(val).css({
left: 550 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
angles[idx]--;
});
}
var timer = setInterval(animate, 10);
});
You have to change the left, top, width, height properties of boxes, standardize them, set the correct unit (circle radius) and initial angles. But for a preview, i think this is what you want (just needs a little more work).
Example: http://jsfiddle.net/eT7SD/7/
Visual understanding of angles:
Just use CSS3 to rotate the image:
html
<div id='container'>
... (all your images here)
</div>
javascript:
<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
setInterval(function() {
$("#container").css("transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
window.myRotation +=20;
},50);
});
</script>
Well I tried out something, I think it could work
NOTE: this is not the complete code and only an example of how it could work
FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/
NEW FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 images)
I used .position() from jQuery to get the positions of div1 - div6.
Then moved the image there using .animate().
http://api.jquery.com/position/
http://api.jquery.com/animate/
HTML
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/>
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>
JavaScript
$(document).ready(function(e) {
var i = 1;
var j = 2;
setInterval(function() {
if(i===7){i=1;}
if(j===7){j=1;}
var divd = $("#apDiv"+i).position();
var divds = $("#apDiv"+j).position();
$("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
$("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
i++;j++;
},1000);
});
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.