Solved

position and keep element off screen

Posted on 2015-01-10
10
130 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

 
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
 
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 43

Expert Comment

by:Rob
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 43

Accepted Solution

by:
Rob 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

724 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