CODEWITHSUNDEEP
javascript
user4612360
user4612360

Reputation: 139

Dynamically adding a close button (Javascript)

Trying to add a 'X' - close button for a google maps marker. The markers will show small on the map but will enlarge when clicked (same marker, just increasing the size). I can add a close button but cannot get it to work (reduce the size back to original). Solutions need to be dynamically added please.

Fiddle: https://jsfiddle.net/gost1zLd/

var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.background = 'black';

var img = document.createElement('img');
img.style.width = '100%';
img.style.height = '100%';
img.src = '';

var exit = document.createElement('div');

function large()
{
    div.classList.add("large");

    if (div.className == "large")
    {
        div.style.width = '300px'; 
        div.style.height = '300px';

        exit.innerText = 'X';
        exit.style.width = '20px';
        exit.style.height = '20px';
        exit.style.fontSize = 'xx-large';
        exit.style.fontWeight = 'bold';
        exit.style.color = 'white';
        exit.style.position = 'absolute';
        exit.style.top = '5px';
        exit.style.left = '265px';
    }
}

function close()
{
    div.classList.remove("large");
}

document.body.appendChild(div);
div.appendChild(img);
div.appendChild(exit);

div.addEventListener('click', large, false);
exit.addEventListener('click', close, false);
}

Upvotes: 3

Views: 431

Answers (2)

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

If you make separate functions, you can use start() again in your close() function to reset the original style. I've refactored your code a bit, hope it's self explanatory:

function close () {
    div.classList.remove("large");
    start();
}

Only problem with your setup is you will rebind everything when you would call start() on close(). Instead, try to separate functionality and the issue becomes clear.

DEMO

Additionally you can optimize the dynamic styling with some helper functions. You need a function to convert a literal object to a css string. You need a function to extend objects, similar to jQuery's $.extend() in order to set the style at once (doc) for both states (normal and large).

this.divStyle = convertLiteralToQs(cfg.div.style);
this.divLarge = convertLiteralToQs(extend(cfg.div.style, cfg.div.large));

this.div.style.cssText = this.divStyle; // normal style
this.div.style.cssText = this.divLarge; // large style

This will speed up the browser reflow for dynamic styling in JavaScript.

DEMO

Using this approach you can now more easily "style your logic" cross referencing the HTML DOM style object.

Upvotes: 0

Griffith
Griffith

Reputation: 3217

The problem is that removing the class large is not enough to reset the <div> to its original state since class large in itself is meaningless because it has no CSS definition. My advice is to move the styling to CSS instead of JavaScript. See fiddle: https://jsfiddle.net/gost1zLd/1/.

Upvotes: 1

Related Questions