Hi Gurus
I have a page, which looks a bit like this:
....
<body>
<div ID=id1>........ ........</DIV>
<div ID=gsd>........ ........</DIV>
<div ID=ewd>........ ........</DIV>
<div ID=fac>........ ........</DIV>
<div ID=act>........ ........</DIV>
</body>
I would like id1 to be visible at all times, but the other ids only to be
visible one if the time, using something like
<A HREF="#esf" onclick="showdi v('act')">
What would be the best way of doing this?
- TIA
Nicolaas
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...) 39  3636 
The best approach would be to write a JS class, which would handle all
of these divs, given that you need it for 500 pages. The advantage is
that if you need to change anything, you would do it only in 1 class.
Here's what I'm talking about :
var handler = new JSScriptHandler ();
handler.addItem (document.getEl ementById ('id1'));
handler.addItem (document.getEl ementById ('gsg'));
handler.Start (); // This method would actually define all event
handlers, etc.
This is just an idea, not implementation. If you need more technical
info, ask this question in our forum at www.worcsnet.com. There is
actually an example of a similar control right on the home page ().
I do not think there's a real solution without JS. Just make sure that
your code works in all browsers.
Hope this helps,
GregS
IAB Studio developer www.worcsnet.com www.iabstudio.com
WindAndWaves wrote: Hi Gurus
I have a page, which looks a bit like this:
...
<body>
<div ID=id1>........ ........</DIV>
<div ID=gsd>........ ........</DIV>
<div ID=ewd>........ ........</DIV>
<div ID=fac>........ ........</DIV>
<div ID=act>........ ........</DIV>
</body>
I would like id1 to be visible at all times, but the other ids only
to be visible one if the time, using something like
<A HREF="#esf" onclick="showdi v('act')">
What would be the best way of doing this?
- TIA
Nicolaas
PS I am looking for a real solid solution, as I am looking at using
it on 500 pages and it also definitely need to work for people without
javascript (in which case everything is shown...)
WindAndWaves wrote: I would like id1 to be visible at all times, but the other ids only to be
visible one if the time, using something like
<A HREF="#esf" onclick="showdi v('act')">
This seems to be a pretty standard requirement, however your exemple is
a bit unclear, mixing a "esf" anchor with an "act" id (meaning, is there
a need for an internal hash?).
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...)
The script part in the code below can be used as a js include,
preferably written before the end of the body tag. It is independent
from the page structure (doesn't require any special setting in the
page), and should not prevent existing scripts from running correctly.
<style type="text/css">
a {margin:0 1em;}
div[id] {background-color:yellow; color:orange;}
</style>
<div>
<a href="#foo1">Fo o1</a>
<a href="#foo2">Fo o2</a>
<a href="#foo3">Fo o3</a>
</div>
<div id="foo1">Foo1 </div>
<div id="foo2">Foo2 </div>
<div id="foo3">Foo3 </div>
<script type="text/javascript">
// --- add "call" support ---
if(!Function.pr ototype.call){
Function.protot ype.call=functi on(obj, arg){
var fn="call", ret;
while(typeof obj[fn]!="undefined" ) fn+=fn;
obj[fn]=this;
ret=obj[fn](arg);
obj[fn]=null;
return ret;
}
}
// --- add generic addEventListene r ---
if(typeof _e!="function") {
_e=function(obj , evt, func) {
if(obj[evt]) {
obj[evt]=(function(f) {
return function(evt) {
func.call(this, evt);
return f.call(this, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}
}
// --- add the toggling mechanism ---
_e(window, "onload",
function(evt) {
if(document.get ElementById &&
document.getEle mentsByTagName &&
document.body &&
document.body.s tyle &&
typeof document.body.s tyle.display==" string"
){
// --- core ---
var activeDiv, handler, show, hide, getId, map;
map = {};
hide = function(el) { el.style.displa y="none"; }
show = function(el) { el.style.displa y="block"; }
getId = function(s) { return s.substr(s.last IndexOf("#")+1) ; }
handler = function(evt) {
if(activeDiv!=t his) {
if(activeDiv) hide(activeDiv) ;
show(activeDiv= map[this.href]);
}
return true;
}
// --- conditional init ---
var ii, dv, a;
for(ii=0,a=docu ment.getElement sByTagName("a") ;ii<a.length;ii ++){
if(a[ii].href.indexOf(" #")!=-1) {
dv=document.get ElementById(get Id(a[ii].href));
if(dv) {
map[a[ii].href]=dv;
_e(a[ii], "onclick", handler);
hide(dv);
}
}
}
}
}
);
</script>
WindAndWaves wrote:
[...] Nicolaas
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...)
I can't vouch for browsers other than Firefox and IE 6, so please test
the document.all stuff thoroughly.
If the user doesn't have JS enabled, all the divs are shown and the
links become anchors so clicking on them will navigate to the
appropriate div. Adding names & ids should account for some older
browsers, but again I can't test it at the moment so up to you.
If a browser doesn't understand any part of the script, the divs aren't
hidden in the first place. You may want to dynamically change the
"return false" so that if the script does not complete (i.e. the divs
are not hidden), the link to the div is followed. Sorry, I don't have
the browsers to test it in here.
Code below, cheers, Rob.
*In the <head>:*
<script type="text/javascript">
function showDiv(b,el){
var bRef = null;
if (document.getEl ementById) {
bRef = document.getEle mentById(b);
} else {
bRef = document.all[b];
}
if(bRef.childNo des){
var z = bRef.childNodes ;
for (var i=0;i<z.length; i++) {
// This will hide just the divs
// and show the one clicked on
if (z[i].nodeName =='DIV' && z[i].style) {
z[i].style.display = 'none';
if (z[i].id == el) z[i].style.display = '';
}
}
}
}
</script>
<style type="text/css">
.demo {width: 200px; height: 300px;}
</style>
*Add onload to body tag:*
<body onload="showDiv ('base','');">
*Some play HTML to test it out on (love the colours!!)*
<div id="d00">This is div 00<br>
<a href="#sdf" onclick="
showDiv('base', 'sdf');this.blu r();return false;">sdf</a>
<a href="#abc" onclick="
showDiv('base', 'abc');this.blu r();
return false;"> | abc</a>
<a href="#def" onclick="
showDiv('base', 'def');this.blu r();
return false;"> | def</a>
<a href="#ghi" onclick="
showDiv('base', 'ghi');this.blu r();
return false;"> | ghi</a>
</div>
<div id="base">
<div name="sdf" id="sdf" class="demo"
style="backgrou nd-color: blue;">div sdf</div>
<div name="abc" id="abc" class="demo"
style="backgrou nd-color: red;">div abc</div>
<div name="def" id="def" class="demo"
style="backgrou nd-color: green;">div def</div>
<div name="ghi" id="ghi" class="demo"
style="backgrou nd-color: pink;">div ghi</div>
</div> sw**********@ya hoo.com wrote: The best approach would be to write a JS class, which would handle all
of these divs, given that you need it for 500 pages. The advantage is
that if you need to change anything, you would do it only in 1 class.
Here's what I'm talking about:
var handler = new JSScriptHandler ();
handler.addItem (document.getEl ementById ('id1'));
handler.addItem (document.getEl ementById ('gsg'));
handler.Start (); // This method would actually define all event
handlers, etc.
This is just an idea, not implementation. If you need more technical
info, ask this question in our forum at www.worcsnet.com. There is
actually an example of a similar control right on the home page ().
If the script and HTML code on the main page is indicative of the
answers given there, its a site better left alone.
But, is it the policy of worcsnet.com to solicit questions for its
forums from Usenet?
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq
An example you might wish to play with:
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<script type="text/javascript">
<!--
if(!document.ge tElementById) {
document.getEle mentById = document.all ? function(i) {return
document.all[i];} : function() {return null;};
}
function mySetStyleDispl ay (myDiv, myStyle){
var obj = document.getEle mentById(myDiv) ;
if(obj && obj.style) {obj.style.disp lay = myStyle;}
}
function myShow(myDiv){
mySetStyleDispl ay (myDiv,'');
}
function myHide(myDiv){
mySetStyleDispl ay (myDiv,'none');
}
function HideAllNotFirst (){
var obj = document.getEle mentById('uberD IV');
var i = 0;
for (var o in obj.childNodes) {
if (obj.childNodes[o].nodeName == 'DIV') {
if (i==1){obj.chil dNodes[o].style.display = 'none';} else {i=1;};
}
}
}
-->
</script>
</HEAD>
<BODY>
<A HREF="#" onMouseOver="my Show('item_id1' );"
onMouseOut="myH ide('item_id1') ;">id1</a>
<A HREF="#" onMouseOver="my Show('item_gsd' );"
onMouseOut="myH ide('item_gsd') ;">gsd</a>
<A HREF="#" onMouseOver="my Show('item_ewd' );"
onMouseOut="myH ide('item_ewd') ;">ewd</a>
<A HREF="#" onMouseOver="my Show('item_fac' );"
onMouseOut="myH ide('item_fac') ;">fac</a>
<A HREF="#" onMouseOver="my Show('item_act' );"
onMouseOut="myH ide('item_act') ;">act</a>
<div ID=uberDIV>
<div ID=item_id1>id1 </DIV>
<div ID=item_gsd>gsd </DIV>
<div ID=item_ewd>ewd </DIV>
<div ID=item_fac>fac </DIV>
<div ID=item_act>act </DIV>
</div>
<script type="text/javascript">
HideAllNotFirst ();
</script>
</BODY>
</HTML>
SimonFx wrote: An example you might wish to play with:
[...]
Or not.
Your suggesed code does not do what the OP asked, which is that the
div is hidden until its link is clicked on, whereupon it stays
displayed until another is clicked on.
It is also quite unreliable in Safari: HideAllNotFirst () does not
work at all.
And you could have added links to the div's in your <a> tags to make
the sans-JS version a little better.
Cheers, Fred.
SimonFx wrote: An example you might wish to play with:
Fred Oz wrote: Or not.
Or so.
Maybe he can "play" with the example, because most of the material is
there. I'm sorry I did not write a complete, robust and fully tested
version on my time, unpaid.
Feel free to make additions or alterations.
I guess bitching about it is OK too, flameboy, this is usenet after all.
SimonFx wrote:
[...] Maybe he can "play" with the example, because most of the material is
there. I'm sorry I did not write a complete, robust and fully tested
version on my time, unpaid.
I just don't see the point in offering a solution that doesn't do what
is asked when a serviceable one has already been offered.
Feel free to make additions or alterations.
There is a solution below that is based on a similar algorithm to
yours. It was actually written completely independently.
It could be improved by being added dynamically on each href that has a
matching div id when the page loads, but I think that's unnecessarily
complex though not too hard to add if required. It's been tested in
IE 6, Safari and Firefox, I don't have an environment to test
document.all or alternatives to document.getEle mentById().
I guess bitching about it is OK too, flameboy, this is usenet after all.
Hardly a flame, the OP is somewhat of a novice and I think it's
reasonable to offer advice that you weren't prepared to include.
Have fun, Fred.
<script type="text/javascript">
function showDiv(b,el){
var bRef = null;
if (document.getEl ementById) {
bRef = document.getEle mentById(b);
} else {
// Use the following if you can test it
// otherwise substitute something else
// bRef = document.all[b];
}
if(bRef.childNo des){
var z = bRef.childNodes ;
for (var i=0;i<z.length; i++) {
// This will hide just the divs
// and show the one clicked on
if (z[i].nodeName =='DIV' && z[i].style) {
z[i].style.display = 'none';
if (z[i].id == el) z[i].style.display = '';
}
}
}
}
</script>
<style type="text/css">
..demo {width: 200px; height: 300px;}
</style>
<div id="d00">This is div 00<br>
<a href="#sdf" onclick="
showDiv('base', 'sdf');this.blu r();return false;">sdf</a>
<a href="#abc" onclick="
showDiv('base', 'abc');this.blu r();return false;"> | abc</a>
<a href="#def" onclick="
showDiv('base', 'def');this.blu r();return false;"> | def</a>
<a href="#ghi" onclick="
showDiv('base', 'ghi');this.blu r();return false;"> | ghi</a>
</div>
<div id="base">
<div name="sdf" id="sdf" class="demo"
style="backgrou nd-color: blue;">div sdf</div>
<div name="abc" id="abc" class="demo"
style="backgrou nd-color: red;">div abc</div>
<div name="def" id="def" class="demo"
style="backgrou nd-color: green;">div def</div>
<div name="ghi" id="ghi" class="demo"
style="backgrou nd-color: pink;">div ghi</div>
</div>
<script type="text/javascript">
// This could be included in a body onload tag
showDiv('base', '');
</script>
Randy, the approach I just described (the one of using object oriented
JS classes) is very effective from developer's point of view. If
someone wants to
learn more about this technique, they are welcome to our forums. I'm
sorry that you got the wrong impression; I do not see anything wrong
in inviting people to our forums. You do not have to go there if you
do not want to.
As far as HTML/script on the main page is concerned, I do not see
anything wrong with it. This site was created in IAB Studio, and pages
are created in its WYSIWYG editors; what you actually see in the
browser is HTML generated on the fly. Our approach is different what
the usual web site would use, but it's more productive in many ways.
We also use a lot of advanced JS techniques, if you are interested to
learn more about it, you are welcome to visit our site.
GregS
IAB Studio developer www.worcsnet.com www.iabstudio.com
Randy Webb <Hi************ @aol.com> wrote in message news:<I_******* *************@c omcast.com>... sw**********@ya hoo.com wrote: The best approach would be to write a JS class, which would handle all
of these divs, given that you need it for 500 pages. The advantage is
that if you need to change anything, you would do it only in 1 class.
Here's what I'm talking about:
var handler = new JSScriptHandler ();
handler.addItem (document.getEl ementById ('id1'));
handler.addItem (document.getEl ementById ('gsg'));
handler.Start (); // This method would actually define all event
handlers, etc.
This is just an idea, not implementation. If you need more technical
info, ask this question in our forum at www.worcsnet.com. There is
actually an example of a similar control right on the home page ().
If the script and HTML code on the main page is indicative of the
answers given there, its a site better left alone.
But, is it the policy of worcsnet.com to solicit questions for its
forums from Usenet? This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Chris Hughes |
last post by:
I have a routine that creates a page with 2 sets of tables with divs around
them.
Each div tag has a name.
The first set of tags are as follows
div id="T123" STYLE="display: none;">
div id="T113" STYLE="display: none;">
etc
I want to hide only the divs that start with T as I have others on the page
|
by: Rob McLennan - ZETLAND |
last post by:
Hi,
I have set up an external stylesheet, named "print.css", to format the
style of all pages printed from my company's website. I've been
previewing my changes to the stylesheet by doing File\Print Preview in
IE6 and noticed that occasionally the leftmost button of the
javascript menu (CoolMenus Version 3.02) on our website is printed. (I
have wrapped the javascript that generates this menu in a DIV so that
it is concealed from...
|
by: mt |
last post by:
In a nutshell, I'd like to have a list of items, each of which fills out a
small table which displays some info about a particular item(the items being
a trouble ticket for a tech support ASP-built web-based app). There may be
zero, one, or many of these per ticket. Since some tickets have many of
these items (call them work items), the page can get awful long. I have this
part working already.
So my proposed solution to make the pages...
|
by: middletree |
last post by:
I'm doing an ASP-built Intranet app, and am having trouble with a bit
of
code on the menu I am using. I got it from some free site, but I tried
emailing the person whose email address is in the code, but that email
addy
doesn't work anymore.
Since it's Intranet, I put an HTML version on the web for you to look
at.
The links won't work, of course. Address is
|
by: gregmercer |
last post by:
I have the following html sample, where I'd like to have a show and
hide two divs, one replacing the other. Following these two divs is a
third div (the bluediv) which I would like to have placed right up
directly below to the first or second div, depending on which is
showing.
If you load the html in Firefox, and then click on the "Edit" link you
can see that the first div is hidden, the second div is shown, however
the third div is...
| | |
by: Kourosh |
last post by:
I have a lot of DIV tags on an HTML page. I want to group some of them
so that I can hide them all together at once if needed. What's a good
way to do this? I want this to be compatible with at least IE 5. Would
it be a good idea to assign all DIV tags in the same group the same
"title" attribute?
This is what I want to do, but I'm not sure if it's the correct
approach, and I'm not sure how to set the style with javascript either:
...
|
by: jarrodprice |
last post by:
If I had 4 divs, box1, box2, box3 and box4, and I wanted a script to make certain combinations of them visable controlled by a number sequence in a second div called: "1to4".
The script should be conditional: when the contents of div "1to4" are "124", <div box1, box2, and box4 automatically show. If the contents of "1to4" are "1234", then all 4 divs should be displayed. The contents of "1to4" start as a custom tag called {{LAYOUT}}, which...
|
by: roland-d |
last post by:
Hello all,
Toggling divs is a popular subject and I have found plenty of
information and was able to make it work. There is only 1 thing I am
still stuck with for quite some time.
I have a dropdown menu and when I select a date from this menu it
displays another select box with times for that day. When I select
another date another dropdown is shown with times. The problem is now
that my page shows two dropdown menus with times.
|
by: zenbob |
last post by:
Greetings, and thanks in advance for considering my problem.
I am working in a basic .htm page, in which I want to close all displayed DIVs with one event. In IE, I find that this works:
function closeAll() {
var oDiv = new Enumerator(document.body.getElementsByTagName("DIV"));
for(oDiv.moveFirst(); !oDiv.atEnd(); oDiv.moveNext()) {
if (oDiv.item().style.display == 'inline') {
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
