How to format text 2

[javierdlm001]

Hi all,

I'm a total rookie with JS, I know HTML & CSS though.
I was hoping someone could tell me how formatting of text is done in JS.
More specifically, I am trying to use this JS popup window, but I would love to be able to format its contents (font family, font weight, window padding, etc).

Thanks in advance guys

JDL

 

[feherke]

Hi

I was hoping someone could tell me how formatting of text is done in JS.

There is no such thing like formatting in JavaScript. The text is rendered by the browsers and the formatting understood by the browser is HTML. If your JavaScript code makes the browser to render a string and that string contains HTML markup, the rendered text will look accordingly.

For example the following will replace the current document's first [tt]h1[/tt] element's ^(*) text to "I am a formatted heading", where the word "formatted" is written in italic :
[small](*) For the sake of simplicity I supposed at least one such element exists.[/small]

document[teal].[/teal][COLOR=darkgoldenrod]getElementsByTagName[/color][teal]([/teal][green][i]'h1'[/i][/green][teal])[[/teal][purple]0[/purple][teal]].[/teal]innerHTML[teal]=[/teal][green][i]'I am a <i>formatted</i> heading'[/i][/green]

More specifically, I am trying to use this JS popup window

Define "JS popup window".

Popup usually means browser window opened with the [tt]window.open()[/tt] method. As such thing is just a regular browser window, it can display any HTML. You can even open the window empty ^(**) and generate the document with JavaScript :
[small](**) Tested in latest Gecko, may fail in other browsers/versions due to Same origin policy.[/small]

[b]var[/b] win[teal]=[/teal]window[teal].[/teal][COLOR=darkgoldenrod]open[/color][teal]()[/teal]
win[teal].[/teal]document[teal].[/teal][COLOR=darkgoldenrod]open[/color][teal]()[/teal]
win[teal].[/teal]document[teal].[/teal][COLOR=darkgoldenrod]writeln[/color][teal]([/teal][green][i]'<h1>I am another <i>formatted</i> heading</h1>'[/i][/green][teal])[/teal]
win[teal].[/teal]document[teal].[/teal][COLOR=darkgoldenrod]close[/color][teal]()[/teal]

Note that browsers may be set to block popup windows or to open them in tab instead.

If you were thinking to the [tt]window.alert()[/tt] method, its text can not be formatted. The most you can do is to wrap ( with [tt]\n[/tt] ) and align ( with [tt]\t[/tt] ) it.

If you want something like the [tt]window.alert()[/tt] method but with the ability to display HTML formatted text, you will have to use a dedicated JavaScript solution ( or write your own ), which actually formats a regular HTML element to mimic a window. For example you could use jQuery MsgBox :

[b]<link[/b] [maroon]rel[/maroon][teal]=[/teal][green][i]"stylesheet"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text/css"[/i][/green] [maroon]href[/maroon][teal]=[/teal][green][i]"jquery.msgbox.css"[/i][/green] [b]/>[/b]
[b]<script[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green] [maroon]src[/maroon][teal]=[/teal][green][i]"jquery.min.js"[/i][/green][b]></script>[/b]
[b]<script[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green] [maroon]src[/maroon][teal]=[/teal][green][i]"jquery.msgbox.min.js"[/i][/green][b]></script>[/b]

$[teal].[/teal][COLOR=darkgoldenrod]msgbox[/color][teal]([/teal][green][i]'I am <i>formatted</i> message'[/i][/green][teal])[/teal]

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[javierdlm001]

That was great Feherke!
I guess I forgot to link "this JS popup window" to this page
I know that it would only work in IE, but then again, that's the only browser we have available at work (WinXP, IE8).
Strange that my IE in Win7 won't work, it freezes. I'll have to wait until I'm at work to try this.

Thanks a bunch!

JDL

 

[javierdlm001]

Hi Feherke,

Correct, I was going for a "window alert" type of popup. Since you confirmed that I can't format that, I am now trying to use your last suggestion (jQuery MsgBox).
But I could use some help
So far what I tried was to paste what you entered under "CODE --> HTML" in between the <body> tag in my page. Then what you entered under "CODE --> JavaScript" I pasted it in between a <script type:"text/javascript"> tag in the HEAD tag. I guess I'm either missing something, or I wasn't suppose to put it where I did. Like I said, I'm too rookie in JS still

Thanks in advance F

JDL

 

[feherke]

Hi

Hmm... I think we can shorten this part of the discussion. Now I observed this sentence in the script :

You need to buy a license if you want use this script.

I suppose you are not willing to pay for that script, at least I see no reason to do so.

Better choose another, for example jQuery.msgBox(). This one is better documented. To use it you have to
[ul]
[li]Download jquery.msgBox.rar.[/li]
[li]Extract its content into your web server's document root.[/li]
[li]Refer the files in you HTML document, I prefer in the [tt]head[/tt] section :

[b]<script[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"Scripts/jquery-1.8.0.min.js"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green][b]></script>[/b]
[b]<script[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"Scripts/jquery.msgBox.js"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green][b]></script>[/b]
[b]<link[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"Styles/msgBoxLight.css"[/i][/green] [maroon]rel[/maroon][teal]=[/teal][green][i]"stylesheet"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text/css"[/i][/green][b]>[/b]

[/li]
[li]Use it in your HTML document, I prefer in the [tt]body[/tt], but anyway, not before where you put the previous step's [tt]script[/tt] and [tt]link[/tt] tags :

$[teal].[/teal][COLOR=darkgoldenrod]msgBox[/color][teal]([/teal][teal]{[/teal] content[teal]:[/teal] [green][i]'I am <i>formatted</i> message'[/i][/green] [teal]}[/teal][teal])[/teal]

[/li]
[/ul]


Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[javierdlm001]

Thank Feherke.
But, did you say "web server's document root"? Mmmm, that's going to be a problem. I had not mentioned that I need this for a portal I'm making at work, where I'm not really expected to do this kind of thing. I'm doing it on my own, for now for myself. I might get colleagues to use it too, but that's another story.
That been said, I don't have access to the web server's document root whatsoever.
Does this mean that I'm left with a regular "popup alert window"?

JDL

 

[jpadie]

Put the files anywhere you like. Just make sure that they are web accessible. Then change the src and href attributes to point to them.

 

[feherke]

Hi

You mean, you are not allowed to copy new files to the server, but you are allowed to insert JavaScript code into the existing HTML files ?

Well, after all displaying a message is not a big deal. The following will display a message which will vanish when you click anywhere :

[b]var[/b] hider[teal]=[/teal]shower[teal]=[/teal]undefined

[b]function[/b] [COLOR=darkgoldenrod]message[/color][teal]([/teal]text[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal](![/teal]hider[teal])[/teal] [teal]{[/teal]
    hider[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'div'[/i][/green][teal])[/teal]
    [b]with[/b] [teal]([/teal]hider[teal].[/teal]style[teal])[/teal] [teal]{[/teal]
      position[teal]=[/teal][green][i]'fixed'[/i][/green]
      left[teal]=[/teal]top[teal]=[/teal][purple]0[/purple]
      width[teal]=[/teal]height[teal]=[/teal][green][i]'100%'[/i][/green]
      zIndex[teal]=[/teal][purple]1001[/purple]
      backgroundColor[teal]=[/teal][green][i]'black'[/i][/green]
      opacity[teal]=.[/teal][purple]25[/purple]
    [teal]}[/teal]
    hider[teal].[/teal]onclick[teal]=[/teal]message
    document[teal].[/teal]body[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]hider[teal])[/teal]

    shower[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'div'[/i][/green][teal])[/teal]
    [b]with[/b] [teal]([/teal]shower[teal].[/teal]style[teal])[/teal] [teal]{[/teal]
      position[teal]=[/teal][green][i]'fixed'[/i][/green]
      left[teal]=[/teal]top[teal]=[/teal][green][i]'25%'[/i][/green]
      width[teal]=[/teal][green][i]'50%'[/i][/green]
      zIndex[teal]=[/teal][purple]1002[/purple]
      textAlign[teal]=[/teal][green][i]'center'[/i][/green]
      backgroundColor[teal]=[/teal][green][i]'white'[/i][/green]
      padding[teal]=[/teal][green][i]'10px'[/i][/green]
    [teal]}[/teal]
    shower[teal].[/teal]onclick[teal]=[/teal]message
    document[teal].[/teal]body[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]shower[teal])[/teal]
  [teal]}[/teal]

  [b]if[/b] [teal]([/teal][b]typeof[/b][teal]([/teal]text[teal])===[/teal][green][i]'string'[/i][/green][teal])[/teal] [teal]{[/teal]
    shower[teal].[/teal]innerHTML[teal]=[/teal]text
    hider[teal].[/teal]style[teal].[/teal]display[teal]=[/teal]shower[teal].[/teal]style[teal].[/teal]display[teal]=[/teal][green][i]'block'[/i][/green]
  [teal]}[/teal] [b]else[/b] [teal]{[/teal]
    hider[teal].[/teal]style[teal].[/teal]display[teal]=[/teal]shower[teal].[/teal]style[teal].[/teal]display[teal]=[/teal][green][i]'none'[/i][/green]
  [teal]}[/teal]
[teal]}[/teal]

You can see it in action on jsFiddle.

I just kept it simple to demonstrate the simplicity of the task. If you need push buttons, window-like decoration or something else, can be added.

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[javierdlm001]

Thanks jpadie.
I'm afraid that "web accessible" would be enough of a problem
As our work environment is very restricted. The only web sites we're allowed to open are Google, and Yahoo, only the first pages.
But thanks for the info anyways

JDL

 

[javierdlm001]

Feherke, I didn't see your message before.
The only reason I have access to the HTML file for this portal, is because I'm the one making it. I'm keeping the necessary files in my work computer.
Thanks a bunch for the newer code, I'll give it a try

JDL

 

[javierdlm001]

Feherke, Ok, I went to the demo page you pointed to at jsfiddle.net/u8Y5K. Then I copied both the HTML & the JS to an empty HTML file to test it. I could see the Text-links, but nothing happened when clicking on them. Maybe I'm missing some JS libraries (?). Either way, it didn't work when trying in Chrome, Firefox, and Safari. I can't try it in IE because it freezes on me (Win7).

Any ideas?

JDL

 

[feherke]

Hi

I went to the demo page you pointed to at jsfiddle.net/u8Y5K. Then I copied both the HTML & the JS to an empty HTML file to test it.

You mean, copied from jsFiddle ? I would not recommend that.

Maybe I'm missing some JS libraries (?).

Certainly not. After all, the reason to write that function was to avoid the use of libraries.

Either way, it didn't work when trying in Chrome, Firefox, and Safari. I can't try it in IE because it freezes on me (Win7).

Well, it works for me with Gecko, Presto and WebKit browsers, no way to try with Trident. To avoid further confusions, I attached the file I used.

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[javierdlm001]

Thank you kindly Feherke

JDL