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)+'...';
});
Related
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">
I am using jQuery EasyTab to fadein/fadeout contents on hashchange function. I have multiple contents with same class names also there are 2 or 3 class names in one content. So I want to change the ID into Class.
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>HTML Markup</li>
<li class='tab'>Required JS</li>
<li class='tab'>Example CSS</li>
</ul>
<div class='panel-container'>
<div id="tab1">
<p>content 1</p>
</div>
<div id="tab2">
<p>content 1</p>
</div>
<div id="tab3">
<p>content 1</p>
</div>
</div>
</div>
<!-- I want to change the panel-container section like this-->
<div class='panel-container'>
<div class="tab1 tab3">
<p>content 1</p>
</div>
<div class="tab2">
<p>content 1</p>
</div>
<div class="tab3 tab1">
<p>content 1</p>
</div>
</div>
I have multiple projects with content (overview, details). I am very new to JQuery
How can I replace the content in the same location instead of below?
How do I keep the content on other projects from disappearing?
HTML:
<div id="projects">
<h2>Projects</h2>
<!-- Start project 1-->
<div class="project-image">
<img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
</div>
<div class="project-info">
<h3>First Project Title</h3>
<div class="project-desc">
<div class="div1">
<p>First project overview here</p>
</div>
<div class="div2" style="opacity:0">
<p>More detailed description here</p>
</div>
</div>
<div class="project-nav">
Overview
Details
</div>
</div>
<!-- End of project 1 -->
<!-- Start project 2 -->
<div class="project-image">
<img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
</div>
<div class="project-info">
<h3>Second Project Title</h3>
<div class="project-desc">
<div class="div3">
<p>Second project overview here</p>
</div>
<div class="div4" style="opacity:0">
<p>More detailed description here</p>
</div>
</div>
<div class="project-nav">
Overview
Details
</div>
</div>
<!-- End of project 2 -->
</div>
JQuery:
(function($) {
$(".project-nav a").click(function() {
var target = '.div' + $(this).attr("data-id");
$(".project-desc >div").css("opacity", "0");
$(target).css("opacity", "1");
});
})(jQuery);
All together: JsFiddle
Here's my take:
$(function() {
$(".project").each(function() {
let $project = $(this);
$project.find("nav a").click(function() {
$project.find(".project-info > p").hide();
$project.find("." + $(this).attr("href")).show();
return false;
});
});
});
.project {
padding: 0.5em;
border: 1px solid black;
margin: 1em 0;
}
.project-image {
display: block
}
.details {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projects">
<h2>Projects</h2>
<!-- Start project 1 -->
<div class="project">
<img class="project-image" src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
<div class="project-info">
<h3>First Project Title</h3>
<p class="overview">First project overview here</p>
<p class="details">More detailed description here</p>
<nav>
Overview
Details
</nav>
</div>
</div>
<!-- End of project 1 -->
<!-- Start project 2 -->
<div class="project">
<img class="project-image" src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
<div class="project-info">
<h3>Second Project Title</h3>
<p class="overview">Second project overview here</p>
<p class="details">More detailed description here</p>
<nav>
Overview
Details
</nav>
</div>
</div>
<!-- End of project 2 -->
</div>
I focused on slimming down the HTML and making the nav functionality flexible so you can arbitrarily add projects and nav links without worrying about existing ones.
as #j08691 said, simply replace opacity:0 with display: none and opacity: 1; with display: block; see modified JSFiddle
I have also solved it but I think It can be easier done. Then what I did. But why go easy if you can do it on a hard way without CSS.
I have deleted some div in the HTML.
What I did is good exercise for JQuery
var showTheRightStuffAtTheRightPlace = function(){
var $selector = $(this);
var whatProject = $selector.attr("data-id");
var whatDoINeedToShow = $selector.html();
var String;
switch(whatDoINeedToShow){
case 'Overview':
String = '<p>First project overview here</p>'
break;
case 'Details':
String = '<p>More detailed description here</p>';
break;
}
$('.' + whatProject).html(String);
};
var init = function () {
$(".project-nav").on('click','a',showTheRightStuffAtTheRightPlace);
};
$(document).ready(init());
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="projects">
<h2>Projects</h2>
<!-- Start project 1-->
<div class="project-image">
<img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
</div>
<div class="project-info">
<h3>First Project Title</h3>
<div class="project-desc project1">
</div>
<div class="project-nav">
Overview
Details
</div>
</div>
<!-- End of project 1 -->
<!-- Start project 2 -->
<div class="project-image">
<img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
</div>
<div class="project-info">
<h3>Second Project Title</h3>
<div class="project-desc project2">
</div>
<div class="project-nav">
Overview
Details
</div>
</div>
<!-- End of project 2 -->
</div>
I have an html page with headings. I want to group the content (html) which is under the heading using javascript or any native library. How can I do that?
Example is below
<div>
<h2>Main</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
<h2>Main2</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
<h2>Main3</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
</div>
Output should be
<div>
<div>
<h2>Main</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
</div>
<div>
<h2>Main2</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
</div>
<div>
<h2>Main3</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
</div>
</div>
Try this:
$("h2").each(function(){
$(this).nextUntil("h2").addBack().wrapAll("<div class='wrapper'>");
});
.wrapper{
border-bottom:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
<h2>Main</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
<h2>Main2</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
<h2>Main3</h2>
<p> Content goes here</p>
<img src="someimg.jpg"/>
</div>
This should do what you need
<div>
<h2 style="margin-bottom: 0;">Main</h2>
<p style="margin-top: 0;"> Content goes here</p>
<img src="someimg.jpg"/>
<h2 style="margin-bottom: 0;">Main2</h2>
<p style="margin-top: 0;"> Content goes here</p>
<img src="someimg.jpg"/>
<h2 style="margin-bottom: 0;">Main3</h2>
<p style="margin-top: 0;"> Content goes here</p>
<img src="someimg.jpg"/>
</div>
I am trying to make a section appear when my button is clicked and instead I am getting a blank screen. I am not sure why this is. Any suggestions would be helpful. I am trying to display the arnold-page div.
<section class="middlePage"><!-- START MIDDLE SECTION -->
<div class="album-nav">
<button class="arnold">Arnold</button>
<button class="cats">Cats</button>
<button class="dogs">Dogs</button>
<button class="batman">Batman</button>
<button class="lions">Lions</button>
<button class="tigers">Tigers</button>
</div>
<div class="arnold-page"> <!-- START DIV display-on --><h1>Arnold</h1>
<div id="arnold1">
<img src=" ">
<p>Photo 1</p>
</div>
<div id="arnold2">
<img src="images/arnold.jpg">
<p>Photo 2</p>
</div>
<div id="arnold3">
<img src=" ">
<p>Photo 3</p>
</div>
<div id="arnold4">
<img src=" ">
<p>Photo 4</p>
</div>
<div id="arnold5">
<img src=" ">
<p>Photo 5</p>
</div>
<div id="arnold6">
<img src=" ">
<p>Photo 6</p>
</div>
</div> <!-- END DIV display-on -->
</section><!-- END MIDDLE SECTION -->
backButton1.on('click', function() {
bottomPage1.hide();
middlePage.hide();
arnoldPage.show();
});
Try This Script
$(function(){
//Default hide section
$(".arnold-page").hide();
$(".arnold").on("click",function()
{
$(".arnold-page").show()
});
})
You can achieve the result by setting the display property to none, and on clicking the button, change the display property to block or inline.
<!--Jquery -->
$(document).ready(function(){
$(".arnold-page").css("display","none");
$(".arnold").click(function(){
$(".arnold-page").css("display","block");
});
});