Show HTML/CSS Class after clicking on a button - javascript

I have this Jquery-Code that copies the URL when clicked on its button (.clipboard). Now I want it to show another HTML/CSS Class after clicking on it.
I tried to declare it as a variable const success = $('.success-message').html(); and then with $('.success-message').html(success); to run it (as you can see in the code). Unfortunately, that does not work. Is there a other way to do it? I looked it up and found the toggle method. That did not work either, or I just implemented it wrong. Appreciate any help!
Jquery:
var $temp = $("<input>");
var $url = $(location).attr('href');
$('.clipboard').on('click', function() {
const originalText = $('.clipboard').html();
const success = $('.success-message').html();
// CSS function:
const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML=s;
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$('.clipboard').html(originalText);
$('.success-message').html(success);
// CSS Usage:
addCSS(".clipboard{ font-size: 20px; padding: 4.8px 21.3px 4.8px 21.3px; }")
// Run something in 1 seconds to revert back to the button's text
setTimeout(function() {
addCSS(".clipboard{ font-size: 15px; padding: 9px 21.3px 9px 21.3px}")
$('.clipboard').html(originalText);
}, 1000); // 1 seconds
})
The HTML/CSS Class I want to show:
<div class="success-message">
KOPIERT!
</div>
<style>
.success-message{
color: white;
background-color: #2FAC66;
padding: 1px 50px 1px 50px;
text-align: center;
font-size: 12px;
font-weight: bold;
margin-bottom: 20px;
}
</style>

Here is a complete index.html as minimal working example.
Suppose, you want to show the div.success-message after the button has been clicked.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<style>
.success-message {
visibility: hidden;
color: white;
background-color: #2fac66;
padding: 1px 50px 1px 50px;
text-align: center;
font-size: 12px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>Kopieren</div>
<div class="success-message">KOPIERT!</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam debitis
accusamus quam nisi. Suscipit rerum nisi placeat tempore accusantium ut
dolorum? Sit assumenda, incidunt voluptate unde optio quo enim voluptas.
</p>
<button class="clipboard">Kopieren!</button>
<script type="text/javascript">
$.when($.ready).then(function () {
// Document is ready.
$(".clipboard").on("click", () => {
$(".success-message").css("visibility", "visible");
});
});
</script>
</body>
</html>

Related

How to make a hover effects like Wikipedia (JavaScript)?

I am trying to make a hovercard effect using SVG and JavaScript such as Wikipedia and Facebook.
You can say that It can be solved by using tooltips but not because I want to make it dynamic like Wikipedia.
I want to use it on pure js, not jquery. In this case which event is best for me?
onmouseover/onmousemove ? But on mouseover is not working perfectly! try to help me plz, It's very very important for me.
Demo image
Here is a question which is similar to my question, But this question has no answer yet.
How to make a hover effects like Wikipedia and Facebook
<div class="content">
Lorem text <a href="/wiki/mark"> Mark Info will show here
when you hover </a> Dummy text You will show here when you hover on it
</div>
//Define one time only
<div class="modal" style="display: none">
<div class="modal-title"> </div>
<div class="modal-content"> </div>
</div>
(NOTE: I have some problems with my CSS and js link. I am a new programmer, I want to learn more), Sorry about that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wikipedia Hover Effects</title>
<style>
.content {
font-family: Segoe UI;
border: 1px solid #ddd;
padding: 30px;
box-sizing: border-box;
line-height: 27px;
}
.v-content-modal {
position: absolute;
background: #fff;
box-shadow: 0 3px 20px 0 #ddd;
width: 350px;
border-top: 3px solid #ddd;
display: none;
box-sizing: border-box;
}
.v-content-modal .modal-title {
background: #f5f5f5;
padding: 0 1.25rem;
font-size: .95rem;
letter-spacing: .03rem;
line-height: 38px;
height: 35px;
border-bottom: 1px solid #ddd;
}
.v-content-modal .modal-content {
padding: 1.75rem 1.25rem;
}
.v-content-modal::before {
content: "";
position: absolute;
top: -23px;
left: 30px;
border: 10px solid transparent;
border-color: transparent transparent #ddd transparent;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet One
adipisicing elit. Quisquam, modi neque! Cupiditate itaque vitae aliquid
Two,
pariatur qui sequi minima voluptates voluptatibus quae
nemo! Suscipit Three quibusdam
dignissimos vitae, cum cumque voluptates et hic doloribus dicta, <a href="#" data-title="Four"
data-content="I am the Forth one/" id="info">Four</a> quos,
nostrum in.
</div>
<div class="v-content-modal">
<div class="modal-title">
Title
</div>
<div class="modal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
let modal = $(".v-content-modal");
let title = $(".v-content-modal > .modal-title");
let content = $(".v-content-modal > .modal-content");
let btns = document.querySelectorAll("#info");
btns.forEach(btn => {
btn.addEventListener("mouseover", (e) => {
modal.css({
top: 'unset',
right: 'unset',
left: 'unset',
bottom: 'unset'
});
title.html(e.target.getAttribute('data-title'));
content.html(e.target.getAttribute('data-content'));
let pageX, pageY, winWidth, winHeight, elmWidth, elmHeight, width_limit, height_limit = '';
pageX = e.pageX;
pageY = e.pageY;
winWidth = $(window).width();
winHeight = $(window).height();
elmWidth = $(".v-content-modal").width();
elmHeight = $(".v-content-modal").height();
width_limit = winWidth - elmWidth;
height_limit = winHeight - elmHeight;
(pageX > width_limit) ? crossWidth(): normalWidth();
(pageY > height_limit) ? crossHeight(): normalHeight();
function crossWidth() {
modal.css({
right: '5px'
});
}
function normalWidth() {
modal.css({
left: pageX
});
}
function crossHeight() {
modal.css({
bottom: '111px'
});
}
function normalHeight() {
modal.css({
top: e.pageY + 30 + 'px'
});
}
// show when all customization is completed...
modal.show();
});
btn.addEventListener("mouseleave", () => {
modal.hide();
});
});
});
</script>
</body>
</html>

How to use Laxxx.js to animate boxes?

I am trying to figure out how I can use Laxxx.js with my html section with two boxes.Here is my code.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>Sidebar Navigation</title>
</head>
<body>
<section id="about">
<div class="page-num">
<h1>01</h1>
</div>
<div class="left">
<div class="box1"></div>
<div class="box2" data-lax-preset="spin-180"></div>
</div>
<div class="right">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam alias recusandae tenetur impedit similique dolore, rem molestias illo incidunt ipsum ipsa omnis odit, placeat tempore sapiente aliquid unde. Quaerat, architecto ex sit possimus commodi distinctio enim. Maxime, odit iste animi ut et iure, eius error.</p>
</div>
</section>
<script src="node_modules/lax.js/lib/lax.min.js"></script>
<script>
window.onload = function() {
lax.setup() // init
document.addEventListener('scroll', function(e){
lax.update(window.scrollY)
},false)
console.log('hey');
}
</script>
</body>
</html>
scss
#about {
background: black;
height: 100vh;
display: flex;
align-items: center;
color: white;
position:relative;
overflow:hidden;
.left {
width: 40%;
position:relative;
.box1{
position:absolute;
top: 20% ;
left:20%;
z-index:0;
width:400px;
height:400px;
border:30px solid yellow;
overflow:hidden;
transform: rotateZ(65deg);
}
.box2{
position:absolute;
top: 30%;
left:10%;
z-index:0;
width:300px;
height:300px;
border:30px solid red;
overflow:hidden;
}
}
.right {
width: 50%;
padding: 10vh 20vh;
// position:relative;
h1 {
font-size: 3vw;
margin: 0;
}
p {
font-size: 1.2rem;
line-height: 28px;
}
}
}
I guess I have followed al the steps on documentation however I get no amination on scroll and no error on console as well.
And here is the github documentation for laxxx.js https://github.com/alexfoxy/laxxx
I think you just need to add the lax class
<div class="lax box2" data-lax-preset="spin-180"></div>

Text inside image isn't responsive

I'm making a small webpage, my problem is that the text inside the image isn't responsive for all devices, so can anyone help me make that text responsive, here are my codes:
<html>
<head>
<title>resturant</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="main.css">
<script src="script.js"></script>
</head>
<body>
<div id="w3-display-container w3-mobile" id="main">
<img src="headerimg.jpg" class="w3-image w3-mobile">
<div class="w3-display-topleft w3-mobile" id="title"><br /><p>Welcome to <strong>JS</strong> resturant</p></div>
<p class="w3-display-left w3-mobile" id="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque at enim voluptatibus, veniam omnis quaerat cumque deleniti repellat tempore rem sapiente temporibus consectetur illum praesentium eius, expedita totam? Earum, quos?</p>
</div>
</body>
</html>
and here's my CSS styles
#title {
color: rgb(255, 237, 75);
font-size: 40px;
font-weight: bold;
padding-left: 30px;
}
#title strong {
color: brown;
}
#description {
max-width: 40%;
padding-left: 40px;
font-size: 20px;
font-weight: bold;
}
You should include the following viewport element in all your web pages:
A viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Share a screenshot of the issue
Anyway, you can use
font-size: CSS;
CSS can be:
100%, 100vw, x% or xvw (x is a number) to make it responsive
Also don't forget about
<meta name="viewport" content="width=device-width, initial-scale=1" /> in HTML
Add this below line inside head,
<meta name="viewport" content="width=device-width, initial-scale=1.0">

How to use external js file?

Trying to move a js script from the html file to an external js file and I can't get it to work.The js script works fine when in the html file but when I try to use it from an external js file it does not work.I've looked up how to import external js file and I think I'm doing it right but my script is not working.What am I doing wrong?
The HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NAVBAR</title>
<meta name="description" content="NAVBAR - A responsive nav manu." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!--
<script type="text/javascript">
$(document).ready( function(){
$('.m_btn').click( function(){
$('.menu').stop().slideToggle();
});
});
</script>
-->
</head>
<body>
<header>
<div class="container">
<div class="logo">NAVBAR</div>
<a href="javascript:void(0);" class="m_btn">
<span></span>
<span></span>
<span></span>
</a>
<nav class="menu">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<main>
<h1>Lorem ipsum</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>
</main>
<footer>
<p>NAVBAR 2018</p>
</footer>
<script type="text/javascript" src="navbar.js"></script>
</body>
</html>
The js:
$(document).ready( function(){
$('m_btn').click( function() {
$('.menu').stop().slideToggle();
});
});
The CSS:
* {
margin: 0px;
padding: 0px;
}
.container {
max-width: 1170px;
margin: 0 auto;
position: relative;
padding: 0 20px;
}
header {
background: #ffffff;
border-bottom: 1px solid #2d2d2d;
padding: 30px 0;
}
.logo {
float: left;
font-size: 20px;
font-weight: bold;
}
.menu {
float: right;
}
.menu ul {
}
.menu ul li {
float: left;
margin-left: 40px;
list-style-type: none;
}
.menu ul li a {
color: #2d2d2d;
font-size: 14px;
text-decoration: none;
}
.menu ul li a:hover {
color: #d2d2d2;
text-decoration: none ;
}
.m_btn {
float: right;
display: block;
width: 35px;
}
.m_btn span {
background: #2d2d2d;
height: 2px;
display: block;
margin: 5px 0;
}
/* Mobile */
#media only screen and ( max-width: 599px ) {
.m_btn {
display: block;
}
.menu {
display: none;
width: 100%;
margin-top: 1px;
}
.menu ul li {
margin-top: 3px;
margin-left: 0;
padding: 10px 0;
border-top: 1px solid #2d2d2d;
float: none;
}
}
/* Desktop */
#media only screen and ( min-width: 600px ) {
.m_btn {
display: none;
}
.menu {
display: block !important;
}
}
Thank you!
1) Check typo $('m.btn')...
2) Put your scripts before closing body tag.
3) If you run your site locally - delete / before navbar.js in the path.
Navbar.js must be in the same directory with your index.html file.
This must help.
It appears to me that the browser is not able to load the script at all, probably because it cannot find it. I would suggest ensuring the filename is spelled exactly the same as the file. If it is in the same directory, try removing the first slash. Also, open up the web terminal (CTRL + SHIFT + I on most browsers) and see what the console says in terms of errors.

scrollLeft does not work in Safari with RTL

I have issue with scrollLeft for Safari when page in RTL direction.
In Safari when i do click on button (that has a handler scrollLeft(-200)) i will scroll to 0 position of page. And this is big issue.
Safari: 7.0.1
OS: OS X 10.9.1
Following code has structure like as my page but more easier:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<style>
.main {
}
.content {
direction: rtl;
width: 2000px;
}
.button-scroll {
width: 50px;
height: 50px;
background: red;
color: white;
text-align: center;
position: fixed;
left: 10px;
top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, sapiente illo dignissimos odit nisi. Voluptatibus, temporibus, recusandae totam libero architecto veniam unde quod nisi facere perspiciatis fugiat harum odit tenetur.
</p>
</div>
<div class="button-scroll"></div>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$('.button-scroll').bind('click', function(){
console.log('scrolling... ' + document.body.scrollLeft);
// $(document.body).scrollLeft(100);
document.body.scrollLeft -= 100;
console.log(document.body.scrollLeft);
})
});
</script>
</body>
</html>

Categories