Yes. But it is blogger, They still don’t provide ‘https’ support for custom domain blogs.
I recommend that a separate topic be started to explore that issue.
I did kinda start one here. Is this what you meant? October 17th came and Google did nothing to address it.
I wondered if there’s a reason why you always edit your code on JS fiddle, rather than in an editor on your desktop, which would generally be easier.
There are many editors to choose from, some of them free of charge, so you could try a few until you find one you like. I think they all have similar features, such as code highlighting, to make it easier to spot any typos or other mistakes you may have made. They may also automatically add a closing HTML tag whenever you use an opening one, to help avoid unclosed elements, and insert parentheses in pairs, etc. Very helpful and time-saving.
1 Like
It doesn’t seem to have any of the helpful features I mentioned. A code editor would also work for JavaScript and CSS, not just HTML. Unless there’s a reason why you can’t install something on your computer, I’d highly recommend that you try a couple.
2 Likes
Even with your htmledit editor, it is possible to use good coding techniques, which helps to make your life easier.
The CSS styles can be in a tag, the HTML content is after it, and the end contains the script code.
I also put the code through Prettier to help remove any obvious formatting issues.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
/* preload source: https://perishablepress.com/pure-css-better-image-preloading-without-javascript/ */
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
.playButton {
display: block;
width: 266px;
height: 266px;
cursor: pointer;
background-color: #000000;
background-image: linear-gradient(
to right,
transparent 83px,
#0059dd 83px,
#0059dd 86px,
transparent 86px,
transparent 174px,
#0059dd 174px,
#0059dd 177px,
transparent 177px
);
background-position: "center";
border: 3px solid #0059dd;
}
.playButton.triggered {
border: 3px solid #e77d19;
background: url("http://via.placeholder.com/260x260");
background-color: transparent;
background-repeat: no-repeat;
}
.initial path {
stroke: #e77d19;
stroke-width: 3px;
color: black;
}
.pause path {
stroke: #e77d19;
stroke-width: 3px;
color: transparent;
}
.play path {
stroke: #e77d19;
stroke-width: 3px;
color: transparent;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="preloaded-images">
<img src="http://via.placeholder.com/260x260" width="1" height="1" alt="Image 01" />
</div>
<button class="playButton">
<svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause hide" width="90" height="108" viewbox="-13 -10 85 120">
<path fill="currentColor" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="play hide" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="speaker hide" width="60" height="72" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
</button>
<audio class="player hide">
<source type="audio/mpeg" src="http://hi5.1980s.fm/;"></source>
</audio>
<script>
var utils = (function() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(items) {
items.forEach(function hideItem(item) {
hide(item);
});
}
return {
show,
hide,
hideAll
};
}());
var images = (function(utils) {
var icons = new Map();
function getSVGIcons(button) {
var buttonSVG = button.querySelectorAll("svg");
Array.from(buttonSVG).forEach(function addIcon(svg) {
var name = svg.getAttribute("class").split(" ")[0];
icons.set(name, svg);
});
return icons;
}
function getSVGIcon(name) {
return icons.get(name);
}
function showIcon(iconName) {
utils.hideAll(icons);
utils.show(getSVGIcon(iconName));
}
return {
getSVGIcons,
getSVGIcon,
showIcon
};
}(utils));
var togglePlayer = (function(images) {
var button;
var player;
function isPlaying() {
return player.paused === false;
}
function toggle() {
if (isPlaying()) {
player.pause();
images.showIcon("play");
} else {
player.play();
images.showIcon("pause");
}
}
function togglePlayingHandler() {
button.classList.add("triggered");
toggle();
}
function showPauseHandler() {
if (isPlaying()) {
images.showIcon("pause");
}
}
function showSpeakerHandler() {
if (isPlaying()) {
images.showIcon("speaker");
}
}
function init(playButton, audioPlayer) {
button = playButton;
player = audioPlayer;
images.getSVGIcons(button);
player.volume = 1.0;
button.addEventListener("click", togglePlayingHandler, false);
button.addEventListener("mouseover", showPauseHandler, false);
button.addEventListener("mouseout", showSpeakerHandler, false);
}
return {
init
};
}(images));
var init = (function(togglePlayer) {
function iife() {
var button = document.querySelector(".playButton");
var player = document.querySelector(".player");
togglePlayer.init(button, player);
}
iife();
}(togglePlayer));
</script>
</body>
</html>
The above all works on htmledit.squarefree.com and everywhere else.
Most others though prefer to have the different sections even further separated, making it easier to focus on one thing at a time.
2 Likes
I don’t understand the usage of this, please explain.
<style>
/* preload source: https://perishablepress.com/pure-css-better-image-preloading-without-javascript/ */
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
<div id="preloaded-images">
<img src="http://via.placeholder.com/260x260" width="1" height="1" alt="Image 01" />
</div>
Isn’t adding all that more code than if you were to use this?
And how is it different from using this?
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="" aria-hidden="true" alt="" />
</div>
The negative positions moves the image off the screen, improving the speed at which the browser renders the page.
The size change helps to reduce the amount of memory used for the images.
So yes your changes still work, but not as well and result in more problems for you later on down the road, that you won’t need to worry about by leaving them in.
What kind of problems would you envision occurring?
As an example.
Did I set just that part up correctly here?
I tested it and it’s not set up correctly.
It is difficult for parent elements to override styles for id selectors, so you end up losing many of the cascading benefits of css (cascading style sheets).
CSS experts can give you better details on other benefits gained too, such as Don’t use ID selectors in CSS
Using id selectors for styling also makes those styles brittle, because css and javascript then become intimately tied together. Changes to one of them end up forcing you to make changes to the other.
People doing much more complex layouts have learned that best results are obtained by sticking to using class names for css, and id for javascript, and maintaining that separation.
1 Like
Would I be correct in saying that I can remove:
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
From Within: The top part.
onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
And that, the only thing that needs to be placed there is:
document.querySelector('#playButton2 .initial').style.display='none';
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" width="260" height="260" aria-hidden="true" alt="" />
</div>
<div id="playButton2" style="width: 260px; height: 260px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px ); border: 3px solid #0059dd;"
onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
player.volume=1.0; if (player.paused) {
playButton2.style.border='3px solid #e77d19';
playButton2.style.background = 'linear-gradient(to right,transparent 0, transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px,transparent 260px), url(\'http://via.placeholder.com/260x260\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='inline-block';
document.querySelector('#playButton2 .play').style.display='none';
player.play();
} else {
playButton2.style.border='3px solid #e77d19';
playButton2.style.background = 'linear-gradient(to right,transparent 0, transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px,transparent 260px), url(\'http://via.placeholder.com/260x260\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}"onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .pause').style.display='inline-block';
}"
onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">
<svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:76px 85px;" width="90" height="108" viewbox="-13 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display: none;margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<svg class="play" style="display: none;margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</div>
<audio id="player2" style="display:none;">
<source src='' type='audio/mpeg'></audio>
That looks about right, yes.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.