CODEWITHSUNDEEP
javascriptappend
Yaakov Whise
Yaakov Whise

Reputation: 21

Inner element is not visible within appended div in LinkedIn

I try to append programaticaly a div that contains a checkbox like this :

appendedDiv = $("<div><input type='checkbox'></div>");

 $(document.body).append(appendedDiv);

In LinkedIn(only in LinkedIn) the checkbox is not shown within the appended div.

When I check in Devtools , the checkbox exists , but isn't shown.

What can be the reason ?

Upvotes: 0

Views: 45

Answers (1)

Yaakov Whise
Yaakov Whise

Reputation: 21

LinkedIn doesn't allow adding buttons and inputs dynamicaly any way, not only as an inner element.
So this is also not allowed :

appendedDiv = $("<input type='checkbox'>");

(Indead I tested only the jQuery way)

The solution

I improvised a checkbox using a canvas element of a squared shape size 13X13px. I used canvas for drawing the 'X' when the square is 'checked'.

appendedDiv = $("<div><canvas id='myCanvas' width='13'; height='13';></canvas>/div>");
$(document.body).append(appendedDiv);
$("#myCanvas").on("click", function() Toggle() });
    

function Toggle(){
    isChecked = !isChecked; // a global toggling flag
    DrawLine(0, 0, 13, 13, isChecked); // The left slash (\) of the X
    DrawLine(0, 13, 13, 0, isChecked); // The right slash            
}

function DrawLine(startX, startY, endX, endY, status) {
                // Get the canvas element and its context
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    if (status)
        context.strokeStyle = 'rgb(255, 255, 237)'  // black
    else
        context.strokeStyle = 'rgb(0, 0, 0)';  //white

 // Draw the line
        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(endX, endY);
        context.stroke();
}

Upvotes: 0

Related Questions