swirlingDervish Posted August 8, 2014 Share Posted August 8, 2014 Hi, all, Swirling Dervish noobie here, and I can't seem to get one page element to "inherit" the height value of another: js: /* quotepick is the holder for the chosen display quote from the defText array; i is the index of the quote from the definition (defText) array; the goal is to get the div#jsGall2 (a backsplash to text) to inherit div#bennies' (text against the backsplash) height value. */ var quotePick = defText; if ((typeof quotePick) != 'undefined') { var dSize = document.getElementById("bennies"); var eSize = document.getElementById("jsGall2"); var b = dSize.innerHTML=quotePick; var f = eSize.setAttribute ("style", eval(dSize.style.height)); /* one version */ } else { document.getElementById("bennies").innerHTML=''; } I'VE ALSO TRIED: var quotePick = defText; if ((typeof quotePick) != 'undefined') { var dSize = document.getElementById("bennies"); var eSize = document.getElementById("jsGall2"); var b = dSize.innerHTML=quotePick; var f = eSize.style.height = dSize.style.height; /* another version */ } else { document.getElementById("bennies").innerHTML=''; } I know I've gotta be mucking up royally in syntax, right? Help.... -Swirling...headache... Link to comment Share on other sites More sharing options...
Don E Posted August 8, 2014 Share Posted August 8, 2014 Try... eSize.style.height = dSize.offsetHeight + "px"; Link to comment Share on other sites More sharing options...
swirlingDervish Posted August 8, 2014 Author Share Posted August 8, 2014 Aaah, football fan! Hi, Don E, thanks for responding, altho, after trying it out, I wish I could say your suggestion worked, oh well! Would offsetHeight be more accurate than just style.height...? Would it be better if I used set- and/or getAttribute()? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 8, 2014 Share Posted August 8, 2014 unless 'bennies' has inline style like style="height: 40px;" dSize.style.height will be empty. var f = eSize.style.height = dSize.offsetHeight + 'px'; should work. Link to comment Share on other sites More sharing options...
swirlingDervish Posted August 8, 2014 Author Share Posted August 8, 2014 Hi, dsonesuk, I see what you mean about the inline style. It's almost like you have to create a new "instance" of bennies to get the present attributes of the element. Anyways, while var f now shows a height value, the value is still not passed to jsGall2's height attrib so the div's height will change. Not sure how else to pass the value... Link to comment Share on other sites More sharing options...
swirlingDervish Posted August 8, 2014 Author Share Posted August 8, 2014 ....maybe a link might help?...: http://siddhicenter.org/KY/KailashDescrip.htm. The second description button, mantra yoga, is the one where I want to backsplash to equal the height of the div#bennies which holds the text.... Any thoughts?.... Link to comment Share on other sites More sharing options...
dsonesuk Posted August 8, 2014 Share Posted August 8, 2014 (edited) You are targeting the wrong element, you should be targeting #jsGall2:before which has the splash, OR remove :before and it should work. May need to add padding at bottom, but you can do this without javascript. remove styling for #jsGall2:before and use #bennies center:before { background-color: #6495ED; border-radius: 35px; bottom: 0; content: " "; left: 0; opacity: 0.3; position: absolute; right: 0; top: 0;}#bennies center { padding: 20px;} Edited August 8, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
swirlingDervish Posted August 10, 2014 Author Share Posted August 10, 2014 Hi, dsonesuk, been a couple of hectic days....thanks for your response. I had to do a quick review of pseudo elements again to be sure of where to target and when to reference. Tried your bennies code, which works almost perfectly, except that now the div#bennies text is taking the faded settings of the backsplash (which I wanted to avoid). Instead, I took your first suggestion of removing the :before off the separate backsplash element div#jsGall2 and it finally worked. I'll just do a llittle padding tweaking as you suggested and that should clean it up the bottom overrun. Thanks for your help. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 11, 2014 Share Posted August 11, 2014 #bennies * {position:relative; z-index:10;}#bennies:after { background-color: #6495ED; border-radius: 35px; bottom: 0; content: " "; left: 0; opacity: 0.3;filter:alpha(opacity=30); /* For IE8 and earlier */ position: absolute; right: 0; top: 0;z-index:0}#bennies >* { padding: 20px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now