I have the following the following html with a few SVGs and images:
<body class="noselect">
<div class="noselect viewer" id="plotter">
<a class="arrow-controls next-page flex" id="next">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#fff" d="M5 20c-0.128 0-0.256-0.049-0.354-0.146-0.195-0.195-0.195-0.512 0-0.707l8.646-8.646-8.646-8.646c-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0l9 9c0.195 0.195 0.195 0.512 0 0.707l-9 9c-0.098 0.098-0.226 0.146-0.354 0.146z"></path>
</svg>
</a>
<a class="arrow-controls previous-page flex" id="prev">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#fff" d="M14 20c0.128 0 0.256-0.049 0.354-0.146 0.195-0.195 0.195-0.512 0-0.707l-8.646-8.646 8.646-8.646c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-9 9c-0.195 0.195-0.195 0.512 0 0.707l9 9c0.098 0.098 0.226 0.146 0.354 0.146z"></path>
</svg>
</a>
<div id="book">
<div class="page green left">
<img src = "../images/page-1.jpg" width="100%" height="100%" />
</div>
<div class="page blue right flipped">
<img src = "../images/page-2.jpg" width="100%" height="100%" />
</div>
<div class="page green left ">
<img src = "../images/page-3.jpg" width="100%" height="100%" />
</div>
<div class="page blue right flipped">
<img src = "../images/page-4.jpg" width="100%" height="100%" />
</div>
<div class="page green left">
<img src = "../images/page-5.jpg" width="100%" height="100%" />
</div>
<div class="page blue right flipped">
<img src = "../images/page-6.jpg" width="100%" height="100%" />
</div>
<div class="page green left">
<img src = "../images/page-7.jpg" width="100%" height="100%" />
</div>
<div class="page blue right flipped">
<img src = "../images/page-8.jpg" width="100%" height="100%" />
</div>
<div class="page green left ">
<img src = "../images/page-9.jpg" width="100%" height="100%" />
</div>
<div class="page blue right flipped">
<img src = "../images/page-10.jpg" width="100%" height="100%" />
</div>
<div class="page green left">
<img src = "../images/page-11.jpg" width="100%" height="100%" />
</div>
<div class="page blue right flipped">
<img src = "../images/page-12.jpg" width="100%" height="100%" />
</div>
</div>
</div>
<script src="../bundle.js"></script>
</body>
</html>
… which is served over the webpack-dev-server with style-loader, babel transpiler and a few loaders per following webpack.config.js:
const debug = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');
const precss = require('precss');
const autoprefixer = require('autoprefixer');
module.exports = {
context: __dirname,
devtool: debug ? 'inline-sourcemap' : null,
entry: [`${__dirname}/lib/script.js`],
output: {
path: `${__dirname}/dist`,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, exclude: ['/node_modules/', '/js/', '/svg/'], loader: 'style-loader!css-loader!postcss-loader!' },
{ test: /\.(png|jpe?g|gif|svg)$/, loader: 'url-loader?limit=8192' },
{ test: /\.js$/, exclude: ['/node_modules/', '/css/'], loader: 'babel-loader' },
{ test: /\.(html|htm)$/, loader: 'html-loader' },
]
},
postcss: function() {
return [precss, autoprefixer];
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Then on entry file: [${__dirname}/lib/script.js] I have:
import '../css/style.css';
import '../html/index.html';
import 'babel-polyfill';
The css import works fine with the background images within it but the images inside html aren't served. I think I'm going in circles with webpack at the moment!
How to serve regular images of an html page? o_O
Related
I am trying to get this scroll bar and arrows to appear at the bottom of the page. I can adjust the "top" to place it at the bottom of the page, but if someone has a different screen set up than mine, it doesn't appear flush with the bottom of the screen.
Below is the code that I am trying to use, to get my code to appear at the bottom of the screen
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Composer -->
<!-- Source: https://www.jssor.com/demos/carousel-slider.slider/=edit -->
<script src="js/jssor.slider-28.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: 1,
$AutoPlaySteps: 5,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 5
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 16,
$SpacingY: 16
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 980;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*#endregion responsive code end*/
};
</script>
<style>
/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes jssorl-009-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/*jssor slider bullet skin 057 css*/
.jssorb057 .i {position:absolute;cursor:pointer;}
.jssorb057 .i .b {fill:none;stroke:#fff;stroke-width:2000;stroke-miterlimit:10;stroke-opacity:0.4;}
.jssorb057 .i:hover .b {stroke-opacity:.7;}
.jssorb057 .iav .b {stroke-opacity: 1;}
.jssorb057 .i.idn {opacity:.3;}
/*jssor slider arrow skin 073 css*/
.jssora073 {display:block;position:absolute;cursor:pointer;}
.jssora073 .a {fill:#ddd;fill-opacity:.7;stroke:#000;stroke-width:160;stroke-miterlimit:10;stroke-opacity:.7;}
.jssora073:hover {opacity:.8;}
.jssora073.jssora073dn {opacity:.4;}
.jssora073.jssora073ds {opacity:.3;pointer-events:none;}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:150px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:150px;overflow:hidden;">
<div>
<img data-u="image" src="img/001.jpg" />
</div>
<div>
<img data-u="image" src="img/005.jpg" />
</div>
<div>
<img data-u="image" src="img/006.jpg" />
</div>
<div>
<img data-u="image" src="img/007.jpg" />
</div>
<div>
<img data-u="image" src="img/008.jpg" />
</div>
<div>
<img data-u="image" src="img/009.jpg" />
</div>
<div>
<img data-u="image" src="img/010.jpg" />
</div>
<div>
<img data-u="image" src="img/011.jpg" />
</div>
<div>
<img data-u="image" src="img/024.jpg" />
</div>
<div>
<img data-u="image" src="img/025.jpg" />
</div>
<div>
<img data-u="image" src="img/026.jpg" />
</div>
<div>
<img data-u="image" src="img/027.jpg" />
</div>
</div><a data-scale="0" href="https://www.jssor.com" style="display:none;position:absolute;">web animation composer</a>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb057" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:14px;height:14px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5000"></circle>
</svg>
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora073" style="width:50px;height:50px;top:0px;left:30px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<path class="a" d="M4037.7,8357.3l5891.8,5891.8c100.6,100.6,219.7,150.9,357.3,150.9s256.7-50.3,357.3-150.9 l1318.1-1318.1c100.6-100.6,150.9-219.7,150.9-357.3c0-137.6-50.3-256.7-150.9-357.3L7745.9,8000l4216.4-4216.4 c100.6-100.6,150.9-219.7,150.9-357.3c0-137.6-50.3-256.7-150.9-357.3l-1318.1-1318.1c-100.6-100.6-219.7-150.9-357.3-150.9 s-256.7,50.3-357.3,150.9L4037.7,7642.7c-100.6,100.6-150.9,219.7-150.9,357.3C3886.8,8137.6,3937.1,8256.7,4037.7,8357.3 L4037.7,8357.3z"></path>
</svg>
</div>
<div data-u="arrowright" class="jssora073" style="width:50px;height:50px;top:0px;right:30px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<path class="a" d="M11962.3,8357.3l-5891.8,5891.8c-100.6,100.6-219.7,150.9-357.3,150.9s-256.7-50.3-357.3-150.9 L4037.7,12931c-100.6-100.6-150.9-219.7-150.9-357.3c0-137.6,50.3-256.7,150.9-357.3L8254.1,8000L4037.7,3783.6 c-100.6-100.6-150.9-219.7-150.9-357.3c0-137.6,50.3-256.7,150.9-357.3l1318.1-1318.1c100.6-100.6,219.7-150.9,357.3-150.9 s256.7,50.3,357.3,150.9l5891.8,5891.8c100.6,100.6,150.9,219.7,150.9,357.3C12113.2,8137.6,12062.9,8256.7,11962.3,8357.3 L11962.3,8357.3z"></path>
</svg>
</div>
</div>
<script type="text/javascript">jssor_1_slider_init();
</script>
<!-- #endregion Jssor Slider End -->
I wanted a cylindrical container containing liquid and this liquid changes color and its amount in that container, So I used SVG for this purpose (SVG is used for liquid in a cylindrical container).
Here is the source code along with SVG
function changeCol(col) {
document.querySelector('path').style.setProperty('fill', col, '!important');
document.querySelector('ellipse').style.setProperty('fill', col, '!important');
//Its not working I dont know why.
}
function changeHeight(vol) {
//Some Code to change its height.
}
.container {
width: fit-content;
border: solid red;
}
.liquid {
width: 200px;
}
.liquid svg * {
fill: red !important;
}
<div class="container">
<div class="liquid">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25">
<title>liquid_RBt</title>
<path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,56S216.66,43.46,216.66,28Z" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001"/>
<ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.8"/>
</svg>
</div>
</div>
<div class="controller">
<div class="color-change">
<button class="col-btn" onclick="changeCol('red');">Red</button>
<button class="col-btn" onclick="changeCol('blue');">Blue</button>
<button class="col-btn" onclick="changeCol('green');">green</button>
</div>
<div class="change-amount">
<input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">
</div>
</div>
I've clipped the path with a clipPath that I then move about to hide the parts of the polygon that need to disappear.
I don't know the volume of the cylinder either so you might want to scale the number.
I also fixed the colouring.
function changeCol(col) {
document.querySelector('path').style.setProperty('fill', col);
document.querySelector('ellipse').style.setProperty('fill', col);
}
function changeHeight(vol) {
// not sure how much 100ml is supposed to fill up
document.querySelector('ellipse').cy.baseVal.value = 300 - vol;
document.querySelector('rect').y.baseVal.value = 300-vol;
}
.container {
width: fit-content;
border: solid red;
}
.liquid {
width: 200px;
}
<div class="container">
<div class="liquid">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25">
<title>liquid_RBt</title>
<defs>
<clipPath id="cp">
<rect x="0" y="0" width="230" height="400"/>
</clipPath>
</defs>
<path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,56S216.66,43.46,216.66,28Z" style="fill:red;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001;clip-path: url(#cp)"/>
<ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:red;stroke:#fff;stroke-miterlimit:10"/>
</svg>
</div>
</div>
<div class="controller">
<div class="color-change">
<button class="col-btn" onclick="changeCol('red');">Red</button>
<button class="col-btn" onclick="changeCol('blue');">Blue</button>
<button class="col-btn" onclick="changeCol('green');">green</button>
</div>
<div class="change-amount">
<input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">
</div>
</div>
Set the preserve aspect ratio to none.
<svg preserveAspectRatio="none" /* here are your other attributes */>
I stuck with some strange behaviour in vue.
The result
The code
<template>
<div class="container">
<main class="messages">
<message v-for="message in messages" v-bind="message" :key="message.id" />
</main>
<div class="send-message">
<g-input v-model="message" :maxLength="80" #submit="sendMessage">
<object type="image/svg+xml" data="assets/send-icon.svg" width="200" height="200">
<img src="assets/send-icon.png" width="200" height="200" alt="image format png" />
</object>
</g-input>
</div>
</div>
</template>
g-input code
<template>
<div class="root">
<canvas ref="canvas" class="hide"></canvas>
<textarea
ref="input"
class="input"
type="text"
:rows="lineCount"
:maxlength="maxLength"
:value="value"
#input="handleInput"
#keydown.prevent.enter="handleEnter"
/>
<div ref="confirmButton" class="confirm-button">
<slot></slot>
</div>
<span class="char-counter">{{ `${charCount}/${maxLength}` }}</span>
</div>
</template>
I absolutely do not understand why this happens, can you please explain?
So I found how to avoid this
Just need to replace data attribute in object like this
<object type="image/svg+xml" :data="sendIcon" width="200" height="200">
<img src="#/assets/send-icon.png" width="200" height="200" alt="image format png" />
</object>
Then in script tag we need to export icon
const sendIcon = require('#/assets/send-icon.svg')
export default {
data: () => ({
sendIcon: sendIcon,
}),
}
But I still do not understand wht this is happens cause single <img> tag works just fine
<img src="#/assets/send-icon.svg" width="200" height="200" alt="image format png" />
And only <object> tag produce this behaviour and only with local url, some http url works fine
<object
type="image/svg+xml"
data="https://upload.wikimedia.org/wikipedia/commons/1/12/Black_Paw.svg"
width="200"
height="200">
<img
src="https://upload.wikimedia.org/wikipedia/commons/1/12/Black_Paw.svg"
width="200"
height="200"
alt="image format png"
/>
</object>
I want to pause the VIDEO when I slide by dragging or using slide next, prev buttons.
It doesn't matter which slider. it can be useful-swiper or owl-carousel
I'm using ngx-useful-swiper as my Carousel.
I can use ngx-owl-carousel-o instead, But if it worked with anyone
My HTML
<swiper [config]="heroSlider" #usefulSwiper>
<div class="swiper-wrapper">
<div class="swiper-slide text-center" *ngFor="let item of sections.about_video; index as i">
<video
poster="{{ fileUrl + item.thumbnail }}"
playsinline
autoplay="false"
muted
controls="false"
onloadedmetadata="this.muted = true"
src="{{ fileUrl + item.video }}"
id="video"
#video
></video>
</div>
</div>
<button class="btn p-0 btn-prev" (click)="previousSlide()">
<svg
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 26 43"
style="enable-background: new 0 0 26 43"
xml:space="preserve"
>
<path
id="Path_3540"
class="st0"
d="M21.5,43c2.5,0,4.5-2,4.5-4.5c0-1.2-0.5-2.4-1.3-3.2L10.9,21.5L24.7,7.7
c1.7-1.8,1.7-4.7-0.1-6.4c-1.8-1.7-4.5-1.7-6.3,0l-16.9,17c-1.8,1.8-1.8,4.6,0,6.4l16.9,17C19.1,42.5,20.3,43,21.5,43z"
/>
</svg>
</button>
<button class="btn p-0 btn-next" (click)="nextSlide()">
<svg
class="icon"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 26 43"
style="enable-background: new 0 0 26 43"
xml:space="preserve"
>
<path
id="Path_3539"
class="st0"
d="M4.5,43C2,43,0,41,0,38.5c0-1.2,0.5-2.4,1.3-3.2l13.7-13.8L1.3,7.7c-1.7-1.8-1.7-4.7,0.1-6.4c1.8-1.7,4.5-1.7,6.3,0l16.9,17c1.8,1.8,1.8,4.6,0,6.4l-16.9,17C6.9,42.5,5.7,43,4.5,43z"
/>
</svg>
</button>
</swiper>
My TS
heroSlider: SwiperOptions = {
loop: false,
slidesPerView: 1,
on: {
transitionEnd: function (Swiper) {
console.log(Swiper);
},
},
};
If you simply mean you want to pause video when you click the next or previous buttons, you can add a listener for those buttons and in that listener pause the video.
Some example below showing adding an ID to the button and then using this to find the button in your Javascript and add a listener.
You can add a resume button also or just have the user click play on the video.
<button id="btnNext" class="btn p-0 btn-prev" (click)="previousSlide()">
var vid1 = document.getElementById("YourVideoID");
var btnNext = document.getElementById("NextButton");
var btnPrev = document.getElementById("PrevButton");
var btnResume = document.getElementById("PrevButton");
btnNext.addEventListener("click", function() {
vid1.pause()
});
btnPrev.addEventListener("click", function() {
vid1.pause()
});
btnResume.addEventListener("click", function() {
vid1.play()
});
Currently I'm using SVG for some animation and I want that when someone clicks on an image with SVG around it that it will start a download for that image.
<div class="box">
<svg width="100%" height="100%">
....
</svg>
<img src="chief.png" alt="Chief"/>
</div>
How do I change it so it starts a download on click?
Test this
<a href="http://www.w3.org/Graphics/SVG/">
<svg class="Orange" ... >
<use xlink:href="buttonB.svg#Root"/>
</svg>
</a>
and check this page > http://tavmjong.free.fr/SVG/BUTTON_TEST/button_test.html
When the SVG is wrapped with the anchor, a click event on the SVG will be sent up to the anchor. In this case that will trigger the download.
<div class="box">
<a href="chief.png" download="chief.png">
<svg width="100%" height="100%">
....
</svg>
</a>
</div>