We Keep Coding

How to append a dynamic element to an image opened in lightgallery.js

I have a page that show lots of photos which can be opened with lightgallery.js
I've already made some custom HTML caption which works fine. But now I want to add a label to the image itself. How can I do that?
I will show an example of what my photos page looks like:
When you open an image this is what it looks like:
The left part is a custom HTML caption which I linked with this attribute: data-sub-html.
Example code of my looped code:
$photomasonry .= '
<div class="tile scale-anm noselect">
<a href="https://studio.website.nl/'.$getphotos['preview'].'" data-sub-html="#caption'.$imgcount.'" class="item masonrytile" data-src="https://studio.website.nl/'.$getphotos['preview'].'">
<img src="https://studio.website.nl/'.$getphotos['preview'].'"/>
<span class="idlabel">'.$getphotos['id'].'</span>
<span class="sizelabel">'.$size.'</span>
</a>
</div>';
$photomasonry .= '
<div id="caption'.$imgcount.'" style="display:none">
<img src="https://studio.website.nl/images/logo.png">
<h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
<div class="gallerypopupbtns">
<button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
</div>
</div>';
$imgcount++;
But now I want this purple size icon (L, XL, XX) as a label on the image when lightgallery is opened. How can I do this? The html of the lightgallery is only generated after the page is loaded.
I want to add an element inside this part:
<div class="lg-img-wrap">
<img class="lg-object lg-image" src="https://studio.website.nl/images/photos/previews/preview-bb58317c8d05e29b32963e7a295a5b9f.jpg">
</div>
But not just that, the content is dynamic, so display the correct size for the correct image. I already created this for the photo overview page but not when clicking a photo.

According to the lightgallery docs, you can use the event lgAfterOpen to execute code once the gallery is opened. However, lightgallery makes this slightly difficult as you can't access the image clicked on from this event, but you can access it from the event lgBeforeOpen. With this in mind, I'd accomplish this by doing two things.
Firstly, add the size as a data attribute of each image:
<img src="https://studio.website.nl/'.$getphotos['preview'].'" data-size="'.$size.'"/>
Secondly, add the following functions when initialising lightgallery:
// example gallery definition
const lg = document.getElementById('custom-events-demo');
// add the following functions
lg.addEventListener('lgBeforeOpen', (event) => {
//add datasize property to target so it can be accessed in the afterOpen function
event.target.dataset.size = event.explicitOriginalTarget.dataset.size;
});
lg.addEventListener('lgAfterOpen', (event) => {
// get size from data attribute
var size = event.target.dataset.size;
// get the .lg-img-wrap div to append size to
var imgWrap = document.querySelector(".lg-container.lg-show .lg-img-wrap");
// create and append span
var sizeSpan = document.createElement("span");
sizeSpan.classList.add("sizelabel");
sizeSpan.innerHTML = size;
imgWrap.appendChild(sizeSpan);
});
//initialise lightgallery
lightGallery(lg);
You may be using a different version of lightgallery, but when I tested this the .lg-img-wrap element was a picture element not a div, so I replaced the last line of the event listener function with the following to get the size to show:
imgWrap.parentElement.appendChild(sizeSpan);
You might need a bit of extra CSS to position the size span as you wish, but just to get it to show all you need is:
.sizelabel {
position: relative;
}
Note: I don't think this will work if you navigate to a different image from within lightgallery as it won't update the size, and in fact the size might just get removed. To fix this you'd probably need to do something using the lgAfterSlide event and the index of the image, but from your screenshot it looks like you don't expect the user to scroll through images within lightgallery anyway so this may not be an issue.

How to display the text inside the button element from a different page at current page?

We have 2 webpages one.html & two.html.
In one.html we have a button element with text,
<button id="next">Next</button>
We want to display the content inside the button from one.html, i.e "Next" in two.html inside a
<p id="getfromone"></p>
We tried using jQuery about it, written below, called by a onload function with in body element.
document.getElementById("getfromone").innerHTML = $('#getfromone').load("one.html #next");
However, this only displays [object Object]
Please suggest what can be done about it.

Try this out, You can check the working code in codepen.
$(document).ready(function(){
var content;
$("#oneDiv").load("one.html button#next", function(){
content = $(this).text();
$("#getfromone").text(content);
});
});

how i can visible textarea box using javascript

I'm making automation script in python using selenium so i want to visible textarea box because i want to put it into some arguments and i'm using this code:
element = driver.find_element_by_id('g-recaptcha-response')
driver.execute_script("arguments[0].style.display = '';", element)
driver.execute_script("arguments[0].style.margin = '100px 200px';", element)
but above code is not working for me as you can see here:
Could you please tell me how I can show textarea box? Link to the page.

arguments[0].style.display = 'block';
arguments[0].parentNode.parentNode.style.display = "block";
The problem is that setting style.display to an empty string is interpreted as setting the display to "none" and that makes the element invisible. The textarea also sits in a parent which sits in a parent with the styling "display: none" so to solve that just go to the parent of the parent and set its display to "block".

Emoji into textarea with javascript

I tried to insert Emojis into a textarea, but it didn't work. The emojis did not display.
<span class="text">',params.text.replace(/:(\w+):/g,'<img src="emo/emojis/smile.png" alt="smile"/>'),'</span>
What could be causing this?
Thanks for the help

A simple textarea cannot show images as is intended to hold plain text only, use a div instead. I've posted a JSFiddle link below to give you an example.
If you must allow user input in the div then set the contenteditable property to true.
<div id="someDiv" onclick="showImage();" contenteditable="true">Click Me!</div>
<script>
function showImage()
{
return document.getElementById("someDiv").innerHTML = "<img src='http://ladiesloot.com/wp-content/uploads/2015/05/smiley-face-1-4-15.png' height='250' width='250' />";
}
</script>
The link below shows you a div with the contenteditable property set to true that means the user can type.
If you click the div it should put an image in the div.
http://jsfiddle.net/05dLkuc0/

Issue with handling a form using javascript

We have a website hosted at hubspot, we use their native WYSIWYG to design layouts then style them with css and js.
On the homepage http://www.lspatents.com/ it used to have a form under the "Get started here" title, it had around 10 questions, and used javascript to split them to steps so they can fit in the same area on the currently shown blank box.
It was working just fine till two days ago the form disappeared and left it with a blank area as you can see now, and as far as i know no one has touched this code recently.
Here is the js code that was used to manipulate the form
// Hero Form
$(window).load(function() {
// disable autocomplete to fix bug
$('.hero-form form').attr("autocomplete", "off");
$('.hero-form .hs-richtext').each(function() {
$(this).nextUntil('.hs-richtext').wrapAll('<div class="step" />');
});
// Hide Loading icon
$('.hero-form form').css('background', 'none');
$('.hero-form form .step:nth-of-type(2)').show();
// First Step to Second Step
$('.step').find('.hs-richtext').change(function() {
$('.step:nth-of-type(2)').hide().next().next().fadeIn();
});
// Second Step to Third Step
$('.step').find('.hs-input').change(function() {
var names = {};
$(':radio').each(function() {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function() {
count++;
});
if ($(':radio:checked').length === count) {
$('.step:nth-of-type(4)').hide().next().next().fadeIn();
}
});
});
As far as i was able to tell, the developer used css to hide the whole form area with display:none; and used the js above to split the questions to steps and show a certain number in each step.
You can see the code being called in the footer so there is no problem with the link to the .js file, also if you inspect the element and disable the display:none; that's declared for any of the divs within the hero-form all questions get displayed, so there is no problem with the form either, so why has it stopped working?
Would appreciate any help,

This line will no longer work with your mark-up...
$('.hero-form form .step:nth-of-type(2)').show();
There are a number of additional divs that wrap your mark-up, placed there by react, React has placed a series of div inside your form which are being hidden by your existing CSS (which I assume used to just be a series of STEP's)
The CSS that hides the nodes is :
.hero-form form>div, .hero-form form>.step {
display: none;
}
The nodes that are being hidden with display:none
<div data-reactid=".0.0:$1">
<div class="hs-richtext" data-reactid=".0.0:$1.0">
<hr>
</div>
<div class="step">
<div class="hs_patent field hs-form-field" data-reactid=".0.0:$1.$patent">
<label placeholder="Enter your Do you have a patent?" for="patent-9fc8dd30-a174-43bd-be4a-34bd3a00437e_2496" data-reactid=".0.0:$1.$patent.0">
<span data-reactid=".0.0:$1.$patent.0.0">Do you have a patent?</span>
<span class="hs-form-required" data-reactid=".0.0:$1.$patent.0.1">*</span>
</label>
<div class="hs-field-desc" style="display:none;" data-reactid=".0.0:$1.$patent.1">
</div>
</div>
Your JQuery will add display:block to the DIV with the class 'step' bit wont alter the parent DIV (inserted by React) which still prevents your node from being shown.
You need to alter you JQuery to call show() on the parent() that contains the "step" div you wish to show.

Please check your browser console ans see you have problem loading this form:
https://forms.hubspot.com/embed/v3/form/457238/9fc8dd30-a174-43bd-be4a-34bd3a00437e
and this is the error:
net::ERR_NAME_RESOLUTION_FAILED
It's better you change your DNS to something like 8.8.8.8 and see if the problem still exists or not.