So I'm trying to tweak my Anki flashcards by adding stroke-order diagrams for kanjis.
The diagrams are generated by a plugin called Kanji Colorizer .
Love the plugin, but the images are
So... I want to create a scroll-box that contains the images horizontally and scrolls horizontally if there are too many kanji to display side-by-side.
I think I have succeeded in that, at least. (see code below).
The problem now is that although the box scrolls horizontally (and would vertically too, if I enabled it), the images remain as big as they are. Meaning I need to allow vertical scrolling or else accept useless cropped images.
How do I resize the images to fit the box?
To clarify:
The html looks like this:
<span style="font-size: 20px; "> {{Meaning}} </span>
<hr id=answer>
<tts style="display:none" service="android" voice="ja_JP">{{Expression}}</tts>
<span style="font-size: 40px; ">
{{furigana:Reading}}
</span>
<br>
<div id = "output"></div>
<br>
<button onclick="showHideStrokeOrder()">Stroke Order</button>
<center>
<div id="scrollboxStrokeOrder" style="border:1px solid black;height:150px;width:100%;white-space:nowrap;overflow-y:hidden;overflow-x:auto;display:none">
<div id='strokeOrderPictures'>{{Stroke Order Diagram}}</div>
</div>
</center>
<script>
function showHideStrokeOrder() {
var out = document.getElementById("output");
var scrollbox = document.getElementById("scrollboxStrokeOrder");
if (scrollbox.style.display === "none") {
scrollbox.style.display = "block";
} else {
scrollbox.style.display = "none";
};
var imgs = document.getElementById('strokeOrderPictures');
var maxHeight= parseFloat(scrollbox.style.height);
var imgsHeight = imgs.firstChild.height;
out.innerHTML = "scrollbox height = " + maxHeight + ", imgs height = " + imgsHeight;
if(imgsHeight > maxHeight) {
const scale = maxHeight / imgsHeight;
out.innerHTML += ", scaling = " +scale;
//this doesn't work and should be replaced, just to clarify intent:
imgs.style.height = maxHeight;
imgs.style.width = 'auto';
};
}
</script>
Where {{Stroke Order Diagram}}
is a reference to the card's field where the diagram images have been generated in. In the example above, it contains two individual pictures, one for each kanji).
UPDATE : shared the example as a downloadable deck, if you want to try it out:
For anybody looking for something similar in the future, here's the final code:
<span style="font-size: 20px; "> {{Meaning}} </span>
<hr id=answer>
<tts style="display:none" service="android" voice="ja_JP">{{Expression}}</tts>
<span style="font-size: 40px; ">
{{furigana:Reading}}
</span>
<br>
<button onclick="showHideStrokeOrder()">Stroke Order</button>
<center>
<div id="scrollboxStrokeOrder" style="border:1px solid black;height:150px;width:100%;white-space: nowrap;overflow-y:hidden;overflow-x:auto;display:none">
<div id='strokeOrderPictures'>{{Stroke Order Diagram}}</div>
</div>
</center>
<script>
function showHideStrokeOrder() {
var scrollbox = document.getElementById("scrollboxStrokeOrder");
if (scrollbox.style.display === "none") {
scrollbox.style.display = "block";
resizeStrokeOrderDiagrams();
} else {
scrollbox.style.display = "none";
};
}
function resizeStrokeOrderDiagrams(){
var scrollbox = document.getElementById("scrollboxStrokeOrder");
var imgs = document.getElementById('strokeOrderPictures');
var maxHeight= parseFloat(scrollbox.style.height)
var imgsHeight = imgs.firstChild.height
if(imgsHeight > maxHeight) {
var diagrams = imgs.getElementsByTagName("img");
for( i=0; i< diagrams.length; i++ ) {
var d = diagrams[i];
d.height= maxHeight -5;
}
};
}
</script>
Match image height to container
By jQuery:
$("#myImg").prop("height", $("#myContainer").prop("height"));
By DOM:
document.getElementById("myImg").height=
document.getElementById("myContainer").height;
Browser HTML behavior with images is pretty generous. This directly resizes the image to the container, regardless of the container's height (including making it bigger - you may want to code more for that if you don't want that behavior)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.