...

View Full Version : Javascript "Click here to open OR close"



mbl
11-04-2004, 08:45 PM
Dear friends,

Would anyone have code that would allow clicking on a "text fragment" to open a small window, which could be closed after reading it, by clicking again on the same text fragment?

The text fragment would not need to change legend at all. It might say "Read more. Click here to open and to close after reading", for instance.

This would allow the user not to have to move the mouse to the small window. It would also have the advantage that if the small window, for any reason hides under the main window, two or more clicks would surely close the window and open it again.

Of course, the small window would have the standard X button to close it too.

Thanks.

-mbl-

hemebond
11-04-2004, 09:21 PM
The whole setup sounds like an inconvenience to the user. Why are you doing it this way?

mbl
11-04-2004, 10:46 PM
The whole setup sounds like an inconvenience to the user. Why are you doing it this way?

Dear hemebond,

The reader is viewing something that requires a short explanation or clarification. He clicks, the window opens, he reads it, then, without moving the mouse, he closes the explanation window.

Would rather see this as a convenience to the user, more than an inconvenience.

It does not deviate from the way many tangible gadgets work. The same push that turns a gadget ON is the same push that turns it OFF.

Hope this clarifies the question.

-mbl-

hemebond
11-05-2004, 02:02 AM
I tried with the onclick, but couldn't even get Firefox to listen, so I did this. It only works in Mozilla Firefox becuase I can't remember how IE and Opera access events.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>47051</title>
<script type="text/javascript">
var txt = window.navigator.appName;
var ie = (txt == "Microsoft Internet Explorer") ? true : false;
var opera = (txt == "Opera") ? true : false;
</script>
<style type="text/css">
iframe.dfn {
position:absolute;
width:320px;
height:240px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam auctor.
Aliquam erat volutpat.
Donec suscipit nulla sit amet lectus gravida iaculis.
Nulla facilisi.
In blandit fringilla urna.
Donec <a class="short" href="47051_.html">tristique</a> purus vel magna.
Praesent neque massa, porttitor vitae, nonummy at, scelerisque ac, dolor.
Ut euismod euismod neque.
Donec imperdiet cursus magna.
Vestibulum nec dui.
Ut dui.
Nam bibendum.
Sed venenatis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In feugiat scelerisque erat.
Pellentesque gravida tempor turpis.
Aenean at lorem non libero gravida euismod.
Sed ornare.
Nam pharetra nulla quis ligula.
Sed non nunc eget est dictum molestie.
</p>
</body>
<script type="text/javascript">
var iframe = null;

var list = document.getElementsByTagName("a");
for(var i = 0; i < list.length; i++)
{
if(list[i].className == "short")
{
list[i].addEventListener("mouseover",show_tooltip,true);
list[i].addEventListener("mousemove",move_tooltip,true);
list[i].addEventListener("mouseout",hide_tooltip,true);
}
}

function show_tooltip(e)
{
var href = e.currentTarget.getAttribute("href");

iframe = document.createElement("iframe");

iframe.setAttribute("src",href);
iframe.setAttribute("class","dfn");

iframe.style.left = (e.clientX + 8) + "px";
iframe.style.top = (e.clientY + 8) + "px";

document.getElementsByTagName("body")[0].appendChild(iframe);
}

function move_tooltip(e)
{
iframe.style.left = (e.clientX + 8) + "px";
iframe.style.top = (e.clientY + 8) + "px";
}

function hide_tooltip(e)
{
document.getElementsByTagName("body")[0].removeChild(iframe);
}
</script>
</html>

mbl
11-05-2004, 02:49 AM
Dear Hemebond,

Your code works well in Firefox.

As you say, it is works like mouse-over rather than on click but it is still usueful.

Would like to see if there were actually some way to open the window by clicking on it because it would then be of more general use, even to open some larger windows, or if the window data is changed and needs scrolling to be read, no need to change the code.

It seems that window.open window.close combinations could be used, provided that somehow it were possible to check and know if window is open or closed, then use some if-then code.

Thank you, the code is valuable. Will study it.

Appreciate the kindness.

-mbl-

Mr J
11-05-2004, 02:08 PM
How about something like this?

<script language="javascript">
<!--
var i=0
newwin=null

function win_ctrl(){
i++
if (i==1){
newwin=window.open("yourpage.htm",'win1','left=200,top=100,width=300,height=200')
}
else{
if (i==2){

if(newwin&&newwin.open){
newwin.close()
newwin=null
}

i=0
}
}

}

//-->
</script>

<span onclick=" win_ctrl()" style="font-weight:bold;cursor:hand;cursor:pointer">Read More</span>

mbl
11-05-2004, 04:07 PM
Dear Mr. J.

It works as needed.

There's a little (minor) thing only.

When the user closes the little window by clicking on it own standard X button, the code does not know and therefore, two cliks on 'Read More' are required to open it.

It may be something easy to fix, if you could and would, but the code as given does indeed do it.

Would also need the little window to have scroll bars, just in case, but can probably figure that out, but if you are on it and would do it.

Will study the code right away and have plans to use it in a few pages where this functioning would be nice to have.

Silent One, thanks a lot for manifesting your kindness and skills.

-mbl-

Roy Sinclair
11-05-2004, 04:21 PM
Dear hemebond,

The reader is viewing something that requires a short explanation or clarification. He clicks, the window opens, he reads it, then, without moving the mouse, he closes the explanation window.

Would rather see this as a convenience to the user, more than an inconvenience.

It does not deviate from the way many tangible gadgets work. The same push that turns a gadget ON is the same push that turns it OFF.

Hope this clarifies the question.

-mbl-

You can ignore this if your heart is set on the course you've already set but it sounds to me like you're going off on a tangent when html already has what you need available. See: http://www.w3.org/TR/html4/struct/text.html#edef-CITE

One of those tags ought to be able to meet your needs, you can use CSS to highlight the enclosed text and use the "title" property to provide the additional information, perhaps like this:


... the project was <acronym title="Fouled Up Beyond All Repair">FUBAR</acronym> from the start.


Going this route will add semantic meaning to your text, keep you within the bounds of normal html (no additional scripting required), uses mechanisms the user already knows (the title will show when hovering the mouse over the acronym, abbreviation, citation or whatever in your text) and you avoid the additional overhead of a special script.

Mr J
11-05-2004, 05:42 PM
There's a little (minor) thing only.

Oops! forgot about that.


What is needed is a little script to be placed in the HEAD section of the page opening in the popup window.

I have also amended the main script to suit.

<script language="javascript">
<!--
var i=0
newwin=null

function win_ctrl(){
i++
if (i==1){
newwin=window.open("popup.htm",'win1','left=200,top=100,width=300,height=200')
}
else{
i=0

if(newwin&&newwin.open){
newwin.close()
}
else{
win_ctrl()
}

}

}

//-->
</script>

<span onclick=" win_ctrl()" style="font-weight:bold;cursor:hand;cursor:pointer">Read More</span>


In the page in the popup


<script language="javascript">
<!--
function win_closed(){
opener.newwin=null
}

// add onunload="win_closed()" to the opening BODY tag

//-->
</script>

mbl
11-05-2004, 05:58 PM
Dear Roy,

Thank you for your observation.

Have no intention nor the practice of ignoring advice, specially when asking for it.

Will look further onto what you say, and yes, the preference would be to use straight-forward aproaches.

However, am not sure if the title property would be the thing, for the little window to open will contain some instructions and may be one or two paragraphs.

Also, the preference is for those instructions to be independent of the code, so they be modified and tested separately.

The request is not too far fetched, actually. It's similar to a typical <a tag that opens a page (which can have little or much text), but give the user the convenience of closing it right away by clicking again on the same text clicked to open the instruction window.

Another reason for the reques is that normal help windows keep hiding behind the page that opens and most users don't know what happened to the aux-window, so they keep clicking on the text and nothing happens. So they get frustrated. With the aproach intended, the user would actually close and re-open the aux-window out from hiding, by that repeated clicking.

Don't see that HTML does this, but again, am a late-comer to this technology which is quite vast and difficult to tackle on one's own.

Hence, every one's help is valuable.

Thanks, friend.

-mbl-

Basscyst
11-05-2004, 06:02 PM
I see where you are coming from, but opening a whole other window seems a bit extreme for what you are trying to accomplish. If the title attribute etc. is not robust enough, try doing a google search for Javascript tool tips, I'm sure you will find something a bit less intrusive.

Basscyst

Roy Sinclair
11-05-2004, 06:44 PM
I'm with Basscyst, if it's too much data or too complex for a simple title property to contain then the next step up is to look at using a tooltip. Run a quick search on this board there are some simple (which is good) yet excellent tooltip codes you can find right here.

You really want to avoid opening a whole new window as much as possible, especially with browsers trying hard to contain the problem of popup advertisements.

Willy Duitt
11-05-2004, 07:22 PM
Not very practical but for those with javascript enabled the below will fire the title tooltip onclick... For those with javascript disabled the title attribute will work as intended...

The character entity: &#x0A; will add new lines...



<a href="http://google.com" title="Google is a&#x0A;popular search engine"
onmouseover="if(this.title.length!=0){tooltip=this.title}this.title=''"
onclick="this.title=(this.title=='')?tooltip:'';return false">Google</a>


......Willy

Mr J
11-05-2004, 08:54 PM
Re posted further down due to amendments

mbl
11-05-2004, 09:57 PM
How about something on these lines


Dear Mr. J.,

Very impressive coding and very useful. Had not considered something like that and will study it and see which will go best, along with the caveats given by others.

This one has no hassle of the child-window hiding and getting lost, but one has to make sure the text appearing does not cover something that needs to be viewed at the parent window. However, the size of the child window can be sized, and it does have scroll-bars.

By the way, the oops! In the oops! change you made, was not sure of how to handle this on the opening code:

add onunload="win_closed()" to the opening BODY tag

Tried putting it in between <script=javascript> ...</script> and no difference was effected. Still, closing the child window by clicking on its X close-button did not seem to inform the Parent window, so 2 cliks were needed to re-open the child. Is there maybe some global var to be used so it is how they communicate about each other?

Thank you.

-mbl-

mbl
11-05-2004, 10:07 PM
I'm with Basscyst, if it's too much data or too complex for a simple title property to contain then the next step up is to look at using a tooltip. Run a quick search on this board there are some simple (which is good) yet excellent tooltip codes you can find right here.

You really want to avoid opening a whole new window as much as possible, especially with browsers trying hard to contain the problem of popup advertisements.

Dear Roy, and other friends,

Actually did try tooltips before, and felt they were not quite what was needed.

The pages are already done and use bullets marks, and have a little head title, and even a different background color so they stand out when called for. (They use style sheets for the formatting, too.)

It is felt that a more general solution would be if they be left as HTML pages each.

Some such child page may be called by other parents, too.

The other thing, is having been on the impression that Javascript was kind of safe in a sand-box like Java.

So will test all what's done with Javascript disabled, to see what happens when such is the case. Had not done that so far, but will.

Thanks, all of you, friends.

-mbl-

hemebond
11-05-2004, 10:41 PM
Would like to see if there were actually some way to open the window by clicking on it because it would then be of more general use, even to open some larger windows, or if the window data is changed and needs scrolling to be read, no need to change the code.Well, I can't test this because all new windows, including popups, just act like normal links for me and open in the same window.

Mr J
11-05-2004, 11:14 PM
The code in the popup should go like this

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="javascript">
<!--
function win_closed(){
opener.newwin=null
}

// add onunload="win_closed()" to the opening BODY tag

//-->
</script>

</HEAD>
<BODY onunload="win_closed()">


</BODY>
</HTML>

I was working on a different method as well which would also allow the use of more than 1 "text fragment" in the same page.

The following method uses an Iframe instead of a popup window which your page(s) is loaded into and can be positioned to suit.

The Iframe is hidden or displayed in relation to the relative "text fragment" click


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<SCRIPT language="JavaScript">
<!--

last_id=""
function win_ctrl(id,oLeft,oTop,oPage){
if(id!=last_id){
document.getElementById("iframe1").style.display = "block";
document.getElementById("iframe1").style.left=oLeft
document.getElementById('iframe1').style.top=oTop
document.getElementById("iframe1").src=oPage
last_id=id
}
else{
document.getElementById('iframe1').style.display = "none";
last_id=""
}

}

// -->
</SCRIPT>

</HEAD>
<BODY>
<iframe id="iframe1" name="iframe1" src="" style="position:absolute;left:300px;top:100px;width:400px;height:240px;display:none;z-index:4"></iframe>

<span id="rm1" onclick="win_ctrl(this.id,200,100,'page1.htm')" style="font-weight:bold;cursor:hand;cursor:pointer">Read More</span>
<BR>
<span id="rm2" onclick="win_ctrl(this.id,400,100,'page2.htm')" style="font-weight:bold;cursor:hand;cursor:pointer">Read More 2</span>

</BODY>
</HTML>

mbl
11-05-2004, 11:52 PM
The code in the popup should go like this

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="javascript">
<!--
function win_closed(){
opener.newwin=null
}

// add onunload="win_closed()" to the opening BODY tag

//-->
</script>

</HEAD>
<BODY onunload="win_closed()">


</BODY>
</HTML>

I was working on a different method as well which would also allow the use of more than 1 "text fragment" in the same page.


Dear Mr. J.

The oops! worked fine with your clarification (had misunderstood and was trying to put it in the parent window, sorry).

Also, tried your code that works two different windows from two different text fragments and it worked the very first time.

It has quite a bit of potential for technical manuals, for instance.

It's nice that clicking on text2 automatically closes window1 if it was open, and viceversa.

The feeling is like coming out of the store with some good power tools to learn about and use.

Be asured they will not be wasted.

Thanks, friend.

-mbl-

mbl
11-05-2004, 11:58 PM
Well, I can't test this because all new windows, including popups, just act like normal links for me and open in the same window.

Dear Hemebond,

This refered to the code you gave which opened a window that was glued to the mouse pointer and would close when releasing it.

Am saving that gem for other things forthcoming.

It works fine and do thank you for helping.

-mbl-

mbl
11-06-2004, 07:08 AM
Dear Mr. J (or others),

Have made a function called OpenHtml using the code you made.

Then am using it as follows (basically as your example):

<span onclick="OpenHtml('HtmlPage.html')"style="color:blue;
text-decoration:underline;cursor:hand;
cursor:pointer">Read/Un-Read
</span>

and it works fine.

However, would like to make another function called ClickOpen(htmlID) that covers the above code between <span ..... </span> and receives the actual page name as parameter,
so that the above would be used as follows:

ClickOpen(HtmlPage.html)

probably attaching it to an <a tag?

The words "Read/Un-Read" would be fixed. They would not be variable. The text before the <a and after would add any clarifications.

Have tried, but am having trouble using the <span </span> in side of a function. Maybe it even is not needed when used in a function?

If it's not too difficult, would appreciate the help.

The problem actually relates to using <span .. </span> inside of a function and then HOW to actually call it in an HTML page.

-mbl-

Mr J
11-06-2004, 12:40 PM
If I understand your request correctly, the following amended script takes the document title of the page loaded into the popup and will show this next to the Read/Un-Read link.

(I changed the SPAN to an A tag so it would show as a standard link)


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script language="javascript">
<!--
var i=0
newwin=null

function win_ctrl(){
i++
if (i==1){
newwin=window.open("pops.htm",'win1','left=200,top=100,width=300,height=200')
document.getElementById("txt").innerHTML=newwin.document.title
}
else{
i=0

if(newwin&&newwin.open){
newwin.close()
document.getElementById("txt").innerHTML=""
}
else{
win_ctrl()
}

}

}

//-->
</script>

</HEAD>
<BODY>

<a href="#null" onclick=" win_ctrl()">Read/Un-Read </a> <span id="txt"></span>

</BODY>
</HTML>



NOTE:
Depending on how the loading of the popup is affected on the internet a timeout may have to be used at line

document.getElementById("txt").innerHTML=newwin.document.title

EG:

setTimeout('document.getElementById("txt").innerHTML=newwin.document.title',200)

The actual time limit would have to be trialed

mbl
11-06-2004, 05:06 PM
If I understand your request correctly, the following amended script takes the document title of the page loaded into the popup and will show this next to the Read/Un-Read link.


Thank you for this alternative. Will study it.

Here's however, a better way of asking the question (sorry):

The way that seems to be most to fit what am doing and plan to do relates to the oops! way you got it going. So here's the code that am using to learn about it and am almost ready to implement:

Using your code, have made this external-functions file

mzfunctions.js
-------------------------------
var i=0
var HtmlWin=null
function OpenHtml(HtmlID){
i++
if (i==1){
HtmlWin=window.open(HtmlID,'win1','left=200,top=100,width=400,height=400,scrollbars=1,resizable=1')
}
else{
i=0
if(HtmlWin&&HtmlWin.open){
HtmlWin.close(HtmlID)
}
else{
OpenHtml(HtmlID)
}
}
}
------------------------------------------


The second file involved is an html page that uses the function from the above mzfunctions.js file. It uses your code like this:


<HTML>

<HEAD>
<TITLE>Title of your page</TITLE>
<script src="mzfunctions.js"
language="javascript"
type="text/javascript">
</script>
</HEAD>

<BODY>

Blah blah

<span onclick="OpenHtml('HtmlPage.html')"style="color:blue;
text-decoration:underline;cursor:hand;
cursor:pointer">Read/Un-Read More
</span>

Blah blah blah.

</BODY>
</HTML>

----------------------------------------------
The third file is practically ANY html file. (In this
case it is HtmlPage.html)
----------------------------------------------

What would like to do, if possible and may not be too difficult, and it is to make a function ClikOpen(HtmlID) that would be used as follows:

ClickOpen(HtmlPage.html)

an the function would basically encapsulate this portion of your code:
-----------------------
<span onclick="OpenHtml('HtmlPage.html')"style="color:blue;
text-decoration:underline;cursor:hand;
cursor:pointer">Read/Un-Read More
</span>
-----------------------

Thus the only parameter passed to the function would be the name of the page to open. The Read/Un-Read word would be the same, and in blue color, and underlined all the time.

The function would be placed in between text to its left and text to its right.

Now, if what one actually would write to call the function as thought, exceeds the verbose of using the <span> as you already provided, then it would not make sense for this to be persued. Basically am trying not-to-repeat specifying the text properties, the text itself, the color, the underline, since they'd be the same throughout, and in addition, if any change in that were needed, it would take place only at the function at js file.

What do you say?

Thanks, friend.

-mbl-

Mr J
11-06-2004, 08:39 PM
The style attributes you are using are used for links by default

If you use the A tag instead of the SPAN tag, you would not need these attributes

Try this

<a href="#null" onclick="OpenHtml('HtmlPage.html')">Read/Un-Read More</a>


Otherwise what you need to do is create an external style sheet

Open note pad and copy the following


.highlight{
color:blue;
text-decoration:underline;
cursor:hand;
cursor:pointer
}


Save the file as stylepage.css

Then just as you have done with the .js file place the following in the head section of the page


<LINK href="stylepage.css" rel=stylesheet type=text/css>


Your span tags now need the addition of the class rule

<span class="highlight" onclick="OpenHtml('HtmlPage.html')">Read/Un-Read More</span>

These can now be placed between any text to call the function.

Example


Mary had a little lamb <span class="highlight" onclick="OpenHtml('HtmlPage.html')">Read/Un-Read More</span> its fleece was white as snow <span class="highlight" onclick="OpenHtml('HtmlPage.html')">Read/Un-Read More</span>

mbl
11-07-2004, 03:29 AM
Dear Mr. J,

Thanks for replying.

Yes, had just gotten to the same conclussion you give above. Learned that from the example you gave using the <a> tag.

Therefore, the same code you gave in the oops is final, as far as what was after, because it can be used either in span or <a> tags, and in <a> tags the use will be more effective due to its inherent colors, as you indicate.

The example using the document.write, would not use, because on the parent page, more than one place could use the function to open different child windows. The nice thing about your code is that clicking on another one of those instances, also will close an instance of a previous open child-window. So it is excellent just as is, with the <a tag.

Here's what it is, now, quite simple:

<HEAD>
<TITLE>Title of your page</TITLE>
<script src="mzfunctions.js"
language="javascript"
type="text/javascript">
</script>
</HEAD>

<BODY>

<span onclick="OpenHtml('HtmlPage.html')"style="color:blue;
text-decoration:underline;cursor:hand;
cursor:pointer">Using span: Read/Un-Read
</span>

</br>
</br>
<a href="#null" onclick=" OpenHtml('HtmlPage.html')">Using anchor:-Read/Un-Read </a>

</BODY>
</HTML>

Most grateful,

-mbl-

p.s.: It's funny how the funny face is
picked by the word cursor:pointer (no one put it there), but am quite happy.

Mr J
11-07-2004, 08:43 AM
I am pleased you are happy with the results.

To stop the smilies being shown in your posts when you reply to posts before you submit check the

Disable smilies in text (Tip: Check this box if you're posting code such as JavaScript or PHP.)

checkbox which is in the Additional Options just below the text box

mbl
11-07-2004, 10:07 AM
I am pleased you are happy with the results.


Yes, Mr. J, very happy:

Here are links to four pages with your code already, checked with the i.e. and firefox:

http://www.muga-zafu.com/postures.html

http://www.muga-zafu.com/lotus.html

http://www.muga-zafu.com/camel.html

http://www.muga-zafu.com/seiza.html

Again, thanks, friend.

-mbl-



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum