jquery splitter change to vertical splitter on button click - javascript

I have a splitter that works fine. Now the client wants to change the splitter from horizontal view to vertival view. I mean that the splitter is first split int the 2 divs horizontally and when I click the button it will change so that it's split the same 2 divs vertically.
I tried this
<script type="text/javascript">
$(function () {
$('.LeftPane').attr('id', 'LeftPane');
$('.RightPane').attr('id'`enter code here`, 'RightPane');
$("#MySplitter").splitter({
type: "v"
});
$('#Button1').click(function () {
$('#LeftPane').attr('id', 'TopPane');
$('#RightPane').attr('id', 'BottomPane');
$("#MySplitter").splitter({
type: "h"
});
});
});
</script>
<style type="text/css" media="all">
#MySplitter
{
height: 400px;
width: 600px;
margin: 1em 2em;
background: #def;
border: 2px solid #039; /* No padding allowed */
}
#LeftPane
{
background: #def;
overflow: auto;
width: 200px; /* optional, initial splitbar position */
min-width: 50px;
}
#RightPane
{
background: #def;
overflow: auto;
min-width: 100px; /* No margin or border allowed */
}
#MySplitter .vsplitbar
{
width:8px;
cursor: e-resize; /* in case col-resize isn't supported */
cursor: col-resize;
background-color:Black;
}
#MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover
{
background-color:Black;
}
#TopPane
{
background: #def;
overflow: auto;
width: 200px;
min-width: 50px; /
}
#BottomPane
{
background: #def;
overflow: auto;
min-width: 100px; /* No margin or border allowed */
}
#MySplitter .hsplitbar
{
height: 2px;
background: #487BA4;
}
#MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover
{
background: #487BA4;
}
</style>
</head>
<body>
<div id="MySplitter">
<div class="LeftPane">
<p>
This is the left side of the vertical splitter.</p>
</p>
</div>
<div class="RightPane">
This is the right side of the vertical splitter.</p>
</div>
</div>
<p>
<input id="Button1" type="button" value="splitchange" /></p>
</body>
</html>

at last i find the solution of my onw question.
I am designing it in asp.net so i am providing the solution in jquery with asp.net
<head id="Head1" runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../Js/js/splitter.js" type="text/javascript"></script>
enter code here
<style type="text/css" media="all">
#MySplitter
{
height: 400px;
width: 600px;
margin: 1em 2em;
background: #def;
border: 2px solid #039;
}
#LeftPane
{
background: #def;
overflow: auto;
width: 200px;
min-width: 50px;
}
#RightPane
{
background: #def;
overflow: auto;
min-width: 100px;
}
#MySplitter .vsplitbar
{
width:8px;
cursor: e-resize;
cursor: col-resize;
background-color:Black;
}
#MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover
{
background-color:Black;
}
#TopPane
{
background: #def;
overflow: auto;
width: 200px;
min-width: 50px;
}
#BottomPane
{
background: #def;
overflow: auto;
min-width: 100px;
}
#MySplitter .hsplitbar
{
height: 2px;
background: #487BA4;
}
#MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover
{
background: #487BA4;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
// var result = function () {
// alert('fired');
var val = $('#<%=HiddenField1.ClientID %>').val();
if (val == 1) {
$('.LeftPane').attr('id', 'LeftPane');
$('.RightPane').attr('id', 'RightPane');
$("#MySplitter").splitter({
type: "v"
});
}
else {
$('#LeftPane').attr('id', 'TopPane');
$('#RightPane').attr('id', 'BottomPane');
$(' #MySplitter .vsplitbar').css('width', '');
$("#MySplitter").splitter({
type: "h"
});
}
// }
});
</script>
</head>
<body>
<form runat="server" >
<asp:HiddenField ID="HiddenField1" runat="server" Value="1"/>
<asp:Button ID="Button1" runat="server" Text="change" OnClick="Button1_Click" />
<div id="MySplitter">
<div class="LeftPane">
<p>
This is the left side of the vertical splitter.</p>
<p>
Note what happens when you move the splitbar as far left as you can to make this
pane very thin. A scrollbar appears and it is flush against the splitbar, just the
way it should be.</p>
</div>
<div class="RightPane">
<p>
The splitbar needs to be wide enough to grab with the mouse, but a thick splitbar
may be visually distracting in a design. This example shows how to make a splitbar
that looks skinny but has a wider grabbing area. It also demonstrates the use of
an alternate resize cursor. (Not all browsers support alternate cursors and only
IE seems to support animated cursors.)</p>
<p>
A background image in the splitbar provides the visual marker but the splitbar area
extends further right, appearing as padding on the right pane. The splitbar's hot
zone is "biased" to the right so that it will not have a gap against any left-side
scrollbar when it appears. If you know the left pane will never have a scroll bar,
you could make the hot zone centered on the skinny splitbar.</p>
</div>
</div>
</form>
Code behind for button is as follows
protected void Page_Load(object sender, EventArgs e)
{
if (HiddenField1.Value == "2")
{
HiddenField1.Value = "1";
}
else
{
HiddenField1.Value = "2";
}
}

Related

Hovering refuses to work when another element is on top

By the way, this is coming from a beginner coder, so don't expect any great amount of organization. I may have missed something obvious.
I couldn't get it to work here as a snippet (for security reasons, it won't allow images to be loaded, not even showing the failing to load icon), so I made a copy of it here.
The issue is that, while hovering over a folder, it works fine, but when I begin hovering over the menu that pops up while hovering over the folder, it starts flashing rapidly. Yes, the menu is supposed to delete itself when the user stops hovering over the folder and show when the user hovers over the folder.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Something</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>
<body>
<!-- See CSS code for more explanation -->
<div class="sidebar">
<h1 style="padding: 1vw;">Todo</h1>
<div class="folder">
Folder 1
</div>
<div class="folder">
Folder 2
</div>
<div class="folder">
Folder 3
</div>
<div class="addBtn">+ Folder</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS code:
/* might have something to do with css; please read my hastily made comments */
/* self explanatory */
html,body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: black;
}
/* sets some defaults */
* {
padding: 0px;
margin: 0px;
border: 0px;
overflow: hidden;
font-family: Poppins;
background-color: inherit;
}
/* sets text selection color to nothing */
*::selection {
background: inherit;
}
/* styling for the sidebar (the part that says "todo", shows folders, etc.) */
.sidebar {
background: #9caeb0;
display: inline-block;
width: calc(20% - 2vw);
height: 100vh;
padding: 1vw;
}
/* the text that says todo */
h1 {
font-size: 30px;
font-weight: 700;
}
/* a folder. */
.folder {
width: calc(15.4vw);
background-color: #8c9ca3;
padding: .6vw;
padding-left: 1.25vw;
padding-right: 1.25vw;
border-radius: 0px 5px 5px 0px;
font-weight: 200;
cursor: pointer;
transition: .45s;
margin: .6vw;
margin-left: -1vw;
margin-right: calc(0vw);
font-size: 15px;
position: relative;
}
/* uses css animations to change the folder upon hovering */
.folder:hover {
background-color: #75828a;
cursor: pointer;
margin-top: .8vw;
margin-bottom: .8vw;
margin-left: -2vw;
padding-left: 2.25vw;
width: 15.8vw;
font-size: 17px;
}
/* the add folder button */
.addBtn {
width: 15.4vw;
background-color: rgba(0,0,0,0);
padding: .6vw;
padding-left: 1.25vw;
padding-right: 1.25vw;
border-radius: 0px 5px 5px 0px;
font-weight: 200;
cursor: pointer;
transition: .45s;
margin-left: -1vw;
font-size: 15px;
border: 3px solid #8c9ca3;
border-left: 0;
/*position: absolute;
bottom: 4vh;*/
}
/* changes bg color upon hovering over add folder button */
.addBtn:hover {
background-color: #8c9ca3;
}
.smallMenu {
position: absolute;
height: 17px;
top: 50%;
width: 17px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 0.5vw;
border-radius: 99px;
}
.menuBtn {
position: absolute;
height: 14px;
top: 1.5px;
left: 7px;
padding: 0px;
margin: 0px;
}
JS Code:
// probably can ignore these functions; scroll down to line 45; there's a lot of code here for purposes that I haven't quite finished yet
function inLocalStorage(item) {
if(!localStorage.getItem(item)) {
return false;
} else {
return true;
}
}
function lsAdd(label,value) {
localStorage.setItem(label, value);
}
function lsGet(item) {
return localStorage.getItem(item);
}
function lsClear() {
localStorage.clear();
}
function lsRemove(item) {
localStorage.removeItem(item);
}
var el;
var mouseOver = false;
// checks if the user has visited
if (!inLocalStorage('visited')) {
alert("Don't mind this alert");
lsAdd('visited','yes');
lsAdd('folders','1');
lsAdd('js','');
} else {
// load from local storage; execute stored JS
new Function(lsGet('js'))();
// upon mouseover of folder, show mini menu icon
for (let i = 0; i < document.getElementsByClassName("folder").length; i++) {
document.getElementsByClassName("folder")[i].addEventListener("click", function() {
console.log("You have clicked.");
});
// add menu upon mouseover
document.getElementsByClassName("folder")[i].addEventListener("mouseover", function() {
mouseOver = false;
el = document.createElement("div");
// this image obviously doesn't load but that's not important; the image is an svg with three vertical dots, and the image is transparent
el.innerHTML = '<div class="smallMenu"><img src="abc.svg" class="menuBtn" style="height:14px;"></div>';
el.setAttribute("id","menu");
document.getElementsByClassName('folder')[i].appendChild(el);
el = document.getElementsByClassName('smallMenu')[0];
el.addEventListener('mouseover', function() {
mouseOver = true;
console.log(mouseOver);
});
el.addEventListener('mouseout', function() {
mouseOver = false;
console.log(mouseOver);
});
});
// remove menu upon mouse out
document.getElementsByClassName("folder")[i].addEventListener("mouseout", function() {
if (mouseOver === false) {
el = document.getElementById("menu");
el.remove();
}
});
}
}

Show Guides and do snapping while dragging jquery draggable divs

If there are multiple jquery draggable divs I want to see guides and snap to guides, edges and corners of others divs.
Here's the code:
$(".draggable").draggable();
$(".draggable").resizable();
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image{
height: 150px;
width: 200px;
}
img{
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
The blue line in following image is what i want to be shown while divs are being dragged
see image here. Divs should snap to the blue guiding lines when divs are aligned.
don't change the relative and absolute position of classes as I've used them to overlay one div on another.
I tried searching online but solutions are too old, awakward and work with jquery 2.x
Please help!
To address the first part of your question, you can manage the guides like so.
$(function() {
function moveGuides(top, left) {
$("#guide-h").css("top", top + "px");
$("#guide-v").css("left", left + "px");
}
function getMyCorners(el) {
var p = $(el).position();
return {
top: p.top,
left: p.left,
bottom: p.top + $(el).height(),
right: p.left + $(el).width()
};
}
function startGuides(targetEl) {
var c = getMyCorners(targetEl);
moveGuides(c.top, c.right);
$(".guide").show();
}
function stopGuides() {
$(".guide").hide();
}
$(".draggable").draggable({
start: function(e, ui) {
startGuides(this);
},
drag: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
$(".draggable").resizable({
start: function(e, ui) {
startGuides(this);
},
resize: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
});
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image {
height: 150px;
width: 200px;
}
img {
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
With helper functions, you can reveal the guides, and move them based on specific events.
The next, and much more involved portion, would be to create collision detection for the various elements. This will require checking against each of the elements involved against all the other elements. For example:
if($("#guide-h").position().top == $(".draggable").position().top){
// Stop event
}
I am guessing that you are looking to create alignment. So when a Guide collides with an edge, it should prevent the User from dragging or resizing the element further in that direction. Also, do you want it to Snap and what tolerance should that snap be?
Since you did not provide those details, I am not really able to address your second question in full.

I want to change a state on a specific condition

i wanted to get this logic =>
if you click on a cube for the first time,
it turns black,
if you clicked another time on the same cube, it turns white.
if the cube is allready white, it becomes black
It should works on each cube individually... I'm getting lost. Thx for your advices.
var compteur = 0;
var hasBeenClick = false;
/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
//Lorsque je clique
$(".cliquerAction").click(function () {
if (hasBeenClick === false) {
$(this).css("background-color", "black");
compteur = compteur + 1;
alert("Premier click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = true;
} else if (hasBeenClick === true) {
compteur = compteur + 1;
$(this).css("background-color", "white");
alert("Deuxieme click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = true;
}
if (compteur > 2) {
$(this).css("background-color", "black");
alert("Bcp click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = false;
compteur = 0;
}
});
});
*{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body {
background-color: darkblue;
max-width: 1980px;
max-height: 1080px;
}
#page {
border: white 5px solid;
width: auto;
height: 1000px;
margin: auto;
}
#bloc1 {
position:relative;
background-color: red;
width: 100px;
height: 100px;
}
#bloc2 {
background-color: yellow;
width: 100px;
height: 100px;
}
#bloc3 {
background-color: darkgreen;
width: 100px;
height: 100px;
}
#bloc4 {
background-color: blueviolet;
width: 100px;
height: 100px;
}
#container{
padding-left:10%;
padding-right:10%;
margin:auto;
border:pink thick solid;
display:flex;
justify-content:space-between;
width:auto;
height:auto;
min-height:500px;
min-width:500px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page d'acceuil</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="page">
<div id="container">
<div id="bloc1" class="cliquerAction" ></div>
<div id="bloc2" class="cliquerAction"></div>
<div id="bloc3" class="cliquerAction"></div>
<div id="bloc4" class="cliquerAction"></div>
</div>
</div>
</body>
</html>
I think doing with css class is more simple and easy for that background color black and white.Creating two class and use addClass and removeClass as your condition state change
CSS
.click-even {
background: white !important;
}
.click-odd {
background: black !important;
}
JS
$(document).ready(function () {
"use strict";
//Lorsque je clique
$(".cliquerAction").click(function () {
if($(this).hasClass("click-odd")){
$(this).addClass("click-even");
$(this).removeClass("click-odd");
}
else{
$(this).addClass("click-odd");
$(this).removeClass("click-even");
}
});
});
In an effort to avoid unnecessary confusion, I'm going to suggest an alternative. Instead of checking if something has already been clicked or not to determine the next color, you could instead try focusing only on 3 simple rules based on the current color and the desired logic you've described:
If a cube is clicked for the first time (e.g. If it's not black or white) then change it to black.
If a black cube is clicked - it turns white.
If a white cube is clicked - it turns black.
I finally get what i was looking for with this : ( i m sure i can improve this with a switch case, but it s working atm ). Hope this can help someone in somedays.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
//Lorsque je clique
$(".cliquerAction").click(function () {
var color = $(this).css('background-color');
alert(color);
//first time applying a color turn it black
if (color !== "rgb(255, 255, 255)" || "rgb(0, 0, 0)") {
$(this).css('background-color', 'black');
}
// if it s black and i click on the element : it turns white
if (color === "rgb(0, 0, 0)") {
$(this).css('background-color', 'white');
}
// if it s white and i click on the element : it turns black
if (color === "rgb(255, 255, 255)") {
$(this).css('background-color', 'black');
}
});
});
*{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.black{
background-color: black;
}
.white{
background-color: white;
}
.active {
background-color:#aaa;
}
body {
background-color: darkblue;
max-width: 1980px;
max-height: 1080px;
}
#page {
border: white 5px solid;
width: auto;
height: 1000px;
margin: auto;
}
#bloc1 {
position:relative;
background-color: red;
width: 100px;
height: 100px;
cursor: pointer;
}
#bloc2 {
background-color: yellow;
width: 100px;
height: 100px;
cursor: pointer;
}
#bloc3 {
background-color: darkgreen;
width: 100px;
height: 100px;
cursor: pointer;
}
#bloc4 {
background-color: blueviolet;
width: 100px;
height: 100px;
cursor: pointer;
}
#container{
padding-left:10%;
padding-right:10%;
margin:auto;
border:pink thick solid;
display:flex;
justify-content:space-between;
width:auto;
height:auto;
min-height:500px;
min-width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>Page d'acceuil</title>
<script src="../jquery/jquery-3.0.0.js"></script>
<script src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="page">
<div id="container">
<div id="bloc1" class="cliquerAction" class="black" class="white"></div>
<div id="bloc2" class="cliquerAction" class="black" class="white"></div>
<div id="bloc3" class="cliquerAction" class="black" class="white"></div>
<div id="bloc4" class="cliquerAction" class="black" class="white"></div>
</div>
</div>
</body>

How to jquery if scroll echo div?

I have this code:
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background: red
}
.menu2 {
display: none;
}
<div id="main">
<div class="menu1">COntent 1</div>
<div class="menu2">Content 2</div>
</div>
How to: When I'm scroll down div .menu2 display sticky in top as css
.menu2 {
height: 30px; background: blue; position: fixed
}
My code: http://jsfiddle.net/rh1aLnxs/
Thanks
this can be accomplished with css's position:fixed, as long as you don't need additional behavior regarding the parent div (position:fixed is ignorant to the parent in css)
here's an example:
.menu1 {position:fixed; height: 30px; background: red; max-width: 500px; width:100%}
http://jsfiddle.net/rh1aLnxs/
If you need for example, for menu1 to go away when the user scrolls below main, then you need to use jquery's scroll event and handle the positioning manually (http://api.jquery.com/scroll/)
try this:
var headerTop = $('.menu1').offset().top;
// var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
if (scrollTop > headerTop) { // Check to see if we have scrolled more than headerBottom
if (($(".menu2").is(":visible") === false)) {
$('.menu1').hide();
$('.menu2').fadeIn('slow');
}
} else {
if ($(".menu2").is(":visible")) {
$('.menu2').hide();
$('.menu1').fadeIn('slow');
}
}
});
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background-color: red
}
.menu2 {
background-color: blue;
max-width: 500px;
width: 100%;
top: 0;
display: none;
/*display: none*/
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="menu1">Content1</div>
<div class="menu2">Content2</div>
</div>
Here are some improvements on your fiddle along with a simplified version of the script to add/remove a fixed class on scroll.
http://jsfiddle.net/rh1aLnxs/2/
jQuery(window).bind("scroll", function() {
if (jQuery(this).scrollTop() > 100) {
jQuery(".menu1").removeClass("no-fixed").addClass("fixed");
} else {
jQuery(".menu1").removeClass("fixed").addClass("no-fixed");
}
});
#main {max-width: 500px; height: 900px; margin: auto; background: green}
.menu1 {height: 30px; background: red}
.menu2 {display: none}
#main {
width:100%;
position:relative;
}
.no-fixed {
position: relative;
}
.fixed {
position: fixed;
width:100%;
max-width: 500px;
}
<div id="main">
<div class="menu1"></div>
<div class="menu2"></div>
</div>

Disallow Interaction With Website During Animations

I am attempting to write some javascript that will create textareas and when you click on a textarea to begin typing it grows and centers in the window until you click off of it where it shrinks back down.
Easy enough, until I wanted to add the .animate() and suddenly I have some serious problems that I am pouring too much time into trying to figure out.
While running some quality assurance I discovered a number of bugs...
-If I drop focus on the textarea that is animating its growth while it is still animating then the .blur() function fails to call.
-If I shift focus to another textarea while the first is still animating
then both may remain large failing to call the .blur() function.
-Finally there is just some really strange activity with the centering feature. .scrollTo() and .animate() perform poorly together especially when there are many textareas or I am picking a box that in the midst of many.
Is there a way to disallow any interaction with the website while an animation plays out?
Any ideas on how to remedy any of these issues?
the javascript... boxy.js
Code:
function growthearea() {
$('textarea.textfield').blur(function(){
$(this).animate({ height: "51" }, 500); //shrink the current box when lose focus
//$(this).height(51);
});
$('textarea.textfield').focus(function(){
$("*").off("focus,blur,click"); //turn off focus,blur,click while animating
var wheretoY = $(this).offset().top-73;
window.scrollTo(17,wheretoY);
// turn back on focus,blur,click after animation completes
$(this).animate({ height: "409" }, 1000, function(){("*").on("focus,blur,click")});
//$(this).height(409);
});
}
function newboxbtn()
{
var btn=document.createElement("textarea");
btn.setAttribute('class','textfield');
var textlocale = document.getElementById('locale');
textlocale.appendChild(btn);
$('textarea.textfield').on('keyup change', function() {
$('p.display').text('You are typing: ' + $(this).val()); //live update from focused textarea
});
growthearea(); //recall function for any new boxes to be acknowledged
};
function jsinit()
{
$('textarea.textfield').on('keyup change', function() {
$('p.display').text('You are typing: ' + $(this).val()); //live update from focused textarea
});
growthearea(); //call function for initial group of boxes
}
the html... boxy.htm
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="sty.css" />
<script src="./jquery.js"></script>
<script src="./boxy.js"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );
});
jsinit();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<div class="grid">
<div class="col-left" id="left">
<div class="module" id="scrollingDiv">
<input type="button" value="add" onclick="newboxbtn()" />
<p class="display">you are typing </p>
</div>
</div> <!--div class="col-left"-->
<div class="col-midd">
<div class="module" id="locale">
<textarea class="textfield" placeholder="begin typing here..." ></textarea>
<textarea class="textfield" placeholder="begin typing here..."></textarea>
</div>
</div> <!--div class="col-midd"-->
</div> <!--div class="grid"-->
</body>
</html>
the css... sty.css
Code:
.textfield {
width: 97%;
height: 51;
resize: none;
outline: none;
border: none;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px 1px #0044FF;*/
}
.textfielded {
width: 97%;
resize: none;
outline: none;
border: none;
overflow: auto;
position: relative;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px #FFDD00;*/
}
/*#postcomp {
width: 500px;
}*/
* {
#include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-left {
width: 13%;
}
.col-midd {
width: 43%;
}
.col-rght {
width: 43%;
}
.module {
padding: $pad;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
body {
padding: 10px 50px 200px;
background: #001235;
}
h1 {
color: black;
font-size: 11px;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
}
p {
color: white;
}
To check if something is animated: { quite weird for sure! }
if($('*').is(':animated').length) return;

Categories