How to force ECharts charts to a fixed width when printing? - vue.js

I'm using some echarts in my Vue application with vue-echarts. All charts have :autoresize="true".
My problem is, that if I try to print the page, the width of the charts are set to match the width of the browser. If browser is full screen then some charts get clipped.
CSS:
.echarts {
width: 100%;
min-height: 200px;
}
#media print {
#page { margin: 1cm }
body {
width: 110mm;
height: 297mm;
margin: 25mm 25mm 25mm 25mm;
}
.echarts {width: 600px !important;} /* This does not work! */
}
In the generated DOM there is a container, and inside that another div with the style: position: relative; width: 567px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;
Width of the inner container is updated when browser is resized.

Yes, I have faced the same problem. I have also tried before print and after print and call function to redraw the chart but some times its break when Brower gets a zoom out and zoom in.
I say it's not the best solution but it works perfectly.
Solution -
Overwrite the window.print method in mounted.
window.print = function () {
setTimeout(function () {
_print();
}, 500);
};
use flag print_mode for printing.
let self = this;
window.addEventListener('afterprint', function () {
self.print_mode = false;
});
user ref of the chart instance to get base64 data. call getDataURL() to get image data.
chart = echarts.init(chart_dom);
chart_img = chart.getDataURL()
<img v-if="print_mode" class="print-only" :src="chart_img"></img>
so while printing it display image and print and in normal mode, it shows a chart.

Related

Vue - Moving Backgrounds With Mouse Position

I new to vuejs!. I would like to move the background image when mouse position is moving around, how to do this in vuejs.
const el = document.querySelector("#module");
el.addEventListener("mousemove", (e) => {
el.style.backgroundPositionX = -e.offsetX + "px";
el.style.backgroundPositionY = -e.offsetY + "px";
});
.module {
width: 300px;
height: 300px;
border: 1px solid white;
background-image: url(https://images.unsplash.com/photo-1499162526249-f5b8b9ba9923?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=865bf5c0b77ceb22e88de9fd41c5a671);
background-size: 1000px;
}
<div class="module" id="module">
</div>
Just add #mousemove to your div with link to method that will handle your behaviour. Also you can create reference to this element via ref. Sadly I can not create a block of code on tablet, but you can check out this answer here, that’s exactly what you need.

Adding scroll down button to Shopify custom theme

I am customizing shopify motion theme. I added a scroll down svg on bottom of the slider. But having problem with scrolling down to the next section
I have added the scroll down button with that code;
div.hero__image-wrapper:after {
content: url({{ "icon-scroll-down.svg" | asset_url }}) ;
position: absolute;
display: block;
z-index: 34560;
bottom: 20px;
left: 48%;
font-size: 2em;
border-radius: 1em;
font-weight: bold;
border: 3px solid gray;
padding: 0.1em 0.1em 0;
animation-name: color_change;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes color_change {
0% { color: gray; bottom:20px;}
10% { color: black; bottom:10px;}
20% { color: gray; bottom:20px;}
100%{ color: gray; bottom:20px;}
}
But currently it's only an icon. I need to make it scroll to down
I would do it with JS instead. Let's assume your button is an actual element instead of pseudo ::after:
<div class="scroll-down-button"></div>
.scroll-down-button {
// whatever style you prefer
}
Then the JS code would look like this:
(function() {
// Get the button element
var button = document.querySelector('.scroll-down-button');
// Get current section
var currentSection = button.closest('.shopify-section');
// Get next section (the very next element after current section container)
var nextSection = currentSection.nextSibling();
// Get the coordinates of the next section
var nextSectionCoordinates = nextSection.getBoundingClientRect();
// Get the top Y axis coordinates of next section
var nextSectionTop = nextSectionCoordinates.top;
// Scroll to the top of next section (0 means no scroll on X axis)
window.scrollTo(0, nextSectionTop);
})();
The above is not tested, so let me know if it doesn't work or you can console.log any values. You should get the idea though!

Jquery animate function doesn't work: Invalid keyframe value for property left

jquery file
above is my jquery code. I want every time I click the frog image, it will move to the left 50 pixels. but when I run the code, it keeps saying "Invalid keyframe value for property left: +=50px"
google console
Here's a working example.
$("#clickme").click(function(){
$(this).animate({ "left": "-=50px" }, "slow" );
});
#clickme {
position: absolute;
background: red;
width: 100px;
left: 0;
right: 0;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">Click me</div>

How to make owl-carousel with rotating cursor work in bootstrap?

I have been trying to make this owl-carousel by John Higgins (http://jonhiggins.co.uk/words/animated-rotating-cursor-over-carousel/) work with bootstrap.
This theme makes the cursor act like 'prev' and 'next' buttons when hovering the carousel image. But it seem that when I put html into a responsive container of bootstrap it somehow messes with the cursor.
When the browser width is expanded you will notice that the arrow doesn't switch from right to left. Please have a look at the fiddle.
https://jsfiddle.net/ftpptf/c6nw8yzt/
/* BEGIN Cursor*/
.cursor {
display: none;
top: 0;
left: 0;
position: fixed;
z-index: 1000;
width:33px;
height:54px;
margin-top: 60px;
margin-left: 33px;
pointer-events: none;
&.isVisible {
display: block;
}
}
.js--visible {
display: block;
}
.cursor__icon {
width:32px;
height:32px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw MC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBpZD0ic3ZnIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsa W1pdD0iMTAiIGQ9Ik0yNC4xIDMwTDcuOSAxNiAyNC4xIDIiPjwvcGF0aD48L3N2Zz4=');
background-repeat:no-repeat;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
.carousel.offScreen .cursor {
display: none;
}
.carousel.right .cursor__icon {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* END Cursor*/
I have set .cursor .cursor__icon position = absolute which seemed to help but it still acts weird.
I have tried loads of different settings but without any good results!
Any help will be highly appreciated - thanks in advance!
Glad the Codepen example is of use to you.
It looks like the issue is that your carousel's left edge isn't at 0px (far left of the window), it's halfway across the screen. My example didn't account for this scenario as the carousel filled the viewport horizontally.
Hopefully this fiddle resolves that: https://jsfiddle.net/jonjhiggins/z915kbe3/
Changes made were:
CSS: making the carousel and images 100% width instead of 800px (so that it will responsively fill the width of whatever you set it's parent to)
.carousel {
width: 100%;
cursor: none;
}
.carousel img {
width:100%;
}
JS: changing initLayout to account for when the carousel isn't on far left of screen
var _initLayout = function () {
left = $element.offset().left;
right = left + ($element.width() / 2);
};
JS: add resize event to re-calculate the left/right positions when the window is resized or device is rotated
var _initEvents = function () {
$element.on('mousemove', _mousemove)
.on('click', _click);
$(window).on('resize', _initLayout);
};

jquery animate() IE9 and chrome - strange bahaviour!

Please look at this page here.
This is a really straightforward bit of jquery animate() that animates the title text up to the top of page - that's all!
In FF and Opera it's perfect.
In IE9 it jumps first to the bottom of the page and then animates up.
In Chrome it jumps to the top of the page and then animates down!
wtf!
The jquery call is:
$(function(){
$('#name_holder').click(function(){
$('#name_holder_wrap').animate(
{top: '75px'}
, 500
, 'swing'
, function() {
$('#name_holder').attr({"style": 'cursor:default'});
}
);
});
});
and here's the css for the elements involved:
#name_holder_wrap {
padding: 0px;
width: 100%;
position: absolute;
height: auto;
top: 45%;
}
#name_holder {
padding: 0px;
width: 600px;
height: auto;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
cursor: pointer;
}
(Sorry, I haven't quite got my head round how to insert code into these posts properly - can't get those closing curly braces to include in the code block - I am trying!)
So, I'd really appreciate any pointers on this - i've been wrestling with it for some hours now and really need to get on!
Many thanks in advance!
Scott
Works fine for me in IE9 for me too, but a fix for Chrome would be to animate to a percent value instead of pixels:
$(function(){
$('#name_holder').click(function(){
$('#name_holder_wrap').animate(
{top: '15%'}
, 500
, 'swing'
, function() {
$('#name_holder').attr({"style": 'cursor:default'});
}
);
});
});
If that dosen't work, you could change the percent value in the css, maybe with help of some javascript.
The problem here is the combination of CSS and JQuery, which need to be correct in order for both IE and Chrome to work as you would hope.
Here's how I have things set up and it worked fine.
.object_to_be_animated {
position: absolute;
left: 0;
top: 96px;
width: 259px;
height: 85px;
background: url(...) left top repeat; }
The important thing here is that I have absolute positioned my element using TOP, not bottom.
I then structured my Jquery like so
function slide_up() { $(this).children(".overlay").animate({top: '-=51px'}); }
function slide_down() { $(this).children(".overlay").animate({top: '+=51px'}); }
$(".rolloverLink").hoverIntent(slide_up,slide_down);
Remember to use the same units with your CSS and JQuery, I'd recommend using pixels as it keeps things precise. Don't mix em, px, %.
This should hopefully fix the issue