I want to place a div at top of page source. When users visit page they will see this div at bottom of page.
For example:
When you open page you will see as below
aaaa
bbbb
cccc
some text
But page source will be shown as below:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="top">Some text</div>
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</body>
</html>
How can I do it?
There's no need for JavaScript or jQuery to achieve this. Only some CSS flexbox is needed to achieve this. See this small example that puts the div with class top as the last child of the body, while it remains as the first item in the page source.
.container {
display: flex;
flex-flow: column wrap;
}
.top {
order: 2;
}
<div class="container">
<div class="top">Bottom</div>
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
</div>
Related
I'm trying to figure out how to set up a full screen landing page that has multiple backgrounds. I want the user to be able to scroll once and have the next background take up the entire screen. I also want to keep track of which section of the landing page the user is on similar to the position tracker on the right.
I'm trying to emulate the design on this page https://purpose.nike.com/
How would one accomplish this?
If you want to achieve the wallpaper thing as nike as done you would have to add some transitions to make it look good. To achieve it add the background to each div you want and add following css.
.bg{
height: 100vh;
width: 100vw; }
.bg_url1 { background: url1 }
.bg_url2 { background: url2 }
<div class="bg bg_url1"/>
<div class="bg bg_url2"/>
add this to each wallpaper then you can combine it with javascript/jquery to add transitions to make it look good.
I found a solution on jquery scrollify. Please see my example code where I make fullscreen div scrollable and console print (div position or index when finish scrolling).
$(function() {
$.scrollify({
section : ".full_sc_div",
after: function(index){
console.log(index);
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scrollify</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js"></script>
</head>
<body>
<div class="full_sc_div" style="background-color: red;">div 1</div>
<div class="full_sc_div" style="background-color: green;">div 2</div>
<div class="full_sc_div" style="background-color: blue;">div 3</div>
<div class="full_sc_div" style="background-color: white;">div 4</div>
<div class="full_sc_div" style="background-color: black;">div 5</div>
</body>
</html>
You can try fullpage js : https://projects.lukehaas.me/scrollify/#home
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide" data-anchor="slide1">Slide 2.1</div>
<div class="slide" data-anchor="slide2">Slide 2.2</div>
</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
<script>
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});
</script>
The page you are talking about is nothing but multiple background placed under one another in different divisions
<div>..Walpaper1..</div>
<div>..Walpaper2..</div>
<div>..Walpaper3..</div>
<div>..Walpaper4..</div>
then provide Id's to all the dives and place all the content into the different div's associate do that div
I'm creating a landing page, with an image with text over it.
I have the div that contains the text as a child div to the image div, and the image uses viewport height to fill the whole screen, however as soon as I insert text in the centered child div, for some reason the image gets resized in height, and there's uneeded scrolling space. I have tried different display types, and everything.
I've made an example, one with the div that shows the text and one without
With text and extra scrolling space: http://jsfiddle.net/g7ch1p0j/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
Without text and no scrolling space between the image and content below it: http://jsfiddle.net/sctcebmf/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
You'll see the text moving upwards a little bit (grab the scrollwheel and drag it down slowly) before you see the end of the image (black box) and that's because of the extra issue. This does not appear in the second example.
Got your fiddle working as expected by changing #lander_meta's position to absolute, adding width:100% and making its p tags text-align: center.
Working fiddle.
How do I prevent one div from wrapping beneath another? Specifically, I want the 2nd div to always be to the right of the 1st div, even if the browser width is resized such that the 2nd div's contents must wrap.
I always want the divs to be side by side:
and to never look like this, even if the browser window is resized such that the 2nd div's contents must wrap:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="columns">
<div style="background-color: #990000; width:70px; float: left">
Pic
</div>
<div style="background-color: #00FF00; float: left; " >
body some interesting large amount of content. some interesting large amount of content.
</div>
</div>
</body>
</html>
<div class="columns">
<div style="background-color: #990000; width:70px; float: left">
Pic
</div>
<div style="background-color: #00FF00; margin-left: 70px;" >
body some interesting large amount of content. some interesting large amount of content.
</div>
</div>
An example: http://jsfiddle.net/arPzt/
I am looking to increase the size of the header of a jquery mobile app. When I do that I need the title to be centred. I found that I can add a line like:
line-height: 30px;
to the css, but that is just far to much of a hack. I assume there must be a better way to do it.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css"><!--
.ui-header {
height: 50px;
}
-->
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>This Needs To Be Centred Vertically</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The easiest way to vertically center text of a block element is by making the line-height the same as the height of said element. Note that this will only work if you have a single line of text.
line-height: 30px;
height: 30px;
On an inline or table-cell element, you could use vertical-align: middle to achieve the same effect.
Also note that forcing display: table-cell on an element will not work in IE6-7.
In your case, I would suggest going with the line-height/height technique.
You may try with
display: table-cell;
vertical-align: middle;
in your CSS.
You could try something like this:
<div data-role="header">
<div class="ui-bar">
<h1>This Needs To Be Centred Vertically</h1>
</div>
</div>
Doc: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
i have a problem in html and css. that's,check the div is in the below order
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
.child1 { float:right; width:auto; }
.child2 { float:right; width:200px; }
in this the div child1 is a horizontal growing div. so its not possible to add specific width to the div. what i need to show the child1 and child2 div in same horizontal line. if child1 is empty the child2 will be the rightmost div. the above solution don't work in ie7. please help me to find a solution.
please check this image.
image 1: rendering in chrome
image 2: rendering in ie7
thanks in advance.
swap their order in the html.
Rigth floats are "inverted".
like this:
<div class="parent">
<div class="child2">
</div>
<div class="child1">
</div>
</div>
may be you have to define standard doctype like this <!DOCTYPE html> in your html page