Hello, this is a problem that I found in both: Grav and Bludit.
The code that includes HTML, CSS and JS in one piece of code works well in web pages as well as other CMSs (and in CodePen)
However, here, it doesn`t work as intended.
Bludit wasnt able to fix it. I hope theres a fix here.
Let`s take this code as example:
It should return the same shape as in codepen`s output, instead of being garbled.
@ashraf, I’m afraid I do not quite understand the question. Please clarify…
I am not sure if this is a bug in Grav.
I want to add the code above (of CodePen) in a grave page… I use “source code” button provided by TinyMCE.
The problem is that the view is garbled in Grav, while is nice in CodePen.
To reproduce the problem, just add the above-mentioned code in a Grav standard page.
If there is another way to add custom HTML blocks kindly tell me and I will give it a try.
This thread solved my problem.
Grav does not support this feature.
You are jumping into conclusion due to some limited knowledge of Grav… It can be done.
Two things we need to take care of:
onmousehover.onmousehover from the button and add it using javascripts addEventListener.Steps to solve the problem:
tinymce.init({
extended_valid_elements: "button[onmouseover]",
{% block stylesheets %}
{{ parent() }}
{% do assets.addInlineCss(
'
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: right;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
letter-spacing: 0;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: right;
cursor: pointer;
font-size: 17px;
letter-spacing: 0;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}
/* Clear floats after the tab */
.clearfix::after {
content: "";
clear: both;
display: table;
}
'
)%}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% do assets.addInlineJs(
'
function openService(evt, serviceName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(serviceName).style.display = "block";
evt.currentTarget.className += " active";
}
'
) %}
{% endblock %}
tools/source code:<div dir="RTL">
<div class="clearfix"> </div>
</div>
<h2>خدماتنا</h2>
<p>نفخر بأن نقدم لكم سلسلة من خدماتنا كما يلي أدناه:</p>
<div dir="RTL">
<div class="tab"><button onmouseover="openService(event, 'الترجمة')">الترجمة</button> <button onmouseover="openService(event, 'الدورات')">الدورات</button> <button onmouseover="openService(event, 'الخدمات البحثية')">الخدمات البحثية</button></div>
<div id="الترجمة" class="tabcontent">
<h3>خدمات الترجمة</h3>
<p>نقدم خدمات الترجمة للغات التالية: العربية، اليابانية، الانجليزية، الكورية.</p>
</div>
<div id="الدورات" class="tabcontent">
<h3>الدورات التدريبية</h3>
<p>يسرنا تقديم دورات تدريبية متنوعة فى مجالات متعددة وفى مقرنا أو علي منصتنا التعليمية أو وفق النظام الهجين (المقر+ المنصة)</p>
</div>
<div id="الخدمات البحثية" class="tabcontent">
<h3>خدمات متنوعة للباحثين</h3>
<p>.نقدم للباحثين خدمات متنوعة كما يلي أدناه وفيما لا يتعارض مع القوانين واللوائح</p>
</div>
<div class="clearfix"> </div>
</div>
The result will be:
Note:
