Jump to content

DarkxPunk

Members
 View Profile  See their activity

  • Posts

    465

  • Joined

  • Last visited

 Content Type 

Everything posted by DarkxPunk

  1. DarkxPunk
    So here is my JS: function hideShow(a) {a.innerHTML = a.innerHTML == "Row" ? "Row" : "Row";var show_hide_ref= a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref)show_hide.style.height == "100px" ? show_hide.style.height="1px" : show_hide.style.height="100px";show_hide.style.backgroundColor == "#ffffff" ? show_hide.style.backgroundColor="" : show_hide.style.backgroundColor="#ffffff";} As you can see its a simple toggle, but for some reason it ignores the blank "" and keeps it white. Any ideas on how to just remove it? Thanks!
  2. DarkxPunk
    That was it! Thank you dsonesuk!Thanks everyone else for your effort.
  3. DarkxPunk
    HTML: <!DOCTYPE html><html><head><meta charset="utf-8"><title>LED</title><link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8"><script src="js/script.js" charset="utf-8"></script></head><body><div id="pageWrap"><div class="row" id="row_1">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_2">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_3">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_4">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="info" id="info1">Info</div><div class="info" id="info2">Info</div><div class="info" id="info3">Info</div><div class="info" id="info4">Info</div></div></body></html> JS: /*function hideShow(a) {var element = a.parentNode.nextSibling;while (element.className != 'info') {element = element.nextSibling;}element.style.display = element.style.display == 'block' ? 'none' : 'block';a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';}*/ //get and store all info divs ahead of timewindow.onload = function(){var infoDivs = [];for(var i = 0, l = document.getElementsByTagName('div').length; i < l; i+=1){var div = document.getElementsByTagName('div')[i];if(div.className === 'info'){infoDivs.push(div);}}}function hideShow(element){var idNum = element.id.split('_')[1]; //split the passed in element and get the number//loop through the divs and show/hide the one want based on the number match of the one clickedfor(var i = 0, l = infoDivs.length; i < l; i += 1){var div = infoDivs[i];div.style.display = (div.id.index(idNum) >= 0) ? 'block' : 'none';}} /*window.onload = function(){//code goes here}*/
  4. DarkxPunk
    It keeps saying it cant find the var InfoDivs. I am sorry to be such a hassle I am just very new to wrapping my head around JS. I went through the tutorial and still am pretty much at a loss. I did make my own clock though Lol.
  5. DarkxPunk
    Well all I did was copy and paste your code. Made no changes. So the implementation is the same. I checked the console and nothing comes up. I am using Coda 2 for Mac which uses the stuff built into WebKit. Here is everything again: HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LED</title> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8"> <script src="js/script.js" charset="utf-8"></script></head><body> <div id="pageWrap"> <div class="row" id="row_1">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div> <div class="row" id="row_2">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div> <div class="row" id="row_3">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div> <div class="row" id="row_4">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div> <div class="info" id="info1">Info</div> <div class="info" id="info2">Info</div> <div class="info" id="info3">Info</div> <div class="info" id="info4">Info</div> </div></body></html> CSS: body {padding: 0;margin: 0;border: 0;width: 100%;height: 100%;font-size: 100%;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}h1,h2,h3,h4,h5,h6,p {color: #000000;}h4,p {font-size: 1em;}#pageWrap,.row,.info {width: 900px;margin: 0 auto;}.row,.info {width: 225px;float: left;text-align: center;}.info {display: none;} JS: /*function hideShow(a) {var element = a.parentNode.nextSibling;while (element.className != 'info') {element = element.nextSibling;}element.style.display = element.style.display == 'block' ? 'none' : 'block';a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';}*///get and store all info divs ahead of timevar infoDivs = [];for(var i = 0, l = document.getElementsByTagName('div').length; i < l; i+=1){ var div = document.getElementsByTagName('div')[i]; if(div.className === 'info'){ infoDivs.push(div); }}; function hideShow(element) { var idNum = element.id.split('_')[1]; //split the passed in element and get the number //loop through the divs and show/hide the one want based on the number match of the one clicked for(var i = 0, l = infoDivs.length; i < l; i += 1){ var div = infoDivs[i]; div.style.display = (div.id.index(idNum) >= 0) ? 'block' : 'hide'; }}
  6. DarkxPunk
    Thank you for all your help, but I am not wrapping my head around this it seems and the code you provided is not seeming to work. Any ideas? Now I am not getting any errors with it, but its just not supplying any results. Thanks for any help.
  7. DarkxPunk
    I understand, I just don't know how to achieve that. Could you offer up some sample code I could sort my head through? I learn this allot easier through reverse engineering code than I do trying to build it up from very little knowledge (my very little knowledge) of JS. Thanks for the help.
  8. DarkxPunk
    Hey everyone, The title may be a bit confusing, so let me explain. My goal is to have a div appear below another div based upon the id used. Now there will be multiple of these, so I need the JS function to be reusable. Currently I have the HTML like so: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LED</title> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8"> <script src="js/script.js" charset="utf-8"></script></head><body> <div id="pageWrap"> <div class="row" id="row1">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div> <div class="row" id="row2">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div> <div class="row" id="row3">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div> <div class="row" id="row4">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div> <div class="info" id="info1">Info</div> <div class="info" id="info2">Info</div> <div class="info" id="info3">Info</div> <div class="info" id="info4">Info</div> </div></body></html> the CSS like so: body {padding: 0;margin: 0;border: 0;width: 100%;height: 100%;font-size: 100%;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}h1,h2,h3,h4,h5,h6,p {color: #000000;}h4,p {font-size: 1em;}#pageWrap,.row,.info {width: 900px;margin: 0 auto;}.row,.info {width: 225px;float: left;}.info {display: none;} and the JS like so: function hideShow(a) {var element = a.parentNode.nextSibling;while (element.className != 'info') {element = element.nextSibling;}element.style.display = element.style.display == 'block' ? 'none' : 'block';a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';} Now as you will notice I have each Row id numbered, and each Info id numbered, along with that the Info divs fit under the Row divs. What I would like is if I hit Row1 it will show Info1, if I hit Row2 it will show Info2, etc. I could achieve this by creating a new JS function for each use, but that would be a waste. Any ideas how to automate this with one single function? Also if you have any ideas of how to keep the placement of the Info divs while still hiding it, that would be appreciated as well. Honestly though I think I could eventually figure that one out, still need the help with the JS though. Thanks for the help. P.S. I am still learning JS, once I get this down I won't need to ask for such noobie questions.
  9. DarkxPunk

    JavaScript can be complicated.

  10. DarkxPunk

    Wishing I could post. Since I do have a legitimate question for assistance. I will wait. I will wait... :(

×
×
  • Create New...