lines 12-22
function openmanu displays block on load , makes for loop array. creates obj variable based on array , takes manufacturer array that's defined links calls function. link in html instance have onmouseover event tied openmanu('manufacturer') , manu defined manufacturer, "description" in array corresponding manufacturer inserted html.
my problem i'm trying create function runs before goes through array , creates links depending on what's in array. since gets called once body loads links should present , links have onmouseover event second function lines 12-22 can called.
currently openmanu() works onmouseover , insert description based on specified manufacturer object in html called content. createlinks() function have opens array , defines url variable , inserts link tag gets created.
is possible do? , order messing up?
javascript:
var arr = [ { "manufacturer": "any manufacturer", "description": "traditional values", "url": "http://www.website.com" }, { "manufacturer": "different manufacturer", "description": "short description of said manufacturer", "url": "http://www.website2.com" }, { "manufacturer": "a similar manufacturer", "description": "not quite same previous manufacturer", "url": "http://www.website3.com" }, { "manufacturer": "manufacturer", "description": "essentially ripoff of first manufacturer", "url": "http://www.website4.com" } ] function createlinks() { (var i=0; i<arr.length; i++){ var obj = arr[i]; var m = obj["manufacturer"]; if (manu == m) { url = obj["url"]; } } document.getelementbyid('col').innerhtml = "<a onmouseover=\"openmanu(\'" ++ m ++ "\')\" onmouseout=\"mouseout()\" onclick=\"openweb(\'" ++ url ++ "\')\">" ++ m ++ "</a>"); } function openmanu(manu) { document.getelementbyid('content').style.display = 'block'; (var i=0; i<arr.length; i++){ var obj = arr[i]; var m = obj["manufacturer"]; if (manu == m) { desc = obj["description"]; } } document.getelementbyid('content').innerhtml = desc; } window.onmousemove = function (e) { var tooltipspan = document.getelementbyid('content'); var x = e.clientx, y = e.clienty; tooltipspan.style.top = (y - 20) + 'px'; tooltipspan.style.left = x + 'px'; } var mouseout = function(){ document.getelementbyid('content').style.display = 'none' } function openweb(url) { window.open(url); }#container{ width:870px; margin-top:2em; font-size:1.1em; position:relative; padding-left:20px; display:inline-block; background-color:#3c3c4e;} #content{ z-index:1; display:none; width:300px; font-size:16px; font-family: 'raleway', sans-serif; position:absolute; padding:10px; background-color:white;} { cursor:pointer; padding:0; display:inline-block; margin:0; color: white; font-family: 'raleway', sans-serif; position:inherit; } h4 { padding:0; z-index:0; display:inline-block; margin:0; color: white; font-family: 'raleway', sans-serif; font-weight:normal; font-size:15px; background-color:#3c3c4e; position:absolute; left:8px; padding:24px; top:400px; width:842px; } pre { display:block; float:left; line-height:21px; }<!doctype html> <html onload="createlinks()"> <div id="content"></div> <pre id="col"></pre> </html>the old html included links looked this.
<a onmouseover="openmanu('any manufacturer')" onmouseout="mouseout()" onclick="openweb('http://www.website.com/')">any manufacturer</a> @zer00ne in response answer, changed createlinks() this. can't work might not understand solution.
function createlinks() { arr[i]["manufacturer"] var obj = arr[i]; var m = obj["manufacturer"]; document.getelementbyid('col').innerhtml = "<a onmouseover=\"openmanu(\'" ++ m ++ "\')\" onmouseout=\"mouseout()\" onclick=\"openweb(\'" ++ url ++ "\')\">" ++ m ++ "</a>"); }
update
added tooltips back, realized intention , #content following cursor now. explain wacky styles having trouble with.
i fixed it, concept sound code needed ton of work. removed mousemove event handler because having tooltip made no sense when have description displayed in #content. following snippet has descriptions in /* comments */ // comments.
snippet
/* wrapped in anonymous function avoid globals */ (function() { var mfc = [{ "manufacturer": "any manufacturer", "description": "traditional values", "url": "http://www.website.com" }, { "manufacturer": "different manufacturer", "description": "short description of said manufacturer", "url": "http://www.website2.com" }, { "manufacturer": "a similar manufacturer", "description": "not quite same previous manufacturer", "url": "http://www.website3.com" }, { "manufacturer": "manufacturer", "description": "essentially ripoff of first manufacturer", "url": "http://www.website4.com" }]; /* it's better declare variable of 'for' loop outside of loop */ var i, len = mfc.length; (i = 0; < len; i++) { // use of bracket notation requires quotes var m = mfc[i]["manufacturer"]; var url = mfc[i]["url"]; var desc = mfc[i]["description"]; var col = document.getelementbyid('col'); /* /| when concatenating strings, alternate between single , double /| quotes , don't double on '+' */ // title attribute "description" // use href attribute instead of function same thing (i.e. openweb(url) // text of anchor m /* /| notice '+=' operand, allows accumulate strings /| instead of overwriting them on every loop. */ col.innerhtml += '<a title="' + desc + '" href="' + url + '">' + m + '</a>'; } var content = document.getelementbyid('content'); /* /| instead of attribute events, use addeventlistener() on /| parent of links (i.e. #col). in order determine anchor /| clicked, assign var event.target. */ col.addeventlistener("mouseover", function(e) { // find e.target (i.e. element hovered over), , it's title // display content desc it's content. var desc = e.target.getattribute('title'); content.style.display = "block"; content.innerhtml = desc; }, false); col.addeventlistener("mouseleave", function(e) { content.style.display = "none"; }, false); col.addeventlistener("mousemove", function(e) { var x = e.clientx, y = e.clienty; content.style.top = (y - 20) + 'px'; content.style.left = x + 'px'; }, false); })();#container { width: 870px; line-height: 1.2; margin-top: 2em; font-size: 1.1em; position: relative; padding-left: 20px; display: inline-block; background-color: #3c3c4e; } #content { z-index: 0; display: none; width: 400px; font-size: 16px; font-family: 'raleway', sans-serif; position: absolute; padding: 10px; color: white; background-color: black; top: 0; } col { position: absolute; top: 70px; } { cursor: pointer; padding: 0; display: inine-block; margin: 0 5px; color: white; font-family: 'raleway', sans-serif; } h4 { padding: 0; z-index: 0; display: inline-block; margin: 0; color: white; font-family: 'raleway', sans-serif; font-weight: normal; font-size: 15px; background-color: #3c3c4e; position: absolute; left: 8px; padding: 24px; top: 400px; width: 842px; } pre { display: block; float: left; line-height: 21px; }<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="container"> <div id="content"></div> <div id="col"> </div> </div> </body> </html>
Comments
Post a Comment