dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Toggle a <div>

  1. #1
    Join Date
    Oct 2003
    Location
    Pensacola, Fl
    Posts
    241

    Toggle a <div>

    Hey, just following up on that last thread about data arrays and related JavaScript. I've set up my index page with a little more order. Though I'm sure I've still got some kinks to work out, it's in far better shape. One of the kinks I'm trying to work out is a function in my script that's supposed to toggle a <div> display. I'm including the index page in full as a text file, so if anyone wants to look at it they can. The function that I'm having trouble with is ToggleDiv in my script. The subdiv that I'm expanding won't toggle to no display when it should. If anyone wants to take a look at it and give me some feedback I'd appreciate it. After that's straight, I can work on sorting my data array and see if I have any problems now. Thanks for the forum...- -okham
    Attached Files Attached Files
    Your friendly neighborhood Okham. -o-o-

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,453
    Still a confusing script and IMHO looks needlessly and overly complicated.

    Where is the current working version (on the web) as it might give a better idea of how you are attempting to resolve things.

    IMHO you could make better use of HTML and use fewer variables as well as that you can use HTML attributes to contain some of the data.

    Then theres this
    Code:
    for(var i=1;i<545;i++)
    {
    	IncPath="CAM_Items/"+i+".js";
    	scriptPath="newScript"+i;
    	newInclude=document.createElement("SCRIPT");
    	newInclude.setAttribute("id",scriptPath);
    	newInclude.src=IncPath;
    	document.head.appendChild(newInclude);
    	onLoad=setLoad();
    }
    Really? loading 544 javascripts? we have no idea what these are as you have yet to give an example of what they contain, it is helpful to know what they are and not some pseudo representation of what they do or are.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,453
    In answer to your question about toggle a div...
    Code:
    function toggleDiv(id){
    	var tmp = document.getElementById(id);
    	tmp.style.display = tmp.style.display=="none" ? "block" : "none";
    }
    pass the Div ID to the function and it will toggle between visibility and not visible
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Oct 2003
    Location
    Pensacola, Fl
    Posts
    241
    Quote Originally Posted by \\.\ View Post
    Still a confusing script and IMHO looks needlessly and overly complicated.

    Where is the current working version (on the web) as it might give a better idea of how you are attempting to resolve things.

    IMHO you could make better use of HTML and use fewer variables as well as that you can use HTML attributes to contain some of the data.

    Then theres this
    Code:
    for(var i=1;i<545;i++)
    {
    	IncPath="CAM_Items/"+i+".js";
    	scriptPath="newScript"+i;
    	newInclude=document.createElement("SCRIPT");
    	newInclude.setAttribute("id",scriptPath);
    	newInclude.src=IncPath;
    	document.head.appendChild(newInclude);
    	onLoad=setLoad();
    }
    Really? loading 544 javascripts? we have no idea what these are as you have yet to give an example of what they contain, it is helpful to know what they are and not some pseudo representation of what they do or are.



    I haven't posted a version of what I'm working on now, but I have posted a version which is completely html. Of course, in that version it took a new file for just about everything, and changing or adding items would be insane. I was looking for a means so that adding an item was simply to make one numbered file with all it's info contained in it, and simply call it up when someone wants to look at it. Go to
    Code:
    creativeedge.freehostia.com
    to see an example of what I'm basically trying to get at. Adding the scripts was in response of a way to include the items[] info and read it into a working array for me to sort and display. I didn't know of any other way I could do that, given what I could do with JavaScript at this point. I'd be open to suggestions on some other way to handle that need. Also, that url has a working PayPal integrated, but don't order anything as I haven't got my license yet. That's why I don't advertise it yet. At this point I don't want any orders.

    Here's one of the item files that I use, so you can see what I'm using them for:
    Code:
    outofstock=outofstock_470=0; 
    itemname=itemname_470="Mocafe Caffe Latte";
    itemno=itemno_470=470;
    itempic=itempic_470="Pics/470.jpg";
    itemtype=itemtype_470="Frappe & Latte";
    itemco=itemco_470="CoffeeAM";
    saleinfo=saleinfo_470="";
    itemcost=itemcost_470=18.95;
    onecost=onecost_470=18.95;
    casecost=casecost_470=67.95;
    bag1=bag1_470=0;
    bag5=bag5_470=0;
    reg1=reg1_470=0;
    decaf1=decaf1_470=0;
    reg5=reg5_470=0;
    decaf5=decaf5_470=0;
    iteminfo1=iteminfo1_470="Mocafe Caffe Latte, 3lb can";
    iteminfo2=iteminfo2_470="Buy Case of Mocafe Mixes, 4- 3lb cans/bags (Mix & Match)";
    caseprice=caseprice_470="Case as low as $"+casecost;
    bottleNo=bottleNo_470=4;
    selectLoad=selectLoad_470=0;
    chkagain=chkagain_470=0;
    chkDiv=1;
    bagDiv=0;
    regDecafDiv=0;
    grindDiv=0;
    listSelect=listSelect_470="Frappe & Latte Mixes";
    items[470]=new Item(itemname_470,itemno_470,itemcost_470,itempic_470,listSelect_470);
    
    
    Case6[470]=[
    ["Choose Can/Bag",0.00,"*Required"],
    ["Azteca D'oro Mexican Spiced Cocoa Can",16.987,""],
    ["Caffe Latte Can",16.987,""],
    ["Caramel Frappe Mix Bag",16.987,""],
    ["Chocolate Mint Mocha Frappe Bag",16.987,""],
    ["Cookies & Cream Frappe Bag",16.987,""],
    ["Java Chip Frappe Bag",16.987,""],
    ["Madagascar Vanilla Smoothie Can",16.987,""],
    ["Matcha Green Tea Bag (+3.00)",19.987,""],
    ["No Sugar Added Vanilla Latte Frappe Bag",16.987,""],
    ["Original Mocha Frappe Can",16.987,""],
    ["Precious Divinity Spiced Chai Bag",16.987,""],
    ["Tahitian Vanilla Latte Can",16.987,""],
    ["Toffee Mocha Frappe Bag",16.987,""],
    ["White Chocolate Frappe Bag",16.987,""],
    ["Wild Tribe Mocha Can",16.987,""]
    ];
    Your friendly neighborhood Okham. -o-o-

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,453
    Having seen the file, you really would be better using a JSON type approach and request the text file from the server when it is needed using AJAX.

    from the W3Schools web page, a simple AJAX routine to pull a text file from the server without need for a PHP script. You will find two examples, one is a basic one and the other is a version that allows a function call https://www.w3schools.com/js/js_ajax_examples.asp

    So your data file can be a JSON string that you parse using JSON.parse( stringToParse ); to get the string turned in to usable data entities.

    Code:
    var json = '{ "item":12, "tea":"Earl Grey" }'; // NOTE this HAS to be a string
    myTea = JSON.parse( json );
    console.log("Item : " + myTea.item );
    console.log("Item : " + myTea.tea );
    will output

    Item : 12
    Item : Earl Grey

    however, in a file the data only needs to be like this
    Code:
    {
        "name":"John",
        "age":31,
        "pets":[
            { "animal":"dog", "name":"Fido" },
            { "animal":"cat", "name":"Felix" },
            { "animal":"hamster", "name":"Lightning" }
        ]
    }
    (example from W3Schools) https://www.w3schools.com/Js/js_json_parse.asp

    so organising your data files can be simpler, produce data objects to better express your data and reduce the number of variables you are creating. So in the example above, you can turn your data set in to an object data set that does not rely on creation of an individual variableset, eg a file called Item_470.txt :
    Code:
    {	"name":"Mocafe Caffe Latte",
    	"item":470, 
    	"selectName":"Frappe & Latte Mixes",
    	"picture":"Pics/470.jpg",
    	"manufacturer":"CoffeeAM",
    	"saleinfo":"",
    	"itemcost":{ "single":18.95, "onecost":18.95, "casecost":67.95 },
    	"iteminfo":{ 1:"Mocafe Caffe Latte, 3lb can", 2:"Buy Case of Mocafe Mixes, 4- 3lb cans/bags (Mix & Match)" },
    	"caseprice":"Case as low as $",
    	"bottleNo":4,
    	"selectList":[	
    		{"name":"Choose Can/Bag", "value":0.00, "select":"*Required"}, 
    		{"name":"Azteca D'oro Mexican Spiced Cocoa Can", "value":16.987, "select":""},
    		{"name":"Caffe Latte Can", "value":16.987, "select":""}, 
    		{"name":"Caramel Frappe Mix Bag", "value":16.987, "select":""},
    		{"name":"Chocolate Mint Mocha Frappe Bag", "value":16.987, "select":""}, 
    		{"name":"Cookies & Cream Frappe Bag", "value":16.987,"select":""},
    		{"name":"Java Chip Frappe Bag", "value":16.987, "select":""}, 
    		{"name":"Madagascar Vanilla Smoothie Can", "value":16.987,"select":""},
    		{"name":"Matcha Green Tea Bag (+3.00)", "value":19.987, "select":""}, 
    		{"name":"No Sugar Added Vanilla Latte Frappe Bag", "value":16.987,"select":""},
    		{"name":"Original Mocha Frappe Can", "value":16.987, "select":""}, 
    		{"name":"Precious Divinity Spiced Chai Bag", "value":16.987,"select":""},
    		{"name":"Tahitian Vanilla Latte Can", "value":16.987, "select":""}, 
    		{"name":"Toffee Mocha Frappe Bag", "value":16.987,"select":""},
    		{"name":"White Chocolate Frappe Bag", "value":16.987, "select":""}, 
    		{"name":"Wild Tribe Mocha Can", "value":16.987,"select":""} ],
    	"listSelect":"Frappe & Latte Mixes",
    	"outofstock":0
    }
    then fetched by AJAX call, parsed by JSON.parse to make a data object that you can extract the information you need. for example if you had AJAX return a string from the server items[470] = JSON.parse(this.responseText); would result in an object where

    items[470].name would = Mocafe Caffe Latte, the select menu data would be in items[470].selectList and each element used to build the drop down menus or insert in to the options lists.

    You would only really need to load up the options as and when needed so you are not swamping the browser with too much data and not using up huge amounts of memory.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  6. #6
    Join Date
    Oct 2003
    Location
    Pensacola, Fl
    Posts
    241
    I'd be interested in views of what I can contain in html code that I have in variables now. I'm not sure how I can pare down my html code.
    Your friendly neighborhood Okham. -o-o-

  7. #7
    Join Date
    Oct 2003
    Location
    Pensacola, Fl
    Posts
    241
    AJAX is new to me. I've got to read the examples in w3schools and see how I can adapt it to what I'm trying to do. Having the ingredients and baking a cake are two different things...lol. Well, sounds interesting. Gotta mull around with it a bit.
    Your friendly neighborhood Okham. -o-o-

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,453
    You need to firstly look at what you are repeating in terms of processes and look at turning those elements in to functions or prototypes, limit variables use, too many variables can lead to problems when trying to search for a bug, try using objects more to contain groups of data.

    Use CSS more and remove inline styling and that will reduce the HTML

    With the onclick elements, do you really need to set a global? Why not just pass the value as a parameter to the function, eg...
    <a href="#" onClick="picNum=1; pageCount=1; setPics('Black Tea',nextPrev);">
    vs
    <a href="#" onClick="setPics('Black Tea',nextPrev,1,1);">
    or you could utilize the data- attribute
    <a href="javascript:;" onClick="setPics(this);" data-item="Black Tea" data-picNum="1" data-pageCount="1">Data</a>
    which means when your function will need to use the .getAttribute() method, you can also update the data attached to that object, so it means less variables to use external to functions
    Code:
    function setPics( o ){
    	item = o.getAttribute("data-item");
    	picNum = o.getAttribute("data-picNum");
    	pageCount = o.getAttribute("data-pageCount");
    	console.log("Item : "+item);
    	console.log("picNum : "+picNum);
    	console.log("pageCount : "+pageCount);
    	pageCount++;
    	o.setAttribute("data-pageCount",pageCount);
    }
    Each time the link is clicked, the pageCount increases, the data is stored in the attribute tag for that link. This means you can store current information that is pertinent to the current state of operation.

    Everything really hangs on you sorting out your data, the scripting to accept and utilize the data and make more use of CSS thats not in line to limit the amount of information being kept in HTML that could just as easily be CSS or JSON format data.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  9. #9
    Join Date
    Oct 2003
    Location
    Pensacola, Fl
    Posts
    241

    AJAX and JSON

    Okay, I've read about AJAX and JSON, and I think I get the gist of it. I've pared down my index page and have been experimenting with the script. I created a txt file that's a keylist in JSON syntax. So far I haven't gotten it to work, and I'm not sure what the problem is. I'll attach the files so it can be seen what I've done with them. Suggestions are appreciated....lol - - okham
    Attached Files Attached Files
    Your friendly neighborhood Okham. -o-o-

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,453
    test.innerHTML=keys[1]; would not work, you parsed the string in to an object, that variable is keys.

    Your property is keylist
    Code:
    {
    	"keylist":[
    		{"numb":0,"key":"Empty"},
    		{"numb":1,"key":"Single-Origin Coffee"},
    		{"numb":2,"key":"Single-Origin Coffee"},
    		{"numb":3,"key":"Single-Origin Coffee"},
    		{"numb":4,"key":"Single-Origin Coffee"},
    so keys.keylist[1] would be an object of {"numb":1,"key":"Single-Origin Coffee"} which means :-

    keys.keylist[1].numb = 1
    keys.keylist[1]key = Single-Origin Coffee

    Also, it is generally a case of create the XMLHttp object then `open` the object for a query then attach event listeners.

    IMHO I would opt for the more flexable approach of passing a function to the AJAX routine, this would allow you to modify more easily

    Code:
    function loadKey(url,sortKey){
    	var xhttp;
    	xhttp=new XMLHttpRequest();
    	xhttp.open("GET",url,true);
    	xhttp.onreadystatechange=function(){
    		if(this.readystate==4 && this.status==200){
    			keys=JSON.parse(this.responseText);
    			test.innerHTML=keys.keylist[1].key;
    			sortKey(this);
    		}
    	};	
    	xhttp.send();
    }
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  11. #11
    Join Date
    Oct 2003
    Location
    Pensacola, Fl
    Posts
    241
    I think I understand....I'm starting to get the hang of it. Finally got the right syntax to call one of the properties as a test. You might be wondering why I made that "keylist" file....I just thought that a server host probably wouldn't appreciate me slogging through each individual item file each time someone changes a category, so I thought that I might make a keylist that could be downloaded quickly, and then sort that list by key which would also give me the corresponding item no. With the item no. I can just call the item files for those numbers to be displayed. I'll have to figure out how to adapt this for displaying the images. What do you think? I'm glad you introduced me to the AJAX/JSON relationship. It opens up some possibilities.
    Your friendly neighborhood Okham. -o-o-

  12. #12
    Join Date
    Oct 2003
    Location
    Pensacola, Fl
    Posts
    241
    Well, so far so good. I've been able to get my image display working, though when I try to sort my object properties so that they're displayed in alphabetical order, I encounter some anomalies. It's not so important for display view, but when I make an options list for choosing items, they need to be in alphabetical order. I'll cross that bridge when I come to it. I decided to keep my Item files in .js format. This project is good for keeping track of a limited number of items, but I wonder how the big hitters like Walmart handle the items when they have many thousands. So I've still got things to accomplish with this scripting, but eventually I'll look into building my site with PHP. Got a few questions over CSS now, but I'll go ask that in CSS forum. Thanks for the crash course in AJAX...lol. I'm sure I'll have other questions as time goes on.- -okham
    Your friendly neighborhood Okham. -o-o-

  13. #13
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,453
    Well they use a SQL database and server-side programming.

    Your sorting routine, when passing a function(a,s){ return a-b; } is ok for numerical but for text, you have to use the < in place of the - and in both field a & b the appropriate object property reference.

    so items.sort(function(a,s){ return a.itemName < b.itemName; }); to sort text field of the object, you should refer to what I have already pointed you to in the other thread you had.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  14. #14
    Join Date
    Oct 2003
    Location
    Pensacola, Fl
    Posts
    241
    Does SQL have it's own server-side language, or does one have to use PHP along with it?
    Your friendly neighborhood Okham. -o-o-

  15. #15
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,151
    PHP has to be installed first.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles