homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How do the BBC get the show/hide div effect?
The Cricketer

10+ Year Member



 
Msg#: 3039859 posted 1:04 pm on Aug 9, 2006 (gmt 0)

I'm a bit flummoxed as to how the BBC get the show/hide div effect on [news.bbc.co.uk...]

i.e. clicking on the sections headed: VIDEO AND AUDIO NEWS, TV AND RADIO PROGRAMMES and MOST POPULAR VIDEO AND AUDIO and the relevent DIV appears and pushes the content below, further down the screen.

I've looked at the source code but I'm not 100% clear how it's done. Can anyone help identify the relevent sections of code?

 

RobClarke

5+ Year Member



 
Msg#: 3039859 posted 1:27 pm on Aug 9, 2006 (gmt 0)

Give this a try


<html>
<head>
<title>Show hide Div</title>
<script language="javascript">
function showDiv(name){
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]");
if (obj.style.display=="none"){
obj.style.display="";
}else{
obj.style.display="none";
}
}
</script>
</head>
<body>

<input type=button value="Show" onClick="showDiv('main');">
<br>

<div id="main" style="display:none">
<table>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>snip</td>
<td>snip</td>
</tr>
</table>
</div>
</body>
</html>

[edited by: engine at 2:57 pm (utc) on Aug. 6, 2007]
[edit reason] phone number removed [/edit]

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3039859 posted 9:42 pm on Aug 9, 2006 (gmt 0)

Hi there The_Cricketer,

here is an example that is very similar to the BBC effect...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>show/hide info</title>
<base href="http://mysite.orange.co.uk/azygous/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
.container {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
margin:4px 0;
}
.container img {
vertical-align:bottom;
}
.container span {
font-weight:bold;
}
.off {
display:none;
}
.on {
display:block;
margin:10px 30px;
text-align:justify;
color:#003;
background-color:#eef;
}
-->
</style>

<script type="text/javascript">
<!--
window.onload=function() {
spn=document.getElementsByTagName('span');
for(c=0;c<spn.length;c++) {
spn[c].onclick=function() {
if(this.id!='') {
stuff(this.id.split('s')[1]);
}
}
}
}
function stuff(n) {

dvs=document.getElementsByTagName('div');
ims=document.getElementsByTagName('img');
info=document.getElementById('div'+n);
pic=document.getElementById('img'+n);

for(c=0;c<dvs.length;c++) {
if((dvs[c].className=='on')&&(dvs[c].id!='div'+n)) {
dvs[c].className='off';
}
}
for(c=0;c<ims.length;c++) {
ims[c].src='images/plus.GIF';
}
if(info.className=='on') {
info.className='off';
pic.src='images/plus.GIF';
}
else {
info.className='on';
pic.src='images/minus.GIF';
}
}

//-->
</script>

</head>
<body>

<div class="container">
<img id="img0" src="images/plus.GIF" alt=""/>
<span id="s0">John Smith</span>
<div id="div0" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div>

<div class="container">
<img id="img1" src="images/plus.GIF" alt=""/>
<span id="s1">Frank Furter</span>
<div id="div1" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div>

<div class="container">
<img id="img2" src="images/plus.GIF" alt=""/>
<span id="s2">Mary Contrary</span>
<div id="div2" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div>

<div class="container">
<img id="img3" src="images/plus.GIF" alt=""/>
<span id="s3">Joe Bloggs</span>
<div id="div3" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div>

</body>
</html>


birdbrain

The Cricketer

10+ Year Member



 
Msg#: 3039859 posted 8:58 am on Aug 10, 2006 (gmt 0)

Thanks to the both of you. Your solutions seem to work fine for textual content, but I'm trying to include within one of the divs a Google map from google maps API.

The use of the google map javascript in both solutions seems to conflict with the existing code.

RobClarke's solution displays the map when toggled, however it jumbles the content of the map making it unusable. However if the display:none is removed from the div, the map is displayed without problem to begin with and can then be toggled off and on, but this hasn't the desired effect because the map obviously needs to be invisible to begin with.

With birdbrain's solution, once the required HTML is inserted into #div2....

<div class="container">
<img id="img2" src="images/plus.GIF" alt=""/>
<span id="s2">Mary Contrary</span>
<div id="div2" class="off">

<div id="map" style="width: 400px; height: 400px;">
<span id="maploading">Loading Map</span>
</div>

</div>
</div>


..the map merely fails to appear.

The javascript that is used for both examples is as follows, but I'm not sure where the conflict arises:


function load () {

var map = document.getElementById("div2");

if (GBrowserIsCompatible()) {

var gmap = new GMap2(map);
gmap.addControl( new GSmallMapControl() );
gmap.addControl( new GMapTypeControl()) ;
gmap.addControl( new GOverviewMapControl(new GSize(100,100)) );
gmap.setCenter ( new GLatLng(100.678, 10.297), 9 );

function makeIcon (image) {
var icon = new GIcon();
icon.image = image;
icon.shadow = "images/shadow.png";
icon.iconSize = new GSize(17, 17);
icon.shadowSize = new GSize(24, 17);
icon.iconAnchor = new GPoint(8, 17);
icon.infoShadowAnchor = new GPoint(0, 0);
icon.infoWindowAnchor = new GPoint(8, 1);
return icon;
}

function formatTabOne (input) {
var html = "<div class=\"bubble\">";
html += "<h1>" + input.company + "</h1>";
html+= "<p>"
if(input.addresslineone!= null) {
html += "" + input.addresslineone + "<br />" + input.addresslinetwo + "<br />" + input.town + "<br />" + input.county + "<br />" + input.postcode + "<br />" + input.country + "<br /><br /><strong>T: </strong> " + input.telephone + "<br /><strong>E: </strong>" + input.email;
}

html += "</p></div>";
return html;
}

function formatTabTwo (input) {
var html = "<div class=\"bubble\">";
html += "<h1>" + input.company + "</h1>";
html += "<p>" + input.profile + "</p>";
html+= "</div>";
return html;
}

function createMarker(input) {

var marker = new GMarker(input.point, makeIcon(input.markerImage) );
var tabs_array= [ new GInfoWindowTab("Contact Us", formatTabOne(input) ),
new GInfoWindowTab("About Us", formatTabTwo(input) ) ];

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(tabs_array);
});

return marker;
}

function parseJson (doc) {

var jsonData = eval("(" + doc + ")")

for (var i = 0; i < jsonData.markers.length; i++) {
var marker = createMarker(jsonData.markers[i]);
gmap.addOverlay(marker);
}
}

GDownloadUrl("points.json", function(data, responseCode) {
parseJson(data);
});

} else {
alert("Sorry, your browser cannot handle the true power of Google Maps");
}
}
window.onload = load;
window.onunload = GUnload;

Can anyone see any obvious reason for the conflict?

[edited by: The_Cricketer at 9:21 am (utc) on Aug. 10, 2006]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved