I've noticed on facebook, when viewing an image that is larger than the height of your browser window, it will alter the scrollbar of the entire page, so that scrolling up and down will reveal the parts of the image you're missing.
Having not been formally trained in the art of JavaScript/CSS, maybe I missed the lesson where I was supposed to learn how obvious the answer to this question is. Regardless, I thought I'd ask and see if you guys could help me understand how to override the browser's default scrollbar behavior.
I'm pretty sure this is the default action in HTML. I'm not exactly sure what you are looking at but this maybe helpful.
If you are looking to do the same thing Lightbox maybe what you are looking for.
Figured out what I was going for...
To use the facebook image viewer theater as an example, when you click to view an image, it will set body's overflow to hidden. At the same time, they will fade in their theater div, whose properties are something along the lines of:
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
That way, if the image is taller than the viewing size of the browser window, it will place the div's scroll bar in the position where the body's scroll bar would go.
Again, maybe this is obvious for all of you. I'm still learning these tricks as I go.
Related
I'm working on an enjin site for a friend and cannot for the life of me understand how to make the page here stretch to fill the whole screen vertically if the content does not have enough in it to do it on it's own. I've tried scripts and CSS of a dozen or more solutions and cannot understand how to make it do this because it's not my code, its Enjin's, and I have to work around it.
There are 2 pages in question, one is a standard format page so anything done to it can be done to all pages except the custom one and there will be no problems, and the other is a custom coded page using their HTML module. The key is the same solution is necessary for both but they have different code.
Custom Page: X |
Standard Page: X
Simply put I'm asking for a solution here. I tried the flex solution, height 100% with block display, javascript to find the distance between the bottom of the bottom div and the bottom of the monitor and adjust height accordingly, and more. Nothing seems to work. Any help is very gratefully appreciated.
I can provide any more details necessary, just ask.
What you are trying to accomplish is 2 things. First you want to make the div #memberContainer always be at least as tall as the users screen minus the height of your footer.
This can be acomplished with css using the "vh" unit. The vh unit is defined like this:
Relative to 1% of the height of the viewport*
And the calc function, as you will need to subtract 100vh (the screen height) from the height of your footer (180px).
So you need to add this code to your #memberContainer.
#memberContainer{min-height: calc(100vh - 180px)}
The second thing you need to do is make sure the background image of #memberBlock always covers the entire visible portion of the screen.
The image itself is 1920*1080, which is a standard 16:9 resolution. Assuming you only wanted to target 16:9 screens this would work fine. However to cover mobile phones and all other screens I would recommend you use:
#memberBlock{background-size:cover}
This makes sure the image will always cover the screen.
You can't have no gap and no content to fill it. There will have to be a gap somewhere.. Your gap is appearing in the middle because the footer is absolutely positioned. If you stop positioning your footer absolutely, the footer will cling to the body-wrap, however, you will still have a gap at the bottom, it just won't look as bad.
.myfooter {
display: none;
width: 100%;
position: relative;
background-color: RGB(20, 20, 20);
height: 180px;
bottom: 0;
}
If you really wanted to make it fit the screen, you could give a min-height with a calc of 100vh-FooterHeight
position: absolute;
height: 100%;
There may be other issues with this as i have no idea how mobile or responsive stuff would work for your site specifically but this is one way. You are coupling the BG div to the content div - that is why you are seeing that behavior - you need to make the BG a sibling div of content instead of a parent child relationship then you can have more flexibility on how it works - but for now my option seems to work
What I'm saying is, I have some extremely long pages on my website, which can make it annoying if my visitors need to scroll to the top of the page to be able to navigate to another page.
I'm not quite sure what I would call this but any Google search that contains the words 'DIV' and 'float' come up with completely unrelated results...
What I'm looking to do is create a DIV that stays at the top of the Screen (not to be confused with the page) so that if the user is at the bottom of the page, they can still see the navigation bar just floating at the top of the screen. What I can think of is to position the DIV relative to the position of the screen but I don't know how to code this.
I'm happy to use JavaScript (preferably in the form of jQuery), but if you know how to do this using CSS, I would favour your response.
This might help: I know a little bit of jQuery and JavaScript and I know a good deal of CSS and HTML.
Thanks in advance.
fixed position has exactly this purpose and this is pure CSS:
div {
position: fixed;
top: 0;
}
Try this:
<div style="position: fixed;"></div>
You should be able to use CSS Fixed Positioning
#eleID {
position: fixed;
top: 0;
}
I'm implementing a Wordpress theme where content slides into the page vertically. To do this, I need to measure the size of the div containing the content without visibly rendering it first. I'm attempting to do all of this without Ajax.
Here's what I've discovered so far:
I can easily load the document, read the size, then hide the div with javascript. Unfortunately there's a very obvious (and unacceptable) flicker because javascript doesn't hide the div fast enough. There's also the issue that if images are placed into the content, I have to wait until they're rendered to get the true size... no bueno.
The other option is to hide the content with the CSS, but if the user doesn't have javascript enabled, they'll just be staring at a blank page.
Which brings me to where I am currently.
I have a piece of javascript that runs immediately after the stylesheet is declared that changes the location of the stylesheet link element and then re-renders the page with a javascript specific stylesheet. This solves the problem of having to hide the content before reading the size.
This was accomplished by positioning the div containing the content absolutely and off the page 9999pixels.
#content {
position: absolute;
left: -9999px;
}
At this point, I use jquery to retrieve the height of the content with the following code:
$('#content').height();
The problem is, the number that's coming back is the incorrect size and is much smaller than the actual content. When I change the css to:
#content {
position: absolute;
left: 0px;
}
It renders correctly. What gives?? Is there a bug I don't know about? This happens in both Chrome and Firefox.
You can view it for yourself here http://thethechad.com/wordpress
-- UPDATE --------------------------------------------------------------------------
I figured out my problem. The div I was using had no specified width. When I moved it outside the flow of the document, it expanded to fill that gap, shifting the content and reducing the height of the element. I went back into my CSS and hardcoded the width and everything is working fine. I feel really dumb. I'm sure we all have those moments. Thanks so much for the help guys!
I'm a bit confused by your long explanation, but here's how I measure things without anyone seeing them.
I assign the div a class name I call "measure". Measure has predefined CSS:
.measure {
position: absolute; // doesn't affect layout
visibility: hidden; // not visible, but normal size
left: -1000px; // won't affect scrollbars
top: -1000px; // won't affect scrollbars
}
You are then free to get the divs height. Note: it's width may not be the same as it would be in the layout of the page because divs go full width when position: static.
If you want to make sure that the object is never seen, then you can give it an initial class of "measure" in it's original definition and then remove the class later when you want to use the object in the layout of the page.
I'm not sure what is causing your problem, but you might be able to use something like this:
http://jsfiddle.net/Paulpro/9YBDB/
<div id="thediv">This is the div</div>
<script type="text/javascript">
var $thediv = $('#thediv');
var height = $thediv.height();
$thediv.hide();
$thediv.html('Div\'s height is: '+height);
$thediv.show();
</script>
Were you execute a script to hide the div immediately after the div is rendered, rather than in a script later in your code or on DOMReady etc, so that the flicker doesn't get a chance to occur. However if the user's computer is slow or they are using an older browser the flicker might still appear, I'm not sure. It all depends on if the browsers HTML parser and Javascript engine is fast enough to finish executing $thediv.hide(); before the div is rendered, which I think almost all browsers will be, because rendering is a relatively slow process.
I'm working on a Firefox extension and am out of ideas on how to implement a floating button. I need a button that is overlayed on my page that I can show/hide and dynamically position just about anywhere on my page. I thought I could do something like a fancy CSS tool-tip except replace it with button functionality, but that idea failed because I couldn't pull my example apart well enough to understand what all I need to include, need to change, etc.
I've thought about using jQuery(though wouldn't mind avoiding, unless it makes this painfully easy) but will be looking more into that as a possibility now. If anyone can offer a tutorial link, ideas, sample code, anything to help get me moving in the right direction I will greatly appreciate it!
Thanks!
Edit: Clarification
I'm not entirely sure how to actually create the overlayed button. I tried to create a a floating div with some text in it, and nothing showed up, but I got no errors, which means I'm doing something wrong, but I have no idea what that is. http://www.fijiwebdesign.com/blog/css-tooltips-floating-html-elements.html If you take a look at that webpage you see that there is that floating "feedback" button, I would like to create something similar, only it wouldn't be anchored to the sides, but I could position it over text, etc.
#floatingBtn
{
position: absolute;
z-index: 10000;
top: 50%;
left: 50%;
}
Thats the CSS I used to try and float my div. I don't know if I'm creating the div in the wrong place or... I thought if I could get a floating div with some text, I could turn that into my button.
position: fixed;
Should make everything work out for you. Absolute positioning is relative to the parent element or to the html element if no parent was found.
window.scrollBy is not working on the following page
http://www.resident.co.il/aspx/places.aspx?t=4&a=1
Any idea what can be the problem ?
Entering javascript:window.scrollBy(0,10) in the address bar scrolls the window fine for me. I can't see any call to window.scrollBy in the page or attached scripts so I don't know where any failed attempt to scroll might be.
Edit re comment: aahhh, I see. You can only scroll it a little bit, because the document is only ever a little bit taller than the viewport. This is because of the:
position: absolute; width: 100%; height :100%; overflow: auto;
on the wrapper div. You would have to scroll this div, not the window itself, to make the main page of the page move.
I have absolutely no idea why the page is doing this, but then I have no idea why the page is doing a dozen other horrific markup abuses either. Could easily be rewritten to use just a few divs and position: fixed (with JS shim for IE6) instead of the crazy overflow stuff and the five levels of nested tables. (What is this, 1996?)