I'm trying to figure out how to set some section headings to remain fixed, but then scroll up with the page when the user reaches the next heading. Example: http://www.codeandtheory.com/about-us.
My markup:
<div class="section-title"><div class="section-bar"></div>
<p class="section-title">Collections Management</p>
</div>
My CSS:
.section-title {
width: 270px;
font-size: 30px;
line-height: 38px;
color: #f18a21;
text-transform: uppercase;
position: fixed;
float: left;
display: block;
}
Test link: http://api.mtscollective.com
Can this be done in pure CSS, or is JS required?
Thanks!
Js is required!
try this to the same
jQuery
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.section-title').addClass('fixed');
} else {
$('.section-title').removeClass('fixed');
}
});
</script>
and CSS:
.fixed {position:fixed; top:0; left:0;}
Related
First off I'm having a tough time understanding the fundamentals of the hero-transition within Polymer. I am attempting to build a hero transition card like the one in the example provided by them, which can be found here.
Below I've built the mini card and I'm just trying to understand the transition and how the larger card works with the smaller one.
My specific question is, how does the transition bind to each element? Do I need to complete the CSS for both before I can begin playing with the core-animated-pages? Does having an embedded template matter?
Any guidance would be extremely helpful.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
<template>
<style>
#page2 {
width: 100%;
height: 100%;
}
#paper_shadow {
position: relative;
display: inline-block;
font-family:'Roboto', sans-serif;
font-size: 12px;
color: white;
}
#chip_body {
height: 400px;
width: 300px;
background-color: aqua;
color: black;
}
#chip_top {
background-color: deeppink;
background-image: url();
background-size: cover;
background-position: center center;
width: 100%;
position: relative;
}
#chip_bottom {
background-color: #fbfbfb;
width: 100%;
height: 20%;
position: relative;
font-size: 1.2em;
word-wrap: break-word;
}
#text {
padding-left: 5%;
padding-right: 2.5%;
overflow: hidden;
}
#coreImage {
display: block;
}
#card_container {
width: 70%;
height: 600px;
background-color: aqua;
color: black;
}
#card_right {
height: 100%;
width: 30%;
}
#card_left {
background-color: darkblue;
height: 100%;
width;
70%;
}
#card_left_top {
padding-right: 20px;
padding-top: 20px;
background-color: skyblue;
}
#circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
#header_text {
}
#card_content {
width:100%;
background-color: lightcoral;
}
</style>
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
</section>
</core-animated-pages>
</template>
<script>
Polymer('chip-card', {
page: 0,
raise: function() {
this.$.paper_shadow.setZ(2);
},
lower: function() {
this.$.paper_shadow.setZ(1);
},
transition: function(e) {
if (this.page === 0) {
this.$.paper_shadow = e.currentTarget;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
you are actually very close to a working transition with the code you have.
I've implemented a more complicated hero transition on my website and took some code from there to get yours to work.
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" hero-p on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" hero vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero></div>
</section>
</core-animated-pages>
I've made but a few adjustments.
First off, any hero parent element, with the hero-p attribute, should contain just that attribute. So no need for the quotation marks :)
<paper-shadow hero-p .. >
Every element that's part of the Hero transition, needs a hero attribute.
Again, without the quotation marks. <div id="chip_body" .. hero .. >
And the same thing goes for the element you're transitioning to.
<div id="card_container" .. hero .. >
I've put a working version of your code on my website.
There's page containing the <chip-card> element and a second page containing the working template file.
Index page
Template file
Please note : I edited the reference to webcomponentsjs to conform with my folder structure.
Feel free to ask me if there's anything else!
Currently i have a running slideshow as my website background (3 images)
I also have a logo in the middle of these 3 images, which remains there throughout the duration of the slideshow.
Whilst the first image is displayed (when the website is loaded up) the logo image (which also has the function of a button) can be clicked and direct you to another website, however when the images change, the logo remains, however the ability to click is gone...
all help greatly appreciated
here is my current code
$(document).ready(function() {
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)', 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)', 'url(http://guruwallpapers.com/wp-content/uploads/2014/09/Sunset-Wide-Screen-Wallpapers-6.jpg)'
);
var current = 0;
function nextBackground() {
$('#mask').fadeTo(1000, 0.9, function() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
})
$('#mask').fadeTo(500, 0);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
body {
-webkit-background-size: 1390px 700px;
-moz-background-size: 1390px 700px;
background-size: 1390px 700px;
}
h1 {
font-size: 600%;
color: white;
margin-top: 0.5em;
}
h3 {
color: white;
margin-top: -50px;
}
.GFImage {
margin-top: 65px;
border: 0;
}
.Footer {
position: fixed;
bottom: 0;
width: 100%;
margin-left: -8px;
color: white;
background: #151515;
opacity: 0.8;
text-align: center;
vertical-align: middle;
height: 7%;
}
#mask {
width: 100%;
height: 100%;
background: #000000;
top: 0;
left: 0;
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<br>
<h1>Welcome to GF</h1>
</center>
<center>
<br>
<h3>Welcome to GF! Check out all the information you need by just the click of a button...</h3>
</center>
<center>
<a href="Home Page .html">
<img src="Images/GF Logo White .jpg" style="width: 275px; height: 275px;" class="GFImage">
</a>
</center>
<div class="Footer">
<p>Copyright © All Rights Reserved. Design by Gavin Foley.</p>
</div>
<div id="mask">SCRIPT FUNCTION IN HERE!!!!</div>
Seams like the link goes below the images.
I was able to solve this adding to the link element these properties:
position:absolute;
z-index:9
and then it should work.
EDIT
Just as a suggestion, have a look at this example, it could be useful if you are at the first try with html and css:
http://css-tricks.com/perfect-full-page-background-image/
I'm trying to make a status display with 3 numbers inline with other text like so:
-- a kind of flipped "Isotope notation".
I can do this with tables but a CSS approach is eluding me at the moment.
Ideally, I'd like to structure the HTML something like this (or simpler):
<p>
<div class="sharesblock">
<div class="shares">2535</div>
<div class="updwncontainer">
<div class="gains">2666</div>
<div class="losses">-13</div>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
But I can't quite make it work. This almost does it:
div.sharesblock {
display: inline-block;
margin-right: 3ex;
position: relative;
}
div.updwncontainer {
position: absolute;
right: -2.8ex;
top: -0.3ex;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
But that absolute positioning doesn't work well with variably-sized numbers. EG:
Here's the jsFiddle.
Update:
Oops. The above HTML does not validate. <p> elements are not allowed to have block-element children.
The production code replaces the p nodes with lis.
Tested and this does not affect the answers below, though. They work the same irregardless.
Here is the kind of testing I used to pick an answer.
Use relatives position and float
FIDDLE
html
<p>
<div class="sharesblock">
<div class="shares">25355</div>
<div class="updwncontainer">
<div class="gains">2666666</div>
<div class="losses">-139999</div>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
css
div.sharesblock {
margin-right: 3ex;
position: relative;
clear:both;
}
div.sharesblock .shares{
float:left;
margin-right:.5ex;
}
div.updwncontainer {
position: relative;
float:left;
margin-right:.5ex;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
span.companyname {
font-style: italic;
}
Demo Fiddle
Remove position absolute from .updwncontainer & use float:left property on .shares & .updwncontainer.
CSS
div.sharesblock {
margin-right: 3ex;
position: relative;
}
.shares {
float:left;
margin-right: 5px;
}
div.updwncontainer {
position: relative;
float: left;
margin-right: 5px;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
span.companyname {
font-style: italic;
}
Is this what you are looking to achieve? (jsFiddle) Feel free to add the margins you want.
By the way, according to these guys, avoid div.className in CSS when not needed. Simply use .className instead.
Adjusted HTML:
<p>
<div class="sharesblock">
<div class="shares">2535</div>
<div class="updwncontainer">
<span class="gains">2666</span>
<br/>
<span class="losses">-13</span>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
CSS:
.sharesblock {
display: inline-block;
vertical-align:middle;
}
.shares {
display:table-cell;
vertical-align:middle;
padding-right: 0.5ex; /* OP Added */
}
.updwncontainer {
display: table-cell;
vertical-align:middle;
line-height: 1ex; /* OP Corrected from px units */
padding-bottom: 0.5ex; /* OP Added to tweak alignment -- better than other solutions. */
}
.losses {
font-size: 1.1ex;
color: red;
}
.gains {
font-size: 1.1ex;
color: green;
}
I made a header navigation and it's halfway down the page. When you scroll, and it's on the top of the page I want it to stick, if you know what I mean.
I hope someone can tell me how I get this done. Demo JsFiddle
HTML
<header>menu</header>
CSS
body, html {
height: 2000px;
}
header {
position: absolute;
top: 300px;
background-color: black;
color: white;
width: 100%;
}
You are going to need some JavaScript.
Demo JsFiddle
HTML
<header>
<div class="logo">AWESOME HEADER!</div>
<div class="menu">Menu goes here - home - links - blah blah</div>
</header>
<div class="content">
<!-- your stuff -->
</div>
CSS
* { margin:0; padding:0; }
.logo {
font-size:40px;
font-weight:bold;
color:#a00;
font-style:italic;
}
.menu {
background:#a00;
color:#fff;
height:30px;
line-height:30px;
letter-spacing:1px;
width:100%;
}
.content { margin-top:10px; }
/* the trick */
.menu-padding { padding-top:40px; }
.sticky {
position:fixed;
top:0;
}
Javascript (JQuery)
$(document).ready(function () {
var menu = document.querySelector('.menu');
var origOffsetY = menu.offsetTop;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu').removeClass('sticky');
$('.content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Take a look at this tutorial. It explains how to do it using either CSS or jQuery depending on what you want.
http://www.hongkiat.com/blog/css-sticky-position/
Check out my blog here:
http://www.brixwork.com/realtors/blog/seo/best-time-to-post-on-facebook-or-twitter-and-email/
When you try to click the "LIKE" button, the pop up comes up at the right height, but the width is restricted to the width of the button.
Here's my CSS code:
.blog_social_media {
float: right;
border-left: 1px dotted #666;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
overflow: visible;
}
.blog_social_media div {
position:relative;
display:block;
float:left;
}
iframe.fb_ltr {
width: 300px !important;
}
.blog_twitter_button {
width: 55px;
height: 62px;
margin: 0px 0px 10px 10px;
}
.blog_facebook_button {
width: 50px;
height: 63px;
overflow: visible !important;
margin: 0px 0px 10px 10px;
}
.blog_googleplus_button {
width: 50px;
height: 64px;
margin: 0px 0px 10px 10px;
}
Here's the HTML code:
<div class="blog_social_media" style="width:65px; height:auto;">
<div class="blog_twitter_button">
Tweet
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="blog_facebook_button">
<div class="fb-like" data-href="http://www.brixwork.com/realtors/blog/seo/three-reasons-to-claim-your-place-on-google-places/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="lucida grande">
</div>
</div>
<div class="blog_googleplus_button">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
I have overflow:visible; set on all my elements that enclose the facebook balloon. The same CSS logic works just fine on the Google+ popup dialogue, just the Facebook one is choking. What's going on that I can fix?
Thanks in advance.
.fb_edge_widget_with_comment span
{overflow:visible !important; width:450px !important; margin-right:-375px;}
Put that in your css, it will set the size of the popup to its undeclared size and will reduce the overwidth by negative margining.
It seems like there is a problem with:
<div class="blog_facebook_button">
<div class="fb-like" data-href="http://www.brixwork.com/realtors/blog/seo/three-reasons-to-claim-your-place-on-google-places/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="lucida grande">
</div>
</div>
The attr data-width="50" needs to be data-width="250" and then you need to add
.blog_facebook_button { position: relative; }
.fb-like { position: absolute; top: 0; left: 0; }
This worked for me.
.fb-like span {
overflow:visible !important; width:450px !important; margin-right:-400px;
}
looks like div.fb-like -> span is cutting it off try CSS:
div.fb-like span {
width: 450px;
overflow: visible;
}