?
Solved

Format text in a JavaScript code

Posted on 2006-06-10
4
Medium Priority
?
233 Views
Last Modified: 2008-01-09
Below is a code that I am using to create a pop-up window within the current webpage. It opens up an Iframe to display a separate webpage. I removed a piece of the code to prevent the a "CLOSE" link from appearing at the top of the pop-up window. The reason I removed it was because the link did not follow the Text formatting on the rest of the page. What can I do to get the CLOSE text to be in Verdana 8pt Bold font? Or is there a way that I can substitute an image?

Here is the part of the code I removed:


    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { show_hide_box(an, width, height, borderStyle); }
    close_href.appendChild(document.createTextNode('Close'));
    boxdiv.appendChild(close_href);
    offset = close_href.offsetHeight;



here is the code that remains in the page:



<script TYPE="text/javascript"><!--
function move_box(an, box)
{
    var cleft = 50;
    var ctop = -100;
    var obj = an;

    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }

    box.style.left = cleft + 'px';

    ctop += an.offsetHeight + 8;


    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }

    box.style.top = ctop + 'px';
}


function show_hide_box(an, width, height, borderStyle)
{
    var href = an.href;
    var boxdiv = document.getElementById(href);

    if (boxdiv != null)
    {
        if (boxdiv.style.display=='none')
        {
            // Show existing box, move it
            // if document changed layout
            move_box(an, boxdiv);
            boxdiv.style.display='block';
        }
        else
            // Hide currently shown box.
            boxdiv.style.display='none';
        return false;
    }


    boxdiv = document.createElement('div');


    boxdiv.setAttribute('id', href);

    boxdiv.style.display = 'block';
    boxdiv.style.position = 'absolute';
    boxdiv.style.width = width + 'px';
    boxdiv.style.height = height + 'px';
    boxdiv.style.border = borderStyle;
    boxdiv.style.textAlign = 'right';
    boxdiv.style.padding = '0px';
    boxdiv.style.background = 'white';
    document.body.appendChild(boxdiv);

    var offset = 0;


    var contents = document.createElement('iframe');
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';

    boxdiv.appendChild(contents);

    move_box(an, boxdiv);

    if (contents.contentWindow)
        contents.contentWindow.document.location.replace(
            href);
    else
        contents.src = href;


    return false;
}
//--></script>
0
Comment
Question by:jfs9900
  • 3
4 Comments
 
LVL 23

Expert Comment

by:basicinstinct
ID: 16878740
<!-- JavaScript Follows
function duplicate()
{
    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { show_hide_box(an, width, height, borderStyle); }
    close_href.style.fontFamily = 'Verdana';
    close_href.style.fontSize = '8';
    close_href.style.fontWeight = 'bold';
    close_href.appendChild(document.createTextNode('Close'));
    document.body.appendChild(close_href);
    //offset = close_href.offsetHeight;
    }
//JavaScript Ends -->
0
 
LVL 23

Accepted Solution

by:
basicinstinct earned 2000 total points
ID: 16878745
oops, stille had test stuff in there, was just meant to be this:


    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { show_hide_box(an, width, height, borderStyle); }
    close_href.style.fontFamily = 'Verdana';
    close_href.style.fontSize = '8';
    close_href.style.fontWeight = 'bold';
    close_href.appendChild(document.createTextNode('Close'));
    boxdiv.appendChild(close_href);
    offset = close_href.offsetHeight;
0
 

Author Comment

by:jfs9900
ID: 16878760
What if I want it to be an image instead of text?
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 16878866
var close_href = document.createElement('a');
    var image = document.createElement('img');
    image.src = 'your_image.jpg';
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { show_hide_box(an, width, height, borderStyle); }
    close_href.appendChild(image);
    boxdiv.appendChild(close_href);
    offset = close_href.offsetHeight;
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question