CSS3 div visible on hover in chat
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Demopage: http://www.cphrecmedia.dk/musikdk/stage/chat.php

I need to create a small div where I'll put in the text form, so people can write messages. However I would like this div only to appear when the mouse is over the right "chat-message" area. I know it can be done with CSS(3), so I'm really keen its done this way.
The div needs to "go over" the messages, so its fixed in the bottom. If you can try to make it popup with CSS3. NO JS/Jquery solution is accepted!

And 1 more small fix. Try look at the demo-page where you on all other pages, can see a small user avatar in the top right corner of the navigation. This is not visible in the chat. This needs to be fixed too.

You can download the needed files for the fix here: http://cl.ly/2Y0R383y2w2l
Chat.php and css/chat.less would be the files (properly) that you need to edit.
Please do upload the fixed files, instead of showing in a jsfiddle.

awarded to Ibenor
Tags
html5
css3

Crowdsource coding tasks.

2 Solutions


your site is FULL of errors (both in html and js) - no one will fix it for 1 buck

< li id="currentnews">< a href="news.php" < h2>NYHEDER< /h2>< /a>
(no closing for < a>)

< li>< span class="font-entypo icon-mail formicon">< input type="email" placeholder="Din emailadresse"/>< /li>
no ending < /span>

< !-- Login-popup -->
< script type="text/javascript">$('.login').magnificPopup({type:'inline',});< /script>

< /nav> (that closing nav is closing nothing)

javascript after < /body> etc.

as to your avatar: it's another bug within your code:
< img class="navpp" data-src="demobilleder/profilepicture-small.jpg"src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="18" alt="USERNAME">

src is 1x1 pixel (by default or by error idk - so it is showing correctly) - if you are adding data-src for jquery then it's probably not working because of that js error

Timestamp: 2013-09-18 15:36:33
Error: TypeError: (intermediate value)(...) is not a function
Source File: http://www.cphrecmedia.dk/musikdk/stage/js/app.js
Line: 51

that's the added code of wookmark

? Are you checking with inspector or just in the code? The 1x1px is a normal and used technique for lazyload. No error at all and working fine all over the site in all major browsers. However I just figured out why the image doesnt load in menu, so this fix is no longer important. As for the navigation these things works perfectly fine as they also rely on several php-pages. You're taking things out of context. And nothing of this has any relevance to this task. I'm not asking anyone to "fix" those things (as they need no fixing)...
CPHREC over 5 years ago
As for NAV this is the code: http://jsfiddle.net/D72GQ/ Dont know where you dont have that opening nav-calss
CPHREC over 5 years ago
I'm going to agree with ochi, these $1 questions you keep submitting are, for a lack of a better word...insulting.
akshatpradhan over 5 years ago
But why dont you give a price then? I can just increase the bounty if we can agree. This site doesnt seems to have much traffic, so im not willing to put up a high bounty when I have to pay/donate no matter if i get a reply or not. And if the replies are like Ochis who, right or wrong, has nothing to do with this bounty and the specific development, Im not sure it would be even worth of that 1$.
CPHREC over 5 years ago
Winning solution

Hi i am not sure if this is still about the css3 popup thingy here.
But the solution for that is pretty simple, you didnt provide anything already on your page so i post just the solution how that what you want is achieved in general:
If you put for example:


This div in your chatright container and then add the following to your css:
div#test {
display: none;
}
.chatright:hover div#test {
display:block;
}
It does what you want display a div when your mouse is over chatright without the use of js
Greetz

nice the hmtl code got eaten by this system < section style="position:relative" class="chatright" >
< div style="position:absolute;top:100px;left:100px;width:300px;height:300px;background-color:white;z-index:100;" id="test" >< /div >
Ibenor over 5 years ago
What do you mean by eaten? I might do it wrong but I cant get your code to work :l I have uploaded the files in the link at the top. Can you include it there?
CPHREC over 5 years ago
@ibenor use back ticks to show it was code, github flavored markdown.
akshatpradhan over 5 years ago
@aksatpradhanThank you for the tipp with back ticks. Now to my solution, sorry i wasnt here for so long. The Code should work if you include the html part i posted in the comment as well as the css. But it is just an example with a test container. Maybe you should integrate your div with an id and the style display:none in your chatright div. Then i can send you the right css code to make it appear when someone "hovers" with the mouse over the chatright div
Ibenor over 5 years ago
View Timeline