When hovering over the picture, hide information about the link that will appear at the bottom left. When adding this script, the image became unclickable. I think the main problem is the incorrect connection of the js file or the execution of this script. I have added the code of 3 files below
openUrl(url: string): void {
window.open(url, '_blank');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roshan Timing</title>
<script src="eel.js"></script>
<link rel="icon" type="image/ico" href="/Roshan.ico"></link>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- TIMER -->
<p class="timer">Timer</p>
<!-- CHAT(INPUT) -->
<!-- created by dankYbat -->
<div class="about_right">
<div class="text_wrap">
<p class="noselect">created by dankYoff</p>
</div>
<!--Connect js to tage image -->
<div class="image_wrap">
<a><img src="github.svg" (click)="openUrl('https://github.com/dankYoff')" width="50"></a>
</div>
</div>
</body>
</html>
You can not use openUrl(url: string): void in a *.js file, looks like you want to use TypeScript. If you want to create a faster vanilla typescript project you can use vite.
Anyway the a solution can be this:
const imgProfile = document.querySelector('#img-profile');
const openUrl = (url) => {
window.open(url, '_blank');
};
imgProfile.addEventListener('click', () => {
openUrl('https://github.com/dankYoff');
});
.img-profile {
cursor: pointer;
}
.img-profile img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
transition: 0.3s;
}
.img-profile img:hover {
transform: scale(1.1);
}
<a class="img-profile" id="img-profile">
<img src="https://cdn.pixabay.com/photo/2022/09/16/13/07/woman-7458584_960_720.jpg" />
</a>
Related
This dosen't work in chrome nor firefox. What I'm trying to do is get the logo of a discord server and let the user download it. My python backend succesfully did the first part, so I don't think that's the problem. My HTML code below has the download button inside a link. Everything works, except instead of downloading the image I just get to a page with the link. I've tried the other answers on this site, but I could not find something that worked for me.
My HTML:
<!DOCTYPE html>
<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" />
<!-- Bootstrap's CSS stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" />
<!-- My CSS stylesheet -->
<link href="{{ url_for('static',filename='css/style.css') }}" rel="stylesheet" />
<title>Discord Profile Picture</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
</head>
<body class="text-white">
<div class="bg">
<div id="main">
<p class="roboto fifty">Discord server invite:</p>
<!-- Text Input using Bootstrap -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">
discord.gg/</span>
<input type="text" placeholder="XXXXXXXX" class="form-control" id="basic-url"
aria-describedby="basic-addon3" />
<button class="btn btn-outline-secondary" type="button" id="button-addon2" onClick="send()">
Send
</button>
</div>
<a id="download-link">
<button type="button" class="btn btn-outline-primary btn-lg">Download</button>
</a>
</div>
</div>
<!-- My JS Script -->
<script src="{{ url_for('static',filename='js/script.js') }}"></script>
<!-- Bootstrap's JS Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
</body>
</html>
My JS:
function send() {
var data = {
invite: document.getElementById("basic-url").value
};
console.log("Sent.")
fetch("/scrape", {
headers: {'Content-Type': 'application/json',},
method: "POST",
body: JSON.stringify(data)
}).then(res => res.json()).then(data => {
downloadLink = document.getElementById("download-link")
downloadLink.style.display = "unset"; downloadLink.href = data; downloadLink.download = data
})
}
My Python backend:
#!/usr/bin/env python3
from flask import Flask, render_template, request, jsonify
from bs4 import BeautifulSoup
import requests
app = Flask(__name__)
# Web Page
#app.route("/")
def hello():
return render_template('index.html')
# RESTful api endpoint
#app.route("/scrape", methods=["POST"])
def scrape():
code = request.get_json()["invite"]
invite = requests.get(f"https://discord.gg/{code}").text
soup = BeautifulSoup(invite, features="html.parser")
for meta_tag in soup.find_all("meta"):
try:
if meta_tag["property"] == "og:image":
return jsonify(meta_tag["content"]), 200
except KeyError:
pass
if __name__ == "__main__":
app.run(debug=True)
And my CSS
body, html { height: 100% }
/* Center everything */
#main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Roboto text */
p.roboto.fifty {
font-family : 'Roboto',
sans-serif;
font-size: 40px;
padding-left: 15px;
}
.parent { position: relative }
/* Full screen background */
#background-image {
height: 100%;
width: 100%;
}
/* Background */
.bg {
background-image: url("../images/background.png");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#download-link {
padding-left: 35%;
display:none;
}
I think you should use downloadLink.setAttribute("download", data) instead of downloadLink.download = data.
that should work
here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764
I have a side navigation bar with a button to toggle showing just the icons or to show the icons and the text. There are multiple different HTML pages that share this nav bar, so I needed to save the nav bar's state for when you switch to each (Dashboard to Items, Contacts to Dashboard, etc). I do this using the follow code:
var navBar = document.querySelector(".side-bar");
var toggle = document.querySelector(".nav-toggle");
window.onload = () =>
{
let isClosed = localStorage.getItem("navState");
navBar.classList.toggle("nav-is-closed", isClosed);
}
toggle.addEventListener("click", () =>
{
let isClosed = navBar.classList.toggle("nav-is-closed");
localStorage.setItem("navState", isClosed);
});
.side-bar {
position: relative;
background-color: var(--default-back-color);
min-width: 200px;
}
.nav-is-closed {
min-width: inherit;
}
.nav-is-closed a h2 {
display: none;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="resources/css/styles.css">
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght#300&display=swap" rel="stylesheet">
<title>Rucksack</title>
</head>
<body>
<header>
<div>
<img src="resources/images/rucksack.png" alt="">
<h1 class="title">Rucksack</h1>
</div>
<div>
<a class="smaller-icon" href="#"><img src="resources/images/gear.png" alt=""></a>
<img src="resources/images/blue-profile.png" alt="">
</div>
</header>
<main>
<section id="main-section">
<nav class="side-bar">
<a class="selected-nav" href="dashboard"><img src="resources/images/house-icon.png" alt=""><h2>Dashboard</h2></a>
<img src="resources/images/item-icon.png" alt=""><h2>Items</h2>
<hr class="nav-break">
<img src="resources/images/contacts-icon.png" alt=""><h2>Contacts</h2>
<hr class="nav-break">
<img src="resources/images/reports-icon.png" alt=""><h2>Reports</h2>
<div class="nav-toggle"><img src="resources/images/arrow-icon.png" alt=""></div>
</nav>
<div class="content">
<strong>Content</strong>
</div>
</section>
</main>
<script src="shell-controls.js"></script>
</body>
</html>
Everything works fine, except when you move to a new page while the nav is open. It closes even though in window.onload, isClosed is false. As far as I know, toggle with force set to false removes the class, but in this case it's still adding it.
As Kaiido said, isClosed was being pulled from localStorage as a string, which caused toggleClass to think the string of "false" was truthy, therefore still adding the 'nav-is-closed' class. Adding JSON.parse when getting isClosed and adding JSON.stringify when setting isClosed in localStorage solves the problem.
I want to save captured image in a folder from webcam. My code captures image only but how can I store it in a folder. This is my first time to do this. If anyone mention that it will be helpful for me. Thanks in advance.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>
So I'm trying to make a slideshow using js, I have asked for help on that and it's working in JSFiddle, but it won't work in my local environment, so I'm wondering if I have some wording or something wrong somewhere that someone could help me see.
HTML5
<!DOCTYPE html>
<html>
<head>
<title>slider</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
</head>
<body onload="slider()">
<div class="slider">
<img id="1" src="slide_image1.jpg" alt="TV Deals"/>
<img id="2" src="slide_image2.jpg" alt="Furniture Deals"/>
<img id="3" src="slide_image3.jpg" alt="Electronic Deals"/>
</div>
</body>
</html>
CSS3
.slider {
width: 990px;
height: 270px;
overflow: hidden;
margin: 30px auto;
background-image: url('ajax-loader.gif');
background-repeat: no-repeat;
background-position: center;
}
.slider img{
border: 0;
display: none;
}
JavaScript
$(document).ready(function () {
slider();
});
function slider(){
var count = 1;
$('#1').show();
(function slide(){
$('.slider img').hide();
if (count > 3) {count = 1;} // makes this a loop
$('#'+count).fadeIn('slow');
count += 1;
setTimeout(function () {
slide();
}, 5000);
})();
}
Is my "onload" command correct? I'm using Web Expression as a designer and I actually went in through the url path for each and ever image and selected the image, so I know the paths are correct (did the same thing for the js). The JavaScript itself is called "slider.js" could this affect my code in anyway? This is my first attempt at doing one of these so I have no idea what's causing it to go wrong.
When you say local environment, is it running on your computer under the file:// protocol? (i.e., when you look at it is it something like file://C:\My\Files\index.html) or with a server running over the http:// protocol?
If it is the former, you need to change the script srcs from // to http:// explicitly. // means "use whatever protocol the page is using", so that would mean it tries file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, which obviously doesn't exist.
That's the only thing that jumps out at me as being off and is a common mistake when working locally.