Dropdown area

City Aggregation · 05-08-2007, 03:19 PM

How can I create a dropdown area similar to the one Google uses for the discussion groups (image attached). I don't want to use <ul> an <li> because I only want one image where users can click on to display a large box. Any help would be appreciated.

Costin Trifan · 05-08-2007, 04:33 PM

Quote:

How can I create a dropdown area similar to the one Google uses for the discussion groups (image attached). I don't want to use <ul> an <li> because I only want one image where users can click on to display a large box. Any help would be appreciated.

Hello!
There is a problem...

and that is I don't get your point here...

1. I only want one image where users can click on to display a large box
2. I don't want to use <ul> an <li>

Now, if you look at the picture attached, you'll see that it's the same thing...?!?

They have a image which clicked displays that dropdown box and they're using "maybe" "ul" and "li"...

Please, can you explain in more detail what is it that you want, so we can help?

City Aggregation · 05-09-2007, 11:29 PM

Go to Google Discussion Groups and view the source. They use some javascript for it. http://groups.google.be/grphp?ie=UTF...l=nl&tab=wg&q=

I don't really know how it works but what I want is an image and when people click on it I want a floating box to apear below the image, like on the screen.

Costin Trifan · 05-10-2007, 01:56 AM

All you need is a simple rollover script and you can run a quick search on google and you'll find a lot of them.

Then, choose that one that's the most appropriate for your needs.

HTH

City Aggregation · 05-10-2007, 11:27 AM

I don't really want another image to appear, I want an area with liks and stuff to appear below the image. Like when you click on search, to search this forum.

Costin Trifan · 05-10-2007, 12:12 PM

The CSS style:

Quote:

The script:

Quote:

The HTML:

Quote:

<div>
<span>Click the image</span> 
<img id="Image1" onclick="toggleDisplay('Table1');" src="images/yourImage.gif" />
</div>
<br />
<table id="Table1" cellpadding="0" cellspacing="0" style="border: solid 1px #000000; display: none;">
<tbody>
<tr>
<td>This is a test</td>
</tr>
<tr>
<td style="height: 200px;"> </td>
</tr>
</tbody>
</table>

Plese note:
- you have to set the attribute "display: none" inline; do not set that attribute in a css class because IE7 has a problem with that. The problem is that when you click the image nothing happens

That's why you have to set it inline.
- The rest of the styles you want to apply to the table, you can define them in a css class.

hth.

City Aggregation · 05-10-2007, 11:07 PM

Thanks for the help, it works

.

Costin Trifan · 05-11-2007, 12:35 AM

Glad to help!

City Aggregation · 05-11-2007, 02:30 PM

One last thing, I want the menu to close when there is clicked somewhere on the screen, not in the menu.

exam · 05-12-2007, 11:57 AM

Set a handler for the body onclick event and set the table to display:none; This could be as easy as doing <body onclick="clear_menu()"> In the clear_menu function you'd need to check to see if the menu is open and check to see if the click comes from outside the menu, and if so, close it.

City Aggregation · 05-12-2007, 12:45 PM

Sorry I don't know javascript so I have no idea how to do it. I would appreciate if you could help me with this. I used the code as Costin posted above.

exam · 05-12-2007, 01:28 PM

Add this:

Between your <script> tags:

Code:

function handle_click(e) {
	e = e || event;
	var target = e.target || e.srcElement;

	if (target.id == 'Table1') {
		e.cancelBubble = true;
		if (e.stopPropagation) {
			e.stopPropagation();
		}
	} else {
		document.getElementById('Table1').style.display = 'none';
	}
}

And add this to your body tag:

Code:

onclick="handle_click();"

Code:

<body onclick="handle_click();">

Costin Trifan · 05-12-2007, 01:35 PM

I got this error:

Quote:

"id" is null or not an object

City Aggregation · 05-13-2007, 03:48 AM

Doesn't work, it doesn't want to open the menu anymore.

Costin Trifan · 05-14-2007, 03:11 AM

If you have a site where you wnat to use this dropdown box, I suggest you should do it (even if it's not hidding when you click outside the box).

If your users will navigate away from the page in which you display that dropdown box then it's ok.

I'm currently very busy with two projects and I really don't have pretty much time for my own...

It seems that 24h/day it's just not enough

But I promise you that I'll try to find some time to solve your problem.

I just need some time.
Thank you for understanding

exam · 05-14-2007, 08:30 AM

Actually the right answer is for you to download YUI, Scriptaculous, Prototype, Mootools, JQuery, or one of the other Javascript frameworks, and use their pre-made functions to do this stuff. They have been tested, they are free/open source, they have great cross-browser compatibility built in, and you don't have to re-invent the wheel.

City Aggregation · 05-14-2007, 11:46 AM

I have no idea how this thing is called :p.

@Costin: No problem, take your time.

Costin Trifan · 05-14-2007, 06:05 PM

As you can see, I've changed the code a little bit. The "Table1" becomes now "DropDownTable" and there are 2 new functions: showTable() and hideTable().

As Exam said, there should be a function which will check to see if the click comes from inside/outside the DropDownTable and then take the proper action (hide the table if visible).

This is just a naive implementation but it works...[and I think it's ok, as long as I'm not a JavaScript guru

and I hope that this solves your problem for the moment, at least until you'll find a better implementation].

The issue here is that you have to add the "onclick" event for each of your page containers, except the main container (as you see in my example).

Quote:

This is very important, because if you add the "onclick" event to the parent container of your table, then it won't work, so be careful with that.

In this example the "MainPageContainer" is the parent of "DropDownTable" so it hasn't the "onclick" event set.

Code:

<head>
    <script type="text/javascript" language="javascript">
<!--

var element;
var state = false;

function showTable() {
    element = document.getElementById('DropDownTable').style;
 
	return element.display = 'block';
}
function hideTable() {
    element = document.getElementById('DropDownTable').style;
 
	return element.display = 'none';
}
function toggle() {
    element = document.getElementById('DropDownTable').style;
    
    if (element.display == 'none')
    {
        // Show the table
         element.display = showTable();
         state = true;
    }
    else
    {
        // Hide the table
          element.display = hideTable();
          state = false;
    }
    return state;
}

function externalClick() {
    hideTable();
}

//-->
    </script>
</head>

Code:

<body>
    <div id="MainPageContainer">
        <img id="ExpandViewImage" height="25" onclick="toggle();" src="Expand.png" style="cursor: hand;"
            width="25" />
        <br />
        <table id="DropDownTable" cellpadding="5" cellspacing="0" style="display: none;">
            <tr>
                <td style="height: 200px; width: 250px;">
                    This is the content of the DropDownTable</td>
            </tr>
        </table>
        <br />
        <br />
        <div id="PageSubContainer1" onclick="externalClick();" style="width: 100%; height: 100px;
            background-color: #696969;">
            <br />
            Add content here | Add content here
            <br />
            <div id="Container1">
                no need to call the javascript function here
            </div>
        </div>
        <div id="PageSubContainer2" onclick="externalClick();" style="width: 100%; height: 100px;
            background-color: #808080;">
            <br />
            Add content here | Add content here
            <br />
            <div id="Container2">
                no need to call the javascript function here
            </div>
        </div>
    </div>
</body>

City Aggregation · 05-15-2007, 06:45 AM

It's quite hard to use because my script is made with many different layers and I have a lot of pages.

Google uses (don't understand anything of it):

Code:

<script language="javascript1.3"><!--
    function MygPopup(el, link_el) {
      this.link_el = link_el;
      this.el = el;
      this.popupOpened = false;
      this.mouseOver = false;
      this.el.onclick = this.onClick.bind(this);
      this.el.onmouseover = this.onMouseOver.bind(this);
      this.el.onmouseout = this.onMouseOut.bind(this);
      window.onresize = this.onResize.bind(this);
      this.ignoreNext = false;
    }
    MygPopup.prototype.onClick = function(e) {
      var e = e || window.event;
      if (IsDescendant(this.el, GetEventTarget(e))
          && this.popupOpened) {
        
	if (this.ignoreNext) {
	  this.ignoreNext = false;
          return;
        }
      }
      if (!IsDescendant(this.getPopup(), GetEventTarget(e))) {
        this.toggle();
      }
    }
    MygPopup.prototype.getPopup = function() {
      if (!this.popup_el) {
        this.popup_el = document.getElementById('myg_popup');
      }
      return this.popup_el;
    }
    MygPopup.prototype.toggle = function() {
      this.popupOpened = !this.popupOpened;
      var popup = this.getPopup();
      if (this.popupOpened) {
        popup.style.visibility = "hidden";
        popup.style.display = "block";
        this.setLeftPos();
        popup.style.top = (GetPageOffsetTop(this.el)
                           + this.el.offsetHeight) + "px";
        this.mouseUpListener = this.onClick.bind(this);
        listen(document, "mousedown", this.mouseUpListener);
	
          this.toggleDocumentControls(1);
        
        popup.style.visibility = "visible";
	this.ignoreNext = true;
      } else {
        unlisten(document, "mousedown", this.mouseUpListener);
        this.mouseUpListener = null;
	
          this.toggleDocumentControls(0);
	
        popup.style.visibility = "hidden";
      }
      this.updateImage();
    }
    MygPopup.prototype.updateImage = function() {
      if (this.popupOpened) {
        this.el.src = "/groups/img/mygroups_down.gif";
      } else if (this.mouseOver) {
        this.el.src = "/groups/img/mygroups_up.gif";
      } else {
        this.el.src = "/groups/img/mygroups_lt.gif";
      }
    }
    MygPopup.prototype.onMouseOver = function() {
      this.mouseOver = true;
      this.updateImage();
    }
    MygPopup.prototype.onMouseOut = function() {
      this.mouseOver = false;
      this.updateImage();
    }

    
    
      MygPopup.prototype.toggleDocumentControls = function(hide) {
        var selects = document.getElementsByTagName("select");
        for (var i = 0; i < selects.length; i++) {
	  if (hide) {
            selects[i].origVisibility = selects[i].style.visibility;
            selects[i].style.visibility = "hidden";
          } else {
            if (selects[i].origVisibility) {
              selects[i].style.visibility = selects[i].origVisibility;
            } else {
              selects[i].style.visibility = "visible";
            }
          }
        }
      }
    

    MygPopup.prototype.setLeftPos = function() {
      var popup = this.getPopup();
      
        var setLeft = GetWindowWidth(window) - popup.offsetWidth - 5;
        popup.style.left = Math.min(setLeft,
	                   	    GetPageOffsetLeft(this.link_el)) + "px";
      
    }
    MygPopup.prototype.onResize = function() {
      if (this.popupOpened) {
        this.setLeftPos();
      }
    }

    var mygPopup = new MygPopup(document.getElementById('myg_img'),
				document.getElementById('myg_lnk'));
  //--></script>

Costin Trifan · 05-15-2007, 08:04 AM

Give me the url to your site so I can have a global view of this situation, please.