I am trying to implement smooth scrolling in my website, but haven't been able to use any of the jquery plugins available, as i am not too acquainted with javascript.
Any help in this regard would be helpful.
Here is the relevant code:`
<div class="container-fluid" id="navigation">
<div class="row-fluid">
<div class="span2 ">
<div class=" sidebar-nav sidebar-nav-fixed">
<h4>About</h4>
<h4>Our Services</h4>
<h4>Awards</h4>
</div>
</div>
<div class = "span10" style="margin-top:30px">
<div class="hero-unit " >
<div id="about" >
<h1 >About </h1>
<hr>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div id="ourservices" >
<h1 >Our Services</h1>
<hr>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="awards" >
<h1 >Awards</h1>
<hr>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
My intention is to display on "about" section ...and when a user clicks on say services... the hero-unit scrolls to "services" section.
A detailed answer would be appreciated as i am not very acquainted with javascript.
Thanks a lot.
You can use iscroll plugin of jquery...
Iscroll
I have used this in may mobile web-site : smooth-scroll
go to the year selection page..there is a smooth scroll implementation.
Related
I'm trying to implement a bootstrap sticky navbar (fixed height of 81px) with smooth-scroll behavior.
The HTML site features section tags, such as <section class="section" id="news">, which works in order to jump to certain areas by using <a class="nav-link" href="#news">News</a> in the navbar. I am using the following CSS and JS technologies, which load at the beginning of the <body>:
https://getbootstrap.com/docs/4.6/components/navbar/
https://github.com/iamdustan/smoothscroll
https://github.com/jonaskuske/smoothscroll-anchor-polyfill
So far it works: at the bootstrap specific --breakpoint-lg at 992px, the navbar collapses into a burger menu. In order to compensate for the fixed-height navbar, I added the following code to my custom.css (loaded after the bootstrap.min.css of course), according to a trick found at https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
#media (max-width: 991px) {
section {
padding-top: 382px;
margin-top: -382px;
}
}
#media (min-width: 992px) {
section {
padding-top: 80px;
margin-top: -80px;
}
}
This works fine on larger dimensions of the browser window width, but as soon as it's loaded on smaller width windows (991px and below) - on almost all mobile devices - clicking the navbar-link jumps to a point slightly vertically offset. Any ideas why this happens? It seems my media-query for max-width: 991px is being ignored.
Thanks for your advice of creating a snippet. This shows the working trick by use of background colors for the individual divs within the sections. This way the very first element (a h2-heading) is at the top of each area that we jump to. When not using background-colors this totally works for the viewer and reader of the continous text with h2-headers in between.
I think I found a satisfying solution. My problem with the padding-top / margin-top trick was: instead of (correctly) styling the <div class="container" id="first"> in the CSS, I styled the <section>. Eventually, I also did not need the #media query anymore.
$(function() {
$(".nav-link").click(function() {
let nav = $(".navbar-collapse");
if (nav.hasClass("show")) {
nav.removeClass("show");
}
})
})
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
font-family: 'scroll-behavior: smooth;', sans-serif;
}
.container {
padding-top: 80px;
margin-top: -80px;
}
p {
line-height: 2em;
}
.navbar {
background: lightgoldenrodyellow;
}
.container {
display: grid;
}
#first {
background-color: lightcoral;
}
#second {
background-color: lightgreen;
}
#third {
background-color: lightblue;
}
#fourth {
background-color: lightgray;
}
#fifth {
background-color: lightyellow;
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>bootstrap / breakpoint / smooth-scroll issue</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.easing#1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smoothscroll#0.4.0/smoothscroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smoothscroll-anchor-polyfill#1.3.4/dist/index.min.js"></script>
<script src="script.js"></script>
<!-- Navigation Start -->
<nav class="navbar navbar-expand-lg sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-center">
<li class="nav-item active">
<a class="nav-link" href="#first">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#second">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#third">Third</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fourth">Fourth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fifth">Fifth</a>
</li>
</ul>
</div>
</nav>
<!-- Navigation End -->
<!-- Content Start -->
<section class="section">
<div class="container" id="first">
<h3>first</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="section">
<div class="container" id="second">
<h3>second</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="section">
<div class="container" id="third">
<h3>third</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="section">
<div class="container" id="fourth">
<h3>fourth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="section">
<div class="container" id="fifth">
<h3>fifth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<!-- Content End -->
</body>
</html>
Well, I am very new to web programming, I am coding a landing page where first column content is not fixed, it can be more or less.
I want to hide my CTA, once a user reaches to author info.
Any help will be appreciated, Thanks for your concern.
My codes:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Scroll</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.cta{
position:sticky;
top:600px
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Hide a div after regular amount of scroll</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="article-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="col-sm-4">
<div class="cta bg-dark py-5 text-light text-center">
subscribe our newsletter
</div>
</div>
</div>
</div>
<div class="container author-info">
<div class="row">
<div class="col-sm-12 py-3">
<div><strong>Author name</strong></div>
<div class="py-2"><strong>Author info:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</body>
</html>
However I tried this, but as I said scroll amount can be undefined/ depends upon content
<script>
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 900 && y < 1200) {
$('.cta').fadeIn();
} else {
$('.cta').fadeOut();
}
});
</script>
There is a neat jQuery plugin called jQuery Visible which will deliever what you want. I added a snippet. Since I dont know what you mean by CTA, the article content will be hidden once the full author info is visible. If you pass true to the visible function the hiding starts as soon as a pixel of the div is visible.If you scroll out and everything of the div is out of screen, the other part gets shown again.
Of course you could go for your own implementation but since you are already using jQuery why not go for an existing solution.
$(document).scroll(function() {
if ($('.author-info').visible(true)){
$('.article-content').hide();
} else {
$('.article-content').show();
}
});
(function($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* #author Sam Sehnert
* #desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Scroll</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.cta {
position: sticky;
top: 600px
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Hide a div after regular amount of scroll</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div style="height:200px">
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="article-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="col-sm-4">
<div class="cta bg-dark py-5 text-light text-center">
subscribe our newsletter
</div>
</div>
</div>
</div>
<div class="container author-info">
<div class="row">
<div class="col-sm-12 py-3">
<div><strong>Author name</strong></div>
<div class="py-2"><strong>Author info:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</body>
</html>
Here is my code:
<div id="authorarea">
<img alt="" src="#" height="70" width="70">
<p class="written">
Written by: Steven Stamkos
</p>
<div class="authorinfo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="authorarea">
<img alt="" src="#" height="70" width="70">
<p class="written">
Written by: Nikita Kucherov
</p>
<div class="authorinfo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
The only differences are the "title" and the content inside of the a tag.
I tried to do something like this but I am not grabbing the title correctly:
if ($('#authorarea .written a').attr('title', 'Steven Stamkos')) {
$('#authorarea .authorinfo').append('<div>test</div>');
} else if ($('#authorarea .written a').attr('title', 'Nikita Kucherov')) {
$('#authorarea .authorinfo').append('<div>test2</div>');
}
So I'm looking for suggestions on how to target the title correctly or the content inside of the a tag. Any help is much appreciated and I hope I explained what I'm trying to do properly enough.
Your current code
if ( $('#authorarea .written a').attr('title', 'Steven Stamkos') ) {}
sets the attribute to the given value and then returns a jQuery object which naturally evaluates to true.
What you probably want is
if ( $('#authorarea .written a').attr('title').localeCompare('Steven Stamkos') === 0 ) {}
When I click on the nav link it scrolls me to the top of the page on mobile instead of the correct id section. I am not sure why this is happening.
Here is the code:
$(function () {
$('a[href^="#"]').click(function (event) {
var id = $(this).attr("href");
var offset = 110;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
});
<div id="nav-ph">
<div class="nav-btn-ph"></div>
<ul class="main-nav-ph">
<li>THE ADVANTAGE
</li>
<li>OUR SERVICES
</li>
<li>OUR TEAM
</li>
<li>MAKING NEWS
</li>
<li>CONTACT
</li>
</ul>
</div>
<div id="the-advantage">
<p>Advantage</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="services">
<p>Services</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="team">
<p>Team</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="news">
<p>News</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="contact">
<p>Contact</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Her is a link to jsfiddle http://jsfiddle.net/BrentRansom/BEMr9/1/
Help needed!
Simple solution I had to change the a tag id to a different name. I had matching id's.
I have set .outerHeight(true) on the element #inner but at the moment it returns height values
ie: 304
ff: 317
chrome: 289
can anyone explain where I might be going wrong with this?
JS
var wH = $(window).height(),
wrapper = $('#wrapper'),
inner = $('#inner'),
innerH = inner.outerHeight(true),
more = inner.find('.more'),
close = inner.find('.close'),
titleH = $('#title').outerHeight(true),
excerpt = $('.excerpt'),
excerptH = excerpt.outerHeight(true),
lowerH = $('.lower').outerHeight(true),
upper = inner.find('.upper'),
footerH = $('#footer').height()
body = $('body');
// Set #wrapper off page
wrapper.css('bottom', -innerH);
// Store tier1 calculation as data attribute
wrapper.data('tier1', -innerH+titleH+footerH);
console.log(innerH);
//console.log(-innerH+titleH+footerH);
// Animate #wrapper above #footer
wrapper.delay(500).animate({ bottom: wrapper.data('tier1') }, 400);
CSS
body{font-family:Arial,Helvetica,sans-serif;overflow: hidden;}
h1{text-align:center;width:600px;margin:0 auto;padding:20px 0 45px;font-size:28px;font-weight:bold;line-height:26px;}
p{margin-bottom:20px;}
#tiers{background:#f2f2f2;height:100%;}
#wrapper{width:100%;position:absolute;bottom:0;left:0;background:#dedede;}
#inner{width:840px;margin:0 auto;}
.upper{display:none;}
.upper p{margin-bottom:0;}
.col{width:410px;}
.btn{background: #000000;color: #FFFFFF;display: block;font-size: 20px;font-weight: bold;width:30px;height:30px;text-align:center;line-height:30px;position: absolute;text-decoration: none;}
.more{top:20px;right:20px;}
.close{display:none;top:60px;right:20px;}
.excerpt{display: block;}
HTML
<body class="tier1">
<div id="tiers">
<div id="wrapper">
<div id="inner" class="clearfix">
-
+
<div class="lower">
<h1 id="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="upper">
<div class="col left"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="col right"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
Link to page: http://bit.ly/IA65Mb
Kyle
There are a few differences I was able to spot:
p has a 20px margin-bottom which propagates to #inner in chrome. I don't remember the details of this feature but I think I heard once that it's actually correct behavior. I think only chrome has it. See example
for some reason #excerpt has different heights in ff and chrome - maybe there are slight differences in text rendering?
I think fixing the first issue would solve the problem you're having though. Getting exact same result cross-browser is an overkill.