JavaScript - How To Change The Collapsable Sidebar

Hello, I had this working in v2, but I'm migrating to v3 and I'm having some trouble with my sidebar. I think it might be variable scope problem, but I can't find the answer.

I have a form which appends entries to an xml file, and my map script imports the xml to create markers and infowindows (all working). Functions to close the infowindow and recenter the map all work as well. It should also display a clickable sidebar with the names of the markers as links. It displays a side bar, but I only get one line which says 'undefined'.

Here is my code:
Code:

var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map();
var side_bar_html = "";
var gmarkers = [];
var shortname;
var marker;

function initialize()
	{
	var xmlhttp;
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		xmlhttp.open("GET","rp4.xml",false);
		xmlhttp.send();
		xmlDoc = xmlhttp.responseXML;
	var markers = xmlDoc.getElementsByTagName("marker");
	var point = new google.maps.LatLng(40.8068620, -96.6816790);
	
	var myOptions = {
	 /*  center: new google.maps.LatLng(40.8068620, -96.6816790), */
	  center: point,
	  zoom: 4,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  /* mapTypeControl: True,
	  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} */
	  };
	 
	// create the map
	map = new google.maps.Map(document.getElementById("map_canvas"),
		myOptions);
	
	 function bindInfoWindow(marker, map, infowindow, nfo)
		{
		google.maps.event.addListener(marker, 'click', function()
			{
			infowindow.close();
			infowindow.setContent(nfo);
			infowindow.open(map, marker);
			map.panTo(marker.getPosition());
			// map.setCenter(new google.maps.LatLng(lat,lng);
			map.setCenter(marker.getPosition());
			});
		}
	
	
	// document.getElementById("side_bar").innerHTML = side_bar_html;
	for (var i = 0;i<markers.length;i++)
		{
		var lat = parseFloat(markers[i].getAttribute("lat"));
		var lng = parseFloat(markers[i].getAttribute("lng"));
		point = new google.maps.LatLng(lat,lng);
		shortname = markers[i].getAttribute("company");
		var company = markers[i].getElementsByTagName("company")[0].firstChild.nodeValue;
		var contact = markers[i].getElementsByTagName("contact")[0].firstChild.nodeValue;
		var str = markers[i].getElementsByTagName("str")[0].firstChild.nodeValue;
		var city = markers[i].getElementsByTagName("city")[0].firstChild.nodeValue;
		var phone = markers[i].getElementsByTagName("phone")[0].firstChild.nodeValue;
		var email = markers[i].getElementsByTagName("email")[0].firstChild.nodeValue;
		var web = markers[i].getElementsByTagName("web")[0].firstChild.nodeValue;	
		var nfo = "<h1>"+company+"</h1>"+
						"<p><b>"+company+"</b><br />"+
						contact+"<br />"+ 
						str+"<br />"+
						city+"<br />"+
						phone+"<br />"+
						"<a href='mailto:"+email+"'>"+email+"</a></p>"+
						"<a href='http://"+web+"'>"+web+"</a>";
		
		marker = new google.maps.Marker({
		position: point,
		map: map,
		title: company,
		clickable: true,
		});
		marker.setMap(map);
		bindInfoWindow(marker, map, infowindow, nfo);
		}
		document.getElementById("side_bar").innerHTML = side_bar_html;
	}

function myclick(k)
			{
			google.maps.event.trigger(gmarkers[k], "click");
			// save the info we need to use later for the side_bar
			gmarkers.push(marker);
			// add a line to the side_bar html
			side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + shortname + '<\/a><br>';
			return marker;
			}

Hello,

I need some help to insure that this:

Code:

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() ) {?> 
<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<?php } ?></li>
<?php }?> 
</ul>
<ul role="navigation">
<li><h2>Nyheder</h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>
</ul>

<ul><?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>

<li>
<ul><?php wp_meta(); ?></ul>
</li>
<?php } ?>
<?php endif; ?>
</ul>

Only appear on this page: http://finmand.dk/almastofa/nyheder-2

And if possible, how I can clean it up a bit, since there is stuff in there I don't think I need.
I would like it to only be "Nyheder", under this there shall be (as now) a list of post, shown by which month they where made.

Any help or advice would be helpful.
Thanks

Hi. I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on.

When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image...

Code:

<script language="JavaScript" type="text/javascript">
    function toggle() {

      	
        var bar = document.getElementById('floater');
        var barText = document.getElementById('f_news');

       
        if (bar.style.width == '210px') {

            
            bar.style.width = '40px';
	    bar.style.backgroundImage = 'none';

            
            barText.style.display = 'none';

           
       
        } else {


            
            bar.style.width = '210px';
	    bar.style.backgroundImage = 'HELP!';

            
            barText.style.display = 'block';

        }
    }
	</script>

Thanks in advance.

Hi,
I have a sidebar application, When a user click on the IM icon inside the sidebar, a Pop up window will open. When closing this child Pop up window, the sidebar hangs. When I tried to repoen the Popup window again, the Pop up window also hangs for a long time. But I can not find the exact reason behind this hanging of sidebar, after closing the Pop up window.

Also this issue is only exists in main server. In my local server its working fine. Also I am using JavaScript caching for main server.

Thanks Raju

I bet you all hate WordPress questions (sorry!) but the WordPress support forum is useless.

I use the Sandbox theme, which has two sidebars, but they are both on the left hand side, one on top of the other.

Can anyone explain how I can either move one of these sidebars to the right hand side? Or how I can create a new sidebar and put it on the right hand side? I've tried editing the theme code myself. My blog is http://www.ieltsielts.com

Thanks in advance.

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?

Hey all,

For the below code, I'm just trying to create a simple toggle menu for a Table of Contents. However, when page loads, I get document.gelementbyid('sidebar') is null even though it's clearly there and if I move script to below markup, it will also give me a hideElements() is not a function error, even though it clearly is.

Code:

<script type="text/javascript">
(function(){
	
	var headers = document.getElementById("sidebar").childNodes;
	for(var i=0; i < headers.length; i++){
			hideElements(headers[i]);
			
			if(headers[i].nodeName == "h1"){
				headers[i].childNodes[0].onclick = function(){
					hideElements(headers[i]);
					this.parentNode.nextSibling.style.display = "block";
					return false;
			}
		}
	}
	
	var hideElements = function(element){
		if(element.nodeName == "UL") element.style.display = "none";	
	}

})();
</script>

	<body>
		<a name="top"></a>
		<div id="masthead">
			<h1>This is the Help Page</h1>
		</div>
		<div id="sidebar">
			<h1><a href="chapter1"> Info</a></h1>
			<ul>
				<li><a href="#section1">Section 1</a></li>
				<li><a href="#section2">Section 2</a></li>
				<li><a href="#section3">Section 3</a></li>
			</ul>
			<h1><a href="chapter2"> Info</a></h1>
			<ul>
				<li><a href="#section4">Section 4</a></li>
				<li><a href="#section5">Section 5</a></li>
				<li><a href="#section6">Section 6</a></li>
			</ul>	
		</div>	
		<div id="content">
			<h1 id="section1">Section 1</h1>
			<p>
			</p>
			<a href="#top">Back to Top</a>	
			<h1 id="section2">Section 2</h1>
			<p>
			</p>
			<a href="#top">Back to Top</a>	
			<h1 id="section3">Section 3</h1>
			<p>
			</p>
			<a href="#top">Back to Top</a>	
		</div>	
	</body>

Thanks for any response.

Hello,

Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html

This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so.

Code:

    SList.getSelect = function (slist, option) {
        document.getElementById('scontent').innerHTML = ''; // empty option-content

        if (SList[slist][option]) {
            // if option from the last Select, add text-content, else, set dropdown list
            if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
            else {
                var addata = '<option>- - -</option>';
                for (var i = 0; i < SList[slist][option].length; i++) {
                    addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
                }

                // cases for each dropdown list
                switch (slist) {
                    case 'slist2':
                        document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
                        document.getElementById('slist3').innerHTML = '';
                        break;
                    case 'slist3':
                        document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
                        break;
                }
            }
        } else {
            // empty the tags for select lists
            if (slist == 'slist2') {
                document.getElementById('slist2').innerHTML = '';
                document.getElementById('slist3').innerHTML = '';
            } else if (slist == 'slist3') {
                document.getElementById('slist3').innerHTML = '';
            }
        }
    }

I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies.

Or do I simply need to make another big list to do them all?

Best Regards,
Tim





Reply With Quote




03-21-2013, 06:35 AM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period.

I would certainly toss out your entire getSelect() function and rewrite it.

But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point.

If that's what you are asking, one possible way:
Code:

    SList.slist2 = {
        ...
        "United Kingdom" : 
             { "England" : ["Staffordshire", "Derby", ... ],
                "Scotland" : ["Edinburgh", ... ],
                "Wales" : [ ... ],
                "Northern Ireland" : [ .... ]
             },
       ...
    };

I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting?

I used div tag in my field. that field has date value. there is another field that is also date field and it's in div tag.

when i change the first date field automatically second date field should be changed with the first date value.

Here is my first date field code.

Code:

   <div id=apptTimeEditOD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;">
      <%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate()) %>
   </div>

Here is my second date field code.

Code:

   <div id=apptTimeEditEnD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;">
      <%=_r.drawDatePicker( _ahsPage, "startDate1", appt.getApptDate() )%>
      <div id=apptODEndTime style="position: absolute; width: 90; height: 22; left: 140; top: 2; text-align: left;" > </div>
    </div>

how do i change my 2nd date field value with first date value when i do change in first date field.

Hello,

I was wondering if someone could tell me how to change the cookie on this piece of code?

I'd like it to put a different cookie for each page it's used on.

Any help would be appreciated.

Thanks!
Code:

       /* 
        * COOKIE FUNCTIONS
        */
       
        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, 

c.length);
            }
            return null;
        }

        function eraseCookie(name) {
            createCookie(name, "", -1);
        }
        
        /* 
         * END COOKIE FUNCTIONS

Hi can you change this javascript for me please
--------------------------------------------------------------------------
--------------------------------------------------------------------------
Code:

<script type = "text/javascript">
function LogIn(){
loggedin=false;
username="";
password="";
username=prompt("Username:","");
username=username.toLowerCase();
password=prompt("Password:","");
password=password.toLowerCase();
if (username=="guest" && password=="login") { 
loggedin=true;
window.location="home-page.html";
}
if (username=="guest2" && password=="login2") {
loggedin=true;
window.location="home-page2.html";
}
if (loggedin==false) {
alert("Invalid login!");
}
}
</SCRIPT>

----------------------------------------------------------------------------------------------------------------------------------------------------
Can someone change this script to instead of prompts i would like two text boxes and a button to login p.s There is also a different bit but thats for the button if you need this part then please ask

I've got an idea for simplifying my code and avoid a bunch of switch functions but don't know how, though I assume it's possible.

How do I write a function to change/insert only part of an img src?

in other words something along the lines of

if url contains: "/folder1/folder3/";

change this to: "/folder1/ folder2 /folder3/";

So I have a few divs that I'm hiding and showing whenever a you click on a link. So I'm a newbie at JavaScript and this is the best way I know how to do this.


var divElement = '';
function show(divElement) {

if(divElement == 'add') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='block';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('deletedTutorial').style.display='none';
}
else if(divElement == 'edit') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='block';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('deletedTutorial').style.display='none';
}
else if (divElement == 'images') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='block';
document.getElementById('deletedTutorial').style.display='none';
}
else if(divElement == 'pending') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='block';
document.getElementById('deletedTutorial').style.display='none';
}
else if(divElement == 'upload') {
document.getElementById('uploadImages').style.display='block';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('deletedTutorial').style.display='none';
}
else if(divElement == 'delete') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='none';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('deletedTutorial').style.display='block';
}

}


That is a awful lot of code to do just a few simple things. But don't get me wrong it works... I just wondered if there is a cleaner way of doing this.

Thanks,
Jon W

I want to change iframe.src value? So I use following code,when I click 'Click here',I find the iframe don't go to b.html page,why? Where is error? How to correct my code? Thanks

My code is follows:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
document.getElementById('popIframe').src='b.html';
}
</script>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">This is a test
<div id="bg" class="bg" style="display:none;"></div>
<a href="javascript:showDiv()">Click here</a>
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
</body>
</html>

I just placed this div named iframe_container in a table cell. There's an iframe and another div inside of it and when I went to fine tune the alignment I discovered I could change the width of the div but not the height
I can set it to 200 or 1000, it doesn't make the slightest difference. It seems to be clinging to the outside of the iframe. I can make it bigger by inserting breaks after the iframe but then the compass_rose div loses its absolute position for some reason

I searched the page for height tags that might be interfering with this but I've turned up squat. I took the height specs off the table but still no effect. Can anyone spot the problem?

<td style="width: 800px; height: 700px" valign="top" class="style3" align="left">
<div id="iframe_container" style="width:1000px; height=700; position: relative; overflow-x:auto; overflow-y:hidden">

<div id="compass_rose" style="top: 5px; left: 1200px; position: absolute; z-index: 2; visibility:visible;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div>

<iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer"></iframe>

</div>

</td>
</tr>
</table>