I need to take the (html) section from each page in the array (0, 1) how would I go about doing this? The API call worked perfectly fine, just need to take the main html data and display it on the webpage where the placeholders {welcome.text} and {about.text} are.
Thanks for any help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CMS Test</title>
</head>
<body>
<header>
<h1>CMS Test</h1>
<nav>
Home
About
Posts
Contact
</nav>
</header>
<section id="Home">
<div class="container">
<h2>Welcome to website</h2>
{welcome.text}
</div>
</section>
<section id="About">
<div class="container">
<h2>About Section</h2>
{about.text}
</div>
</section>
<section id="Posts">
<div class="container">
<h2>Posts Section</h2>
{posts.list}
</div>
</section>
<section id="Contact">
<div class="container">
<h2>Contact Section</h2>
<p>contact on: email#provider.com</p>
</div>
</section>
<script>
fetch('http://68.183.219.114/ghost/api/v3/content/pages/?key=276f4fc58131dfcf7a268514e5')
.then(response => response.json())
.then(data => console.log(data));
</script>
</body>
</html>
JSON response after fetching from that URL.
{
"pages": [
{
"id": "5efb6bbeeab44526aecc0abb",
"uuid": "38b78123-e5a8-4346-8f6e-6f57a1a284d0",
"title": "About Section",
"slug": "about-section",
"html": "<p>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.</p>",
"comment_id": "5efb6bbeeab44526aecc0abb",
"feature_image": null,
"featured": false,
"visibility": "public",
"created_at": "2020-06-30T16:43:42.000+00:00",
"updated_at": "2020-06-30T16:58:53.000+00:00",
"published_at": "2020-06-30T16:58:37.000+00:00",
"custom_excerpt": null,
"codeinjection_head": null,
"codeinjection_foot": null,
"custom_template": null,
"canonical_url": null,
"url": "http://68.183.219.114/about-section/",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\nincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\nnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\nfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\nculpa qui officia deserunt mollit anim id est laborum.",
"reading_time": 0,
"page": true,
"og_image": null,
"og_title": null,
"og_description": null,
"twitter_image": null,
"twitter_title": null,
"twitter_description": null,
"meta_title": null,
"meta_description": null
},
{
"id": "5efb6f53eab44526aecc0ac4",
"uuid": "26463d5f-011e-46b3-a1e2-60e213e33f6f",
"title": "Welcome",
"slug": "welcome",
"html": "<p>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.</p>",
"comment_id": "5efb6f53eab44526aecc0ac4",
"feature_image": null,
"featured": false,
"visibility": "public",
"created_at": "2020-06-30T16:58:59.000+00:00",
"updated_at": "2020-06-30T16:59:02.000+00:00",
"published_at": "2020-06-30T16:59:02.000+00:00",
"custom_excerpt": null,
"codeinjection_head": null,
"codeinjection_foot": null,
"custom_template": null,
"canonical_url": null,
"url": "http://68.183.219.114/welcome/",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\nincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\nnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\nfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\nculpa qui officia deserunt mollit anim id est laborum.",
"reading_time": 0,
"page": true,
"og_image": null,
"og_title": null,
"og_description": null,
"twitter_image": null,
"twitter_title": null,
"twitter_description": null,
"meta_title": null,
"meta_description": null
}
],
"meta": {
"pagination": {
"page": 1,
"limit": 15,
"pages": 1,
"total": 2,
"next": null,
"prev": null
}
}
}
Change the {[identifier]} with a span or a container tag element and assign an unique id to it (in the example I am using a span tag).
When the DOM is loaded create a variable for each container tag identified by the id (or query selector, you have many possibilities).
When the fetch operation succeded (I am using a test REST endpoint), extract the data and "populate" the container tag (assigned before) with the fetched data.
Here is a working example:
// FAKE DATA
const FAKE_DATA = JSON.parse(`{"pages":[{"id":"5efb6bbeeab44526aecc0abb","uuid":"38b78123-e5a8-4346-8f6e-6f57a1a284d0","title":"About Section","slug":"about-section","html":"<p>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.</p>","comment_id":"5efb6bbeeab44526aecc0abb","feature_image":null,"featured":false,"visibility":"public","created_at":"2020-06-30T16:43:42.000+00:00","updated_at":"2020-06-30T16:58:53.000+00:00","published_at":"2020-06-30T16:58:37.000+00:00","custom_excerpt":null,"codeinjection_head":null,"custom_template":null,"canonical_url":null,"url":"http://68.183.219.114/about-section/","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.","reading_time":0,"page":true,"og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null},{"id":"5efb6f53eab44526aecc0ac4","uuid":"26463d5f-011e-46b3-a1e2-60e213e33f6f","title":"Welcome","slug":"welcome","html":"<p>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.</p>","comment_id":"5efb6f53eab44526aecc0ac4","feature_image":null,"featured":false,"visibility":"public","created_at":"2020-06-30T16:58:59.000+00:00","updated_at":"2020-06-30T16:59:02.000+00:00","published_at":"2020-06-30T16:59:02.000+00:00","custom_excerpt":null,"codeinjection_head":null,"custom_template":null,"canonical_url":null,"url":"http://68.183.219.114/welcome/","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.","reading_time":0,"page":true,"og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null}],"meta":{"pagination":{"page":1,"limit":15,"pages":1,"total":2,"next":null,"prev":null}}}`);
// Fetch url, change with http://68.183.219.114/ghost/api/v3/content/pages/?key=276f4fc58131dfcf7a268514e5
const FETCH_URL = "https://reqres.in/api/users?page=2";
// Data page index 1
const PAGE_1_INDEX = 0;
// Data page index 2
const PAGE_2_INDEX = 1;
window.addEventListener('DOMContentLoaded', (event) => {
const txtWelcome = document.getElementById("txtWelcome");
const txtAbout = document.getElementById("txtAbout");
const listPost = document.getElementById("listPost");
fetch(FETCH_URL)
.then(response => response.json())
.then(data => {
// Assign page 1
const page1 = FAKE_DATA.pages[PAGE_1_INDEX];
// Assign page 2
const page2 = FAKE_DATA.pages[PAGE_2_INDEX];
// START populating for example with page 2
txtWelcome.innerHTML = page2.title; // Example
txtAbout.innerHTML = page2.slug; // Example
listPost.innerHTML = page2.html; // Here you can add the HTML as above
// END Populating
});
});
p:first-child {
font-weight: bold;
font-size: 2em;
text-decoration: underline;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CMS Test</title>
</head>
<body>
<header>
<h1>CMS Test</h1>
<nav>
Home
About
Posts
Contact
</nav>
</header>
<section id="Home">
<div class="container">
<h2>Welcome to website</h2>
<span id="txtWelcome">Loading...</span>
</div>
</section>
<section id="About">
<div class="container">
<h2>About Section</h2>
<span id="txtAbout">Loading...</span>
</div>
</section>
<section id="Posts">
<div class="container">
<h2>Posts Section</h2>
<span id="listPost">Loading...</span>
</div>
</section>
<section id="Contact">
<div class="container">
<h2>Contact Section</h2>
<p>contact on: email#provider.com</p>
</div>
</section>
</body>
</html>
Hope it helps :)
Related
I have created the below navigation menu:
enter image description here
I want the each sub menu to redirect to a particular section of the same page:
<section class="sec-1">text</section>
<section class="sec-2">text</section>
<section class="sec-2">text</section>
Sub menu 1 redirects to section 1, sub menu 2 to section 2, etc..
I've tried:
enter image description here
Neither works. I also tried using HTML only with putting the section ID in the href field of the a attribute:
This kinda works, but is not the desired result. It doesn't redirect exactly to the beginning of the section and after I close the sub menu, it returns back at the beginning.
Also I want the sub menu to be automatically closed, after the redirection, since it's being opened by click and not by hovering over it.
<section id="sec-1">text</section>
<section id="sec-2">text</section>
<section id="sec-3">text</section>
<!--id, not class..-->
<!--At the nav:-->
<li>text</li>
<li>text2</li>
<li>text3</li>
> it redirects below the headline
put a headline in section part, not before.
**
The menu is not closing 'automatically'.
**
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<nav>
<li>
<a href="#" id="sub-click" onclick="show()" >menu1</a>
<ul id="sub-menu" onclick="hide()">
<li>sub-menu</li>
<li>sub-menu2</li>
<li>sub-menu3</li>
</ul>
</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</nav>
<script>
function hide(){
document.getElementById('sub-menu').style.display = "none";
}
function show(){
document.getElementById('sub-menu').style.display = "block";
}
</script>
</body>
</html>
Deyan this will work now:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#navbar{
position:sticky;
top:0;
background-color: red;
}
section{
height: 100vh;
background-color: blue;
}
</style>
</head>
<body onmousemove="visible()">
<nav id="navbar">
<li>
<a href="#" id="sub-click" onclick="show()" >menu1</a>
<ul id="sub-menu" onclick="hide();transparent()">
<li>sub-menu</li>
<li>sub-menu2</li>
<li>sub-menu3</li>
</ul>
</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</nav>
<section id="one">
<h1>bla la</h1>
<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 sin
t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
t 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>
</section>
<section id="two">
<h1>bla la</h1>
<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 sin
t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
t 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>
</section>
<section id="three">
<h1>bla la</h1>
<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 sin
t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
t 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>
</section>
<script>
function hide(){
document.getElementById('sub-menu').style.display = "none";
}
function show(){
document.getElementById('sub-menu').style.display = "block";
}
function transparent(){
document.getElementById('navbar').style.opacity="0.0";
}
function visible(){
document.getElementById('navbar').style.opacity="1.0";
}
</script>
</body>
</html>
The header is transparent until you move your mouse. You can change the event (onmousemove), if you want, in the body tag.
I am trying to extract the link text of multiple <a> tags within the_content(); of Wordpress posts, so I can use them as the class for each <a>. I have successfully extracted the link text and used addClass to classify them so we can clean up our outbound link reporting.
The problem is that it is putting each <a> link text as a long class for all <a>.
var linkText = $('.entry-content a').text();
$('.entry-content a').addClass(linkText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry-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."
</div>
This code shows up in inspector shown below
Pass a callback function to .addClass() instead like:
$('.entry-content a').addClass(function() {
return $(this).text();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry-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."
</div>
**There is a paragraph in the div class container, how can i hide the text before "-"? **
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<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>
</body>
</html>
in js
var element = document.querySelector('.container p')
if(element){
element.innerText = element.innerText.replace(/.*- /, '');
// if you need non greedy regexp use /.*?- / instead
}
just put the content before - in a span.
and then apply display: none to span.
span{
display: none;
}
Hide when, show again when? Take up space or not?
CSS
.hide { color:white }
span:hover { color:black }
<div class="container">
<p><span class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </span>- 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>
Plain JS
var container = document.querySelector("div>p");
var text = container.innerText;
container.innerHTML = '<span class="hide">'+text.substring(0,text.indexOf("-"))+'</span>'+
text.substring(text.indexOf("-"))
container.addEventListener("mouseover",function() { this.querySelector("span").classList.toggle("hide")});
.hide { color:white }
<div class="container">
<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>
I assume that you want to hide this text dynamically in which case you will need javascript, otherwise as Nitin implied you could just insert a <span class="hidden"> manually into your text?
const container = document.querySelector('.container')
const txt = container.querySelector('p').innerHTML.split('-')
const newMarkup = `<span class="hidden">${txt[0]}</span> ${txt[1]}`
container.innerHTML = newMarkup
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<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>
</body>
</html>
I have a fixed-top navbar created with bootstrap library. I have padded the body from top to avoid hiding the content under it. But when i click on a link "about us" for example, the top of that will hide under the navbar. Is there anyway to fix it so that the content of about us is just below the navbar when link is clicked?
body{
padding: 3em 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar bg-dark navbar-light fixed-top">
<div class="container-fluid">
About Us
</div>
</nav>
<div class="content">
<div id="about-us">
<h1>About Us</h1>
<p>"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."</p>
<div>
<p>"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."</p>
</div>
</div>
</div>
Use
#about-us {
padding: 3em 0;
}
instead
body {
padding: 3em 0;
}
Here is one potential solution that also adds the "smooth scroll" feature, while at the same time solving your problem.
The secret here is to use jQuery .animate() method, along with an offset, to slide the page to the desired section (less the offset value). So, you need:
A class name, any class name
Add that class name to the menu links (Note that the menu links must be anchor tags, for this particular code example)
Use the jQuery code in the below demo that watches for clicks on elements with that className, and then uses jQuery animate to schlep down to the section with the ID that corresponds to the href attribute. The magic that solves your problem is the offset.
Instead of $('a.jtkirk') as your selection/trigger, you might also be able to use $('a[href^=#]') (which says: for all a-tags with an href that begins with the # char) -- but that does not work with StackOverflow's stack snippets, so I cannot test/demo it. But there is no harm using a class to identify the smooth-scroll links. Again, you can choose any name for the class, I used Capt Kirk's moniker to make it easy to see that.
DEMO:
$('a.jtkirk').click(function(e){
e.preventDefault();
var kirkoffset = 50;
$('html,body').animate({
scrollTop: $(this.hash).offset().top - kirkoffset
}, 700);
});
body{
padding: 3em 0;
}
/* Below not necessary - only for demo layout */
nav .scroll{
display:flex;
justify-content:flex-start !important;
}
nav .scroll a {margin-right:15px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar bg-dark navbar-light fixed-top scroll">
<div class="container-fluid scroll">
<a class="jtkirk" href="#about-us">About Us</a>
<a class="jtkirk" href="#nuther-one">Nuther One</a>
</div>
</nav>
<div class="content">
<div id="about-us">
<h1>About Us</h1>
<p>"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."
</p>
</div>
<div>
<p>"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."
</p>
</div>
<div id="nuther-one">
<h1>Nuther One</h1>
<p>"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."
</p>
</div>
</div>
You could use the :target selector with a :before element with the height of your navbar.
body {
padding: 3em 0;
}
:target::before {
display: block;
height: 40px;
margin-top: -40px;
content: '';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar bg-dark navbar-light fixed-top">
<div class="container-fluid">
About Us
</div>
</nav>
<div class="content">
<div id="another">
<p>"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."</p>
</div>
<div id="about-us">
<h1>About Us</h1>
<p>"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."</p>
<div>
<p>"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."</p>
</div>
</div>
</div>
I am exporting an html to pdf using Kendo UI and the problem I am facing is html content gets cut weirdly in the pdf. You can try it on the link
Below is the page with shortened content which works fine
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<style>
button{
margin: 5px;
}
.k-pdf-export{
font-size: 70%;
font-family: "DejaVu Sans", "Arial", sans-serif;
}
</style>
</head>
<body>
<button onclick="export_pdf()"> Export PDF </button>
<div class="pdf-page">
<p>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.</p>
</div>
<script>
function export_pdf(){
kendo.drawing.drawDOM($('.pdf-page'), {
paperSize : "A4",
margin : {
top : "2cm",
left : "1cm",
right : "1cm",
bottom : "1cm"
}
}).then(function(group) {
kendo.drawing.pdf.saveAs(group, "export.pdf");
});
}
</script>
</body>
</html>
The problem is when the content is larger, it gets cut weirdly. Try it into the snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<style>
button{
margin: 5px;
}
.k-pdf-export{
font-size: 70%;
font-family: "DejaVu Sans", "Arial", sans-serif;
}
</style>
</head>
<body>
<button onclick="export_pdf()"> Export PDF </button>
<div class="pdf-page">
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
<script>
function export_pdf(){
kendo.drawing.drawDOM($('.pdf-page'), {
paperSize : "A4",
margin : {
top : "2cm",
left : "1cm",
right : "1cm",
bottom : "1cm"
}
}).then(function(group) {
kendo.drawing.pdf.saveAs(group, "export.pdf");
});
}
</script>
</body>
</html>
How do I get my content displayed nice in an A4 format like it is specified in the js export function? What is causing this issue?
The problem is caused by changing font styles on the fly, just for the exported content. For most predictable results, use the same styles for the content displayed by the browser, and the exported content. In addition, it is recommended to register the pako deflate library and fonts for embedding in the PDF document.
http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Custom
http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#configuration-Custom
http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#configuration-Compression
Here is an updated version of your example that works better:
http://dojo.telerik.com/UWORa/11