Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    mbl
    mbl is offline
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript "Click here to open OR close"

    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-

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    The whole setup sounds like an inconvenience to the user. Why are you doing it this way?

  • #3
    mbl
    mbl is offline
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond
    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-

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.
    Code:
    <!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>

  • #5
    mbl
    mbl is offline
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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-

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #7
    mbl
    mbl is offline
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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-

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mbl
    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:
    Code:
    ... 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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #10
    mbl
    mbl is offline
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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-

  • #11
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    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
    Helping to build a bigger box. - Adam Matthews

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #13
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

    Code:
    <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

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Re posted further down due to amendments
    Last edited by Mr J; 11-05-2004 at 10:58 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #15
    mbl
    mbl is offline
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mr J
    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-


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •