Smooth scrolling not working from all links - javascript

I have a page with three on-page links that should all smoothly animate scrolling to the anchor link, but only the first link scrolls smoothly. Incidentally, the first link is the only link "above" the anchored link. The other two links, which ignore the smooth scrolling script, are located above the link and first scroll to the top of the page before snapping to the anchored link. How can I configure it so that the links beneath the anchored link scroll up smoothly to the anchored link, without scrolling to the top first?
Here's what I have:
const links = document.querySelectorAll(".cta-btn a");
for (const link of links) {
link.addEventListener("click", clickHandler);
}
function clickHandler(e) {
e.preventDefault();
const href = this.getAttribute("href");
const offsetTop = document.querySelector(href).offsetTop;
$("input[id$='input']").focus();
$(".guitar-service-address>span.placeholder-location").hide();
scroll({
top: offsetTop,
behavior: "smooth"
});
}
$('#input').on("focus", function() {
$(".guitar-service-address>span.placeholder-location").hide();
});
$(function() {
$("span.placeholder-location + input").keyup(function() {
if ($(this).val().length) {
$(this).prev('span.placeholder-location').hide();
} else {
$(this).prev('span.placeholder-location').show();
}
});
$("span.placeholder-location").click(function() {
$(this).next().focus();
});
});
if ($(window).width() < 768) {
$(".placeholder-above").append($(".placeholder-float").text());
}
.container {
max-width: 990px;
}
.tab-placeholder {
display: none;
}
input[id="input"] {
width: 500px;
}
.guitar-service-address>span.placeholder-location {
position: absolute;
margin: 6px 8px;
color: #686e74;
cursor: auto;
font: Helvetica 15px/20px bold;
font-weight: bold;
z-index: 1;
}
.guitar-service-address>.placeholder-location>.font-alt {
color: #686e74;
font-weight: normal;
}
input {
padding: 5px;
font-size: 11pt;
color: black;
border: 1px solid #979797;
border-bottom: 4px solid #000;
}
.help-block {
font-size: 90%;
}
.test {
padding: 20px;
}
.section {
padding: 150px 20px;
}
#head {
background-color: #ddd;
padding: 10px 20px;
}
#ckav {
background-color: #d4d4d4;
}
#cta {
background-color: #fdfd4d;
}
#media (max-width: 768px) {
input[id="input"] {
width: 300px;
}
span>.placeholder-float {
display: none;
}
.tab-placeholder {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section" id="head">
<div class="container">
<h2>CTA</h2>
<div>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
<section class="section" id="ckav">
<div class="container test">
<div class="row">
<div class="col-sm-12">
<div class="placeholder-above"></div>
<div class="guitar-service-address">
<span class="placeholder-location"><span class="placeholder-float">Find guitar repair specialist. </span><span class="font-alt">Enter your guitar make and model...</span></span>
<input id="input" type="text" />
</div>
<p class="help-block">What is this?</p>
</div>
</div>
</div>
</section>
<section class="section" id="stuff">
<div class="container">
<h2>Stuff</h2>
<div>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media
information without cross-media value.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
<section class="section" id="cta">
<div class="container">
<h2>CTA</h2>
<div>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</div>
<div class="cta-btn">
Check your guitar
</div>
</div>
</section>
Here's a fiddle: http://jsfiddle.net/Codewalker/6or8pwjx/

Just add this to the CSS. you don't even need Javascript/Jquery.
* {
scroll-behavior: smooth;
}
👉 Check it in action on Jsfiddle

Related

Keep getting "cannot read property style of null" error

I am working on my own website and not good with codes yet. When I am scrolling down I want to appear another content of the navbar and when I am on the top, original navbar is appearing. I want this to be done in pure JavaScript with no libraries or framewokrs. Please see codes below and I know that codes are not organised. I will do that later on.
var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
window.onscroll = function(){
if(document.body.scrollTop > 70){
hide.style.display = "block";
appear.style.display = "none"
} else {
hide.style.display = "none";
appear.style.display = "block"
}
}
nav{
list-style-type: none;
text-align: center;
background-color: #3FA9A5;
position: sticky;
top: 0;
}
.hide{
font-size: 70px;
font-family: 'Long Cang', cursive;
display: block;
}
.appear{
height: 70px;
display: none;
}
.appear img{
width: 210px;
}
ul{
margin: 0 auto;
padding: 0;
}
body{
margin: 0;
}
.container{
max-width: 1080px;
width: 95%;
margin: 10px auto;
display: grid;
grid-template-columns: 25% 50% 25%;
}
.text{
text-align: center;
}
.profile {
border: 1px solid black;
padding: 0 10px 20px 10px;
}
#main{
width: 100%;
}
.post{
margin-left: 4.165%;
}
#image{
width: 100%;
}
#post-divide{
margin-left: 10px;
margin-right: 10px;
}
.comments{
width: 100%;
margin-top: 68.5px;
padding-bottom: 293.5px;
border: 1px solid black;
}
h2{
text-align: center;
}
.center{
grid-column: 2;
}
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>
<body>
<nav>
<ul>
<li class="hide">Unknown</li>
<li class="appear"><img src="cat.png"></li>
</ul>
</nav>
<div class="container">
<div class="col-1">
<div class="profile text">
<img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
<hr>
<p>12 posts</p>
<p>instagram</p>
<button>Subscribe!</button>
</div>
</div>
<div class="col-1">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
<div class="col-1 center">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
</div>
I think I should add something to the JS code but don't know why
Would be thankful if you would advise me how could I write HTML/CSS code so I do not have to create 2 navbars if it is possible
The following instruction:
document.querySelector("hide");
Will query for elements like:
<hide></hide>
Since plain selectors without prefix (div, header, span) will query for the whole element tags, not for classes or attrbitues.
Maybe you meant to query for the class, using the .:
document.querySelector(".hide");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
So you should use class selector
You are using "hide" and "appear" as selectors but they do not exist in your HTML.
Use ".hide" and ".appear" in your querySelector instead.
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear");
Since both navbars have a static data, I would suggest to keep both of them and follow with answers of guys, that suggested to update querySelector param. Or you can hide/show the data inside of navbar (in your case it's only ul element) and leave the whole navbar always visible. So you can put classes appear/hide on ul element instea of navbar and then in JS get them with document.querySelector('.navbar .hide') and document.querySelector('.navbar .appear').
Using framework/library will definitely simplify it.
However, if you still want to have only one navbar in pure js/html/css (or it's data just dynamic) I would probably do like this:
HTML:
<nav class="navbar">
<ul>
<li><img src="cat.png"></li>
</ul>
</nav>
somewhere in JS:
var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
if (document.body.scrollTop > 70) {
navbarUl.innerHtml = '';
navbarUl.appendChild(getTopNavbarHTML);
} else {
navbarUl.innerHtml = '';
navbarUl.appendChild(getNavbarHTML);
}
}
getNavbarHTML and getTopNavbarHTML - will return documentFragment with li elements, see for details https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp
But changing DOM during a scroll event can drastically decrease performance of a web app

Display none mobile and desktop issue

What I am trying to figure out is how to have two things that are shown in desktop disappear in mobile. What is happening right now is that I have two aspects of my code the classes with images and the class titles in desktop and what is hidden (what the user has to click to get to) is the description of the project. My desktop version is perfect and how I want it, but the only issue I am having is that in mobile I ONLY want to show the descriptions of the projects and not the two clickable steps before. I know that this has something to do with display:none; or a combination of display properties but what I have been trying does not seem to work.
I was not sure how to put this in a snippet or in a fiddle because there are multiple html pages as well as a JSON file. So in that case I will link a url to it so that it is accessible.
If this does not make any sense or you need me to clarify I would be more than happy to! I could really use some help with this so if anyone out there has an idea on how to fix this it would be greatly appreciated! Thanks.
http://sws.mnstate.edu/ry6750sm/data-proj/education2.html
Here is the education.html:
<body>
<hr class="hr2">
<section id="content">
<div id="container">
<h2 >Class Projects</h2>
<div id="movecontainer">
<div id="move">
<div class="third ">
<div id="classes"><!--was event -->
<a id="GDES203" href="GDES203.html" ><img src="img/circlecircle.png" alt="GDES203" />GDES203</a>
<a id="gcom355" href="gcom355.html" ><img src="img/circlecircle.png" alt="GCOM355" />GCOM355</a>
<a id="COM230" href="COM230.html" ><img src="img/circlecircle.png" alt="COM230" />COM230</a>
</div>
</div>
<div class="third ">
<div id="projects"><!--was sessions -->
<p>Select a class</p>
</div>
</div>
<div class="third">
<div id="details"></div>
</div>
</div>
</div>
</div><!-- #container -->
</section><!-- #content -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/gcomclasses.js"></script>
</body>
Here is the description html:
<body>
<header>
</header>
<div id="Fender-Guitar" class="flex-item">
<h3>Fender Stratocaster Electric Guitar</h3>
<img alt="company logo" src="three-projects/int-com-graph/guitar2.png" height="150"/>
<p>The guitar is a Fender Stratocaster Electric Guitar that I replicated in Adobe Illustrator. I used shadows and highlights to create depth for the piece as well as added gradient detail. </p>
</div>
<div id="Fancy-Fishes" class="flex-item">
<h3>Fancy Fishes</h3>
<a href="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" ><img alt="company logo" src="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" height="150"/></a>
<p>Fancy Fishes is a clothing line that features the underwater style and I created this piece by using many gradient meshes, a scaling pattern for the fish, and layered meshes for the realistic pearl effect. </p>
</div>
<div id="Dragon-Tracks" class="flex-item">
<h3>Dragon Tracks</h3>
<img alt="company logo" src="three-projects/int-com-graph/covercover.jpg" height="150"/>
<p>This CD cover was inspired by icycles. The way I captured this look was by using photos of melted crayon wax and putting it into Adobe Photoshop and changing the hue to get the desired color. The smoke was created in Adobe Illustrator as a brush to try and create a unique smoked icycle style. </p>
</div>
<div id="Gelato-Company" class="flex-item">
<h3>L'Airone Gelato</h3>
<img alt="company logo" src="three-projects/graphic-design/gelato.jpg" height="150"/>
<p>This design was for a gelato company that served all its ice cream as coffee flavors. Thus, I tried to create a coffee-oriented design with a logo centered around coffee in an ice cream cone. </p>
</div>
<div id="Company-Logo" class="flex-item">
<h3>Company Logo</h3>
<img alt="company logo" src="three-projects/graphic-design/abstract.jpg" height="150"/>
<p>This piece was inspired by the idea of creating a logo for a company with an abstract panda logo. This company's logo is made up of pieces that unify the panda and thus the company. </p>
</div>
<div id="Band-Logo" class="flex-item">
<h3>Band Logo</h3>
<img alt="company logo" src="three-projects/graphic-design/abpanC.jpg" height="150"/>
<p>This logo was inspired by the band KISS. If KISS was to have a panda as their mascot then this is the type of logo that they would have. This was made with the crystallize tool in Adobe Illustrator to get the spiky feel. </p>
</div>
<div id="Photo-1" class="flex-item">
<h3>Flower</h3>
<img alt="company logo" src="three-projects/Photography_pics/flower.jpg" height="150"/>
<p>This photo was created with a painting with light technique where the camera captures a light pattern through long exposure. The more the light is moved in the shot and the longer the exposure, the lighter and movement of light is captured. This photo was captured with a thirty second exposure and edited in Adobe Photoshop. </p>
</div>
<div id="Photo-2" class="flex-item">
<h3>Graffiti</h3>
<img alt="company logo" src="three-projects/Photography_pics/IMG_0441.jpg" height="150"/>
<p>This photo was captured in the heart of downtown Fargo. The graffiti was on a random building from an anonymous artist. So the origins of the art is unknown, however the piece is beautifully painted and was edited in Adobe Photoshop. </p>
</div>
<div id="Photo-3" class="flex-item">
<h3>Grains of Sand</h3>
<img alt="company logo" src="three-projects/Photography_pics/IMG_0505.jpg" height="150"/>
<p>This photo was captured of a building’s wall in downtown Fargo that was eroding. The intent of the photo was to try and capture the details of the wall so that the viewer could see the grains of sand. </p>
</div>
</body>
Here is the Javascript:
// NOTE: This example will not work locally in all browsers.
// Please try it out on the website for the book http://javascriptbook.com/code/c08/
// or run it on your own server.
$(function() { // When the DOM is ready
var projectList; // Declare global variable
$.ajax({
beforeSend: function(xhr) { // Before requesting data
if (xhr.overrideMimeType) { // If supported
xhr.overrideMimeType("application/json"); // set MIME to prevent errors
}
}
});
// FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
function loadClassProjects() { // Declare function
$.getJSON('data/projects.json') // Try to collect JSON data
.done( function(data){ // If successful
projectList = data; // Store it in a variable
}).fail( function() { // If a problem: show message
$('#classes').html('Sorry! We could not load the Class Projects at the moment');
});
}
loadClassProjects(); // Call the function
// CLICK ON THE EVENT TO LOAD A ClassProjects
$('#content').on('click', '#classes a', function(e) { // User clicks on event
e.preventDefault(); // Prevent loading page
var loc = this.id.toUpperCase(); // Get value of id attr
var newContent = ''; // Build up ClassProjects by
for (var i = 0; i < projectList[loc].length; i++) { // looping through events
newContent += '<li><span class="software">' + projectList[loc][i].software + '</span>';
newContent += '<a href="descriptions.html#';
newContent += projectList[loc][i].title.replace(/ /g, '-') + '">';
newContent += projectList[loc][i].title + '</a></li>';
}
$('#projects').html('<ul>' + newContent + '</ul>'); // Display projectList on page
$('#classes a.current').removeClass('current'); // Update selected item
$(this).addClass('current');
$('#details').text(''); // Clear third column
});
// CLICK ON A SESSION TO LOAD THE DESCRIPTION
$('#content').on('click', '#projects li a', function(e) { // Click on session
e.preventDefault(); // Prevent loading
var fragment = this.href; // Title is in href
fragment = fragment.replace('#', ' #'); // Add space after#
$('#details').load(fragment); // To load info
$('#projects a.current').removeClass('current'); // Update selected
$(this).addClass('current');
});
});
Here is the JSON:
{
"GDES203": [
{
"software": "Illustrator",
"title": "Gelato Company"
},
{
"software": "Illustrator",
"title": "Company Logo"
},
{
"software": "Illustrator",
"title": "Band Logo"
}
],
"GCOM355": [
{
"software": "Illustrator",
"title": "Fender Guitar"
},
{
"software": "Illustrator",
"title": "Fancy Fishes"
},
{
"software": "Indesign Illustrator Photoshop",
"title": "Dragon Tracks"
}
],
"COM230": [
{
"software": "Photoshop",
"title": "Photo 1"
},
{
"software": "Photoshop",
"title": "Photo 2"
},
{
"software": "Photoshop",
"title": "Photo 3"
}
]
}
Here is the CSS:
#attended{
margin-left: 20px;
margin-right:20px;
font-size:25px;
margin-top:80px;
}
body {
background-color: #fff;
height:100%;
font-family: 'Open Sans', arial, sans-serif;
width: 960px;
margin: 0 auto 0 auto;
color: white;
}
.all{
margin-left: auto;
margin-right: auto;
display:block;
}
h1 {
font-weight: normal;
margin: 28px 0 0 0;
float: left;
width: 225px;
height: 90px;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
h2 {
font-size: 40px;
text-align: center;
padding: 0;
color: white;
line-height: 1em;
letter-spacing: -.06em;}
h3 {
margin: 0;
font-size: 1.4em;
color: #29BCCA;
font-family: 'Philosopher', sans-serif;
padding-bottom: 15px;
}
a {text-decoration: none; color: white;}
.third, .classes {
width: 320px;
float: left;
text-align: center;
}
.hr2{
border: none;
border-bottom: 1px solid #999;
width: 70%;
color:#485A5F;
height: 2px;
}
.classes p {border-right: 1px solid #999 ;
}
#content .classes:last-child p {border-right: none;}
.third p {
padding: 0 20px 0 20px;
margin: 40px 0 20px 0;
text-align: left;
line-height: 1.4em;}
/* Projects */
#classes a {
font-family: 'Philosopher', sans-serif;
font-size: 120%;
text-transform: uppercase;
text-align: left;
line-height: 2.5em;
display: block;
height: 120px; width: 100%;}
#classes img {
width: 30px;
height: 30px;
float: left;
margin-right: 10px;
padding: 10px;
}
#classes a:hover, #projects a:hover {color: #1DA0A3;}
#projects a {
font-family: 'Sahitya', serif;
font-size: 120%;}
#projects p {
margin-top: 2em;}
#projects ul {
border-left: 1px solid #999;
border-right: 1px solid #999;
height: 350px;
padding: 0 20px 0 20px;
margin: 0 0 40px 0;}
#projects li {
list-style-type: none;
padding: 40px 0px 40px 0px;
border-top: 1px solid #d6d6d6;
text-align: left;
}
#projects li:first-child {
border-top: none;
padding-top: 1.8em;}
#projects li .software {
display: inline-block;
width: 110px;
}
#details div {
padding: 1.8em 0 0em 1;}
#details p {
padding: 10px;
margin: 0.8em 0 0 2em;}
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.third:nth-child(1) a img, .third:nth-child(2) p {
display: none;
}
}

Multilevel drop-down in mootols

i have some issue i'm new in javascript and can't handle with multilevel nested blocks: I need to open nested block using toogle and mootools. I found some examples like accorodion, but i need toogle effect on nested blocks.
Can you help me?
Thanks.
1) here example that i found on jquery, i need the same but on mootools
$('.nested-accordion').find('.comment').slideUp();
$('.nested-accordion').find('h3').click(function(){
$(this).next('.comment').slideToggle(100);
$(this).toggleClass('selected');
});
* {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 1em;
font-family: Calibri, Arial, sans-serif;
}
.container {
margin: 0 auto;
width: 80%;
}
.nested-accordion {
margin-top: 0.5em;
cursor: pointer;
}
.nested-accordion h3 {
padding: 0 0.5em;
}
.nested-accordion .comment {
line-height: 1.5;
padding: 0.5em;
}
.nested-accordion h3 {
color: #47a3da;
}
.nested-accordion h3:before {
content: "+";
padding-right: 0.25em;
color: #becbd2;
font-size: 1.5em;
font-weight: 500;
font-family: "Lucida Console", Monaco, monospace;
position: relative;
right: 0;
}
.nested-accordion h3.selected {
background: #47a3da;
color: #fff;
}
.nested-accordion h3.selected:before {
content: "-";
}
.nested-accordion .comment {
color: #768e9d;
border: 0.063em solid #47a3da;
border-top: none;
}
.nested-accordion a {
text-decoration: none;
color: #47a3da;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>
This is a comment
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>
This is a another content which is really long and pointless but keeps on going and it technically a run-on sentence but here is a link to google to distract you -> <a href='http://google.com' target='_blank'>link</a>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
One Mootools function I like is Reveal.
This can reveal up/down or left/right.
element.toggle() will snap to the opposite state (if open, will close without animating, etc). Otherwise, element.reveal() or element.dissolve() will open / close.
In your case, you would want something like:
var container = document.getElement('.container');
Array.each(container.getElements('.comment'), function(comment){
comment.set('reveal', {duration: 250}).toggle();
if(comment.getPrevious('h3')){
comment.getPrevious('h3').addEvent('click', function(e){
var comment = e.target.getNext('.comment');
if(comment.getStyle('display')==='block'){
e.target.getNext('.comment').dissolve();
}else{
e.target.getNext('.comment').reveal();
}
});
}
});
I am using Mootools long hand methods here (avoiding dollar) so that you can play nice with other frameworks (like jQuery).
The Mootools docs are pretty good, but may take some trial and error ;)
Mootools Reveal
Here is an example with your HTML / CSS:
JSFiddle Example
I hope this helps!

How to implement this layout

I found a web page which shows only 3 events in a grid and when the screen is re-sized less a certain width, it not only relocates the 3 events into a list but also changes the layout inside each event.
I have tried many ways to make it look like that web page, but have not got any luck.
this is the web page
And this is what I have done: CodePen
/* -- DEFAULTS -- */
div, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/* -- FLUID GRID STYLES -- */
#Grid {
margin-bottom: 40px;
text-align: justify;
font-size: 0.1px;
}
#Grid li {
display: inline-block;
background: #eee;
width: 23%;
padding-top: 23%;
/* Used instead of height to give elements fluid, width-based height */
margin-bottom: 2.5%;
}
#Grid:after {
content: 'haha';
display: inline-block;
width: 100%;
border-top: 10px dashed #922d8d;
/* Border added to make element visible for demonstration purposes */
}
ul li .icon {
width: 100%;
display: table;
min-height: 300px;
height: 300px;
padding: 0;
background: #545454 url(https://www.nike.com/events-registration/client-dist/assets/images/multi-card-bg.png) no-repeat center center;
}
#Grid .placeholder {
padding: 0;
border-top: 10px solid #922d8d;
/* Border added to make element visible for demonstration purposes */
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */
/* 3 COL */
#media (max-width: 800px) {
#Grid li {
width: 31%;
padding-top: 31%;
margin-bottom: 3%;
}
}
/* 2 COL */
#media (max-width: 600px) {
#Grid li {
width: 48%;
padding-top: 48%;
margin-bottom: 4%;
}
}
/* SINGLE COL */
#media (max-width: 400px) {
#Grid li {
width: 100%;
padding-top: 100%;
margin-bottom: 5%;
}
}
/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
h1 {
font: 600 20px"Helvetica Neue";
text-align: right;
text-transform: uppercase;
}
label {
padding: 8px 15px;
margin-bottom: 20px;
display: block;
font: 100 22px"Helvetica Neue";
border-left: 10px solid #922d8d;
}
label:last-of-type {
border-left: 10px dotted #922d8d;
}
p {
font: 200 15px/1.5em"Helvetica Neue";
max-width: 400px;
margin-bottom: 30px;
color: #333;
}
Update
Here is my updated code. The problem is I cannot place the "1 JAN" and "NEW YEAR" in the middle of the div.
Updat 2
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="row hidden-xs icon">
<div class="title">1 JAN</div>
<div class="event-time"><i>8:00PM</i></div>
<div class="sub-title">This Event is Full</div>
</div>
<div class="row hidden-xs sub-icon">
<div><span>LRC Thursday Night Run test long long</span></div>
<div>
<input type="button" class="btn btn-primary" value="Register" />
</div>
</div>
<div class="row hidden-sm event-sm">
<div class="col-xs-4 event-left">
<div class="event-day">01</div>
<div class="event-month">JAN</div>
<div class="event-time"><i>8:00PM</i></div>
</div>
<div class="col-xs-8 event-right">
<div class="event-notice">This event is full</div>
<div class="event-title">NIKE RUN 10 KM</div>
<div class="event-slogan">Come run with us</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">14 FEB</h1>
<p class="text-center hidden-xs">Valentine</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>February 14th</i>
</div>
<div class="col-xs-8">Ah! Lovey Dovey Day... Where is my chocolate?</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">1 APR</h1>
<p class="text-center hidden-xs">April Fool</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>April 1st</i>
</div>
<div class="col-xs-8">Your car just got stolen.... JUST KIDDING!!!</div>
</div>
</div>
</div>
</div>
</div>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
If you are already using Bootstrap, you already have this capability. Use hidden-.. and the col-xx-... classes to make your page responsive.
See this example: http://embed.plnkr.co/IH4WeZ/
It's all done using bootstrap css. The trick is to hide stuffs at certain media query and show them whenever appropriate.
I only coded it be responsive at small and extra small size, so on medium and large it's a bit bonker... but you get the idea...
You could use the Bootstrap grid system to do something like this.
You could use a combination of the columns, and offset to achieve this.
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
That will span three columns across the full width of the page. You could experiment with smaller width columns, and adding an offset to the first one to push it away from the left edge.
http://getbootstrap.com/css/#grid-offsetting
If you want to achieve a similar effect, try and replicate it with minimal code and work from there.
Here is a simple example I have knocked up to get the layout working:
http://codepen.io/anon/pen/OPeXgj
HTML
<ul class="events">
<li>Event Name</li>
<li>Event Name</li>
<li>Event Name</li>
</ul>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.events {
clear: both;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.events li {
float: left;
clear: both;
width: 100%;
background: yellow;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 768px) {
.events li {
width: 33.3%;
clear: none;
}
}
Using a mobile first approach, child items are styled with a width: 100%; and clear: both; Then, with a simple media query, I float them left and set a width to around a 3rd (33.3%) (there could be a better way, but this was a quick fix).
If you're using a grid system, it may be even easier. I would look into Bootstrap or Foundation, as many of these problems have already been solved many times over.
Good luck!
Last resort solution is to code two versions. One for mobile and another one for desktop. Then use media queries to hide one on mobile resolution and the other on desktop.
This will add some extra load on the page, but it should do it.

JavaScript Enabled Scroll Fixed Nav Bar Trouble

I have a JavaScript enabled scrolling nav bar. It starts below a hero graphic then sticks to the top when it gets to the top. It works perfectly, however, when it reaches the top it causes the div below it to snap to the top instead of smoothly getting there. It's hard to explain so here's the code.
I know what's happening: Once the nav bar reaches the top, it stacks above the div causing the div to "jump." I just can't figure out how to make it smoother.
Here's the code and thanks for your thoughts!
<body>
<div class="home-hero-image">
<h1>Assemble</h1>
</div>
<div class="header">
<div class="header_container">
<div class="header_onecol">
<ol>
<li class="links">Blog</li>
<li class="links">Members</li>
<li class="links">Technology</li>
<li class="links">Contact Us</li>
</ol>
</div>
</div>
</div>
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</body>
body {
font-family: Helvetica, Arial, Sans-serif;
font-style: normal;
font-weight: 200;
color: #888888;
margin: 0;
padding: 0;
font-size: 100%;
display: block;
text-align: center;
}
p {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
.home-hero-image {
height: 250px;
background: url('../images/hero_image.jpg') no-repeat;
z-index: -1;
}
h1 {
color: white;
float: right;
padding-right: 5%;
font-size: 5em;
}
.header {
height: 77px;
position: relative;
clear: both;
background-color: white;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
.fixed {
position:fixed;
top:0px;
right:0px;
left:0px;
padding-bottom: 7px;
z-index:999;
}
.header_container {
width: 75%;
margin: 0 auto;
padding: 0 12px;
}
.header_onecol {
width: 97%;
height: 40px;
margin: 1%;
display: block;
overflow: hidden;
background-image: url('../images/Logo.png');
background-repeat: no-repeat;
padding-top: 24px;
}
<script language="javascript" type="text/javascript">
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
</script>
When a div is fixed, it will no longer take up "space", meaning the next div will do exactly as you described -- stack up near the top.
Consider wrapping all of your content after the header using a div:
<div class="header">
...
</div>
<div class="main-body">
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</div>
When we fix the header, we can add top-padding equal to the height of the header to the main-body div to prevent it from jumping.
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
$(".main-body").css("padding-top", fxel.height());
fxel.addClass("fixed");
} else {
$(".main-body").css("padding-top", 0);
fxel.removeClass("fixed");
}
});
JSFiddle here
Hope this helps!

Categories

Resources