Transfer image into another div on scroll; - javascript

Here is my problem:
I have image in one div that is centered into that div.
I want that that image go in header after user scroll once (scroll>50).
Here is my codepen example.
HTML:
<header> <div id="nav"> LINK LINK LINK </div> </header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
CSS:
*{
padding:0;
margin:0;
overflow-x:hidden;
}
#nav{float:right; line-height:70px;}
header{
width:100%;
position:fixed;
padding-left:10%;
padding-right:10%;
background:#fff;
height:70px;
}
#main{
padding-top:100px;
text-align:center;
height:800px;
background:#3cb5f9;}
#main img{width:200px; margin:0 auto;}

There are a ton of ways to do this, but a quick way to achieve this is to duplicated the image so there is a copy of it in the main and the header. On load, have it hidden within the nav. Then, have a scroll event listener that watches for an offset of >50.
If true, => hide main image, and show nav image
If false => show main image. and hide nav image.
Also worth noting I updated the height of main to be 200vh — just to simulate content. This is not related to the answer.
$(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() >= 50){
$("#main img").hide();
$("header img").show();
}else{
$("#main img").show();
$("header img").hide();
}
});
});
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav {
float: right;
line-height: 70px;
}
header {
width: 100%;
position: fixed;
padding-left: 10%;
padding-right: 10%;
background: #fff;
height: 70px;
}
header img {
display: none;
width: 50px;
margin: 0 auto;
}
#main {
padding-top: 100px;
text-align: center;
height: 200vh;
background: #3cb5f9;
}
#main img {
width: 200px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<div id="nav"> LINK LINK LINK </div>
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
</body>
</html>
External Plunker: http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview

Related

How To Give Entire Area Behind List Item Inside A DIV A Background Color

I'm trying to create a side bar with 4 different options, when the selected option is active (Meaning you are on that specific page), I want the entire area behind the li, but inside the DIV, a background color slightly darker than what is already there but don't know how to achieve this. I have tried making the li itself 100% width of the div but it doesn't affect it at all.
Here is the issue:
As you can see the li does not reach the start and end width of the sidebar div.
Code Here -
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
padding: 0;
text-align: center;
max-width: 100%;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
#searchbar{
padding-bottom: 0.5em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
Your problem is in your #nav. You need to remove the x-margins:
#nav{
margin: 2em 0;
}
You can then do something like this:
#nav li:hover
{
background:#333;
}
But you'll also want to fix this:
#searchbar{
text-align: center;
}
http://jsfiddle.net/5amL4tx5/
Your problem is the #nav rule. If you remove the margins it will fill the entire containing div.
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
As for changing the background to make it darker for the active element. I suggest creating an .active class and assigning that on the fly to the active page based off of the url.
Example active class:
.active {
background: c2c2c2;
}
I think the problem is here (specifically the 1em for left/right margin):
#nav{
margin: 2em 1em;
}
That's going to limit the size of anything within #nav.

Resizing Div and its content dynamically to fit the browser height

I am trying to optimize my website to different screen and window sizes. I want the content of a div to take up 100% of the browser height, not more than that, so that the user doesn't have to scroll down. I am not sure how to implement this, I tried this
$(window).on('load resize', function(){
$('.container-narrow').width($(this).width());
$('.container-narrow').height($(this).height());
)};
But this doesnt seem to work, the content still goes over the browser height. and I have to endup scrolling
CSS will recalculate on resize.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.body {
height: 100%;
margin-bottom: -100px;
}
.header {
height: 100px;
background-color: #CCCCCC;
text-align: center;
}
.content {
text-align: center;
}
.footer {
height: 100px;
text-align: center;
background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
<div class="header">
This is the header.
</div>
<div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>

how to make interdependent html structure?

want that the navigation menu moves up & content moves left when the sidebar is moved (slide) using jquery ?
i am making a structure for my web page and using jquery to slide navigation & sidebar but the content & footer remains where it is and the removed portion is empty, so how to make it interdependent ?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#slidesidebar").click(function(){
$("#sidebar").slideToggle("slow");
});
});
</script>
<style type="text/css">
nav {
position: fixed;
left:15%;
top: 0;
width: 100%;
height: 6%;
background: #555;
}
#content {
position: relative;
top:auto;
width:85%;
top:6%;
margin: 0 0 auto auto;
background:black;
}
#main {
}
#sidebar{
position: fixed;
left:0;
width:15%;
color: white;
background:green;
}
footer {
width: 100%;
position: fixed;
opacity:0.8;
bottom: 0;
height:5%;
left:0;
background:red;
}
</style>
</head>
<body>
<div id="sidebar">
Sidebar Content
Sidebar Content
</div>
<nav>
Navigation Menu
</nav>
<div id="content">
<div id="main" align="center">
Content
</div>
<footer>
<button style="font-size: .8em;" id="slidesidebar">Flip Side-Search</button>
Footer
</footer>
</div>
</body>
</html>
You can pass a function to the slideToggle to be called when the animation is complete. There you can manipulate the content how ever you like.
$("#sidebar").slideToggle("slow", function(){
$("#content").css({width:"100%", float:"left"});
});
Or you could have the content grow at the same time:
$(document).ready(function(){
$("#slidesidebar").click(function(){
$("#sidebar").slideToggle("slow");
$("#content").animate({width:"100%"});
});
});
If this doesn't do the trick, try playing with the "float" parameter of content.

Displaying a list over an image: the text goes to the right of it

I have an img element that I am using as the background of a navbar, I then will display the navigation links over the top of the img element. My problem as you will see in the images below is that the ul that holds the links get displayed to the right of the nav bar & not over it. Why does it do this & how can I get my links to be over the top of the img?
This is how it looks now: look at the white writting
This is how it should look
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; min-width: 1200px; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { margin: 0 auto; }
#navBar { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; } /* I am pretty sure the cause is because I use "inline" but I need it to position the navbar correctly to the left */
#content { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }
#navBarImg { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; } /* Remove gap between navbar & content divs */
#contentImg { }
#navbar ul li { padding: 0; margin: 0; }
#navLinks { color: white; top: 0; left: 0; position: absolute; }
-->
</style>
</head>
<body>
<div id="heading">
abc
</div>
<div id="main">
<div id="navBar">
<!-- Error occurs here: the unordered list is displayed to the right of the nav bar instead
of where it should be which is inside the navbar -->
<ul>
<li id="navLinks">abcdef</li>
</ul>
<img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
<img id="contentImg" src="images/contentBackground.png" alt="" width="800px" height="700px"/>
</div>
</div>
<!-- Must keep the background image at the bottom of body -->
<img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>
<script type="text/javascript">
<!--
window.onresize = setBackgroundImgWidth;
-->
</script>
</body>
</html>
you need to make the navbar background a background image to the div rather than an image that's part of the html. This is the cleanest way to display the image underneath the text. You can set a height and width in the css to the div to ensure the entire image appears as well.

Keeping a header always in view

I am designing my website and I'm trying to find a way to keep a header always in the screen.
For an example, take a look at this extra long page on Wikia.com. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.
This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.
I tried looking at an example on DynamicDrive.com (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.
Can someone please help me do this?
Thanks in advance.
~DragonXDoom
P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.
Always remember if you have to stick the header or footer { position : fixed; } can be used.
So apply CSS like this:
.header{
top:0;
width:100%;
height:50px;
position:fixed; // this is the key
}
HTML:
<div id="wrap">
<div id="header"> HEADER </div>
<div id="navigation"> NAVIGATION </div>
<div id="content"> CONTENT </div>
</div>
JavaScript:
( function () {
var nav = $( '#navigation' )[0],
top = $( nav ).offset().top,
left,
height = $( nav ).outerHeight(),
width = $( nav ).width(),
fixedClass = 'fixed';
function pageOffset() {
return window.pageYOffset || document.body.scrollTop;
}
$( window ).
resize( function () {
left = $( nav ).offset().left;
}).
scroll( function () {
$( nav ).toggleClass( fixedClass, pageOffset() > top );
if ( $( nav ).hasClass( fixedClass ) ) {
$( nav ).
css({ 'left': left, 'width': width }).
prev().css({ 'marginBottom': height });
} else {
$( nav ).
prev().andSelf().removeAttr( 'style' );
}
}).
trigger( 'resize' );
})();
Live demo: http://jsfiddle.net/simevidas/Mx8hC/show/
If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
Or just to the of the the page:
.top-bar {
margin: 0;
width: 100%;
}
You could use CSS positioning to solve this. The following link has instructions on what you need I believe.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Edit: Sorry I misread, these should work for headers as well.
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://davidchambersdesign.com/css-fixed-position-headers/
Hope these help.
//header//
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
<meta name="Description" content="<?php echo $SITE_NAME;?>" />
<meta name="robots" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo SITE_NAME;?></h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<!--
<li>About</li>
<li>Services</li>
<li>Contact us</li>-->
</ul>
</div>
<div id="content">
//footer
</div>
<div id="footer">
Copyright © <?php echo SITE_NAME.' , '.date('Y');?>
</div>
</body>
</html>
//css
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
margin: 0 30px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 100%;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content
{
clear: left;
padding: 20px;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer
{
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}

Categories