Automatically place an include in Jekyll post - jekyll

I'm trying to build a post layout which automatically places an include based on the criteria below:
If the post contains an <h3>, place the include right before it.
Otherwise, place the include after the second paragraph.
I've been trying this for a while now, but am unable to find the right way to do it.
<section class="post-content">
{{ content }}
</section>
And let's say, the content is:
<p>Elit amet reprehenderit velit non dolor officia do in ea laborum do sunt. Est voluptate non cupidatat aliquip aliqua aliqua esse id consequat. Ullamco labore aliqua ad Lorem laborum occaecat et occaecat sunt esse esse est eiusmod aliqua.</p>
<p>Ex duis dolor laboris dolor mollit id irure ullamco aliquip commodo ut mollit. Deserunt officia amet consectetur pariatur qui esse ut cupidatat eu consequat eu eiusmod. Veniam ipsum culpa esse nostrud consequat ipsum consectetur eu veniam magna commodo laborum labore eiusmod do.</p>
<p>Reprehenderit aute commodo voluptate nostrud elit exercitation anim nisi nisi culpa eu qui tempor laboris commodo ut quis.</p>
I want this to become:
<p>Elit amet reprehenderit velit non dolor officia do in ea laborum do sunt. Est voluptate non cupidatat aliquip aliqua aliqua esse id consequat. Ullamco labore aliqua ad Lorem laborum occaecat et occaecat sunt esse esse est eiusmod aliqua.</p>
<p>Ex duis dolor laboris dolor mollit id irure ullamco aliquip commodo ut mollit. Deserunt officia amet consectetur pariatur qui esse ut cupidatat eu consequat eu eiusmod. Veniam ipsum culpa esse nostrud consequat ipsum consectetur eu veniam magna commodo laborum labore eiusmod do.</p>
{% include image.html %}
<p>Reprehenderit aute commodo voluptate nostrud elit exercitation anim nisi nisi culpa eu qui tempor laboris commodo ut quis.</p>
image.html just contains code to pick up the image from Instagram in case the post has Instagram code, else, pick the image from the repository. Like so:
{% if page.instagram %}
<div class="insta-div">
<img src="https://www.instagram.com/p/{{ page.instagram }}/media?size=l" alt="Cover: {{ page.title }}" />
<form action="https://instagram.com/{{ site.instagram }}" target="_blank">
<button class="insta-follow" type="submit">
<i class="icon-instagram"></i> Follow
</button>
</form>
</div>
{% elsif page.image %}
<img src="{{ page.image | prepend: site.baseurl | prepend: site.url }}" alt="Cover: {{ page.title }}" />
{% else %}
{% endif %}
I tried with replace_first and split and all, but I'm probably not doing it right. Could someone please help me with this?
Thank you!

Related

Deploy yml array with Hugo Statics

This is my first post on Stack Overflow, thanks in advance for your attention. i've been working on a project in which I need a Yaml file to load some information into cards. The site is made with Hugo and bootstrap 5. The structure is generated, but hugo only shows the last array of the list of objects that I need to show. What will be the problem? Thanks for your time! I hope you'll can help me.
YML file content:
news :
path : images/news.jpg
title : Noticias
subtitle : Lorem ipsum asibet
text : 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.
path : images/news1.jpg
title : Noticias1
subtitle : Lorem ipsum asibet
text : 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.
path : images/news2.jpg
title : Noticias2
subtitle : Lorem
text : 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.
{{ $data := index .Site.Data }}
{{ with $data.news }}
{{ range $data.news }}
<div class="container-fluid" style="background-color: #F5EBDC">
<div class="container mr-5 " style="background-color: #F5EBDC">
<div class="px-0 rounded-3">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4 scale-hover">
<div data-aos="fade-up" data-aos-duration="800" data-aos-mirror="true"
class="card aos-item m-5 card-shadow" style="background-color: #502314; border-radius: 2rem;">
<div class="aos-item img-fluid card-img-top">
<img src="{{ .path | relURL }}" class="d-block w-100" style="max-height: 45rem; object-fit: cover;" alt="...">
</div>
<div class="card-body">
<div class="container-fluid">
<div class="row">
<div class="col-9">
{{ with .title }}
<h2 class="card-title mt-1" style="color: #F5EBDC;"> {{ . }}</h2>
{{ end }}
</div>
<div class="col-11 col-sm-4 col-md-3 col-lg-12 col-xl-4 col-xxl-2">
<div class="badge text-wrap my-4 flex-end bk-color-1" style="background-color: #FF8732; color: #502314;">
News <b></b>
</div>
</div>
<div class="row">
{{ with .subtitle }}
<h5 class="card-subtitle mt-2" style="color: #F5EBDC;">
{{ . }}
</h5>
{{ end }}
</div>
</div>
<div class="row">
<div class="col-12">
{{ with .text }}
<p class="card-text mb-4" style="color: #F5EBDC;">{{ . }}</p>
{{ end }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
{{ end }}
{{ end }}
Looks like your yaml is malformed. Arrays should have a dash or hyphen for each item. Something like:
news:
-
path : images/news.jpg
title : Noticias
subtitle : Lorem ipsum asibet
text : 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.
-
path : images/news1.jpg
title : Noticias1
subtitle : Lorem ipsum asibet
text : 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.
-
path : images/news2.jpg
title : Noticias2
subtitle : Lorem
text : 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.
More discussion:
YAML equivalent of array of objects in JSON
Another thing, you should able to eliminate the usage of {{ with ... }} ... {{ end }}. You can print the variable without using "with", e.g.
{{ .title }}

Why does the Bootstrap scrollspy feature not work in my code?

I have recently started learning BootStrap. But I am stuck with scrollspy. No matter how many ways I place data dash attributes as given in the internet, it still does not seem work, so the problem must be somewhere in my code, which is given below:
<body style="position: relative;" data-bs-spy="scroll" data-bs-offset="10">
<nav class="navbar navbar-default fixed-top bg-dark" id="navbar-eg">
<ul class="nav nav-tabs" id="navbar-eg" role="tablist">
<li><a class="nav-link active" href="#head1">head1</a></li>
<li><a class="nav-link" href="#head2">head2</a></li>
<li><a class="nav-link" href="#head3">head3</a></li>
<li><a class="nav-link" href="#head4">head4</a></li>
</ul>
</nav>
<div id="head1" style="margin-top:60px;padding-top:1%;border-bottom:1px solid #000000;">
<h2 >head1</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 id="head2" style="padding-top:1%;border-bottom:1px solid #000000;">
<h2 >head2</h2>
<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 id="head3" style="padding-top:1%;border-bottom:1px solid #000000;">
<h2>head3</h2>
<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="head4" style="padding-top:1%;">
<h2>head4</h2>
<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>
</body>
These are the things that I have embedded into my code.
<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"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Can anyone help me out spottinging the mistake?

Extract link text and use as class of <a> for analytics reporting label

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>

Bootstrap columns are overlapping after positioning

I am using bootstrap 4 grid system with simple two columns. I want my left column to be fixed and right column to be scroll able. Problem is when i set the position of left col. fixed. it takes it out of the flow of page and right column overlaps it. I have used offset-md which solves the problem as far as the screen size is of md or greater but when i resize the browser, again the right overlaps in smaller screen. now i cant figure out how to solve this for smaller screen.
My HTML:
<div class="row">
<div class="col-md-6 col-sm-12 h-100" id="left">
<div id="introduction" >
<h1>Hi, I'm Nawal Shaukat! </h1>
<p>Full Stack Web Developer</p>
</div>
</div>
<div class="col-md-6 offset-md-6 col-sm-12" id="right">
<h2>Get to know me!</h2>
<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>
<hr>
</div>
</div>
</div>
my css:
html,body{
height: 100%;
margin:0;
}
#left{
position:fixed;
height:100%;
background-image:url("profile-pic.png");
background-repeat:no-repeat;
background-size:cover;
}
Like this?
I added viewport height to both classes and make #right to scrollable.
#left, #right {
height:100vh;
}
#right {
overflow-y: scroll;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row m-0">
<div class="col-md-6 col-sm-12" id="left">
<div id="introduction" >
<h1>Hi, I'm Nawal Shaukat! </h1>
<p>Full Stack Web Developer</p>
</div>
</div>
<div class="col-md-6 col-sm-12" id="right">
<h2>Get to know me!</h2>
<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.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.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.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.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.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.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.
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.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.qua. 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>
<hr>
</div>
</div>
You need to just add following CSS code,
#right {
margin-left: 52%;
}
When you take position:fixed; then next element can occupy its position so you need to add the margin to next element according to previous element which you gives fixed position.
Following code will help you,
html,
body {
height: 100%;
margin: 0;
}
#left {
position: fixed;
height: 100%;
background-image: url("profile-pic.png");
background-repeat: no-repeat;
background-size: cover;
}
#right {
margin-left: 54%;
}
<div class="row">
<div class="col-md-6 col-sm-12 h-100" id="left">
<div id="introduction">
<h1>Hi, I'm Nawal Shaukat! </h1>
<p>Full Stack Web Developer</p>
</div>
</div>
<div class="col-md-6 offset-md-6 col-sm-12" id="right">
<h2>Get to know me!</h2>
<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>
<hr>
</div>
</div>
</div>

HTML A href '#' Not Working?

This is My Html Code For Back To Top.
<html>
<head>
<title>Back To Top</title>
</head>
<body id='backtotop'>
<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>
<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>
<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>
<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>
<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>
<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>
<a href="#backtotop" id='moveback' style='display:none;'>Backtotop</a>
<button id='Clickme'>Click</button>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function(){
$("#Clickme").click(function(){
$("#moveback").click();
$("#moveback").trigger('click');
});
});
}(jQuery));
</script>
</body>
</html>
When i click on Backtotop link is working find on desktop. but when i try to tablet or mobile this is not working. when i click on link it dosen't move back to top on tablet or mobile.
please help.
Thank you.
Generally it is called internal linking Where hyper link is within same web page.
The code we mostly use is
<A NAME="LINK"> </A>
Where LINK is the name of that position.
Example:
<body>
<H4>Click here to go to bottom bottom of the page </H4>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="BOTTOM"><h1>This si bottom</h1></A>
</body>
And if this is not working then you can implement scroll function like :
function scrollWindow()
{
window.scrollTo(x,y);
}
// where
// x= for horizontal co-ordinates,y=for vertical cordinates
//x=100,y=600--try this
execute this function onclick of your link
<ul>
<li><a href="#backtotop" onclick=scrollwindow>Backtotop</a></li>
</ul>
And also you can use the ID attribute in place of the NAME attribute in the tag to name the section in a Web page.
Please NOTE: Many elements on page are floating elements. As a result, the browser cannot find a precise point to link to if the anchor target is not within a floated element. In other words, if the anchor tag is outside a floating element, and you have many floating elements on your page, internal links may not work properly. To fix this, place your anchor target within one of the floating elements.