CSS for class page_header. Header is given a 'fixed' position.
.page__header {
position: fixed;
top: 0;
width: 100%;
}
Below is part of full HTML:
/* navigation bar */
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>About</li>
<li>Courses</li>
<li>Instructor</li>
</ul>
</nav>
</header>
/* one of the sections */
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>About</h2>
<p>some text here</p>
<p>some text here</p>
</div>
</section>
JavaScript function that: (1) extract href target (2) extract x-coordinate & y-coordinate based on href target (3) scroll to specific section based on the coordinates.
I need help to build the part that extract href target within tag.
function scroll_to_section(e) {
if (e.target.matches("a")) {
// prevent page jump straight to section when click on the URL
e.preventDefault();
// extract href target within <a>
const ref = document.getElementById(e.target.href.split("#")[1]);
// find x-coordinate & y-coordinate of the href
const coordinate = ref.getBoundingClientRect();
// scroll to section based on position
window.scrollTo({
left: coordinate.x,
top: coordinate.y,
behavior: 'smooth'
});
}
}
const navbar = document.getElementById('navbar__list');
navbar.addEventListener("click", scroll_to_section);
You do not need JavaScript to go to section =)
Example:
html {
scroll-behavior: smooth;
}
/* this is for testing: */
p { height: 200px }
section { border: 1px solid black; margin: 10px; }
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>About</li>
<li>Courses</li>
<li>Instructor</li>
</ul>
</nav>
</header>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>About</h2>
<p>some text here</p>
</div>
</section>
<section id="section2" data-nav="Section 2" class="your-active-class">
<div class="landing__container">
<h2>Courses</h2>
<p>some text here</p>
</div>
</section>
<section id="section3" data-nav="Section 3" class="your-active-class">
<div class="landing__container">
<h2>Instructor</h2>
<p>some text here</p>
</div>
</section>
P.S. Updated for "smooth" scroll
You mean this if you insist on scripting this
the parameter smooth does not seem to work so I borrowed the CSS from the other answer which is a better answer since there is no scripting involved
document.getElementById("navbar__list").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.tagName === "A") {
e.preventDefault(); // stop the normal scrolling
const target = document.getElementById(tgt.href.split("#")[1]);
console.log(target.dataset.nav)
const coord = target.getBoundingClientRect();
console.log(coord.x,coord.y)
window.scrollTo({
left: coord.x,
top: coord.y,
behavior: "smooth"
})
}
})
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>About</li>
<li>Courses</li>
<li>Instructor</li>
</ul>
</nav>
</header>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>About</h2>
<p>some text here</p>
<p>some text here</p>
</div>
</section>
<div style="height:1000px">
<hr>
</div>
<section id="section2" data-nav="Section 2" class="your-active-class">
<div class="landing__container">
<h2>Courses</h2>
<p>some text here</p>
<p>some text here</p>
</div>
</section>
<div style="height:1000px">
<hr>
</div>
<section id="section3" data-nav="Section 3" class="your-active-class">
<div class="landing__container">
<h2>Instructor</h2>
<p>some text here</p>
<p>some text here</p>
</div>
</section>
<div style="height:1000px">
Related
Stuck. Not sure how to proceed.
I have 10 cards. When the user clicks on a specific card, I would like to clone the card and have it append to a div on top of the page. However, when a user clicks on another card I do not want the first card to disappear, I want it to stay and add the second card next to the first card. Also, want to display a max of 5 cards at the top. If the user clicks on a sixth card, the first should disappear and the clicked card should appear as the last card and so forth.
$('.card').on('click', function() {
$('.main').slideDown('fast');
$('.card1').fadeIn(500).clone().appendTo($('.main1'));
$('.card2').fadeIn(500).clone().appendTo($('.main2'));
$('.card3').fadeIn(500).clone().appendTo($('.main3'));
$('.card4').fadeIn(500).clone().appendTo($('.main4'));
$('.card5').fadeIn(500).clone().appendTo($('.main5'));
});
.main { display: none;}
.card {
padding: 16px;
border: 1px solid #f00;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="main1"></div>
<div class="main2"></div>
<div class="main3"></div>
<div class="main4"></div>
<div class="main5"></div>
</div>
<div class="container">
<div class="card card-1">
<p>Card 1</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-2">
<p>Card 2</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-3">
<p>Card 3</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-4">
<p>Card 4</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-5">
<p>Card 5</p>
<p>Lorem ipsum</p>
</div>
<!-- 5 more cards -->
</div>
you can try with detach() method https://api.jquery.com/detach/
as #Cid said, use the right class name into jQuery selector .card-1 .card-2 and so on
You need to use the clone() and a check to see if .main has more than 5 items using children(). Please find the snippet below
$('.card').on('click', function() {
if ($('.main').children().length >= 5) {
$('.main .card').first().remove();
}
$(this).clone().hide().appendTo($('.main')).fadeIn(500);
});
.main {
display: flex;
}
.card {
padding: 16px;
border: 1px solid #f00;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
</div>
<div class="container">
<div class="card card-1">
<p>Card 1</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-2">
<p>Card 2</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-3">
<p>Card 3</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-4">
<p>Card 4</p>
<p>Lorem ipsum</p>
</div>
<div class="card card-5">
<p>Card 5</p>
<p>Lorem ipsum</p>
</div>
<!-- 5 more cards -->
</div>
you could use childen().first().remove to remove the first one. and then append a new div.
this is a try of what i think you want do
<div class="main">
</div>
<div class="container">
<div class="card card-1">
<p>Card 1</p>
</div>
<div class="card card-2">
<p>Card 2</p>
</div>
<div class="card card-3">
<p>Card 3</p>
</div>
<div class="card card-4">
<p>Card 4</p>
</div>
<div class="card card-5">
<p>Card 5</p>
</div>
</div>
$(document).ready(() => {
const main = $('.main')
const max = 3;
let count = 0;
$('.card').on('click', function () {
main.slideDown();
if (count < max) count++
else main.children().first().detach()
$(this).fadeIn(500).clone().appendTo(main);
});
})
I am trying to get the next Section Project Title .section .project-title and echo it out.
My markup has been stripped back for ease of reading here but it is there in structure. I am able to grab the section project title under the .section.active div but not sure on how to grab the next project title?
Please note that the .active class changes when the user scrolls down the page to each section, so I also need it to be dynamic.
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div> <!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div> <!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div> <!-- .section -->
</div> <!-- #fullpage -->
I did try something along these lines with no luck:
var indexNext = jQuery('.section.active').parent().siblings().find('project-title').html();
You could get the current active section:
var currentSection = jQuery('.section.active');
Get the next section:
var nextSection = $(currentSection).next();
Find its project title:
var projectTitle = $(nextSection).find(".project-title");
And print it out:
console.log(projectTitle.html());
Obviously you could put all in one line:
var nextTitle = jQuery('.section.active').next().find(".project-title").html();
See following complete example, please:
var currentSection = jQuery('.section.active');
var nextSection = $(currentSection).next();
var projectTitle = $(nextSection).find(".project-title");
console.log(projectTitle.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div><!-- .section -->
</div><!-- #fullpage -->
I hope it helps you, bye.
You can use:
$('.section.active + .section .project-title').text();
I've used a CSS selector to select the .project-title element of immediate next sibling. As it is a pure CSS selector so it is more efficient than jQuery's .next() method.
You can check the existence of next section if you want. All you need to do is to add a check like this:
if($('.section.active + .section').length) {
$('.section.active + .section .project-title').text();
}
Working Demo:
alert($('.section.active + .section .project-title').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div><!-- .section -->
</div><!-- #fullpage -->
You can use next method
$('.section.active').next().find('h1').text();
Working demo : https://jsfiddle.net/gaq23jbL/4/
In my html page there are few div tags and each of them is having <fieldset> and <legend>. Usually we use href for navigation from 1 page to other page
And I could like to navigate from one div tag to another div tage from using
href. Can any one help me how can I do it.
Clicking on Jump will take you to div#anchor1
Jump
<div id="anchor1">Your content goes here</div>
https://jsfiddle.net/1pwo1gqb/1/
All you have to use id and attach it to the a tag like this
.container{
height: 500px;
padding-top: 20px;
}
.nav{
position: fixed;
}
<div class="nav">
section 1
section 2
section 3
section 4
section 5
section 6
</div>
<div class="container" id="s1">
<h1>Section 1</h1>
</div>
<div class="container" id="s2">
<h1>Section 2</h1>
</div>
<div class="container" id="s3">
<h1>Section 3</h1>
</div>
<div class="container" id="s4">
<h1>Section 4</h1>
</div>
<div class="container" id="s5">
<h1>Section 5</h1>
</div>
<div class="container" id="s6">
<h1>Section 6</h1>
</div>
As #sandeep Nayak have explained,
<div id="div1"> some data Go to div 2 </div>
<div id="div2"> some data Go to div 1 </div>
I'd like to shorten text and add "Read More" with its link.
Sample html code:
<article id="post-58" class="post-58 post type-post status-publish format-standard hentry category-2">
<header class="entry-header">
<h2 class="entry-title">
<a href="http://www.example.com/archives/58" rel="bookmark">
Title Here
</a>
</h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
<p>Content text here</p>
<p>Content text here</p>
<p>Content text here</p>
<p>Content text here</p>
</div><!-- .entry-content -->
</article>
<article id="post-57" class="post-57 post type-post status-publish format-standard hentry category-2">
<header class="entry-header">
<h2 class="entry-title">
<a href="http://www.example.com/archives/57" rel="bookmark">
Title Here
</a>
</h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
<p>Content text here</p>
<p>Content text here</p>
<p>Content text here</p>
<p>Content text here</p>
</div><!-- .entry-content -->
</article>
I want to change the length of the Entry Content to 175 characters and add "Reader More" whose link needs to be pulled from href attribute under "entry-title" class.
I tried the following script:
$("body.blog .entry-content").text(function(index, currentText) {
return currentText.substr(0, 175)+'...';
$(this).append('<a class="readmore">Read More</a>');
var lnk = $(this).parent('article').children('.entry-header a').attr('href');
$('a.readmore', this).attr('href', lnk);
});
The content will be shortened but it does not add "Read More"...
How can I correct the script?
Thanks.
Move this line
return currentText.substr(0, 175)+'...';
to the bottom of the function. Return ends the execution of the function, and the rest of your code is not running past that.
Your function then becomes:
$("body.blog .entry-content").text(function(index, currentText) {
$(this).append('<a class="readmore">Read More</a>');
var lnk = $(this).parent('article').children('.entry-header a').attr('href');
$('a.readmore', this).attr('href', lnk);
return currentText.substr(0, 175)+'...';
});
I have an unordered list and a bunch of articles, all with absolute positions at the top of the page and hidden. Each article sits in a different div and has a different ID. I'd like to be able to click a list item and the corresponding article to become visible, and then when I click a different list item, the visible item disappears and the new article that corresponds with that article appears in its place.
Here's the HTML
<div class="articlelist">
<ul>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article1').style.visibility='visible'">ARTICLE 1</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article2').style.visibility='visible'">ARTICLE 2</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article3').style.visibility='visible'">ARTICLE 3</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article4').style.visibility='visible'">ARTICLE 4</li>
</ul>
</div>
<div class="fullarticle" id="article1">
<h1>ARTICLE 1</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article2">
<h1>ARTICLE 2</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article3">
<h1>ARTICLE 3</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article4">
<h1>ARTICLE 4</h1>
<p>ABCDEFGH</p>
</div>
and here's the CSS
.fullarticle {
width: 61%;
margin-right: 2%;
float: left;
position: absolute; top: 80px; left: 37%;
visibility: hidden;
}
.articlelist {
float: left;
width: 37%;
}
inside of the head:
var toggleVisibility = function(element) {
if(element.style.visibility=='visible'){
element.style.visibility='hidden';
} else {
element.style.visibility='visible';
}
};
and then change the onclicks (if you insist on using them) to onclick="toggleVisibility(document.getElementById('articleId'))" where articleID is the ID of one of the article divs
BUT
hiding and showing content with visibility will keep the lower items under their invisible partners, so use display with none and block instead
var toggleVisibility = function(element) {
if(element.style.display=='block'){
element.style.display='none';
} else {
element.style.display='block';
}
};
This is a little bit more complicated, but avoids importing the massive jQuery library for so small a task
If you use jQuery, you can do:
$('.articlelist ul li').click(function() {
var i = $(this).index();
$('.fullarticle').hide();
$('#article' + (i+1)).show();
});
Updated Fiddle
If you have jQuery:
<div class="articles">
<div class="articlelist">
<ul>
<li style="display:block;" onclick="toggleArticles('article1')">ARTICLE 1</li>
<li style="display:block;" onclick="toggleArticles('article2')">ARTICLE 2</li>
<li style="display:block;" onclick="toggleArticles('article3')">ARTICLE 3</li>
<li style="display:block;" onclick="toggleArticles('article4')">ARTICLE 4</li>
</ul>
</div>
<div class="fullarticle" id="article1">
<h1>ARTICLE 1</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article2">
<h1>ARTICLE 2</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article3">
<h1>ARTICLE 3</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article4">
<h1>ARTICLE 4</h1>
<p>ABCDEFGH</p>
</div>
</div>
<script>
function toggleArticles(articleID) {
$('#articles .fullArticle').hide(); // this hides all currently open articles (if any);
$('#articles #' + articleID).show(); // show article
}
$('#articles .fullArticle').hide();
</script>