We Keep Coding

Change variable in js and return it to HTML element to make tooltip accessible

I want to make the p-Tooltip on a table header accessible so that it shows on focus and hover. Unfortunately something like:
tooltipEvent="focus/hover"
is not possible. So I'm trying to change the Variable "myEvent" to "focus" when the cell is reached with the keyboard tab navigation (not when it's clicked)`
tooltip(){
var myElement= document.getElementById("myID");
let myEvent= "hover";
if (myElement.matches(":focus")){
myEvent = "focus";
}
return myEvent;
};
I tried this and also other options but its not working.
HTML:
<th id="myID" *ngSwitchCase="'validation'" tooltipEvent={{tooltip()}} pTooltip="I am a tooltip"
tooltipPosition="top" [escape]="false" [pSortableColumn]="column.field" [ngStyle]="column.style">
<div class="col-title">
<span data-testid="column-validationl-header" class="ui-column-title" >Validation </span>
<p-sortIcon [field]="column.field" *ngIf="column.sortable"></p-sortIcon>
</div>
</th>
I would be happy for any idea!!

React scroll to ref with multiple scrollbars

I have a small problem that I can't figure out.
I have an element inside my page with a scrollbar. This means I got the main page scrollbar and a second scrollbar. I have a button inside that element that triggers a new div with some content inside of it. But that div is outside the view of the element so you need to scroll to see it. This is not really user friendly so I am trying to add a function that when you click on that button it scrolls to the new div.
Picture of element: https://imgur.com/8wIOTqo
button is the gold coloured one
The problem is that it is using the main page scrollbar and not the scrollbar of the element. Does anyone know how to fix this? Here is my code
// Function to open the element and scroll to the ref
function enableOtherAddressActive() {
secondDeliveryAddressRef.current.scrollIntoView();
setOtherAddress(true);
}
<div className="deliveryaddress__different">
{otherAddress ? (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={disableOtherAddressActive}>Afwijkend bezorgadres verwijderen</div>
) : (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={enableOtherAddressActive}>Afwijkend bezorgadres toevoegen</div>
)}
</div>
<div className="deliveryaddress__second" ref={secondDeliveryAddressRef}>
{otherAddress ? (
<div className="deliveryaddress__inner">
<h3 className="deliveryaddress__title">
Afwijkend bezorgadres toevoegen
</h3>
</div>
) : undefined}
</div>
</div>

One of the way to scroll to the element is assigning a id to the div and using scrollInto that
I have done in the codesandbox below refer it shows how to scroll into a particular element even if it is nested scrollbar
Code:
const handleScrollTo = () => {
setTimeout(() => {
document.getElementById(`element`) &&
document.getElementById(`element`).scrollIntoView({
behavior: "smooth",
block: "center"
});
}, 1000);
};

Bootstrap slider - get value and show it in a div

I've implemented bootstrap and jquery and bootstrap jquery (https://github.com/seiyria/bootstrap-slider). I am using example 6 (http://seiyria.com/bootstrap-slider/).
I want to get that value and show it in a div (so later I can create an if with that value), but I cannot get it to show.
This is my HTML code:
<div class="col-lg-6" style="height: 39px; padding: 10px; padding-left: 25px;>
<input id="ex6" type="text" data-slider-min="10000" data-slider-max="100000" data-slider-step="1" data-slider-value="90000"/>
<span id="ex6CurrentSliderValLabel">Maksimalna cena: <span id="ex6SliderVal">90000</span></span> din.
</div>
<div id ="ivancar"> test </div>
And this is my JavaScript (jQuery) code:
var slider = new Slider("#slider1");
slider.on("slide", function(slideEvt) {
console.log(slider.getValue() );
var div = slider.getValue();
});
document.getElementById("ivancar").innerHTML = div;

You have placed the logic of updating your div outside the slide event. Place it within the slide event.
slider.on("slide", function(slideEvt) {
console.log(slider.getValue() );
var div = slideEvt.value; // this is what the plugin says
$("#ivancar").html(div); // <== update logic must be here
});
Note: I changed the document.getElementById("ivancar").innerHTML = div; code to $("#ivancar").html(div); for simplicity

get the size of label text inside the div?

I am trying to get the size of label text inside the div and chech of the size is 0 hide this div
Update the text is in dnn_ctr2802_View_lblHelp class dnnHelpText
javascript
$('.dnnTooltip').dnnTooltip();
//get the size of the hiden label
var labelTextSize = $(".dnnHelpText").val().length;
console.log("labelTextSize");
if(labelTextSize == 0)
{
$('.dnnTooltip').hide()
}
html
<div class="pull-right eyeball">
<img id="img_type" src="/ideaPark/DesktopModules/ExplorationTypeSaftyAlert/img/3.png" />
<img id="img_safety_alert" class="eyeball-warning" src="/ideaPark/DesktopModules/ExplorationTypeSaftyAlert/img/exploration-warning.png" />
</div>
<div class="dnnTooltip">
<label id="dnn_ctr2802_View_label">
<a id="dnn_ctr2802_View_cmdHelp" tabindex="-1" href="javascript:__doPostBack('dnn$ctr2802$View$cmdHelp','')"><span id="lblLabel"></span></a>
</label>
<div id="dnn_ctr2802_View_pnlHelp" class="dnnFormHelpContent dnnClear" style="display:none;">
<span id="dnn_ctr2802_View_lblHelp" class="dnnHelpText"> bnmbnmbnmbnmtfgjnfvyg</span>
</div>

try this & BTW try to use jquery UI function .remove()
var labelTextSize = $('.dnnHelpText').text().length;
console.log("text:" + labelTextSize.length);
if (labelTextSize == 1) {
$('.dnnTooltip').remove();
}

Try this:
var labelTextSize = $("#lblLabel").width();
And to test, try this:
console.log(labelTextSize);
UPDATE:
As anything worked I have search for other way to achieve this. I have found this question and maybe it works for you.
Try this:
$(".dnnHelpText").bind("DOMSubtreeModified", function(){
var labelTextSize = $(this).width();
if(labelTextSize == 0)
{
$('.dnnTooltip').hide()
}
});
That snipet add an event listener when the content of the label is been changed. So then, inside the event you may have access to it's properties to do your routine.

jquery resizable not working after ajax update

I have a resizable div that has some text in it and a edit button.
On the edit button click it opens a layer with a textbox and save button so the user can edit the text.
Then the user clicks save, the layer is closed and the db updated with some ajax. The div on the parent page is also updated with some ajax.
The problem I have is that the div is no longer resizable.
I know the line of code that is doing this and why it is doing it but cant find any other solution to updating the original div without stripping out the resizable code as well.
On the 'save' button click on the layer this function is called
$(document).ready(function() {
$('.button').click(function() {
var edit_content = $('#myFrm').find('.nicEdit-main').html();
var box_id = $('#myFrm').find("#box_id").val();
var page_ref = $('#myFrm').find("#page_ref").val();
var template_ref = $('#myFrm').find("#template_ref").val();
$.post("update_textarea.php",
{
box_id:box_id, page_ref:page_ref, template_ref:template_ref, edit_content:edit_content
},
function(data,status){
UpdateElementOfParent(box_id, page_ref, template_ref)
edit_box('hide')
});
});
});
This updates the db and the function UpdateElementOfParent() is called on the parent page
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
$('#'+myBox).html(data);
});
}
this updates the original div with the updated content from the db.
I know the $('#'+myBox).html(data); strips out the inner html of the div and replaces it with the text and so removes the jquery resizable text but I cant find another way to update the text.
I have tried
$('#'+myBox).value(data);
$('#'+myBox).text(data);
$('#'+myBox).innerHTML(data);
document.getElementById('myBox').val(data);
document.getElementById('myBox').value(data);
document.getElementById('myBox').text(data);
document.getElementById('myBox').val=data;
document.getElementById('myBox').value=data;
document.getElementById('myBox').text=data;
None of these work.
My javascript is not too strong(as you can probably tell).
Can anyone help with a solution?
any help greatly appreciated
QUICK UPDATE
I noticed that if I use firebug inspector the div before it has any text updates is like so
<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]">
newtextarea
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
</div>
but once I update it (I use nicedit to format the text) the div now has a hidden ipnout within it called 'content[]'
<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]"></div>
<br></br>
<input type="hidden" value="
<div align="justify">
<font face="trebuchet ms" size="2"><strong>Lorem Ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto.</font>
</div>" name="contents[1]">
</input>
so it would seem that the structure of the div has change and the inner input would need updating. As the input does not have an id how can I update just using its name
MORE
ok I have edited the update function to this
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
var updatedata=data+"<div class='ui-resizable-handle ui-resizable-e' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-s' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se' style='z-index: 90; display: none;'></div></div>";
('#'+myBox).html(updatedata);
});
}
now when I check the original dv in firebug with the newly updated one the structure and contents are exactly the same.
I need to reinitialise the resizable. any clues?

Not really sure what you want really to do but.
var oldContent = $('#'+myBox).html();
$('#'+myBox).html(data+oldContent);
Will keep the old content and add the new one.
Or you can use .append() http://api.jquery.com/append/ depending on what you get back when updating the database
$('#'+myBox).append(data);
UPDATE:
From what I can see data retrieves a hidden input with the value of the new text. I suggest that you either change data to give back something else or add the input value to the div manually.
The input is also wrong. In the input The value="" should be value='' because you already have " inside of it. After that this function should place the value inside the right div.
function UpdateElementOfParent(box_id, page_ref, template_ref) {
var myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
$('#'+myBox).html(data);
var inval = $("input[name='contents["+myBox+"]']").val();
$("#"+myBox).html(inval).resizable();
});
}
The basic problem you had at start was that you forgot to reinitialize .resizable() on the new div.

I used dt192's suggestion and added a span inside the div and updated the span and it works great