Load a div before other page content in WordPress - javascript

As the title says, I want to load a div in WordPress before any other content on the site. I'll explain it better: when a user loads the page, I want to show an animated intro, and then let him see the site after. How can I do that?

You'll want to create a fixed div that covers the screen to act as an overlay. Say you have a div: <div class="overlay">.
Now, in your CSS, you want to make that div take up the whole screen:
.overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
You also need to make sure your parent containers (html and body, most likely) have width/height of 100%. You might want to give your div another color so you can see it.
Also, reference this question.

Related

Place sliding divs at a fixed bottom position

I am currently using this bit of code (adapted to my needs) to create a bootstrap carrousel-like.
I have successfully place it to the bottom of my page, but I would like to make it fixed.
I assume that I just need to add:
.block{
bottom: 0;
position: fixed;
}
Example here.
What is that not the way to go?
You should add those attributes to
.box {
position: fixed;
bottom: 0;
}
Edited fiddle
other approach is to add a wrapper above the box and set its height 100%-"the .box's height".
this would stick the box on the bottom of the monitor. the part above then would be scrollable.
Sample

DIV height 100% for remaining space under another div

So I have a header bar for a page I made with a height of 150px. Under that area I want another DIV to fill the remaining space (width and height) all across the screen and to the bottom of the screen. I've tried setting height: 100% for the DIV, but that causes the screen to become scrollable and I only want it to fill the remainder of the page. NOTE: There is NO footer or anything under it.
Using jQuery/Javascript is acceptable, but CSS-only is prefered (if possible). If using jQuery, please explain the proper way to have it implemented into the page (I'm assuming $(function() {...}); under the <style> tag in the head.
I've tried searching for a result before, but nothing seems to work correctly.
tl;dr I basically made 3 options for you. click on the 'like this' in the below paragraph to see what they all look like without any text. Click on the A). B). and C). links in the paragraphs below that to see the difference between the three options. Check how each one scrolls differently, they are all different I promise. After you look at all three you can read how the one you want is implemented. (that is if you like any of them.) Hope you like it, no problem if you don't :)
I'll have a go at this, because it honestly depends on what you're going after there are multiple ways to look at it and it depends on your end goal. I will cover three possible scenarios: (which all look the same without text mind you, like this, but if you want to see what they look like with text click the letters. Make sure you scroll the page to see the difference between them.)
(Just as a side note I based A). and B). off how Twitter Bootstrap does it.)
A). You just want it to look like one div on top of the other (header div on top of main-content div) and display like that, but you still want the page to scroll if the 2nd div's text overflows. In this implementation when they scroll will move the header out of view, but if you don't want the header div to move out of view that leads me to
B). Same as the first header div on top of main-content div, but when they scroll the header div will still stay in place at the top instead of moving out of view.
and last of all,
C). You really do want the div to stretch to the bottom of the screen and never have the scroll bar for the whole page. This could be used in some cases, for instance, Spotify makes a nice music app with this kind of style so that you never scroll the whole page just panes in the page.
Ok so first here is the html code used to construct all three of them
<body>
<div class="header"></div>
<div class="main-content"></div>
</body>
And now to the fun part...
I will provide a Fiddle for the following examples, and with the css I will put the necessary code at the top and the unneccessary code at the bottom. (The html may have some unneccasary text so just ignore that. I just want you to see the page scrolls differently on the three.)
A).
no need to rephrase what it is so I'll just show you the code that is necessary.
First, here is A). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for A). (the background-color isn't completely necessary, but it is somewhat necessary to show the point.)
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
and now for...
B).
First, here is B). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for B).
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
As you can probably tell the only difference is the position: fixed on the .header, but look at the two examples to see the difference it makes.
and now last of all C).,
C).
First, here is C). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 1 where it has a scroll bar just for that area's overflowing content.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 2 where it hides the overflowing content. (This is honestly bad practice and I wouldn't do it. So if I may suggest. I would go with option 1 of C).)
Here is the necessary css for C).
body {
padding-top: 150px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
.main-content {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
}
I won't explain it, but here is an article on positioning that will.
here is the only necessary css for option 1 is adding overflow-y: auto to .main-content, but if you want to go with option 2 which I don't suggest you can go with overflow-y: hidden on .main-content
Well that's all for my post which is probably too long for most people sorry if I bored you, but I'm just trying to help. Hope you figure out the layout you want. This is only a few examples of the layouts possible with good old css. If you don't get the layout you want from this or any other post feel free to send me a message by commenting below, and I'll be happy to answer it sometime. Hope this helped. If it didn't that's fine too. :)
You can try css3 flexbox.
http://jsfiddle.net/wL9aM/1/
.container {
display: -webkit-flex;
display: flex;
flex-direction: column;
height: 700px;
}
.header {
height: 200px;
background: red;
}
.main {
-webkit-flex: 1;
flex: 1;
background: blue;
}
try using script..
var window_h = $(window).height();
var header_h = $("header").height(); //This is what you said you had 150px
$(".filler_div").height(window_h - header_h);
You can also put that inside a function() so that you can add it also when you resize the browser, the filler space also adjusts...
function setfillerDivHeight(){
//the code above
}
$(document).ready(function(){
setFillerDivHeight(); //the initial setting of height
});
$(window).resize(function(){
setFillerDivHeight(); //reapply setting of height when window resizes
});
<div class="full-page-height-wrapper">
<header></header>
<main></main>
</div>
html,body {
height: 100%;
margin: 0;
}
header {
height: 150px;
}
.full-page-height-wrapper {
min-height: 100%;
position: relative;
}
CODE: http://fiddle.jshell.net/N7zJg/9/
preview: http://fiddle.jshell.net/N7zJg/9/show/
I don't think you cannot acheive that in pure CSS.
So, there is two different solutions:
1) You can put the 150px div in the 100% div.
2) You can do it with jQuery:
If your top div is <div id="A"> and the second one is <div id="B">, you'll have:
var b = $("#B");
var height = $("body").height() - b.position().top;
b.css({ height: height });
Feel free to adapt the code if you have some margins.
Found a solution myself finally. Doing it this way makes the design more responsive since (if i choose to add something to the bottom), it will automatically resize the div's height.
.container {
display: table;
}
.row {
display: table-row;
}
.column {
display: table-column;
}
#fullDiv {
height: 100%;
}
I found two solution.
The one is that I have must set the div in the absolute position.
the div float over the screen.
another one is use table-row display.
If you use just CSS, you cant achieve your task by giving 100% height to div. Because what basically CSS is doing is giving 100% height to your DIV plus giving 150 px to above header. Consider giving height of DIV less than 100% or some static value such as 600px or 700px.
Alternate is having a class of DIV with min-height 100% and inside it putting your header and body.

Limited scrolling for an Image

I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.
Please see below........
A: My mobile website contains a lot of content which exceeds the windows height
B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height
C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down
May I know how can I achieve C ??
Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.
It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........
Many thanks.
While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.
The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.
While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.
Markup outlines:
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS:
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.
Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):
Full screen
With markup/CSS visible
Edit:
In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.
Edit 2:
As requested, here's a jQuery function to toggle the effect.
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
Just give a <button> or whatever the class name close and it'll toggle the effect on and off.

Is it possible to use the page scrollbar to scroll an inner div?

I have a website that has a fixed height and a scrollable div inside that. Is it possible to remove the inner scrollbar and change it to the pages' one? The current example with the scrollbar inside the div is here.
I suspect this might need to be done with Javascript and a search on Stack Overflow shows a number of entries referring to it but I'm kind of hoping it doesn't need to be done using Javascript.
Currently, I just let the users scroll inside the div but it's not really an elegant solution:
.singlepost {
position: fixed;
top: 270px;
bottom: 20px;
background-color: white;
padding-left: 20px;
padding-right: 20px;
overflow-x: hidden;
}
You could set every other element on the page to position: fixed, leaving your div to expand the body and make it scrollable. Check the fiddle for an example:
http://jsfiddle.net/GYatesIII/TnzG5/4/
The Next Web uses a similar tactic.
Looking at your demo page, it may be easiest to just put everything above into a div, which floats on top and whatever goes below scrolls up beneath the top div. That would keep your nav at the top and the rest of the page scrolling as usual, using the main windows scrollbar.

jQuery .css body opacity

I have a news tab where whenever an user clicks it, the popup box shows up with the details, however I want the background or the body tag itself to dim so I wrote:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("body").css({"opacity": "0.5"});
});
However the box itself dims either. Is there a way to make the box ignore this command? Or maybe there is another way around?
As body contains the #pbox then the box itself will be subject to the 50% opacity you have applied. A better method would be to overlay a semi opaque div over your entire window, and then position #pbox above it, a little like so:
#overlay {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
display: none;
}
#pbox {
z-index: 1;
}
So here you have the white #overlay div appearing over all your content with 50% opacity. Above it is #pbox with a z-index specified to ensure it appears on top.
The jQuery code would be a little like this:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("#overlay").show().css({"opacity": "0.5"});
});
Unfortunately, there isn't. Since the popup is inside the body tag, it is included in the change in opacity.
The only way to do this would be to make an overlay layer which covers the entire body and is translucent, and then place your popup above that.

Categories

Resources