I am trying to create a back to top button for my website.
what exactly does the following do cause it is not working:
body[data-smooth-scrolling="1"] #to-top {
right: 33px;
}
If you want a simple "to top" functionality, do the following:
1.) Add a target ID to an element on the top of your HTML, like this:
<body>
<div id="ToTopTarget">
content
</div>
</body>
2.) Add an anchor link to target this:
Back To Top
All in all you have this example code:
<body>
<div id="ToTopTarget">
content
</div>
Back To Top
</body>
If you want the functionality of your example described, look at the explanation of Huangism.
Adding to Sebsemillia's answer, adding the following to <head> should animate the scroll to top: (assuming jQuery is loaded)
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[href*="#"]').click(function() {
var anchor = $('#'+this.href.split('#')[1]);
$('html,body').animate({scrollTop: anchor.offset().top},'slow');
return false;
});
});
</script>
Related
I'm getting HTML template response from API service, in that sometimes I'm getting link and its href value is empty string(but innerText has some value),
Can anyone help me how can I hide the anchor tag if only text is present and href is empty.
Sometimes HTML response provides multiple empty links, give solution to hide all the empty links.
<div class="hyper-btn">
User Profile
</div>
To hide anchor tag, by using CSS will hide the elements from document.
<!DOCTYPE html>
<html>
<style>
.hyper-btn a[href=""] {
display: none !important;
/* will hide all the empty anchor tags */
}
</style>
<body>
<div class="hyper-btn">
Empty Link
Link to some Address
</div>
</body>
</html>
To remove anchor tags from DOM itself, add below JavaScript
<!DOCTYPE html>
<html>
<body>
<div class="hyper-btn">
Empty Link
Link to some Address
</div>
<script>
const linkList = document.querySelectorAll('.hyper-btn a');
linkList.forEach(element => {
const targetURL = element.getAttribute('href');
if(!targetURL) {
element.remove(); // will be removed from DOM
}
});
</script>
</body>
</html>
I am trying to fade the content of an article element once clicked and when the fade is complete replace the HTML. Trying to understand why this doesn't work. The code in the fadeOut function doesn't execute.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('article').click(function(){
$(this).find('p').fadeOut(300, function(){
$(this).html("<p> Glad to see you! </p>");
}); // end fade
}); // end click
}); // end ready
</script>
</head>
<body>
<article style="width: 200px; height: 150px; background-color: yellow;">
<p> Hello There </p>
</article>
</body>
The reason why it isn't working is because inside the fadeOut function's callback, the "this" refers to the "p" element, and not the ".article".
So it's trying to insert "<p> Glad to see you! </p>" in the "<p>" element which just faded out, and doesn't exist anymore.
Instead you have to add it to the ".article" element.
You can keep the "article" element assigned to a variable (here I have assigned it to the variable constant: article), and then use that variable inside the fadeOut's callback to inject the HTML.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('article').click(function(){
const article = this;
$(this).find('p').fadeOut(300, function(){
$(article).html("<p> Glad to see you! </p>");
}); // end fade
}); // end click
}); // end ready
</script>
</head>
<body>
<article style="width: 200px; height: 150px; background-color: yellow;">
<p> Hello There </p>
</article>
</body>
</html>
If you would like to learn more on the "this" keyword and how it works, I recommend visiting here.
Consider the following.
$(function(){
$('article').click(function(){
var $self = $(this);
$("p", this).fadeOut(300, function(){
$self.html("<p> Glad to see you! </p>");
});
});
});
This removes any ambiguous this references.
I have on my site, a page with several DIV's with some content (let's say that each one is a TO DO task).
I need to view that page URL and choose which DIV I want to delete permanently (in a way that even if I refresh the page, it won't be there anymore).
Is this possible?
I have this code, but the "deleted" DIV re-apear as soon I refresh the page...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#removeDIVid1").click(function () {
$("#id1").remove();
});
$("#removeDIVid2").click(function () {
$("#id2").remove();
});
$("#removeDIVid3").click(function () {
$("#id3").remove();
});
});
</script>
</head>
<body>
<div id="id1"><p>paragraph 1 <button id="removeDIVid1">Remove DIVid1</button></p></div>
<div id="id2"><p>paragraph 2 <button id="removeDIVid2">Remove DIVid2</button></p></div>
<div id="id3"><p>paragraph 3 <button id="removeDIVid3">Remove DIVid3</button></p></div>
</body>
</html>
The remove method just takes the object out of the DOM, and when you refresh the page, since the DOM tree is generated again, with your div elements. I think generating these tasks dynamically using jQuery will solve your problem. Let me know if you need help with the code.
Forgive me if this is an obvious question.
I'm working on a page with a script I can't remove or alter. A button is clicked, which loads some items onto the page with an ajax request, and then triggers an annoying scrolljacking animation for the page.
The goal: I still want the items to load when the button is clicked, but I don't want the scroll animation.
I'm able to add my own custom js to the page (below where the default script is added). How do I interrupt or override the original script to remove the scrolling behaviour?
Here's a simplified example.
.group{
background: cyan;
height:400px;
width:400px;
margin:10px
}
.load-more{
background:#88f;
width:360px;
text-align:center;
margin:10px;
padding:20px;
cursor:pointer;
}
<!-- markup -->
<div class="groups-listing">
<div class="group"></div>
</div>
<div class="load-more">Load more</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(".load-more").click(function () {
//loading another item
$(".groups-listing").append('<div class="group"></div>');
//annoying animated scrolling
$("html, body").animate(
{
scrollTop: $(".groups-listing .group").last().offset().top
},2000
);
});
</script>
<script>
// custom js, override must go here.
</script>
The actual problem can be found here: https://obsu.unionclouduat.org/groups
I think my simplified example is analagous, but I'm not 100% sure.
You can try to unbind() and reasign the event ?
// custom js, override must go here.
$(".load-more").unbind().click(function () {
//loading another item
$(".groups-listing").append('<div class="group"></div>');
});
image link - webpage image
I want to remove all the spaces but can't do so.
i also want the sidebar to be of the same height as Content
Thankyou!
I don't know what's wrong with it
should i make a single sidebar instead of 3?
CODE
HTML5 and CSS3 code
http://www.mediafire.com/download/70p421je5uv2a4m/Theme.rar
THank you!!! :D
You can set background for element that contain your sidebar and content:
<div style="background:#fff">
<div id="content"></div>
<div id="sidebar"></div>
</div>
http://codepen.io/Chovanec/pen/hcAmH
In case you want the height of the content responsive, and the sidebar change responsive along with it, you can try a jQuery solution
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$( document ).ready(function() {
var y = $("#content").outerHeight();
$("#sidebar").css({"height": y});
$( window ).resize(function() {
var y = $("#content").outerHeight();
$("#sidebar").css({"height": y});
});
});
</script>