Develop Reference

Div flickers on hover

I have read a lot of the questions on here but can't find one that fixes this. I have programmed a div to follow my cursor. I only want it to appear when the cursor is over #backgroundiv. I have got it working but it sometimes randomly flickers on chrome and disappears entirely on firefox. Even more randomly is it sometimes appears to work and then starts flickering. I have tried a variety of things from hover to mouseenter/mouseover but nothing seems to work.
What I want is for #newdot to appear when the cursor is over #backgroundiv and then follow the cursor around the div. Any help would be much appreciated.
//hide dot when leaves the page
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
//tried below too but it doesn't work
/*$(document).ready(function(){
$("#backgroundiv").mouseenter(function(){
$("#newdot").removeClass("hide");
});
$("#backgroundiv").mouseout(function(){
$("#newdot").addClass("hide");
});
}); */
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot"></div>
<div id="backgroundiv"></div>

There is not issue but a logical behavior, when you hover on the blue div you trigger mouseenter so you remove the class and you see the red one BUT when you hover the red one you trigger mouseleave from the blue div thus you add the class and you hide the red one. Now the red is hidden you trigger again the mouseenter on the blue div and you remove the class again and the red div is shown, and so on ... this is the flicker.
To avoid this you can consider the hover on the red box to make the red box appear on its hover when you lose the hover from the blue one.
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
/* Added this code */
#newdot:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot">
</div>
<div id="backgroundiv">
</div>

Why does this ternary operator for toggling animation in jQuery not work?

I want a div#words_3 to slowly toggle its width when I click .read_more. It works for expanding its width first, but it doesn't toggle back. Can someone help me figure out, why that is?
$('.read_more').on('click', function(e) {
e.preventDefault();
$('#words_3').animate(
{
width: (words_3.width == '85%' ? '42%' : '85%')
},1500);
});
#words_3 {
color: #fff;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="read_more">Button</button>
<p id="words_3">Something</p>

You can do it with CSS and a class that you toggle to change the width.
I added transition: width 1.5s; to the style of the progress bar so it will animate the width for 1.5 seconds, and when you add the short class to it the width will be animated.
In the JS part, I only toggle the short class of the progressbar element to change its width from the CSS:
$('.read_more').on('click', function(e) {
e.preventDefault();
// Here I remove the `width` inline style so it won't override the CSS style
$('#words_3').css('width', '').toggleClass('short');
});
$('.random').on('click', function(e) {
e.preventDefault();
$('#words_3').css('width', Math.floor(Math.random() * (101)) + '%');
});
#words_3 {
color: #fff;
background: blue;
transition: width 1.5s;
width: 85%;
}
#words_3.short {
width: 42%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="read_more">Button</button>
<button class="random">Random</button>
<p id="words_3">Something</p>
I also added a random button that when clicked, it change the width to a random number to demonstrate how you can use it with any width value.

Animating bars to width of Text

I am creating a nav bar for my website and I want the slide outs to animate to the width of whatever text is inside it I also want everything on one line. Here is the jsfiddle and my jquery code so far
http://jsfiddle.net/2UEpd/26/
$(document).ready(function () {
$("#test").hide();
$(".title").hide();
$(".home").click(function (){
$("#test").slideToggle("slow");
});
$(".slideWrapper").hover(
function () {
$(this).children(".slideNav:eq(0)").stop().animate({
width: "112px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "112px",
opacity: "1"
});
$(this).find(".title").show();
}, function () {
var $box = $(this).children(".slideBox:eq(0)");
$(this).children(".slideNav:eq(0)").stop().animate({
width: "0px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "0px",
opacity: ".7"
});
$(this).find(".title").hide();
});
});
I've been trying for a while now, any help is appreciated.

Display:table propertie or inline-block would help.
An idea would be to play width text-indent and letter-spacing for instance.
Here a sample of the idea via CSS only, using table-layout properties so container fits to width used by its content text. http://codepen.io/gc-nomade/pen/kaEoe
basicly:
.slideNav {
height: 30px;
width: 0px;
padding:0 15px;/* gives it 30px width minimal */
line-height:30px;
display:table;/* shrink /expand to size needed by content */
position: relative;
white-space:nowrap;
text-indent:-3em;
letter-spacing:-1em;
transition:1s; linear ;
opacity: .7;
color: transparent;
}
.slideNav:hover {/* here set back to regular setting to layout text properly */
opacity:1;
text-indent:0em;
letter-spacing:1px;
color: white;
}
the toggle click close/open feature on menu is driven via :focus and pointer-events for demo prpose. javaScript should take care of this for a better/good practice.

How to align text in bottom of label

I've got problems to get text in the label to the bottom of the label.
I'm animating a falling text, the label does "seem" to fall as it should, but the text stays on top, it's not following the label downwards. Please check this jsfiddle out, press the button to see the problem. I have tried many different ways without coming up with a working solution.
http://jsfiddle.net/kaze72/jQ6Ua/
.uppgifter
{
vertical-align: text-bottom;
}
Seems not to help!

You can try
.uppgifter
{
display: table-cell;
vertical-align: bottom;
background-color: yellow;
}
jsFiddle
Updated jsFiddle so that .uppgifter's height in animate method matches #spelplan's height.

.uppgifter
{
padding: 580px 0 1px 230px;
}

You could just animate the padding-top:
$("#the_button").click(function () {
$(".uppgifter").animate({
'padding-top':"500px"
}, 4000, "linear", function() {});
});

try this:
$(document).ready(function() {
$("#the_button").click(function () {
$(".uppgifter").animate({
"height":"100px","padding-top":"500px"},
4000, "linear", function() {});
});
});
or just a suggestion, take a look at this :):
$(document).ready(function() {
$("#the_button").click(function () {
$(".uppgifter").animate({
"top":"500px"}, 4000, "linear", function() {});
});
});
combined with
.uppgifter
{
vertical-align: text-bottom;
position:relative;
background-color: yellow;
}

*
{
font-family: cursive;
}
.panel
{
position:relative;
border: 1px solid;
}
#spelplan
{
height: 600px;
}
.uppgifter
{
position:absolute;
vertical-align: text-bottom;
bottom:0;
background-color: yellow;
}

I simply added two transparent divs set with a 90% height that force the text down as the label height changes.
http://jsfiddle.net/jQ6Ua/15/
#div
{
height:90%;
width:200%
}

To vertically align a text in a container, multiple techniques can be used. However, most of them have additional script calculation at runtime (if the height of the text container is changing) which can mess with the business logic.
A hack can be used in your particular situation.
You can add an image container with empty src inside your text container with 100% height and 0 width set by css.
<label id="uppgift" class="uppgifter" style="display:inline-block;"><img scr=""/>Abc</label>
<label id="uppgift2" class="uppgifter" style="display:inline-block;"><img scr=""/>123</label>
//and css
.uppgifter img{
height:100%;
width:0;
}
Example
This way you would not have to write logic for additional added layers.

how to expand a text area when click on

Im working on a small project which has a textarea and i need help in making the text area expand on mouse click like that of twitter and facebook. the textarea should look like a textfield at first then when clicked on should expand.

This can be done without the use of JavaScript/jQuery, using CSS transitions.
textarea {
height: 1em;
width: 50%;
padding: 3px;
transition: all 0.5s ease;
}
textarea:focus {
height: 4em;
}
<textarea rows="1" cols="10"></textarea>

Something like this would work...
Demo: http://jsfiddle.net/Y3rMM/
CSS...
.expand {
height: 1em;
width: 50%;
padding: 3px;
}
HTML...
<textarea class="expand" rows="1" cols="10"></textarea>
jQuery...
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});

This will work for you:
<textarea rows="1" cols="40" onfocus="this.rows=10;" style="resize: none;">Tweet Tweet....</textarea>
I used onfocus instead of onclick because onclick isn't fired if the user uses the tab key to move to the textarea. You'll also want to make sure the user can't resize it themselves - hence the style attribute.
You could also add onblur="this.rows=1;" to shrink it back down once the user moves out of your textarea.

$("textarea").focus(function(){
$("textarea").animate({ height: "70px" }, 500);
});
default css
textarea{ height: 50px;}
on focus textarea height will increase :) simple jquery

use this plugin > http://plugins.jquery.com/project/elastic
very simple and effective !

Based in doog abides comment using jQuery, I enhanced the code to autoadjust approximately the number of rows acording to the length of the content, and return to 1 when focus is lost.
HTML:
<textarea class="expand" rows="1" cols="10"></textarea>
jQuery:
$('textarea.expand').focus(function () {
$(this).animate({rows: Math.max(1,Math.ceil($(this).val().length/this.cols))}, 500);
});
$('textarea.expand').blur(function () {
$(this).animate({rows: 1}, 500);
//Resize back to one row if the textarea is manually resized via the handle
$(this).css({height: ''});
$(this).css({width: ''});
});

You can do this with CSS only using position: absolute, which will make it float over other elements, and the :focus selector, which will be applied only when the element have the focus. First you need to reserve the textarea size enclosing it in an element:
<div class="textarea"><textarea></textarea></div>
div.textarea {
height: 50px;
width: 400px;
}
Then style the unfocused textarea
textarea {
position: absolute;
height: 50px;
width: 400px;
transition: all 200ms;
}
And finally the focused one
textarea:focus {
z-index: 1001;
min-height:250px;
}
Fiddle: http://jsfiddle.net/7v60su9e/

<textarea style="width:200px; height:50px;" id="ta"></textarea>
var ta = document.getElementById('ta');
ta.onclick = function(){
this.style.height = "400px";
}
A quick fiddle: http://jsfiddle.net/n6sgT/

You can do something like below:
<textarea name="textBox" rows="1" cols="20" id="textBox" onfocus="document.getElementById('textBox').rows = 5;" >