Home/ Questions/Q 537039
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T09:53:05+00:00

In order to highlight a certain p element, I’ve written some JS to make

  • 0

In order to highlight a certain p element, I’ve written some JS to make it appear above a darkened background.

In order to do this, I used jQuery to create an overlay, and then clone the information p element and absolutely positioned it over the overlay.

Because it dropped a few CSS properties (not being inherited because of the new position in the page), I used jQuery to add them.

It works almost perfectly. In my Firefox 3.5.6 on Mac OS X, when it fades away, there is a slight disrepencacy of a matter of pixels. I know it’s nitpicking, but I’d love to have it disappear and the end user not know the difference.

The test is available here: https://www.ikatanspa.com/book-online/?test

Here is the jQuery function too

var highlightFormSuccess = function() {

    var fadeTo = 0.6;

    var $info = $('p.information');

    if ($info.length) {


        // make overlay

        var $overlay = $('<div />')
            .css({
                display: 'none',
                width: '100%',
                height: $(document).height(),
                position: 'absolute',
                top: 0,
                left: 0,
                zIndex: 32767,
                opacity: 0
            })
            .attr({
                id: 'overlay'
            })
            .appendTo('body');

        // pull out success block and position above overlay

        var left = $info.position().left,
            top = $info.position().top,
            fontSize = $info.css('font-size'),
            width = $info.width(),
            color = $info.css('color'),
            lineHeight = $info.css('line-height');


        var $newInfo = $info.clone()
                            .css({
                                position: 'absolute',
                                top: top,
                                left: left,
                                'font-size': fontSize,
                                'line-height': lineHeight,
                                width: width,
                                color: color,
                                zIndex: 32767
                            })
                            .appendTo('body');

        $overlay
        .show()
        .fadeTo(1000, fadeTo);
        // wait then fade back out
        setTimeout(function() {

            $($overlay, $newInfo).fadeOut(1000, function() {
                $newInfo.fadeOut(250, function() { $(this).remove(); } );
            });

        }, 2500);


    };


};
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Perhaps you can make things a bit easier. I just replicated the desired effect by setting my paragraph rules to:

    p.highlight {
  position:relative;
  background-color:#ffffff;
  z-index:10;
}

    And my overlay to:

    div.overlay {
  position:fixed;
  background-color:#000000;
  z-index:5; // lower than my paragraph, higher than all else
  top:0; left:0; width:100%; height:100%;
}

    —

    <body>
  <div class="overlay"></div>
  <p>I'm a paragraph.</p>
  <p class="highlight">I too am a paragraph.</p>
</body>
    • 0