We Keep Coding

Place a button and its div with one command

Currently, I have a button class which lets me place a clickable button inside a sentence, and a div class which lets me add content to the button which I placed at the end of the paragraph containing the sentence.
This is an example of how I use them
Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?
When this text is displayed on the page, the two sentences are placed inside two different paragraphs, so the div object is placed between them.
Here is a snippet with the css classes and the javascript.
( function() {
coll = document.getElementsByClassName("col");
conn = document.getElementsByClassName("con");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].setAttribute('data-id', 'con' + i);
conn[i].setAttribute('id', 'con' + i);
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = document.getElementById(this.getAttribute('data-id'));
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
} )();
.col {
cursor: help;
border-radius: 0;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: red;
}
.con {
padding: 0 1em;
max-height: 0;
overflow: hidden;
transition: .3s ease;
background-color: yellow;
}
Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?
I wonder if it is possible to implement a shortcut to place the two objects with one command, that is to obtain the previous example by using something like this
Try to click [[THIS|nice!]] and see what happens.
Did you try?
What I mean is that the command [[THIS|nice!]] should place the object <button class="col">THIS</button> in the same position and the object <div class="con">nice!</div> at the end of the paragraph containing the command.
Is it possible to implement such a command (or a similar one)?
EDIT
I forgot to say that the content of the button, ie what is written inside the div, should also be possible to be a wordpress shortcode, which is a shortcut/macro for a longer piece of code or text.

Using jQuery, closest() find the nearest <p> element and add <div class="con">nice!</div> after <p> element. To toggle you can use class active and add or remove .con element.
$('.col').click(function(){
let traget = $(this).closest('p');
if(traget.hasClass('active')) {
traget.removeClass('active');
traget.next('.con').remove();
} else {
traget.addClass('active');
traget.after(`<div class="con">${$(this).data('message')}</div>`);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Try to click <button class="col" data-message="Hello">THIS</button> and see what happens.</p>
<p>Did you try?</p>

You usually dont use div to type text. you use it to define areas or group items. you could obtain what youre asking for in a 1 sentence like this:
html
<h1> some random text <a class="btnID">button</> some more text<h1>
css
.btnID {
color: red;
}

How to change one HTML file to another without changing link?

I have an html file(a webpage). I want when I press a button on it, the page should be replaced by another html file (with its own css, javascript functions etc) without being redirected to some other link.
For example, if link in first case is abc.com/def it should be same after too.
Using this code, I am able to change webpage look, but not getting how to change look (and also manage to load css and js functions) from another file.
<script type="text/javascript">
document.body.addEventListener('click',function(){
document.write("THIS IS NEW TEXT")
},
false);
</script>

You need to look into frameworks like AngularJS, Specially Routing of Angular. They provide such features built-in for web applications. However, you can do it the hard way, using javascript, like you are doing it right now. Add CSS and change whole body HTML using javascript if you don't want to learn any new framework or libraries.

You want to use PJAX,
Here's a link for an example.

As discuss by others, you should use a Framework to do this..
But this is a complete solution you can inspire of:
let layouts = {}
let current = null
// Display the new page by deleting current, and replacing by the good one
let displayLayout = (layout_id) => {
let parentNode = current.parentNode
parentNode.removeChild(current)
current = layouts[layout_id]
parentNode.appendChild(current)
loadEvents(current)
}
// Load event for HTML DOM you just created
let loadEvents = (layout_el) => {
Array.from(layout_el.getElementsByClassName('go-to-layout')).forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
displayLayout(e.currentTarget.dataset.layout)
})
})
}
// On init I get all the existing layout, but you can build you own dictionary an other way.
Array.from(document.getElementsByClassName('layout')).forEach(l => {
layouts[l.id] = l
if (l.classList.contains('active')) {
loadEvents(l)
current = l
}
else {
l.parentNode.removeChild(l);
}
})
/* Global CSS */
body, html, .layout {
height: 100%;
margin: 0;
}
* {
color: #FFF
}
.layout {
display: flex;
}
.nav, .page {
}
.nav {
width: 150px;
background: #555;
}
/* Special CSS for one layout */
#layout1 {
background: red;
}
#layout2 {
background: blue;
}
<div id="layout1" class="layout active">
<div class="nav">
Page 2
</div>
<div class="page">
This is page 1
</div>
</div>
<div id="layout2" class="layout">
<div class="nav">
Page 1
</div>
<div class="page">
This is page 2
</div>
<style>.page { font-size: 2em }</style>
</div>

Javascript 'document.write' generating new HTML+CSS+JS not working on Safari but working on Chrome

I am developing a Ruby on Rails web app. This app allows users to upload videos through a form (using carrierwave as uploader and cloudinary as storage space), which is located into a modal.
Once the user has completed the form and clicked on the 'submit button', I use a javascript code to display an ephemeral page (which is my shared/loading.html.erb view, copied below in the post) with "funfacts" while the video is being uploaded (since the upload can take some time...).
Last, once the upload is completed, the ephemeral page disappears and the user is redirected to the uploaded video (thanks to a traditional 'redirect_to' at the end of a 'create method', in my controller.
On Chrome, this mechanism works perfectly and I have zero warnings or erros message in the browser inspector;
On Safari, it does not work and I would like to understand why. The current situation is that once the button 'submit' has been clicked, the video is being uploaded, the ephemeral loading page is not properly shown (it's either not shown at all or shown but without the javascript), and the redirection works normally once the upload is completed. It's only when I click on the "cross" button in Safari's navbar, in order to stop the uploading process, that the ephemeral loading page works correctly.
Here is my js code, located at the end of my html.erb form:
<!-- My form and modals are above (not shown) -->
<!-- NB: the autocomplete module is in assets/javascript/autocomplete.js -->
<%= content_for :after_js do %>
<script>
// Start of js to display the modal
$('#review_video').change(function(){
$('#myModal').modal('show');
});
// End of js to display the modal
// Start of js to show an ephemeral loading page
$( "#click-trigger" ).on( "click", function() {
console.log('test 1 - in the click-trigger function');
var newContent = '<%= j render "shared/loading", layout: false %>';
document.write(newContent);
});
// End of js for loading page
</script>
<% end %>
And, here is below the ephemeral partial (shared/loading.html.erb) that I call in my javascript (let me know if you think of other fun facts ;)).
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Muli', sans-serif;
font-size: 0.9em;
background-color: #0098DE;
}
.container {
margin: 100px 15px 20px 15px;
/*padding: 20px;*/
}
.funfacts-container {
display: flex;
justify-content: space-around;
align-items: center;
}
.funfacts-content {
flex: 0 0 75%;
color: white;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="funfacts-container">
<div class="funfacts-content">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>Loading...</h1>
<h3>Did you know?</h3>
<span class="loading_element"></span>
</div>
</div>
</div>
</div>
</div>
<script>
function shuffle(a) {
console.log('test 3 - beginning of shuffle function');
var j, x, i;
for (i = a.length; i; i -= 1) {
j = Math.floor(Math.random() * i);
x = a[i - 1];
a[i - 1] = a[j];
a[j] = x;
}
console.log('test 4 - end of shuffle function');
}
var funFacts = ['Gorillas burp when they\'re happy. ^1000','Butterflies taste their food with their feet (and so do our co-founders). ^1000','Studies show that eating spicy food helps you live longer. ^1000','Some turtles breath through their anus. ^1000', 'Ketchup was sold in the 1830\'s as medicine. ^1000'];
shuffle(funFacts);
console.log(funFacts);
console.log('test 2 - in the scrip div of loading.html.erb');
console.log($('.loading_element'));
$('.loading_element').typed({
strings: funFacts,
loop: true,
startDelay: 50,
backSpeed: 15,
typeSpeed: 30,
loop: true
});
console.log('test 5 - end of .typed script');
</script>
</body>
</html>
What I did until now to debug:
I used some console.logs in different parts of my javascript code (you can see them). I conclude that all my js is working properly but that the HTML+CSS is not displayed correctly.
In the inspector and I also saw that I have some warnings reading: 'Unexpected CSS token: : application-043b483a981042bf2f279f5d418ffcf14d7465d7eae287ea11754a58afff3395.css:4939'. If I click on this error message, it brings me to some bootstrap code that I did not create myself. The error is on the line with 'filter: progid: DXImageTransform.Microsoft.gradient' (see below).
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
I understand that the warning is related to the fact that the CSS class is using twice in a row the symbol ":" and that I might use some simple quotes, for example, to fix the warning message. However, I did not create this line of code myself and it seems to be located here : 'line 110, /Users/quentinroquigny/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.6/assets/stylesheets/bootstrap/_dropdowns.scss */', i.e. in the bootstrap gem...
Since it's a warning (not an error), I guess this is not the root of the problem.
Thank for your thoughts guys!

Outline any block of content on a web page

Currently in a web cms we are building, we allow users to include any arbitrary content (be it plain text or any html content) to be displayed at any part of the web site. These blocks are called widgets (and obviously we take action to clean them up for security purpose).
I would like to be able to highlight these blocks for debugging purpose when necessary, however I cannot wrap them in any additional elements (such as div) as it may break the layout. I found several questions on this site regrading the same question yet have not any good solution yet.
It would be nice if we are allowed to use some kind of non-layout element (such as the comment tags) to wrap around block of contents to be able to do some action such as highlighting like this, but I have not found any way to do that.
I'm comfortable with any solutions (js, server based, etc) as long as it allows me to outline any block of content without breaking the layout. Please let me know if you have any suggestion.
A few example of widget contents:
Text only widget:
this is a the content of text only widget, there is also no wrapper here.
HTML widget:
<h1>Hello world </h1>
<section class="content">
The problem here is that we do not want to force the users to
always wrap their contents inside a root element.
In this example you can see that the content contains 1 h1 element
and 1 section element. To outline this whole widget we may need to
wrap it by an outer element which may break the layout.
</section>

This is not exactly what you wanted, but it might be close enough (fiddle). The script will wrap widgets with a <span class="highlight">. The span should not effect layout in any way:
.highlight {
display: block; // this will change the layout as it inserts a line break
outline: 1px dashed red;
}
When rendering the html, add a comment before and after a widget:
<!--!!!start widget!!!-->
this is a the content of text only widget, there is also no wrapper here.
<!--!!!end widget!!!-->
When you move to debug mode, run this script to add the highlight span:
var START_WIDGET = '!!!start widget!!!';
var END_WIDGET = '!!!end widget!!!';
function filter( node ) {
if ( node.nodeValue !== START_WIDGET && node.nodeValue !== END_WIDGET) { // filter all comment nodes that are not start or end widget
return( NodeFilter.FILTER_SKIP );
}
return( NodeFilter.FILTER_ACCEPT );
}
filter.acceptNode = filter;
var treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_COMMENT,
filter,
false
);
var start = null;
while ( treeWalker.nextNode() ) {
if(treeWalker.currentNode.nodeValue === START_WIDGET) {
start = treeWalker.currentNode;
} else if(treeWalker.currentNode.nodeValue === END_WIDGET) {
highlight(start, treeWalker.currentNode);
start = null;
}
}
function highlight(start, end) {
var currentNode = start.nextSibling;
var span = document.createElement('span');
var temp;
span.className = 'highlight';
while(currentNode !== end) {
temp = currentNode;
currentNode = currentNode.nextSibling;
span.appendChild(temp);
}
$(span).insertAfter(start);
}
The treeWalker code is based on this article - Finding HTML Comment Nodes In The DOM Using TreeWalker

Try the style property, outline. It's like border but it's size doesn't affect layout. Wrap your widgets in <span>s as they are inline elements, which makes them perfect if you don't want to disrupt your layout. In addition to the use of outline and <span>, you can use the defaults to facilitate a smooth even layout.
CSS
/* DEFAULTS */
html {
box-sizing: border-box;
font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0 solid transparent;
}
/* WIDGETS */
.widget {
outline: 3px dashed orange;
}
.widget.text {
outline: 1px solid blue;
}
.widget.html {
outline: 1px solid red;
}
.widget.html > .content {
outline: 1px solid black;
background: yellow;
}
<span class="widget text">
this is a the content of text only widget, there is also no wrapper here.
</span>
<span class="widget html">
<h1>Hello world</h1>
<section class="content">
The problem here is that we do not want to force the users to
always wrap their contents inside a root element.
In this example you can see that the content contains 1 h1 element
and 1 section element. To outline this whole widget we may need to
wrap it by an outer element which may break the layout.
</section>
</span>

Css not rendering properly after the script call

I am currently using two accordion bars where both have two different colours rendering when they are clicked.First one shows a green color.Functionality is to toggle the information needed down the bar when clicked on it.
Clicking again it should toggle back all the information rendering a different colour,for which i am using a java script for the toggle to happen. Previously we used to used three different images for this bar wheres as now,I need to remove the images.
As you can see in my .xhtml file a section-middle will be used as a primary bar and all the color attributes and moz-tool kit to make it rounded are declared in my CSS file.I am using moz-tool kit and jquery rounded corners to make my accordion corners rounded both in IE and mozilla.Its working charmingly in mozilla but in IE its not rendering the color for the bar when i click on it,the toggling operation is working properly as i can see the information in the bar popping up and down when i click on it.
My only problem is with the color of the bar as it is not rendering properly when its clicked on it.It stays the same green color even after the click.When i remove moz-took kit its working fine but with out rounded corners.I am unable to figure out the problem whether it is with java script or CSS.This is my java script and css and my xhtml file.is there any solution for this.Do i need to make any code change in my script?The rest of the site i am able to populate this bar perfectly.but seems like problem is coming when i use a script.
css for first green bar
#layout-container .section-open .section-middle {background-color:#99CC33;}
#layout-container #layout-detail .columns .section-middle { width: 624px; }
#layout-container #layout-detail .columns .section-open .section-left, #layout-container #layout-detail .columns .section-open .section-right, #layout-container #layout-detail .columns .section-closed .section-left, #layout-container #layout-detail .columns .section-closed .section-right {
float: left;
height: 20px;
margin: 0;
padding: 0;
width: 6px;
-webkit-border-radius: 7px;-moz-border-radius: 7px
}
css for second bar
#layout-container #layout-detail .section-closed .section-middle{background-color:#efe8dc; background-image: url(../../images/icons5.png); background-repeat:no-repeat; background-position: 612px -1392px;-webkit-border-radius: 7px;-moz-border-radius: 7px;}
my xhtml
<ui:fragment rendered="#{current.index le 8 or current.last}">
<div class="columns">
<div
class="#{current.first ?'faq-accordion section-open' : 'faq-accordion section-closed'}">
<span class="section-middle">
<h2>
<h:outputText value="#{priority.statementDescription}" />
</h2> </span>
my script
$('.faq-accordion').live("click", function() {
$(this).next('.content-toggle').toggle();
// $('.show-all').show();
// $('.hide-all').hide();
if ($(this).hasClass('section-closed')){
$(this).addClass('section-open');
$(this).removeClass('section-closed');
}
else
{
$(this).addClass('section-closed');
$(this).removeClass('section-open');
}
var total = $('.faq-accordion').length;
var open = 0;
for (i=0; i<total; i++) {
if($('.faq-accordion').eq(i).hasClass('section-open')){
open = open + 1;
}
}
if (total != open) {
$('.show-all').show();
$('.hide-all').hide();
}
else {
$('.hide-all').show();
$('.show-all').hide();
}
})
$('.show-all').click(function(){
$('.content-toggle').show();
$('.content-toggle').prev('div').addClass('section-open');
$('.content-toggle').prev('div').removeClass('section-closed');
$(this).hide();
$('.hide-all').show();
return false;
});
$('.hide-all').click(function(){
$('.content-toggle').hide();
$('.content-toggle').prev('div').addClass('section-closed');
$('.content-toggle').prev('div').removeClass('section-open');
$(this).hide();
$('.show-all').show();
return false;
});

Try this:
-webkit-border-radius: 7px !important;-moz-border-radius: 7px !important;
I have used your code and !important fixed the issue.