We Keep Coding

How to make the bottom part of a box move on 'append' of a new element in FullCalendar

So I have an element that appends on hover. What I'd like to happen is that it makes the bottom part of the box that it's in move down to accommodate it, but that does not happen.
Here is an example:
Before hover:
After hover:

The problems is solved by specifying a margin in the 'EventRender' action of the FullCalendar plugin.
As so: How to increase the space between the two events in fullcalendar

You need two events on your table cell
i.e mouseenter and mouseleave
$(document).ready(function() {
$("div").on("mouseenter",function(){
$("span").show();
}).on("mouseleave",function(){
$("span").hide();
});
});
See an example here, modify as per your need
DEMO

Animation repeating while hovering on a div

I've read other questions and answers about this issue but they didn't work for me, maybe I am missing something or my example is slightly different, I don't know. Anyway, I have a div with some text and a link inside and I would like to create a new div when the user hovers over this first div. The problem is that, when I am over the first div, the second one fades in and out continuously, even if I don't leave the first div with the mouse.
Here is the HTML code:
<div id="content">
<h1>Portfolio</h1>
<div id="web">
<p>Web apps</p>
<a href="#">
First link
</a>
</div>
<div id="commentweb">
<p>The text that I want to show</p>
</div>
</div>
and this is the jQuery:
$(document).ready(function() {
$("#web").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
$("#commentweb").hide();
$("#web").hover(
function () {
$(this).children("a").children("img").attr("src","2.png");
$(this).css("background-color","#ecf5fb");
$(this).css( 'cursor', 'pointer' );
$(this).css('border','1px solid #378ac4');
$(this).children("p").css("opacity","1.0");
$('#commentweb').stop(true, true).fadeIn();
},
function () {
$(this).children("a").children("img").attr("src","1.png");
$(this).children("p").css("opacity","0.5");
$(this).css("background-color","#e8e3e3");
$(this).css('border','1px solid grey');
$('#commentweb').stop(true, true).fadeOut();
}
);
});
What should I do to have the fade in animation start when I am over #web and the fade out animation when I leave that div, without flickering (i.e. constant fadeIn and fadeOut)?
I have added a fiddle to show you the problem: http://jsfiddle.net/mMB3F/
It basically happens when I hover on the text.

This problem occurs because your comment div is inside the div that you are assigning the hover event. Note that the flickring occurs when you enter the mouse pointer in the highlighted area (red) showed in the image below (related to the comment div).
Take a look in this solution: http://jsfiddle.net/davidbuzatto/mMB3F/1/
The comment div has now a absolute positioning. When the mouse enters, the comment div will be showed next to the pointer. Off course, now you will need to change the code to fit your needs. Another way of doing this is to set an div container that encloses the #web div and to put another div next to it, seting them to float. Inside the new div you insert the div with the comment.

Update
My other answer was a little too grandiose, You just have to float your other div
#commentweb {float:left}
http://jsfiddle.net/mMB3F/5/
It needs to be asynchronous, the stop() is what causes it to blink, but you dont need a stop if you just wait for the fade to complete before you assign the event handlers.
http://jsfiddle.net/u7Q9P/1/

use jquery .mouseenter() and .mouseleave() to avoid that.
that way, you dont have to reposition anything in your css.
see my answer here for more detail

jQuery show div with child iframe (wysiwyg text editor)

I have a "display: none" div with a child wysiwyg editor. I have had this problem with both jHtmlArea and CKEditor, so i believe this to be an iframe issue. For this example, I am using jHtmlArea. Without the "display: none;", everything works fine. When hidden however, I "show" the div with the child editor, and then it doesn't fully load. I had researched this issue some time ago, but couldn't find a solution. I believe I remember finding something that said that hidden iframes had some kind of reloading problem, but can't find the post. Anyone have any suggestions? Thank you ahead of time for your time and expertise!
<script type="text/javascript">
$(document).ready(function () {
$("textarea").htmlarea();
});
</script>
<div id="container" style="display: none;">
<textarea></textarea>
</div>
Show me!
I have already tried this solution to no avail.

One workaround is to set the display to block and hide() it through javascript. so iframe would take up the full width that is available when it loads. see this jsFiddle

If you can afford it, use the visibility:hidden style instead of display:none. The drawback is that the hidden element will fully occupy its document area even though none of its contents are shown until visibility:visible is set.
Have a try at this jsFiddle, based on the answer by #Siwei.
EDIT: updated the jsFiddle to make the editor container have 0 vertical pixels until the user clicks Show me.

Thanks to both #Humberto and #Siwei-Kang for their suggestions. Their work helped me come up with this solution.
I instantiate the htmlarea on button click, rather than on page load. I added some additional features as well:
instantiate htmlarea in show() callback function
textarea begins as "visibility: hidden" to reserve real estate on show(), but also to reduce flicker when htmlarea appears.
Set textarea back to visible after htmlarea instantiation, so that "html" button still functions
See this jsFiddle
<script type="text/javascript">
function toggle() {
$('#container').toggle('blind', function() {
$('#container textarea').htmlarea().css("visibility", "visible");
});
}
</script>
<div id="container" style="display: none;">
<textarea style="visibility: hidden; width: 300px;"></textarea>
</div>
Toggle me!

Just like Stackoverflow, Some floating text box at the top of webpage

I am not sure whether Stackoverflow is the right place for this question, but I think it has something to do with Javascript.
Here is what I want to add to my webpage: a floating text box at the top of the webpage, you can close it by clicking the "X".
Just like the YELLOW BOX in the following picture (Welcome to Q&A blah blah....):
I tried to Google but I dont know the right phrase for this.
I have read these two questions: CSS to achieve a similar fixed floating div thast always on top of other divs - like stackoverflow does? and div with fixed position.
But How to add the close it by clicking the "X" button at the right?
Also, I like the color of Stackoverflow's floating text box so much. What the color is it?
Can someone give me the code that Stackoverflow uses?
Thanks a lot!

To add a closing button you could use javascript or jQuery if you use jQuery, you would do something like :
HTML:
<div id="yellowbar">
<div id="xbtn">x</div>
</div>
javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!-- load jquery-->
<!--jquery code-->
<script>
$(function(){
$("#xbtn").click(function(){
$("#yellowbar").hide();
});
});
</script>
simple example: http://jsfiddle.net/mazlix/dcY2A/2/

Let's say you have a div at the top of your page with an X button like so:
<div class="floatingBox" id="message1">
<span class="message">Your message</span>
<img src="x-button.png" id="closeButton"/>
</div>
You can make the close button hide the message box using jQuery like so:
$(function() {
$('#closeButton').click(function() {
$('#message1').hide();
});
});

This is definitely the right place to ask this question!
The background color of the floating box is: F4A83D
The border color of the floating box is: D6800C
The text color in the floating box is: 735005
Here's a fiddle demo:
http://jsfiddle.net/UnsungHero97/FQ3fz/
Note that I'm using jQuery. If you want a pure JavaScript solution, let me know :)
I hope this helps.
Hristo

You can check out meerkat plugin.
http://www.jarodtaylor.com/meerkat/howto/

Here!
DEMO
$(document).ready(function() {
// add some 'if unknown user' check.
var infoH = $('#infobar').height();
$('#infobar').animate({top:'0px'},1000);
$('#infoclose').click(function(){
$('#infobar').animate({ top:'-'+infoH },1000);
});
// close 'if'
});
The only difference is that in my demo the bar is positioned absolutely, but you can adjust the css as you like.
P.S. are the colors ok? ;)

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.

This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )

You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/

Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.

I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.