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.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Show/hide javascript help needed, bookmarking purposes.

    Hello,
    I am desigining a support site for a large corporation. Right now i'm using the code below to show/hide divs within a page. What I need is something that can process the http://somesite.com/somepage.htm#somediv, so that when a CSR is offering help to a customer they can link them directly to a specific DIV and show that instantly as the active div on the load of the page.
    I think what i am looking for is something in the 'showhide' block that onload, checks the #somediv in the addressbar and sets that div as the default visible block for that link.

    Code:
    function initShowHide() {
    	if (document.getElementById && document.getElementsByTagName && document.createTextNode) {
    		hide();
    		var toggle = document.getElementById('toggle');
    		var as = toggle.getElementsByTagName('a');
    		for (var i = 0; i < as.length; i++) {
    			as[i].onclick = function() {
    				show(this);
    				return false;
    			}
    		}			
    	}
    }
    
    function show(s) {
    	hide();
    	var id = s.href.match(/#(\w.+)/)[1];
    	document.getElementById(id).style.display = 'block';
    }
    
    function hide() {
    	var toggleable = document.getElementById('toggleable').getElementsByTagName('div');
    	for (var i = 0; i < toggleable.length; i++) {
    		toggleable[i].style.display = 'none';
    	}
    }
    
    window.onload = initShowHide;

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    #somediv would have to be an anchor withing the document.

    <a name=somediv></a>

    you do not need an href value for the anchor tag.

    because of this i would reccomend that you use the the below code to do such a thing



    put the below script in the source code of the file that the CSR is proviing a link for.

    also be sure that when the link is provided that it look like this: http://www.yoursite.com/thefile.html?divname=div_one
    the above link when clicked on would open up the html file, and when the getdiv() function is called it will grab the value of the divname variable in the window location querystring. (what is after the " ? ").

    the below code just alerts you the value of the divname, but you can change that to display the div with that id.
    Code:
    <script type=text/javascript>
    function Querystring(qs) { // optionally pass a querystring to parse
    	this.params = new Object()
    	this.get=Querystring_get
    	
    	if (qs == null)
    		qs=location.search.substring(1,location.search.length)
    
    	if (qs.length == 0) return
    	qs = qs.replace(/\+/g, ' ')
    	var args = qs.split('&') // parse out name/value pairs separated via &
    	for (var i=0;i<args.length;i++) {
    		var value;
    		var pair = args[i].split('=')
    		var name = unescape(pair[0])
    
    		if (pair.length == 2){
    			value = unescape(pair[1])}
    		else{
    			value = name}
    		this.params[name] = value
    	}
    }
    
    function Querystring_get(key, default_) {
    	if (default_ == null) default_ = null;
    	var value=this.params[key]
    	if (value==null) value=default_;
    	return value
    }
    function getdiv(){
    var q=new Querystring();
    var divN=q.get("divname");
    alert(divN);
    
    }
    
    </SCRIPT>
    Last edited by brandonH; 11-04-2006 at 10:41 AM.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think that's kinda the right idea, however that involves quite a bit of changes to the current site.

    As it stands right now the code for the html in each page appearas as following:
    Code:
    	<div id="toggle">
    		<div align="center" id="mygroup">
    		  <table border="0">
                    <tr>
                      <td width="87" height="74"><a href="#phoneservice" class="style1">phone<br>service</a></td>
                      <td width="140"><a href="#tele">teleconferencing</a></td>
                      <td width="107"><a href="#comp">computer &amp; related items</a></td>
                      <td width="87"><a href="#mobile">mobile</a></td>
                      <td width="87"><a href="#something">something</a></td>
                      <td width="87"><a href="#data">data</a></td>
                      <td width="87"><a href="#nhire">new hire</a></td>
    				  <td width="104"><a href="#contractor">contractor</a></td>
                    </tr>
              </table><br>
     </div>
    	</div>
    	                  <div id="toggleable">
    	  <div id="phoneservice">
    				<h2>phone service<br>
    </h2>
    As you can see in the above code, the toggle DIV, swaps through the toggleable divs, what i'm trying to do is have the requested one open when the link is clicked in an e-mail for example... we don't want the customer to have to click through the toggleable options when we're trying to direct them someplace specific. This probably wasn't the best method to design the pages. But the client loved the look and feel.

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    I dont think i get what you want then....

    the script i gave should work...

    you email the user the link as so:
    http://www.thesite.com/somepage.html...e=phoneservice

    and when they click on it , itgoes to the somepage.html, then the script finds the divname var in the query string and grabs the value.

    the script i provided you only alerts you of the value, but you can have it display the div with the id of that value like so:

    document.getElementById(divN).style.display="block";

    that is if you arent using style.visibility



    please explain further as to what you want exactly. I may just be thinking you want one thing when you want something totally different.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I'm seeing what you're describing now, i just have to figure out how to make it work with the javascript file i've made.

    I'm assuming i just attach that script you made to each page, and then add a line of code in my javascript that asks 'if div_id='not null' then turn on div id, where div_id = div_id. The programming makese sense in myhead, but the implementation draws a blank.

    I'm a total javascript noob here. I usually avoid it.

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    if you can, provide me with the source of one of the pages, and all related files (.js , .css) if there are any.


    I still dont know what you are wanting exactly... do you want <div>'s to show and hide, or <a>'s. cuz your first post refers to #, which is used for anchor tags (links).
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #7
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Below is the html code for the pages, i'm showing 2 divs that are to be turned on and off. The javascript file was the code in the first message on this thread. This should give an exact idea of what is going on with the code.


    Code:
    <html>
    <head>
    <title>The *** System - request new item or service</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
    <link rel="stylesheet" type="text/css" href="css/newsimple.css" >
    <link rel="stylesheet" type="text/css" href="css/newhomepage.css" >
    <script language="JavaScript" src="http://**********/scripts/showHide_ex1a.js" type='text/javascript'></script>
    </head>
    <body>
    <TABLE cellSpacing=0 cellPadding=0 width=756 border=0 align="center">
    <!--DWLayoutTable-->
      <tr>
        <TD noWrap bgColor=#ffffff colspan="3" height="16"><DIV align=left class=crummy >&nbsp;Where you are: <A 
          href="http://*******"> BT </A> : <a href="index.htm">*** Home</a> : request new item or service </DIV></TD>
      </tr>
    
    <tr>
        <td height="70" colspan="3" valign="top"><h3 align="left"><br>
          request new item or service</h3><br>
    <p>Click a button below to navigate into a section.</p></td>
      </tr>
    <tr>
        <td colspan="3" valign="top">
    <!-- begin toggle selector div tag -->
    	<div id="toggle">
    		<div align="center" id="mygroup">
    		  <table border="0">
                    <tr>
                      <td width="87" height="74"><a href="#phoneservice" class="style1">phone<br>service</a></td>
                      <td width="140"><a href="#tele">teleconferencing</a></td>
                      <td width="107"><a href="#comp">computer &amp; related items</a></td>
                      <td width="87"><a href="#mobile">mobile</a></td>
                      <td width="87"><a href="#TTV">something</a></td>
                      <td width="87"><a href="#data">data</a></td>
                      <td width="87"><a href="#nhire">new hire</a></td>
    				  <td width="104"><a href="#contractor">contractor</a></td>
                    </tr>
              </table><br>
     </div>
    
    	</div>
    <!-- end toggle selector div tag -->
    	<!-- begin invisible section -->
    	                  <div id="toggleable">
    	<!-- begin individial section -->
    	  <div id="phoneservice">
    				<h2>phone service<br>
    </h2>
    				<p>info about the service</p>
    				</div>
    	<!-- end individial section -->
    		<!-- begin individial section -->
    	  <div id="tele">
    				<h2>teleconferencing<br>
    </h2>
    				<p>info about the service</p>
    				</div>
    	<!-- end individial section -->
    				</div></td></tr>
    </table>
    </body>
    </html>

  • #8
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    ok, i think i got it for you....

    this would be a link you would email the user:

    http://www.thesite.com/thefile.htm?divname=#tele (not an actual link)

    and you can add my script in with your external script.

    here is the combined outcome:

    .js file:
    Code:
    function initShowHide() {
    	if (document.getElementById && document.getElementsByTagName && document.createTextNode) {
    		hide();
    		var toggle = document.getElementById('toggle');
    		var as = toggle.getElementsByTagName('a');
    		for (var i = 0; i < as.length; i++) {
    			as[i].onclick = function() {
    				show(this.href);
    				return false;
    			}
    		}			
    	}
    }
    function show(s) {
    	hide();
    	var id = s.match(/#(\w.+)/)[1];	
    document.getElementById(id).style.display = 'block';
    }
    function hide() {
    	var toggleable = document.getElementById('toggleable').getElementsByTagName('div');
    	for (var i = 0; i < toggleable.length; i++) {
    		toggleable[i].style.display = 'none';
    	}
    }
    function Querystring(qs) { // optionally pass a querystring to parse
    	this.params = new Object()
    	this.get=Querystring_get
    	
    	if (qs == null)
    		qs=location.search.substring(1,location.search.length);
    
    	if (qs.length == 0) return
    	qs = qs.replace(/\+/g, ' ')
    	var args = qs.split('&') // parse out name/value pairs separated via &
    	for (var i=0;i<args.length;i++) {
    		var value;
    		var pair = args[i].split('=')
    		var name = unescape(pair[0])
    
    		if (pair.length == 2){
    			value = unescape(pair[1])}
    		else{
    			value = name}
    		this.params[name] = value
    	}
    }
    function Querystring_get(key, default_) {
    	if (default_ == null) default_ = null;
    	var value=this.params[key]
    	if (value==null) value=default_;
    	return value
    }
    function getdiv(){
    var q=new Querystring();
    var divN=q.get("divname");
    if(divN==null){return true;}else{
    if(divN.indexOf("%23")!='-1'){
    divN.replace("%23","#");}else{
    show(divN);}}
    }
    window.onload = initShowHide;setTimeout("getdiv()",200);
    html file:
    Code:
    <html>
    <head>
    <title>The *** System - request new item or service</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
    <link rel="stylesheet" type="text/css" href="css/newsimple.css" >
    <link rel="stylesheet" type="text/css" href="css/newhomepage.css" >
    <script type="text/javascript" src="showHide_ex1a.js"></script>
    </head>
    <body>
    <TABLE cellSpacing=0 cellPadding=0 width=756 border=0 align="center">
    <!--DWLayoutTable-->
      <tr>
        <TD noWrap bgColor=#ffffff colspan="3" height="16"><DIV align=left class=crummy >&nbsp;Where you are: <A 
          href="http://*******"> BT </A> : <a href="index.htm">*** Home</a> : request new item or service </DIV></TD>
      </tr>
    
    <tr>
        <td height="70" colspan="3" valign="top"><h3 align="left"><br>
          request new item or service</h3><br>
    <p>Click a button below to navigate into a section.</p></td>
      </tr>
    <tr>
        <td colspan="3" valign="top">
    <!-- begin toggle selector div tag -->
    	<div id="toggle">
    		<div align="center" id="mygroup">
    		  <table border="0">
                    <tr>
                      <td width="87" height="74"><a href="#phoneservice" class="style1">phone<br>service</a></td>
                      <td width="140"><a href="#tele">teleconferencing</a></td>
                      <td width="107"><a href="#comp">computer &amp; related items</a></td>
                      <td width="87"><a href="#mobile">mobile</a></td>
                      <td width="87"><a href="#TTV">something</a></td>
                      <td width="87"><a href="#data">data</a></td>
                      <td width="87"><a href="#nhire">new hire</a></td>
    				  <td width="104"><a href="#contractor">contractor</a></td>
                    </tr>
              </table><br>
     </div>
    
    	</div>
    <!-- end toggle selector div tag -->
    	<!-- begin invisible section -->
    	                  <div id="toggleable">
    	<!-- begin individial section -->
    	  <div id="phoneservice">
    				<h2>phone service<br>
    </h2>
    				<p>info about the service</p>
    				</div>
    	<!-- end individial section -->
    		<!-- begin individial section -->
    	  <div id="tele">
    				<h2>teleconferencing<br>
    </h2>
    				<p>info about the service</p>
    				</div>
    	<!-- end individial section -->
    				</div></td></tr>
    </table>
    </body>
    
    
    
    
    </html>

    i really hope that is what you are wanting....
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #9
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    i get the following error now
    http://somesite/req_new.htm?divname=#tele

    line: 17
    char: 2
    Error: 'match(...).1' is null or not an object.

    not exactly descriptive is it?

    it seems to be pointing @
    var id = s.match(/#(\w.+)/)[1];

    And yes, what you're helping me make is exactly what i was looking for.
    Last edited by ryanbr; 11-06-2006 at 09:51 PM.

  • #10
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    how are you testing the file?

    are you typing the link value right into the addressbar?
    if so, the code doesnt work.

    when you send a link like below to someone:
    http://www.somesite.com/thefile.html?divname=#tele

    that string doesnt actually get passed to the page jsut like that.

    when the user clicks on the link the below shows up in theier addressbar:

    http://www.somesite.com/thefile.html?divname=%23tele

    my script looks for the %23 and then replaces it with a #.

    needless to say, the script doesnt work if you hand type the filepath into the address bar. if you want to test it, create a seperate html file with a link in it:

    <a href=thefile.html?divname=#tele>tele</a>

    then click that link, and it will work.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #11
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help, it's almost ready to go live.

  • #12
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    found a fix to the problem....


    replace the part of the script i wrote (function getdiv() )

    with this:

    Code:
    function getdiv(){
    var q=new Querystring();
    var divN=q.get("divname");
    if(divN==null){return true;}else{
    var loc=window.location.toString();
    divN.toString();
    diva='';
    eq=loc.indexOf("=");
    i=eq-(-1);
     while(i<loc.length){diva+=loc.charAt(i);i++;}
    if(divN==''){divN=diva;}
    show(divN);
    }
    }

    that will allow you to type in the address bar the # symbol
    Last edited by brandonH; 11-06-2006 at 11:28 PM. Reason: correction
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

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