I'm trying to decide between Raphaël and Paper.js. I've chosen Paper.js, however, now I'm reading in several places it doesn't work well with Retina or high definition displays. At least it used to not. Raphaël seems to naturally work perfect as it's SVG based. Have the Retina issues been fixed with Paper.js or were there never really issues? Are there easy workarounds?
High DPI support was set to off by default and you had had to activate it because there were some issues. Now most of them should be resolved so the latest paper.js has HiDPI set to on by default.
If you are still using an older version you can turn it on like so:
<canvas id="canvas" hidpi="on"></canvas>
but this would not be needed with the latest build.
The hidpi setting unfortunately did nothing for me. I had to set the image directly to the width and height of the canvas like so
var mergedContext = mergedCanvas[0].getContext('2d');
mergedContext.fillStyle = 'rgb(255, 255, 255)';
mergedContext.fillRect(0, 0, totalWidth, totalHeight);
// This line is the secret
mergedContext.drawImage(canvasData, 0, canvasWidth, canvasHeight);
With that last line of code, it didn't matter how big the image was. It always resized to fit properly.
Use this style
html,
body {
height: 100%;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 100%;
height: 100%;
}
from here https://github.com/paperjs/paper.js/issues/662
Related
I am developing one website using Django. The website link is,
http://flooroof.com/listings/
You can see that the tiles on the website has got overlap on each other. This happened after I implemented infinite scroll. I found it at below link,
https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html
If you scroll down you will see more and more properties are getting loaded. At a time I am loading 20 listings. But not sure what has gone wrong.
I know there is something wrong with CSS but I am not sure what it is.
Please guide.
Yes as I can see the CSS has issue especially in .grid-item present on after first .infinite-item. I .grid-item has absolute position and only first .infinite-item's .grid-item has proper left and top values. If you want a quick solution then you can do this.
a.grid-item
{
left: auto !important;
top: auto !important;
position: relative !important;
}
One more issue is with image size. your images size are very different from each other so best solution is to use a blank 1px trasparent image with fixed height and show current images as background image.
Please help with these two issues, I will happily pay$ to get these two obstacles out of my way. I got this template from envato and my skills are very slow progressing.
http://philpadilla.com/demo/project.html
Fashion Models
Mobile · Web
How do I edit the css to expand the image heights to 100%? My graphics will be stacked just like the template but they will vary in height and I need them to not have the tops and bottoms of the images clipped off. I have been digging and cant seem to find the solution. I also want to turn the rollovers off on all the project images. Does anyone have it in their heart to help please?
The images on your template are already with a predefined value, to change that, you can:
Edit the inline style of your image
Create a external stylesheet to change the height
You can try setting height to 100% (height:100%;)
The easiest way to turn the rollover of, is creating a new stylesheet (style.css) and including it on your code (<link rel="stylesheet" href="style.css">)
thumb-overlay { display: none; } /* This code will disable the rollovers */ }
img { height: 100%; } /* And this one will set all pictures height to 100% */
I'm trying to change the background image of the grove and set an image on the handle. While doing so, I ran into a situation where the handle (which works) is being covered by the groove the moment that I set the background to anything. This simple example shows the issue when I change just the color and nothing else. The goove covers the handle with this little bit of code. (user cannot slide now) I'm missing something critical. What am I missing?
mySlider = new QSlider(centralWidget);
mySlider->setObjectName(QStringLiteral("mySlider"));
mySlider->setGeometry(QRect(960, 500, 100, 25));
mySlider->setOrientation(Qt::Horizontal);
mySlider->setStyleSheet("QSlider::groove:horizontal {background-color:yellow;}");
Here's what the slider looks like:
It seems to be a bug, it seems that the handle is resized to a size that makes it invisible, but if it can move with some difficulty. The last statement I checked with the following code.
connect(mySlider, &QSlider::valueChanged, [=](int value){
qDebug()<<value;
});
It is advisable to place a width and height, by example:
mySlider->setStyleSheet("QSlider::groove:horizontal {background-color:yellow;}"
"QSlider::handle:horizontal {background-color:blue; height:16px; width: 16px;}");
I can not get ChartJS to restrict itself to 200px. It takes the entire width of the browser. What am I missing.
I am using the following CDN
<div id="pnlChart" style="height:200px" >
<canvas id="myChart" width="400" height="200" class="chart" ></canvas>
</div>
my data that is being returned from the server appears to be well formed and drawing the chart correctly. It does not have the width/height in it. (I have pulled this from Chrome's dev tools.
{"type":"line","labels":[0,2,6,7,8,9,10,11,12,13,14,1,3,4,5,15,16,17,18,19,20,21,22,23],"datasets":[{"label":"Data","data":[2,1,8,36,119,179,214,165,87,173,220,0,0,0,0,0,0,0,0,0,0,0,0,0]}]}
You should be able to disable this container-width filling behaviour by telling Chart.js not to use responsive mode. Try passing this into the global configuration of the chart (the highest level of options):
options: {
responsive: false
}
See the Chart.js documentation for an example of how this fits into the full definition of a chart.
If that does not work for some reason then you could instead limit the width of the div element which contains the canvas on which your graph is drawn. Based on your example you could add this to your CSS:
div#pnlChart {width: 200px}
Even if you can get one of these methods to work, ideally you don't want to be specifying fixed widths for items these days because it makes it harder for pages to display well on the myriad of device screens which are in use now.
It's much better to develop a responsive layout for your site which will adjust to suit any screen width, from small smartphones to large desktop monitors. Search online for guides about "responsive design" for articles about this subject.
I use foundation 4 with SASS. but I can't really find how to change default font-size.
For my language, default font-size is too big.
I have tried to change some part. as you may know, it's related full-width as well.
1st of all I have changed full width size : $row-width: em-calc(1200)
1000 to 1200. I need wider. is it correct way to change full-width?
I have tried to change font size.
$base-font-size: 100% !default;
$em-base: 16px !default;
When I change these. it's related full width.
Then How Can I change font-size and full-width? if you have sass, please let me know which file I need modified.
Not 100% clear what you are asking for in your question, but I hope I got it right - you want to know how to change the font without changing the grid size right?
Then the answer can be found in the documentation:
/* Since the typical default browser font-size is 16px, that makes the calculation for grid size. */
/* If you want your base font-size to be a different size and not have it effect grid size too, */
/* set the value of $em-base to $base-font-size ($em-base: $base-font-size;) */
$em-base: 16px !default;
So basically just set:
#import "foundation/variables";
$base-font-size: 4px;
$em-base: $base-font-size;
Change the em-base back to the default and you'll see that the grid also changes accordingly to $base-font-size. You are also doing the right thing by setting the row-width.
If you'r having trouble getting the SASS function em-calc() to work, make sure you call it after #import "foundation/variables"; I don't know why em-calc() is used in the documentation, maybe the sourcecode on git is outdated - but I had to use emCalc(#px) - ie: emCalc(2000px);
This is currently an issue, Github repo.
Until it is fixed in a new version, this changes the font-size without changing the grid.
$base-font-size: 120% !default; // pixels to percent
body { font-size: $base-font-size; } // set the body font size to $base-font-size variable