expanding boxes WordPress
- SOLVED
Hi,
on my website, I have an expanding yellow box around my "post a comment here". When I click on the title my comment box expands allowing you to leave a comment. The box is hidden and only appears when you click on it. It works fine, but my yellow border around my comment box does not expand to the bottom of the comment box. I would like the yellow border to expand with it, so Ii doesn't leave empty space.
I have posted my code below:
<div style="position: absolute; right: 388px; border: 1px; border-style: solid; width:715px; height:100px; top:1310px; border-color: yellow;">
<a aiotitle="click to expand" href="javascript:togglecomments('commentlist')"><center><img src="http://www.hawriandmandy.com/wp-content/uploads/2011/03/postacomment_title.png"></center></a><br /><div class="commenthidden" id="commentlist"><div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'hawrinmandy'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a></div></div>
Answers (2)
AdamGold answers:
Can you post here the URL please?
AdamGold comments:
I tend to think it's because of the position but I am not sure I can remove it, maybe it is necessary for your design.
BTW please post here the 'togglecomments' function from your javascript file.
AdamGold comments:
Replace the following code:
<div style="position: absolute; right: -21px; border: 1px; border-style: solid; width:386px; height:100px; top:776px; border-color: yellow;">
</div><a aiotitle="click to expand" href="javascript:togglecomments('musicdownload')"><div style="position: absolute; right: 2px; top: 795px;"><img src="http://www.hawriandmandy.com/wp-content/uploads/2011/03/download_buildthisbridge.png"/></a><br />
with:
<div style="position: absolute; right: -21px; border: 1px; border-style: solid; width:386px; height:auto; top:776px; border-color: yellow;">
</div><a aiotitle="click to expand" href="javascript:togglecomments('musicdownload')"><div style="position: absolute; right: 2px; top: 795px;"><img src="http://www.hawriandmandy.com/wp-content/uploads/2011/03/download_buildthisbridge.png"/></a><br />
Daniel Nitsikopoulos answers:
Try changing the height to auto from 100px on the first div and add an overflow:hidden so it becomes:
<div style="position: absolute; right: 388px; border: 1px; border-style: solid; width:715px; height:auto; top:1310px; border-color: yellow; overflow:hidden">
See if that works.
Daniel Nitsikopoulos comments:
Try changing the height to auto from 100px on the first div and add an overflow:hidden so it becomes:
<div style="position: absolute; right: 388px; border: 1px; border-style: solid; width:715px; height:auto; top:1310px; border-color: yellow; overflow:hidden;">
See if that works.
ddoodnath comments:
Hi dNitza,
Thanks for your respond, the auto and over hidden did do the trick for one of them.
The other element I'm using this for is in my sidebar "download this bridge for free"
website url: http://www.hawriandmandy.com/