We Keep Coding

Faded text not reappearing

I'm working on a random wiki viewer, and its been a slog, but i'm finally at the point where i think that at least the UI's functionality is done. The only problem is that after i fade some text on the "random" button, and replace it with an iframe which is then removed when the button is clicked again, the text doesn't seem to fade back in. Any ideas?
https://codepen.io/EpicTriffid/pen/WOYrzg
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").animate({opacity:0});
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$("#cross1").fadeOut('fast');
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
};
};
});

You are emptying the HTML of .button1 when you do:
$(".button1").html(....
In order to get it back, you need to add:
$(".button1").html('<div class="b1text">Random</div>');
after
$('.randframe').remove();

Your button is missing the text Random
When you call:
$(".button1").html(...
you are replacing the inside html of the object with the iframe.
When you remove .randframe you need then re-add the text for your button.
Instead of:
$('.randframe').remove()
you can call this which will accomplish both:
$('.button1').html('random');
Efficiency tip: You did a good job of saving references to your jquery variables but and cross, why not use them?
but.html(...
cross.click(function (){...

This line effectively replaces whatever you have in the button 1 div
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
Your cross1.click function does not re-populate the button1 div, I would recommend
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$('.button1').html('Random');
$("#cross1").fadeOut('fast');
$(".b1text").animate({opacity:"1"});
});

Here you go with the solution https://codepen.io/Shiladitya/pen/WOLNpw
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").fadeOut();
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
but.removeAttr('style');
cross.fadeOut('fast');
$('.randframe').remove();
but.html('<div class="b1text">Random</div>');
});
};
};
});
//Search Button
var but2 = "closed"
$(".button2").click(function () {
var but = $(".button2");
var btext = $(".b2text");
var cross = $("#cross2");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
btext.fadeOut();
cross.delay(2000).fadeIn()
but2 = "open"
$("#cross2").click(function() {
$('.button2').removeAttr('style');
$('.b2text').fadeIn(1500);
$("#cross2").fadeOut('fast');
})
})
});
#spacer {
margin:0;
padding:0;
height:50px;
}
body {
min-height: 100%;
min-width: 1024px;
width:100%;
margin-top:4em;
padding:0;
background-color: teal;
}
h1 {
color:white;
font-family:"cabin";
text-align:center;
}
#cross1 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: left;
display:none;
}
#cross2 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: right;
display:none;
}
#randframe {
display:none;
}
.button1 {
position:absolute;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
.button2 {
position:absolute;
right:0;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Wiki Viewer</h1>
</div>
</div>
</div>
<div id="spacer"></div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="button1">
<div class="b1text">Random</div>
</div>
<div class="button2">
<div class="b2text">Search</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="text-center">
<i id="cross1" class="glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="col-xs-12">
<div class="text-center">
<i id="cross2" class="glyphicon glyphicon-remove"></i>
</div>
</div>
You need to keep the content inside the ".button1" to reuse after the iframe is removed.

Try using callbacks. So change your #cross1 fadout to
$("#cross1").fadeOut('fast',function(){
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
Also, this may not be affecting your code, but you're missing some semi colons after some variable declarations.
Not all methods have callbacks in JQuery, but when available, they are useful because basically it means that your code is not fired until the other thing is completely done. This happens a lot with fading and opacity.

Function prepend() jquery hover and counter click

I have a little problem with prepend() because if I "copy" my div and if click on counter the count change in whole divs the same is with hover. Is this possible change number count and hover only in clicked or hovered div?
Thank you for help and time:)
HTML
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
And javascript
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
var count = 0;
$(".count").click(function() {
count++;
$(".count").html(+count);
});
$(".background").on("mouseover", function() {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
$(".hover").fadeOut(200);
});
FIDDLE

Yes sure, use the current clicked element object $(this) :
$(this).html(+count);
Instead of :
$(".count").html(+count);
And use event delegation on() to attach click event to the new elements added dynamically to the DOM :
$("body").on('click',".count",function() {
count++;
$(this).html(+count);
});
To increment count separatelly for every div you should get the current count then add 1 to it, like :
$("body").on('click',".count",function() {
var count = parseInt( $(this).text() );
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$(this).text(count);
});
Hope this helps.
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
$("body").on('click',".count",function() {
var count = parseInt( $(this).text() );
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$(this).text(count);
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(this).fadeOut(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="count"> Click Me
</div>
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>

Here we are creating dynamic id for each prepend. And by sending that div id to the javascript function and using same count logic as #Zakaria Acharki used to maintain count value.
var divNumber = 1;
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="count" id="div'+divNumber+'" onclick="makeCount(this.id);">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
divNumber++;
});
function makeCount(id){
var count = parseInt( $("#"+id).text());
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$("#"+id).text(count);
}
$(".background").on("mouseover", function() {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
$(".hover").fadeOut(200);
});
.Wrap
{
width:650px;
height:800px;
}
.container
{
position:relative;
top:5px;
left:5px;
width:200px;
height:200px;
background-color:red;
float:left;
margin-left:5px;
margin-top:5px;
}
.AddDiv
{
position:absolute;
top:0px;
}
.count
{
position:absolute;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
background-color:white;
text-align:center;
line-height:100px;
cursor:pointer;
}
.background
{
width:20px;
height:20px;
background-color:green;
position:absolute;
left:170px;
top:10px;
}
.hover
{
width:200px;
height:200px;
background-color:rgba(255,255,255,0.8);
position:absolute;
z-index:1001;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="count" id="div0" onclick="makeCount(this.id);">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class=AddDiv>AddDiv</button>

Try .insertBefore() function:
check: https://jsfiddle.net/mpqtrjzx/
$( '<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>' ).insertBefore( ".container:first" );

hidden fixed top header if page scroll in the middle

I've made a header is fixed at the top with a fixed position, in which there is a logo and menu in the header. what i want to ask how to hide the logo when a user scrolls to the middle. and the menu shifts up replacing the logo?
Here is my HTML/CSS:
#header {
position:fixed;
width:100%;
}
.logo {
background:#ccc;
}
.logo h2 {
margin:0px;
}
.menu {
background:red;
}
#konten {
padding-top:50px;
}
<div id="header">
<div class="logo">
<h2>Example WEb</h2>
</div>
<div class="menu">HOMEAboutContact
</div>
</div>
<div id="konten">
1abcdefghiabcdefghia
<br>bcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcdefghiabcdefghia
<br>defghiabcdefghiab
<br>cdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabc
<br>defghiabcdefghiabc
<br>defghiabcdefghiabcdefg
<br>hiabcdefghiabcde
<br>fghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiab
<br>cdefg
<br>hiabcdefghiabcdefghia
<br>bcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghia
<br>bcdefghiabcde
<br>fghiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghia
<br>bcdefghiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghi
</div>
<div id="footer">
</div>
External JSFiddle

while you tagged Jquery .. can be done with jquery
$(document).ready(function(){
$(window).on('scroll',function(){
var windowScroll = $(this).scrollTop();
if(windowScroll >= ($(this).height())/2){
$('.logo').slideUp(500);
}else{
$('.logo').slideDown(500);
}
});
});
JsFIDDLE

I hope this is what you want!!
$(window).scroll(function() {
if ($(this).scrollTop() > 200) { //use `this`, not `document`
$('.logo').css({
'display': 'none'
});
}
else
{
$('.logo').css({
'display': 'block'
});
}
});
Demo Here
Change your CSS of header to below so that it remains at top
#header {
position:fixed;
width:100%;
top:0px;
}

Javascript boxes changing

I have to get the boxes to do the following:
Along the left hand side of the page have a number of boxes with different font names in them. When you click on those boxes have the font of the text in the middle box change. Do similar sets of boxes with changes associated for the right hand side and bottom of the page.
This is the coding I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100;100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100;100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</div>
<div id="box_group2">
<div id="box4">
Fourth box
</div>
<div id="box5">
Fifth box
</div>
<div id="box6">
Sixth box
</div>
</div>
<div id="box_group3">
<div id="box7">
Seventh box
</div>
<div id="box8">
Eighth box
</div>
<div id="box9">
Ninth box
</div>
</div>
<div id="box_group4">
<div id="box10">
Tenth box
</div>
<div id="box11">
Eleven box
</div>
<div id="box12">
Twelve box
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>

I've done the task with jQuery which is more easier to maintain.Used functions to get desired data and manipulated them to create boxes dynamically.
HTML :
<div id="topDiv"></div>
<div id="leftDiv"></div>
<div id="rightDiv"></div>
<div id="bottomDiv"></div>
CSS :
#topDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#leftDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#rightDiv div{
float : right;
padding:5px;
width:50px;
height:50px;
}
#bottomDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#topDiv{
padding-left : 33%;
}
#leftDiv{
padding-top : 30%;
}
#bottomDiv{
padding-top : 68%;
padding-left : 33%;
}
#rightDiv{
margin-top : -30%;
}
.changedFont{
font-size : 20px;
}
jQuery :
$(document).ready(function(){
//First declare an array of colors that will also indicate the number of boxes.
var colorArray = new Array("red", "green", "blue");
//Execute a loop to create the boxes styling them properly
for(var i = 1; i <= colorArray.length ; i++){
$("#topDiv").append("<div id=Box" + i + "></div>");
$("#Box"+ i).css("background-color", colorArray[i-1]);
$("#Box"+i).text("Box" + i);
$("#leftDiv").append("<div id=Box" + i+1 + "></div>");
$("#Box"+ i+1).css("background-color", colorArray[i-1]);
$("#Box"+ i+1).text("Box" + i+1);
$("#rightDiv").append("<div id=Box" + i+2 + "></div>");
$("#Box"+ i+2).css("background-color", colorArray[i-1]);
$("#Box"+ i+2).text("Box" + i+2);
$("#bottomDiv").append("<div id=Box" + i+3 + "></div>");
$("#Box"+ i+3).css("background-color", colorArray[i-1]);
$("#Box"+i+3).text("Box" + i+3);
}
//Define the handler for onclick events
$("#topDiv").children().click(function(){
$("#topDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#topDiv").children().eq(1).addClass("changedFont");
});
$("#leftDiv").children().click(function(){
$("#leftDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#leftDiv").children().eq(1).addClass("changedFont");
});
$("#rightDiv").children().click(function(){
$("#rightDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#rightDiv").children().eq(1).addClass("changedFont");
});
$("#bottomDiv").children().click(function(){
$("#bottomDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#bottomDiv").children().eq(1).addClass("changedFont");
});
});
jsFiddle Demo

Sliding a div across to left and the next div appears

I have this form Im creating and when you click on the "Next" button I want to slide the next form() across to the left this is my function
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
That function isn't working the way I want to. it slides the text in the container across not the whole container it could be a css problem for all I know.
And my form which has a class name .wikiform doesn't center horizontally. here is my full code. I'm not that experience in javascript so you would be appreciated. cut and paste and try it out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-easing.1.2.pack.js"></script> <script type="text/javascript" language="javascript">
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
var current = jQuery('.wikiform .view :first');
function positionForm() {
//jQuery('.wikiform').css( {'top':
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())
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width())
.css('left', -jQuery('.wikiform').width())
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('overflow', 'hidden')
.css('height', jQuery('.wikiform .wizard .view:first').height() );
}
if (this.Mode == "Wizard") {
return this.each(function () {
var current = jQuery('.wizard .view :first');
var form = jQuery(this);
positionForm();
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
jQuery('input[name^=Back]').click(function () {
alert("Back");
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
jQuery(window).bind("load", function () {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" });
});
});
</script>
<style type="text/css">
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute;
}
.wikiform .wizard
{
clear: both;
}
.wizard
{
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.wizard .view
{
float:left;
}
.view .form
{
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:300px;
height:300px;
}
</style>
<title></title>
</head>
<body><form action="" method=""><div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
Content
</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>
<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></form></body></html>

Try changing this line:
var current = jQuery('.wizard .view :first');
(which was selecting the form element directly under 'view')
to this:
var current = jQuery('.wizard .view:first');
// The first element with a class of 'view' under an element with a class of
// 'wizard'
Update, due to comments below:
To make a simple scrolling widget, you need the following:
An outer <div> with a fixed width and height
An inner <div> with a fixed height and a very long width.
Code to change the left offset of the inner <div>.
You can see a simple example of a widget like this here: http://jsfiddle.net/andrewwhitaker/feJxu/
For the OP's specific problem, I've modified the code that assigns CSS properties to look like this:
$('.wikiform')
.css('height', $('.wikiform .wizard .view:first').height() + $('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - $('.wikiform').height() / 2)
.css('width', $('.wikiform .wizard .view:first').width())
.css('left', -$('.wikiform').width())
.css('overflow', 'hidden') // ADDED
.animate({marginLeft: $(document).width() / 2 + $('.wikiform').width() / 2
}, 750);
$('.wikiform .wizard')
.css('width', '10000px') // ADDED. May need to be longer depending on content.
.css('height', $('.wikiform .wizard .view:first').height());
I've also changed the animation that 'next' does:
$('input[name^=Next]').click(function() {
$(".wizard").animate({
left: "-=" + current.width() + "px"
}, 750);
}); // Similar logic for 'back'
What this is doing is basically altering the left offset of the view with a huge width (.wizard) and scrolling a new form into the view with a fixed width and height (.wikiform). See a working sample here: http://jsfiddle.net/andrewwhitaker/J9L8s/