Jump to content

multiple process on single page


sniperscope

Recommended Posts

Hello

I am trying to do something for my personal project such multiple process on single page.

i have process as below:

<div id="rightside">

<h2 id="one">Gathering Info</h2>

<h2 id="two">Entry to DB</h2>

<h2 id="three">Creating Account</h2>

<h2 id="four">Sending Mail</h2>

<h2 id="five">Cleaning Temp files</h2>

<h2 id="six">Done</h2>

<h2 id="seven"><a href="../index.php">Click here go to back</a></h2>

</div>

 

And i want to display them one by one with a process bar.

 

For example:

when land on page <h2 id="one"> display at first

and then display <h2 id="two"> when this process reaches to 100%

then display three  and then four and then .... so on.

 

Each process has it's own job.

 

Is this possible? If yes, how can i do that?

Even i have no idea what terms do i have to search for over internet for finding a sample

 

Regards

Link to comment
Share on other sites

Is it possible, yes. How do you do it? There's many ways. You know it's ajax at least because you posted here ;)

 

Are you using any libraries? jquery is great for ajax.

 

You'll want to make sure you have each step in the process working on it's own as a separate page, then convert it to an ajax process.

Link to comment
Share on other sites

  • 2 weeks later...

Okay, i create some thing for my self however, my javascript/jquery code use up to 300mb for firefox when page executed.

 

Here is what i wrote:

<script type="text/javascript" src="../js/jquery.1.5.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.innerfade.js"></script>
<script>
$(document).ready(function(e) {
	$("#div_1").fadeIn(400);
	setInterval("SecondDiv()",2000);
	return false;
});
</script>
</head>
<body>
<div style="width:100%; float:left;">
<div style="float:left; width:29%; text-align:right;"><h3 class="Font">Gathering Info</h3></div>
<div style="float:left; width:50%; margin-left:6px;" id="div_1"><img src="checked.png" /></div>
</div>

<div style="width:100%; float:left;">
<div style="float:left; width:29%; text-align:right;"><h3 class="Font">Entry to DB</h3></div>
<script>
function SecondDiv()
{
	$("#div_2").fadeIn(400);
	setInterval("ThirdDiv()",1000);
	return false;
}
</script>
<div style="display:none; float:left; width:50%; margin-left:6px;" id="div_2"><img src="checked.png" /></div>
</div>

<div style="width:100%; float:left;">
<div style="float:left; width:29%; text-align:right;"><h3 class="Font">Creating Account</h3></div>
<script>
function ThirdDiv()
{
	$("#div_3").fadeIn(400);
	setInterval("FourthDiv()",4000);
	return false;
}
</script>
<div style="display:none; float:left; width:50%; margin-left:6px;" id="div_3"><img src="checked.png" /></div>
</div>

<div style="width:100%; float:left;">
<div style="float:left; width:29%; text-align:right;"><h3 class="Font">Sending Mail</h3></div>
<script>
function FourthDiv()
{
	$("#div_4").fadeIn(400);
	setInterval("FifthDiv()",1000);
	return false;
}
</script>
<div style="display:none; float:left; width:50%; margin-left:6px;" id="div_4"><img src="checked.png" /></div>
</div>

<div style="width:100%; float:left;">
<div style="float:left; width:29%; text-align:right;"><h3 class="Font">Cleaning Temp files</h3></div>
<script>
function FifthDiv()
{
	$("#div_5").fadeIn(400);
	setInterval("SixthDiv()",2000);
	return false;
}
</script>
<div style="display:none; float:left; width:50%; margin-left:6px;" id="div_5"><img src="checked.png" /></div>
</div>

<div style="width:100%; float:left;">
<div style="float:left; width:29%; text-align:right;"><h3 class="Font">Done</h3></div>
<script>
function SixthDiv()
{
	$("#div_6").fadeIn(400);
	return false;
}
</script>
<div style="display:none; float:left; width:50%; margin-left:6px;" id="div_6"><img src="checked.png" /></div>

 

Could someone help/tell me why this code takes so much memory? What did i do wrong?

 

Regards

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.