Solved

Format text in a JavaScript code

Posted on 2006-06-10
4
218 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
Comment Utility
<!-- 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 500 total points
Comment Utility
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
Comment Utility
What if I want it to be an image instead of text?
0
 
LVL 23

Expert Comment

by:basicinstinct
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now