Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

display image in fixed place

 
Ranch Hand
Posts: 63
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi

I would like to display image (back end process is running, please wait ...) in constant place even scroll bar moves. I have used <Div> tag to display the image but it keep moving screen content along with image when scroll bar going down. After some time the image has not visible to the user. Is there any option to display the image in fixed position ?

Regards
Mohan
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Have you looked into "fixed" CSS

Eric
 
Chandra Mohan
Ranch Hand
Posts: 63
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Eric for your comments. I will explain the scenario little bit.

The following code has been used to display the please wait image.

< DIV ID="pleasewaitScreen" STYLE="position:absolute;z-index:5;top:40%;left:42%;visibility:hidden">

.............. Code for display the image here ...............

</div>

On page load visibility is hidden. Onclick of the button in the page the above div tag visibility="visible". on page load the image won't occupy any space in the page and won't visible to the user.

As per your instruction ( if I am not sure), I have changed position:fixed. In this scenario, it is occupy some space in the page onload itself.

Let me know if any solution is available.

Regards
Mohan
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Basic Example:



Eric
 
Chandra Mohan
Ranch Hand
Posts: 63
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I feel my question not reached to you properly. My question is, Even the scroll bar up or down the specific image should visible to user ( not display first line of the page). I want to display the image center of the page (backend process is running.. please wait..)

Let me take your example,

The "FOO FOO FOO FOO FOO FOO " portion not visible to user when user move bottom of the page. It will be visible to user only if the scroll bar up. I need to display the image center of the screen even scroll in any position.


The "FOO FOO FOO FOO FOO FOO " portion should be visible to the user even scroll bar move end of the page. It should display to the user even scroll bar in any position.

I want a Please wait dialog to display over top of the original page to make things look seamless.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
My code does work if you are using a real browser.

What browser are you using? IE6?

If you have to support that browser, you have to add something like this along with the code I posted earlier:



Eric
 
Ranch Hand
Posts: 2458
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
IE6? That browser originated in 2001. Are there still people using it?
 
Chandra Mohan
Ranch Hand
Posts: 63
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thax Eric. The above code is working in our system. We are still using IE6 only
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Microsoft Internet Explorer 6.0 was released on August 27, 2001. Nothing like using old technology.
 
Chandra Mohan
Ranch Hand
Posts: 63
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi

I have one issue when I use the above code. The "please wait" image has displayed on top of the all the component expect the dropdown. It is not overlaping the dropdown component (see the attachment). Is there any solution for this problem?

DropDownProblem.JPG
[Thumbnail for DropDownProblem.JPG]
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Again it is a issue with an older browser. you would have to stick an iframe behind your layer.

Eric
 
It means our mission is in jeapordy! Quick, read this tiny ad!
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic