We Keep Coding

Resize textarea with div

How to resize a divs when resizing textarea within it?
If I create two or more sticky and use ESC all sticky will be closed. How to set up the ESC to close only active pop-up?
How to keep alive sticky when page is refreshing?
I use this code to make a pop-up sticky note: http://codepen.io/anon/pen/XXNBoz
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
<script>
$(document).ready(function(){
function limitTextareaLine(e) {
if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) {
return false;
}
}
$(function() {
$('textarea.limited').keydown(limitTextareaLine);
});
var x = "<div class='darkYellow'><div class='close'>X</div>Note<div class='lightYellow'><textarea maxlength='250' rows='8' cols='25' class='limited'></textarea></div></div>";
$('#click').click(function () {
$('#one').append('<div class="note">'+x+'</div>');
$( ".darkYellow" ).draggable();
$('.close').each(function(){
$('.close').click(function() {
$(this).parent().remove();
});
});
});
$('.darkYellow').live('click', function() {
$(this).addClass("index");
});
$('.darkYellow').live('blur', function() {
$(this).removeClass("index");
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
window.open(location, '_self', '');
openedWindow.close();
}
});
});

Change the fixed width and height to min-width and min-height like below.
And it should auto resize.
*{
margin:auto;
padding:0;
}
.darkYellow {
position:absolute;
background-color: #76B5F0;
min-width:200px;
min-height:150px;
font-size:12px;
text-indent:1px;
-webkit-box-shadow: 1px 1px 10px #888888;
cursor:move
}
.lightYellow {
min-width:200px;
min-height:135px;
background-color: #8EC0EE;
margin-top:1px;
}
textarea {
background-color: #8EC0EE;
border: 0px;
}
.index {
z-index: 55;
}
.close {
width:7px;
height:7px;
padding:0;
line-height:2pt;
float:right;
margin-top:6px;
margin-right:4px;
font-size:14px;
cursor:pointer;
}
also use a more up to date version of JQuery, I've updated you fiddle below.
https://jsfiddle.net/link2twenty/gLrmgqgz/10/

You can capture the resize event with the resize of jQuery
$("textarea").resizable({
resize: function() {
//resize your div
}
});
For the sticky notes: how do you define the variable openedWindow?

In CSS set the parent div's display to display: table should fix the problem and make it resize as you change the textarea's size.
EDIT: As for the escape thing (just refreshed and saw that) you could use document.activeElement or since you're using jQuery you could do $(':focus').
EDIT: take your openWindow variable and set it as openWindow = $(':focus'); and as for the 3rd item you added you would have to save the active sticky in the localstorage of the page and just update it each time you change which sticky is active. Here's some info on localstorage localstorage MDN

A website can start in a determinate div when load?

A website can start in a determinate div when load?
I make three divs like this.
and I want to start on the second div when the website load.
How I can do it?
html,body {
height:100%;
margin:0;
}
.content {
height:100%;
min-height:100%;
}
html>body .content {
height:auto;
}
#one {
background: #ff4444;
}
#two {
background: #ff5555;
}
#three {
background: #ff6666;
}
<div class='content' id='one'></div>
<div class='content' id='two'></div>
<div class='content' id='three'></div>

You need to use #two (id of the second div) in the url.
like this

You can use smooth animation to scroll to the div using animate:
$('html,body').animate({
scrollTop: $("#two").offset().top
}, 'slow');
Demo.
EDIT
Without Animation:
document.location.href="#two";
Demo

Use this to scroll the second div into view on load:
$(function() {
$("#two")[0].scrollIntoView();
});

Jquery hover out halting script

I have this script:
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if ($navToggle.hasClass('active')) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else {
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
});
});
this works great but the hover is incomplete because whenever I add the removeClass line to it , it stops working ? Like so:
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
$('.nav-toggle').removeClass('hover');
});
please can someonne help I am only trying to reset a hover class.

You can call .hover with two arguments, first argument is for a mouse enter callback, the second is for mouse leave
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
Demo
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
.nav-toggle {
background:#FFF;
transition:all 1s;
}
.nav-toggle.hover {
background:#FF0;
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbtn">My Nav</div>
<div class="nav-toggle">Toggle</div>
Note that if the element you want to trigger a css transition on has some relation to the hovered element you can just use css. So if for instance .nav-toggle was a sibling or child of .navbtn you can use the :hover psuedo class
.navbtn:hover .nav-toggle {
background:#FF0;
}
CSS Demo
Assumes .nav-toggle is a sibling of .navbtn
.nav-toggle {
background:#FFF;
transition:all 1s;
}
.navbtn:hover ~ .nav-toggle {
background:#FF0;
color:black;
}
<div class="navbtn">My Nav</div>
<div class="nav-toggle">Toggle</div>

hover overlayed text on an image bug

I have an overlayng text and navigation arrows on an image, they appear when a mouseover event is fired and hide when the mouse leaves the image.
The bug is that the overlay text is not a part of the image, so when i mouse over it, it starts flashing (because when the text hides, the mouse is positioned on the image, and that fires the mouseover event and the text shows up again)
This is my current JavaScript logic:
$('#container img').mouseover(function(){
$(this).siblings('.discr').show();
$(this).mouseout(function(){
$(this).siblings('.discr').hide();
})
})
For better understanding this is a DEMO and here is what i expect: the overlay text does not flash when the mouse is over it, it acts like when the mouse is over the image only.

You can try something like this:
JavaScript version
$('#container').mouseover(function () {
var $controls = $(this).find('.discr');
$controls.show();
$(this).mouseout(function () {
$controls.hide();
})
})
Example http://jsfiddle.net/b6hjm3t1/
Pure CSS version without JavaScript
You can have the same results just with CSS without the using JavaScript just by adding to the CSS:
#container:hover .discr {
display:block;
}
Example: http://jsfiddle.net/t6hf0fqg/

I think that this does what you're looking for. I've modified the code a little bit:
http://jsfiddle.net/jfkk78cn/1/
$( "#container" )
.mouseover(function() {
$(this).find('.discr').show();
})
.mouseout(function() {
$(this).find('.discr').hide();
});

Here is a CSS only solution for the same effect.
The important part is the you can do #container:hover .discr which will target the .discr elements when the #container is hovered.
img {
width:200px;
height:200px;
display:block;
}
#container {
float:left;
position:relative;
border:2px solid green;
}
.discr {
position:absolute;
color:red;
background:rgba(0, 0, 0, 0.2);
bottom:0px;
width:100%;
text-align:center;
display:none;
}
/*ADDED THIS RULE*/
#container:hover .discr{
display:block;
}
.next {
left:185px;
}
.next, .prev {
bottom:50%;
width:15px;
border-radius:9px;
}
<div id='container'>
<img src='http://goo.gl/Rwf5SG' />
<div class='discr prev'><</div>
<div class='discr next'>></div>
<div class='discr'>lorem ipsum</div>
</div>

adding an semi-black transparant overlay in front of a div

I have a div that looks like the following:
<div class="row-fluid product-to-be-categorized" data-id="584472"><img src="http://origincache-prn.fbcdn.net/10311205_575850285866660_368389950_a.jpg"></div>
I wanted such that when the div is clicked then it adds an semi-black-transparant overlay in front of the div, so the picture is covered with this transparant layer in front of it.
I have the following click handler:
$('.product-to-be-categorized').on('click', function(event) {
});
but I am unsure on what is the quickest and simplest way to do this

Simplest way would be to add a class with a pseudo element to the div on the click event.
DEMO
CSS :
.product-to-be-categorized {
position:relative;
width:50%
}
.product-to-be-categorized img {
display:block;
width:100%;
}
.overlay:before {
content:'';
position:absolute;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
jQuery :
$('.product-to-be-categorized').click('click', function (event) {
$(this).addClass('overlay');
});
(if you need to toggle the overlay, just replace ".addClass" by ".toggleClass" in jQuery code)

Firstly, in the click handler you can append a div to the container:
$('.product-to-be-categorized').on('click', function(event) {
$('<div />').addClass('overlay').appendTo(this);
});
Which has the following CSS:
.product-to-be-categorized {
position: relative;
/* other styling... */
}
.overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
}
Example fiddle
You can also make the overlay togglable by checking for its existance and removing:
$('.product-to-be-categorized').on('click', function(event) {
if ($('.overlay', this).length) {
$('.overlay', this).remove();
}
else {
$('<div />').addClass('overlay').appendTo(this);
}
});
Example fiddle