Solved

position and keep element off screen

Posted on 2015-01-10
10
123 Views
Last Modified: 2015-01-15
I need a cross browser solution to keep an element off screen.
It must stay there and not scroll into view.

Don't suggest hiding (visibility or display) and don't suggest moving off screen by a fixed amount of pixels like 50000 or whatever. These are potential solutions but am looking for something else.

Thanks
0
Comment
Question by:dgrafx
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40542267
Well you have eliminate using all the normal solutions about the only thing left is to go to the third dimension.  Give the body a wrapper div that has the full page as its scope and give it a high z-index and an opaque background using a image or whatevr color you design calls for.  Then give the hidden elements a lower z-index.  You will need to give the hidden elements a fixed or absolute position to keep them out of the normal flow.  

That exhaust the possibilities unless you want to build a custom browser and convince your users to install it.

Cd&
0
 
LVL 10

Expert Comment

by:Jeffrey Dake
ID: 40542450
Not entirely sure what you are trying to accomplish, or what element you are talking about but you could also reduce the height and width of the element so that it is technically still there but not visible due to its size. Can you give a little more detail on what kind of element and why you still want it on the page if it is never visible?
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40542560
it is not "never visible" - I want it to remain off-screen until I call it to it's intended position.
It's a video and some browsers have issues when re-sizing or hiding then showing etc ...

z-index tricks won't work with the video tag - they remain clickable even if hidden behind other elements - and hiding it from being clicked is the goal.

So I ask simply if anyone knows of a js / css "trick" to keep it off screen.
Right now I am simply keeping it off-screen 5000 pixels - and that's probably how I'll leave it - I just wanted what I felt was a more elegant solution.
0
 
LVL 10

Expert Comment

by:Jeffrey Dake
ID: 40542566
Another way would to be not having the video on the page at all and then have the button fire off an Ajax request to load in the video to the appropriate location. This might help with initial page load so users don't start downloading a video they won't see. Otherwise having it off screen seems like a decent solution.
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40542572
note that the video doesn't start downloading - I have control of that - it's the preload setting.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40543183
I just wanted what I felt was a more elegant solution.

An interesting approach to development.  A solution that works, has no accessibility issues, no usability issues, and does not create a potential for errors is not elegant enough.  So instead you want some kind of "trick" that will make it more elegant even if it means adding a little unnecessary bloat and overhead?  Well if that is the case just keep the inital position; add a class with the final positioning you want; and a CSS transition that will float it into place when you change the class off of an event.

Not my idea of elegant but I'm not sure of your definition of elegant if it is not correct code that w3orks correctly and does not negatively impact the user.

Cd&
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40543260
it's a video and some browsers have issues when re-sizing or hiding then showing etc
What exactly? wrapping in a div and showing and hiding works for me...

http://jsbin.com/coraci/1/edit?html,js,output
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40543282
Rob - yes it does most of the time and on Chrome - Safari - Firefox.
It was reported to me that IE 9 had issues so I did the positioning off screen which eliminated the IE issue.
I still need to test this myself (there may have been other issues - the brief testing wasn't a valid test) and I also need to test IOS and Android.

Thanks though - I asked this question to get a few ideas other than what I had tried.
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40552434
Ok, then it may be something to do with the code as I've tested the jsbin on IE9, Android and iOS without issue
0
 
LVL 25

Author Comment

by:dgrafx
ID: 40552460
Rob - thanks and sorry for not addressing this question.
I am working on page issues which are causing the problem - not sure what is up yet but have recreated the code that pertains to the player and thumbnail playlist as a stand-alone page and all is swell.

The real meaning of the question is as follows:
once upon a time i did not know about background-size:cover and so was still doing workarounds like stretching an image and making it appear to be the background. so when someone told me about background cover I thought hell yeah! so what i was asking here was to find out if there was something new that i did not know about - like some css that said position: offscreen ...
I'm sure you see what I mean.
But according to yourself and others it looks like there isn't such a thing. But also I appreciate that you went to the work of setting up a cross-browser demo.
BTW I'm using mediaelement js - not just the video tag - as we have mp4 files only and the majority of out firefox users are on versions older than 35 - fyi v35 now supports native mp4!  

Thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now