Feather Icons v4.29.0 add custom svg icons - javascript
I would like to add a custom icon to feather icons in javascript. I haven't found anything about it on github. Is it possible to do it?
<!-- Include il file feather.js -->
<script src="https://unpkg.com/feather-icons"></script>
<!-- Inserisci il tuo file SVG personalizzato -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" id="custom-icon">
<!-- Il contenuto del tuo file SVG -->
</svg>
<!-- Inserisci il codice per sostituire l'icona -->
<script>
feather.replace({
'width': 20,
'height': 20,
'class': 'custom-icon',
'contents': document.getElementById('custom-icon').outerHTML
});
</script>
I tried like this but it doesn't work.
Related
How do I trigger Bootstrap Toasts when the visitor is offline?
I have a website that works with the Bootstrap 5 theme and I want to show a Bootstrap Toasts message when the visitor is offline.
Currently the #BTNofflineToast button triggers #offlineToast
I want to remove the button and trigger the display of Toasts #offlineToast automatically when the visitor is offline.
How to do the JS code ?
(function() {
window.addEventListener('offline', () => {
// show toast
});
window.addEventListener('online', () => {
// hide toast
});
});
index.html
<!doctype html>
<html lang="fr" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column bg-dark text-white text-center">
<button type="button" class="btn btn-primary m-4" id="BTNupdateToast">Show update toast</button>
<button type="button" class="btn btn-primary m-4" id="BTNofflineToast">Show offline toast</button>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x mb-3">
<div id="updateToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-repeat text-success" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
</svg>
<strong class="me-auto">Mise à jour disponible</strong>
</div>
<div class="toast-body text-start text-dark">
Cliquez ICI pour mettre à jour.
</div>
</div>
<div id="offlineToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-wifi-off text-danger" viewBox="0 0 16 16">
<path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/>
</svg>
<strong class="me-auto">Vous êtes hors-ligne</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-start text-dark">
Les informations de cette page peuvent être obsolètes.
</div>
</div>
</div>
<script src="/bootstrap.bundle.min.js"></script>
<script>
document.getElementById("BTNupdateToast").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('#updateToast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
});
toastList.forEach(toast => toast.show());
};
document.getElementById("BTNofflineToast").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('#offlineToast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
});
toastList.forEach(toast => toast.show());
};
</script>
</body>
</html>
To test properly, run the code snippet first, then disconnect your internet connection and review the snippet.
The message disappears automatically when reconnected.
var connectionLostToast = new bootstrap.Toast(document.querySelector('#connectionLost'), {
autohide: false
});
window.addEventListener('offline', function() {
connectionLostToast.show();
});
window.addEventListener('online', function() {
connectionLostToast.hide();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
<div class="toasts">
<div id="connectionLost" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Connection Lost</strong>
<small>Now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Your internet connection lost!
</div>
</div>
</div>
WordPress: Display a fallback thumbnail if post doesn't have a featured image
I'm working on local WordPress, theme: Twenty Twenty.
I'm trying to get it so that if the article does not have a feature image, then it uses one sourced elsewhere, but no matter what I try it doesn't work. It either displays no image at all, or this.
Obviously, I don't want the sourced image on the ones that do have a featured image uploaded.
Here is what I have so far:
<?php
/**
* Displays the featured image
*
* #package WordPress
* #subpackage Twenty_Twenty
* #since Twenty Twenty 1.0
*/
// if has feature image
if ( has_post_thumbnail() && ! post_password_required() ) {
$featured_media_inner_classes = '';
// Make the featured media thinner on archive pages.
if ( ! is_singular() ) {
$featured_media_inner_classes .= ' medium';
}
?>
<figure class="featured-media">
<div class="featured-media-inner section-inner<?php echo $featured_media_inner_classes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
<?php
the_post_thumbnail();
$caption = get_the_post_thumbnail_caption();
if ( $caption ) {
?>
<figcaption class="wp-caption-text"><?php echo wp_kses_post( $caption ); ?></figcaption>
<?php
}
?>
<!-- .featured-media -->
<?php
}
// no feature image
else {
echo '<img src="https://st4.depositphotos.com/17828278/24401/v/600/depositphotos_244011872-stock-illustration-image-vector-symbol-missing-available.jpg" alt=""/>';
}
edited WITH image
</header><!-- .archive-header -->
<div class="grid" id="container grid">
<div class="entry-header-inner section-inner medium">
<div class="portfolio-header box-row">
<h1 class="entry-title heading-size-1">Such Is My Fortune</h2></div>
<div class="feature-img box-row">
<figure class="featured-media">
<div class="featured-media-inner section-inner medium">
<img width="800" height="440" src="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-800x440.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" data-attachment-id="11" data-permalink="http://localhost:8888/wordpress/deaths-hourglass/" data-orig-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass.jpg" data-orig-size="944,1303" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Death’s Hourglass" data-image-description="" data-medium-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-217x300.jpg" data-large-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-742x1024.jpg" /></div><!-- .featured-media-inner -->
</figure>
</div>
<div class="post-meta box-row">
<div class="post-meta-wrapper post-meta-single post-meta-single-top">
<ul class="post-meta">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span>
<span class="meta-text">
By seabear211 </span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span>
<span class="meta-text">
October 19, 2020
</span>
</li>
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><path d="M9.43016863,13.2235931 C9.58624731,13.094699 9.7823475,13.0241935 9.98476849,13.0241935 L15.0564516,13.0241935 C15.8581553,13.0241935 16.5080645,12.3742843 16.5080645,11.5725806 L16.5080645,3.44354839 C16.5080645,2.64184472 15.8581553,1.99193548 15.0564516,1.99193548 L3.44354839,1.99193548 C2.64184472,1.99193548 1.99193548,2.64184472 1.99193548,3.44354839 L1.99193548,11.5725806 C1.99193548,12.3742843 2.64184472,13.0241935 3.44354839,13.0241935 L5.76612903,13.0241935 C6.24715123,13.0241935 6.63709677,13.4141391 6.63709677,13.8951613 L6.63709677,15.5301903 L9.43016863,13.2235931 Z M3.44354839,14.766129 C1.67980032,14.766129 0.25,13.3363287 0.25,11.5725806 L0.25,3.44354839 C0.25,1.67980032 1.67980032,0.25 3.44354839,0.25 L15.0564516,0.25 C16.8201997,0.25 18.25,1.67980032 18.25,3.44354839 L18.25,11.5725806 C18.25,13.3363287 16.8201997,14.766129 15.0564516,14.766129 L10.2979143,14.766129 L6.32072889,18.0506004 C5.75274472,18.5196577 4.89516129,18.1156602 4.89516129,17.3790323 L4.89516129,14.766129 L3.44354839,14.766129 Z" /></svg> </span>
<span class="meta-text">
No Comments<span class="screen-reader-text"> on Such Is My Fortune</span> </span>
</li>
</ul><!-- .post-meta -->
</div><!-- .post-meta-wrapper -->
<div class="post-inner thin ">
<div class="entry-content">
<div class="portfolio-filter box-row">
<span class='type'><p> Type: Poetry </p></span>
<span class='genre'><p> </p></span>
</div>
without image
<div class ="box archive-container">
<div class="grid2">
<div class="entry-header-inner section-inner medium">
<div class="portfolio-header box-row">
<h1 class="entry-title heading-size-1">Vance</h2></div>
<div class="feature-img box-row">
<figure class="featured-media">
<div class="featured-media-inner section-inner medium">
</div><!-- .featured-media-inner -->
</figure>
</div>
<div class="post-meta box-row">
<div class="post-meta-wrapper post-meta-single post-meta-single-top">
<ul class="post-meta">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span>
<span class="meta-text">
By seabear211 </span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span>
<span class="meta-text">
October 14, 2020
</span>
</li>
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><path d="M9.43016863,13.2235931 C9.58624731,13.094699 9.7823475,13.0241935 9.98476849,13.0241935 L15.0564516,13.0241935 C15.8581553,13.0241935 16.5080645,12.3742843 16.5080645,11.5725806 L16.5080645,3.44354839 C16.5080645,2.64184472 15.8581553,1.99193548 15.0564516,1.99193548 L3.44354839,1.99193548 C2.64184472,1.99193548 1.99193548,2.64184472 1.99193548,3.44354839 L1.99193548,11.5725806 C1.99193548,12.3742843 2.64184472,13.0241935 3.44354839,13.0241935 L5.76612903,13.0241935 C6.24715123,13.0241935 6.63709677,13.4141391 6.63709677,13.8951613 L6.63709677,15.5301903 L9.43016863,13.2235931 Z M3.44354839,14.766129 C1.67980032,14.766129 0.25,13.3363287 0.25,11.5725806 L0.25,3.44354839 C0.25,1.67980032 1.67980032,0.25 3.44354839,0.25 L15.0564516,0.25 C16.8201997,0.25 18.25,1.67980032 18.25,3.44354839 L18.25,11.5725806 C18.25,13.3363287 16.8201997,14.766129 15.0564516,14.766129 L10.2979143,14.766129 L6.32072889,18.0506004 C5.75274472,18.5196577 4.89516129,18.1156602 4.89516129,17.3790323 L4.89516129,14.766129 L3.44354839,14.766129 Z" /></svg> </span>
<span class="meta-text">
No Comments<span class="screen-reader-text"> on Vance</span> </span>
</li>
</ul><!-- .post-meta -->
</div><!-- .post-meta-wrapper -->
<div class="post-inner thin ">
<div class="entry-content">
<div class="portfolio-filter box-row">
<span class='type'><p> Type: Novel </p></span>
<span class='genre'><p>Genres: Adult Themes ❦ Dark Fantasy </p></span>
</div>
How to print to screen all array elements stored in local storage
Good Morning,
I'm new in javascript and I'm having trouble getting a full array from local storage.
I made this code, but it only prints on screen the data stored in the last element of the array, and I intended to print on screen the data of all elements of the array. Someone can help me?
I can't use jquery
var preco_final=0; // preço total -> adiciona o preco de todos os bilhetes comprados
function mostrar(){
var carrinho=JSON.parse(localStorage.getItem('carrinho-compras'));
for(i=0;i<carrinho.length;i++)
{
//guarda em variáveis os dados que estão no localstorage
var tipo_bilhete_carrinho= "tipo de bilhete: " +carrinho[i].tipo_de_bilhete;
var dias_carrinho="dias: "+carrinho[i].dias;
var nome_carrinho="nome: "+carrinho[i].nome_t;
var nadultos_carrinho="númeor de adultos: "+carrinho[i].numero_adultos;
var ncriancas_carrinho="número de crianças: "+carrinho[i].numero_criancas;
var preco_carrinho="preço do bilhete: "+carrinho[i].preco_total; // preço do bilhete em causa
preco_final +=carrinho[i].preco_total; // preço total -> adiciona o preco de todos os bilhetes comprados
// Guarda todas as variáveis num array e converte numa lista pela função map
var compra=[tipo_bilhete_carrinho,dias_carrinho,nome_carrinho,nadultos_carrinho,ncriancas_carrinho,preco_carrinho];
ReactDOM.render(React.createElement("ul", {id:"lista_compras"},
compra.map( (compra) => React.createElement("li", null, compra)),React.createElement("hr",null,"")),document.getElementsByClassName("itens")[0]);
//hr tag que define mudança temática -> adiciona uma linha
}
document.getElementById('preco_total').innerHTML= "Preço total: "+preco_final;
}
function apagar(){
localStorage.removeItem('carrinho-compras'); //apaga o carrinho de compras
document.getElementsByClassName('itens')[0].innerHTML="";// apaga o conteudo da div, de modo a não mostrar nada no ecrã
document.getElementById('preco_total').innerHTML= ""; // apaga o conteudo da div do preço total
}
body{ margin: 0;}
#lista_compras{
list-style-type: none; /* Remove as bolinhas dos elementos da lista */
}
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/carrinho_compras.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/cabecalho_rodape.css">
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<link rel="icon" type="images/jpg" href="imagens/logo.jpg">
<title>Adventure Park - Bilheteira</title>
</head>
<body onload="mostrar()">
<header id="cabecalho"> <!-- Cabeçalho / menu-->
<a href="index.html" id="hyper_to_home">
<div id="logo_name">
<img id="logo" src="imagens/logo.png">
<h3 id="nome_parque">Parque de diversões</h3>
</div>
</a>
<div id="menudiv"></div>
<picture><img id="carrinho_de_compras"src="imagens/Bilheteira/carrinho_compras.png" width="40px" height="35px" > </picture>
</header>
<div class="itens" id="item"></div>
<div id="preco_total"></div>
<div id="btn_carrinho">
<button>Continuar a comprar</button>
<input type="reset" value="Apagar itens do carrinho" onclick="apagar()">
</div>
<footer id="rodape"> <!-- Rodapé -->
<div id="data-hora">12/10/2019 23:59:10</div>
</footer>
<script src="js/menu.js"></script> <!-- script do menu -->
<script src="js/carrinho_compras.js"></script>
<script src="js/data_e_hora.js"></script>
</body>
</html>
How do I store data in local storage:
// Pega a lista já registada, se não houver cria
var carrinho_de_compras = JSON.parse(localStorage.getItem('carrinho-compras') || '[]');
// Adiciona reserva
carrinho_de_compras.push({
tipo_de_bilhete: tipo_bilhete,
dias: ndias,
nome_t:nome,
numero_adultos: nadultos,
numero_criancas: ncriancas,
preco_total: precoTotal
});
// Salva a lista alterada
localStorage.setItem("carrinho-compras", JSON.stringify(carrinho_de_compras));
alert("Bilhete adicionado ao carrino de compras");
You can go through the localStorage Array iteratively and then print each item individually like below
for (var i = 0; i < localStorage.length; i++){
console.log(localStorage.getItem(localStorage.key(i)));
}
I would suggest to add Mustache.js. Its a logicless* (*no ifs and elses, for cycles) engine to print templates, its super easy to implement. You can then print it into kind of a showtext component, exmp. Showtext.jsx, or if you require pop up, Alert type component, I would suggest Reactstrap-modal. If you will require logic templates, you can at any point add Handlebars.js addon to Mustache.js, its fully compatible.
Convert a Button to Span. Why My code Doesn't work with javascript?
I'm using datatable button and I need a way to upload a file using those buttons
This Javascript
buttons: [
{
text: '<label for="fileUpload" class="btn btn-secondary-outline"><span class="fa fa-upload"></span> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"/>',
className: 'import-btn',
action: function () {
}
}
]
$('.import-btn').removeClass();
Generates
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button class="" tabindex="0" aria-controls="dataTable"><span><label for="fileUpload" class="btn btn-secondary-outline"><svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <span class="fa fa-upload"></span> --> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"></span></button>
I can upload but If I generate the code with the lines above nothing opens...
Also is there a way to change <button class="" tabindex="0" aria-controls="dataTable"> to <span class="" tabindex="0" aria-controls="dataTable">
Spans are inline elements, and they're hard to click. If you add
display: inline-block
(or even block), you should be fine. Here's a working snippet.
.hide {
display: none;
}
.spanButton {display: inline-block;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span class="spanButton" tabindex="0" aria-controls="dataTable"><span><label for="fileUpload" class="btn btn-secondary-outline"><svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <span class="fa fa-upload"></span> --> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"></span></span>
Character encoding and code cleaning...help pls
i am new of srackoverflow and i have a problem that i hope u guys can help me fix, since i broke my arm i need to get a faster way to copy and paste emails template into a email editor (in Siebel)...but so far i am having trouble because the html page i "wrote' is quite messy (i'm not good at it, i just take parts here and there and try to make them working together).
My biggest issue is that when i past the template in to the siebel email editor, all the character with axcent they come out wrong (like ò or ì ...and many other)
can smone pls help me in fixing the code properly??
I know that the codedon't work properly on firefox but i only need it to work on Ie (and apparently work) and most of all i need it working properly on siebel (automotive).
heres thesupermessy code
<!-- CSS : AddOns - WorldA -->
<!--<link rel="alternate stylesheet" title="styleA" type="text/css" media="all"
href="core/css/D_worldA.css" />-->
<!-- JavaScript : Librarys: jQuery-->
<script type="text/javascript"
src="http://flash.nissan.it/core/lib/jQuery/jquery-1.2.6.min.js"></script>
<!-- JavaScript : Librarys: swfObject-->
<script type="text/javascript"
src="http://flash.nissan.it/core/lib/swfobject/swfobject.js"></script>
<script type="text/javascript"
src="http://flash.nissan.it/flash/devenv/deploy/js/swfaddress.js"></script>
<!-- JavaScript : Include and embedded versions-->
<script type="text/javascript"
src="http://flash.nissan.it/core/scripts/document.ready.js"></script>
<script type="text/javascript"
src="http://flash.nissan.it/core/scripts/script.js"></script>
<script type="text/javascript" >
// <![CDATA[
function resizeHeader(val){
var flashHeader = document.getElementById('B_MediaNavigationLevel1');
flashHeader.style.height=val+'px';
var flashObject = document.getElementById('shell_header');
flashObject.style.height=val+'px';
}
function resizeFooter(val){
var flashFooter = document.getElementById('B_MediaNavigationLevel2');
flashFooter.style.height=val+'px';
var flashFooterObject = document.getElementById('shell_footer');
flashFooterObject.style.height=val+'px';
}
// ]]>
jQuery(document).ready(function() {
// HEADER
soHead = new SWFObject
("http://www.nissan.it/flash/devenv/deploy/shell/swf/shell.swf", "shell_header", "100%", "100%",
"10.0.45.2", "#ffffff");
soHead.useExpressInstall
('http://www.nissan.it/flash/devenv/deploy/shell/swf/expressinstall.swf');
soHead.addVariable("confFile", "http://www.nissan.it/IT/it.-
shellconf.conf");
soHead.addVariable("manifest", "http://www.nissan.it/IT/it.-
headerContent-Single-nointernal-trvheaderxml.xml");
soHead.addVariable("trvheader_resizeFunc", "resizeHeader" );
soHead.addVariable("trvheader_emebed", "true" );
soHead.addParam( "allowScriptAccess", "always" );
soHead.addVariable("verbose", "false" );
soHead.addVariable("fps", "false" );
soHead.addVariable("trv_header_selected_nodeid", "glossary" );
soHead.addParam( "wmode", "transparent" );
// FOOTER
soFoot = new SWFObject
("http://www.nissan.it/flash/devenv/deploy/shell/swf/shell.swf", "shell_footer", "100%", "100%", "10.0.45.2", "#ffffff");
soFoot.useExpressInstall
('http://www.nissan.it/flash/devenv/deploy/shell/swf/expressinstall.swf');
soFoot.addVariable("confFile", "http://www.nissan.it/IT/it.-
shellconf.conf" );
soFoot.addVariable("manifest",
"http://www.nissan.it/IT/it/glossary.-trvbottomNavxml.xml");
soFoot.addVariable("trvfooter_resizeFunc", "resizeFooter" );
soFoot.addParam( "allowScriptAccess", "always" );
soFoot.addVariable("trvfooter_emebed", "true" );
soFoot.addVariable("verbose", "false" );
soFoot.addVariable("fps", "false" );
soFoot.addParam( "wmode", "transparent" );
soHead.write( "B_MediaNavigationLevel1" );
soFoot.write( "B_MediaNavigationLevel2" );
});
</script>
<!-- trackingHtmlContent -->
</head><body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" class="body">
<div id="theDocument">
<div id="A_body">
<div class="topDecoration"></div>
<div class="middleDecoration">
<div id="B_content" class="glossaryDisplay">
<!-- component zone 2 -->
<div class="stdDisplay">
<!-- component zone 3-->
<Script Language=JavaScript>
function copyToClipboard(ID){
ctrlRange = document.body.createControlRange();
ctrlRange.add(document.all(ID));
ctrlRange.execCommand("Copy");
}
</Script>
<style type="text/css">
#coolmenu a{
font: bold 13px Verdana;
padding: 5px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}
#coolmenu a:hover{
background-color: black;
color: white;
}
</style>
<div id="coolmenu">
<table width="100%" border="0">
<tr>
<td><ol class="descriptionList">
<li class="openDefault" >Concessionario Aut.</li>
<!-- "Access description from" -->
<li ><a href="#templ2" title="Centro Assistenza Fiducia">Centro Assistenza
Fiducia</a></li>
<!-- "Access description from" -->
<li >CETOC</li>
<!-- "Access description from" -->
<li >Dati Mancanti</li>
<!-- "Access description from" -->
<li >Contatti Nissan Italia</li>
<!-- "Access description from" -->
<li >Inviare Richiesta Scritta Roma </li>
<!-- "Access description from" -->
<li >Richiesta Info+Link</li>
<!-- "Access description from" -->
<li ><a href="#templ8" title="Libretto uso/manutenzione o garanzia">Libretto
uso/manutenzione o garanzia</a></li>
<!-- "Access description from" -->
<li ><a href="#templ9" title="Elenco Concessionari GT-R">Elenco Concessionari GT-
R</a></li>
<!-- "Access description from" -->
<li ><a href="#templ10" title="Infiniti: Info Request+link">Infiniti: Info Request
+link</a></li>
<li >Qashqai Tempi di attesa</li>
<!-- "Access description from" -->
<li >Sconti categorie speciali - legge 104 etc.</li>
</ol></td>
<td><ol class="descriptionList">
<!-- "Access description from" -->
<li >Disponibilita veicoli presso cocessionari </li>
<!-- "Access description from" -->
<li >Risorse umane -cv - etc.</li>
<li >Reclamo: segnalazione e codice</li>
</ol></td>
</tr>
</table>
<!-- "Access description from" -->
</ol>
</div>
<div class="glossaryContainer">
<div class="glossaryTab" id="templ1">Concessionario Autorizzato <br> <input type=button value='Copy Table To Clipboard' onClick="copyToClipboard('thisTable')">
<table id='thisTable' class=MsoNormalTable border=1 cellspacing=0 cellpadding=0>
<tr id=>
<td id="t1" width=852>email template in here</td>
</tr>
</table>
</div>
</div>
<a class="anchorLink" href="#A_body">Torna sù</a>
</div>
<!-- component zone 4 (title area)-->
</div>
<!-- MAIN DATA CONTAINER //////////////////////////////////////////////////////-->
</div>
</div>
</div>
</body>
You should put this string in "head" tag where meta usually goes <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>