SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change data (on same page) with button

    I have a site which sells a variety of parts and accessories for trucks. Some of these accessories are model-specific. So, in a DIV on the page, I want to insert the right part numbers via an already formated html table (in an external file), which, of course, also contains the appropriate links to those items in my secure shopping area. I want to do this with 5 buttons on the page, one that says FORD, one that says DODGE, and so forth. The data in the div changes depending on the button pushed.

    I'm thinking that this is a rather straight-forward script, however I am not too familiar with javascript (only have expeience with rollovers and "window.open=''") and hope that someone can point me in the right direction...

    Thanks in advance!
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    small or larger data

    if its small data that doesn't need to be picked up by google its best to use innerHTML, setting your data as variables. use this for numbered data or data with few words.

    but if its large amounts of data as sentances, its better to put them all on the page in the same 'div' area and change the z-index of the required data. This lets google and other search engines find the data.

    hope that helps
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's actually not at all easy to read an external HTML file using javascript. Your best bet would be to include the information in the page, but hide it using CSS or similar, then use the button to reveal the information.

    Including stuff from other files is best done with SSI (server-side includes).

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a) What's the point with this operation? Reduce the amount of data transferred to the client or make the page more easy to read?
    b) Target browsers? IE only, or all modern browsers, or all the way back to NS4 etc?

  5. #5
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Make it more readable...

    Thank you folks very much for responding.

    Yes, my goal is to make the page more readable. Many of my customers need a more logical way of finding their information. I thought that by doing it in this way, they would feel more confident that they indeed found what they were looking for.

    Also, I was thinking of using includes, and that perhaps each button would be linked to a different included html table. (My pages are all forced to be parsed as .asp). The info I want to call is very simple: one of 5 different html tables containing a few part numbers along with their respective descriptions, which would also be links with CSS rollover effects.

    I had never thought of just using z-index to bring to the front the info needed at the click of a button. That seems simple enough. Also, maintaining our search-engine viability is very important to me, so this would seem the most practical implimentation. Would this require the use of javascript, or can it be done with CSS exclusively??

    What would be the most logical way of impleminting this goal?

    Thanks again.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  6. #6
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Make it more readable...

    Originally posted by garlinto
    Yes, my goal is to make the page more readable...
    Then the "change zIndex" (or visibility) option is the best for you
    Put the 5 tables in divs/layers (with same size and position) and change their css properties with javascript (yes, script is required)

  7. #7
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    zIndex alteration thru javascript

    Thank you jofa, I really appreciate your assistance. Now, I was wondering where I can go to learn about how to write a script that will find and adjust the zIndex of the 5 DIV's and alter them so that the appropriate DIV is viewed.

    I know very little javascript, but I do know that each button will have to have a name that corresponds to the ID of its respective DIV. On onClick, the requested DIV is brought to the front. However, does this mean that the same button (by this I mean the script called by the button)needs to adjust, or "move back" the zIndex of the previously displayed DIV? And how does that button/script know which DIV is the previous DIV?

    Am I on the right track here?
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  8. #8
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Example:
    Code:
    <html>
      <head>
      	<style>
    		table
    		{
    			position: absolute;
    			left: 200px;
    			top: 100px;
    			width: 200px;
    			height: 200px;
    			background-color: #cccccc;
    			z-index: 0;
    		}
      	</style>
      	<script language="javascript">
      		function showTable(id)
      		{
    	  		var tables = document.getElementsByTagName("table");
    	  		for(var i = 0; i < tables.length; i++)
    	  		{
    		  		var table = tables[i];
    		  		if(table.id == id)
    		  		{
    			  		table.style.zIndex = 1;
    		  		}
    		  		else
    		  		{
    			  		table.style.zIndex = 0;
    		  		}
    	  		}
      		}
      	</script>
      </head>
      <body>
      	<form>
    		<input type="button" value="Show table 1" onclick="showTable('tb1')">
    		<input type="button" value="Show table 2" onclick="showTable('tb2')">
    		<input type="button" value="Show table 3" onclick="showTable('tb3')">
    		<input type="button" value="Show table 4" onclick="showTable('tb4')">
    		<input type="button" value="Show table 5" onclick="showTable('tb5')">
    		<table id="tb1">
    			<tr><td>Hello, I'm table 1</td></tr>
    		</table>
    		<table id="tb2">
    			<tr><td>Hello, I'm table 2</td></tr>
    		</table>
    		<table id="tb3">
    			<tr><td>Hello, I'm table 3</td></tr>
    		</table>
    		<table id="tb4">
    			<tr><td>Hello, I'm table 4</td></tr>
    		</table>
    		<table id="tb5">
    			<tr><td>Hello, I'm table 5</td></tr>
    		</table>
      	</form>
      </body>
    </html>

  9. #9
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    WOW!

    Jofa, thank you very much for the code. While I appreciate your effort on my behalf, (and you saved me a lot of time!) I would have been content with just a push/shove in the right direction, to the point where I could have written the code myself. What you have done is indeed more than I could of asked for. Thank you for taking the time.

    Incidently, I understand the code you wrote, and your way of doing it is actually more simple than I had invisioned. Sometimes I tend to make things more difficult than they really are!

    Thanks again.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  10. #10
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are welcome
    Three minutes of hard work...

    NB! The code will not work in NS4, and in the real page I guess the tables will have different heights, and it's a good idea to put each table inside a div

  11. #11
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Good Idea...

    Originally posted by jofa
    ...the tables will have different heights, and it's a good idea to put each table inside a div
    Yeah, thought of that too. Will do.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  12. #12
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    check this out..........

    PHP Code:
    <style>
    #table1,#table2,#table3,#table4,#table5 {
                
    positionabsolute;
                
    left200px;
                
    top100px;
                
    width200px;
                
    height200px;
                
    background-color#cccccc;
                
    overflowscroll;
                
    z-index: -1;
            }

    </
    style>

    <
    script>
    function 
    move(table,z) {
    document.getElementById(table).style.zIndex }
    </script>
    <div id=table1>table1</div>
    <div id=table2>table2</div>
    <div id=table3><table width=300 height=300>table3</table></div>
    <div id=table4>table4</div>
    <div id=table5>table5</div>
    <p onmouseover="move('table1',1)" onmouseout=move('table1',-1)>table1
    <p onmouseover=move('table2',1) onmouseout=move('table2',-1)>table2
    <p onmouseover="move('table3',1)" onmouseout=move('table3',-1)>table1
    <p onmouseover=move('table4',1) onmouseout=move('table4',-1)>table2
    <p onmouseover="move('table5',1)" onmouseout=move('table5',-1)>table1 
    Notice that all the tables are in the same place, yet table3 is the only one too big, so it scrolls

    also I created the function move(table,z), so now I tell which div to move and where to move it. Much better I think......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  13. #13
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    Thanks a lot! I'm gonna give it a try.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  14. #14
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    a bit of practise with visibility,

    This works better still, leaving the last onmouseover at the top......
    Code:
    <style>
    #table1,#table2,#table3,#table4,#table5 {
    			position: absolute;
    			left: 200px;
    			top: 100px;
    			width: 200px;
    			height: 200px;
    			background-color: #cccccc;
    			overflow: scroll;
    			visibility: hidden;
    		}
    
    </style>
    <script>
    prevtable="table1"
    function show(table) {
    document.getElementById(prevtable).style.visibility = "hidden";
    document.getElementById(table).style.visibility = "visible";
    prevtable=table;}
    </script>
    <div id=table1>table1</div>
    <div id=table2>table2</div>
    <div id=table3><table width=180 height=300>table3</table></div>
    <div id=table4>table4</div>
    <div id=table5>table5</div>
    <p onmouseover=show('table1')>table1
    <p onmouseover=show('table2')>table2
    <p onmouseover=show('table3')>table3
    <p onmouseover=show('table4')>table4
    <p onmouseover=show('table5')>table5
    table3 should only have downward scroll now as well.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  15. #15
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And for a bit of cross-browser compatibility try this:

    Code:
    <script language="javascript" type="text/javascript">
       var ns4 = document.layers;
       var ie4 = document.all;
       var nn6 = document.getElementById && !document.all;
    
       function show(element) {
          if (ns4)
             document.layers[element].visibility = 'show';
          else if (ie4)
             document.all[element].style.visibilty = 'visible';
          else if (nn6)
             document.getElementById(element).style.visibility = 'visible';
       }
    </script>
    
    <div id="dodge" style="visibility: hidden;">
      <table>....Put your stuff in here....</table>
    </div>
    
    <input type="button" onClick="show('dodge');" value="Dodge">
    You might want to add a "hide" function, too, or just retool the "show" function a little bit so that it will show it if its hidden and hide it if its visible...


Bookmarks

Posting Permissions

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