Jump to content

DarkxPunk

Members
 View Profile  See their activity

  • Posts

    465

  • Joined

  • Last visited

 Content Type 

Posts posted by DarkxPunk

    Remove style.backgroundColor

    in JavaScript

    Posted · Edited by 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!

    How to carry action on div based upon id but still be reusable

    in JavaScript

    Posted

    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}*/

    How to carry action on div based upon id but still be reusable

    in JavaScript

    Posted

    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';  }}

    How to carry action on div based upon id but still be reusable

    in JavaScript

    Posted

    An easy way that wouldn't depend on the node structure would be to get the element's ID, remove "row" to get just the number, add the number to "info" and use that as the ID of the element to show. That's going to require that you use "row#" and "info#" for your elements, but it won't require you to use a certain node structure in your HTML.
    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.

    How to carry action on div based upon id but still be reusable

    in JavaScript

    Posted

    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. :D 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.

×
×
  • Create New...