/    Sign up×
Community /Pin to ProfileBookmark

"I am thinking" popup

Copy linkTweet thisAlerts:
Sep 29.2006

Can anyone give me any pointers on how to implement some sort of “I am thinking” popup that can be initiated by JavaScript?

I currently have JavaScript that initiates PHP to first do some server side DB queries and then create some new JavaScript (already working). The popup could easily be initiated on the existing client side JavaScript, and then terminated on the new PHP generated JavaScript.

I don’t really want the typical ALERT prompt, and would rather just have a small animated graphic appear on the center of the screen. I currently don’t know Java and applets, but will learn if needed.

Thanks!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@mudeltaSep 29.2006 — you can simple add a div to your page with javascript and position it absolute on the middle of the screen (or page).

In that div you can generate some content that tells the user that something is going on, and the page isn't stuck. (eg switching some small images of a rounded arrow, that make it look like the arrow is turning, or some small coloured boxes in a row, all the same colour, except one and you shift the coloured one each time one box to the leftn abd then at the end back to the beginning)

in the new created javascript you can remove that div.
Copy linkTweet thisAlerts:
@agent_x91Sep 29.2006 — 
I currently don't know Java and applets, but will learn if needed.

[/QUOTE]

Java isn't ncessary to do this; it's a bit of a small job to bother using Java for it. Th suggestion above should work fine; you just need to make a <DIV> containing the appropriate content, and center it on the page. Then you can use javascript to make it visible and invisible as appropriate.
Copy linkTweet thisAlerts:
@mudeltaSep 29.2006 — you don't even need to make the div in advance, you can add and remove it in runtime:

<i>
</i>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;script type="text/javascript"&gt;
function addArrows(target){
var turningArrows = document.createElement("div");
with(turningArrows){
id="turningArrows";
}
var turningImage=document.createElement("img");
with(turningImage){
id="turningImage";
src="arrow1.png";
}

<i> </i>turningArrows.appendChild(turningImage);
<i> </i>target.appendChild(turningArrows);
<i> </i>rotation=setInterval("switchArrows()",300);
}
function removeArrows(target){
clearInterval(rotation);
target.removeChild(document.getElementById("turningArrows"));
}
function switchArrows(){
target=document.getElementById("turningImage");
if(target.src.indexOf("arrow2.png")&gt;=0)
{
target.src="arrow3.png";
}
else if(target.src.indexOf("arrow3.png")&gt;=0)
{
target.src="arrow1.png";
}
else
{
target.src="arrow2.png";
}
}
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;input type="button" onclick="addArrows(document.body);" value="start" /&gt;
&lt;input type="button" onclick="removeArrows(document.body)" value="stop" /&gt;
&lt;/body&gt;
&lt;/html&gt;

ps: the three images are three times the same image of two rotated arroxs, but each time rotated 60 degrees.

ps2: the div isn't positioned or styled, it rather is an example to help you get the idea, and then it's just your creativity (and javascript knowledge ? )
Copy linkTweet thisAlerts:
@NotionCommotionauthorSep 29.2006 — Wow, that is easy. Thank you!

Is there a reason I wouldn't want to use an animated GIF, and not use JS to rotate several images to animate?
Copy linkTweet thisAlerts:
@mudeltaSep 29.2006 — euhm,

you can use an animated gif too.

I just used three png with a transparent background, so i can use it with every backgroundcolor i like.

But you can do that with an animated gif also (the transparency i mean)

grtz
×

Success!

Help @NotionCommotion spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...