position and keep element off screen

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
LVL 25
dgrafxAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
RobConnect With a Mentor Owner (Aidellio)Commented:
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
 
COBOLdinosaurCommented:
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
 
Jeffrey Dake Senior Director of TechnologyCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
dgrafxAuthor Commented:
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
 
Jeffrey Dake Senior Director of TechnologyCommented:
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
 
dgrafxAuthor Commented:
note that the video doesn't start downloading - I have control of that - it's the preload setting.
0
 
COBOLdinosaurCommented:
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
 
RobOwner (Aidellio)Commented:
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
 
dgrafxAuthor Commented:
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
 
dgrafxAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.