We Keep Coding

Resize an html element using mouse - jQuery

I have container and I want to resize it with mouse using JavaScript.
the implementation uses mousedown ,mouseup, and mousemove events but I have slight problem when page is already scrolled before the mousedown is fired.
the whole page seems to scroll to position zero. How can i fix it so whether page is already scrolled or not the resize will work fine.
JS:
//resize div vertically or horizontal or both
$.fn.resizeMe = function(options){
var grippie = $(this),
options = $.extend({resizeMe:"",resize:"vertical"},options),
resizeMe = $(options.resizeMe);
grippie.on('mousedown',function(e){initialiseGrippieResize(e)});
function initialiseGrippieResize(e) {
$(window).on('mousemove',function(e){
startResizing(e);
resizeMe.css({opacity:.25});
}).on('mouseup',function(e){
stopResizing(e);
resizeMe.css({opacity:1});
});
}
//css objects
function cssOBJ(e,key){
var css = {
vertical:{height:(e.clientY - resizeMe.offset().top)},
horizontal : {width:(e.clientX - resizeMe.offset().left)},
both: {
height:(e.clientY - resizeMe.offset().top),
width: (e.clientX - resizeMe.offset().left)
}
};
//return objects
return css[key];
}
//Start Resizing
function startResizing(e) {
resizeMe.css(cssOBJ(e,options.resize));
}
function stopResizing(e) {
$(window).off('mousemove mouseup');
}
}
$('.grippie').resizeMe({resizeMe:"#pane",resize:'vertical'});
HTML:
<div id='main-container'>
<div id='pane' arial-lable='content-wrapper'>contents will go here</div>
<div class='grippie'></div>
</div>
CSS:
#pane{
resize: n-resize;
overflow: hidden;
border: 1px solid #d6d9dc;
padding:15px 20px;
min-height:50px;
}
#pane *{border:0px !important; background: #fff !important;}
.grippie {
background-position: center;
border: 1px solid #d6d9dc;
border-width: 0 1px 1px;
cursor: s-resize;
height: 9px;
overflow: hidden;
background-color: #eff0f1;
/*background-image: url('images/icons.png');*/
background-repeat: no-repeat;

In JavaScript
pageX, pageY, screenX, screenY, clientX, and clientY returns a number which indicates the number of physical “CSS pixels” a point is from the reference point. The event point is where the user moved the mouse, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.
but pageX or pageY returns a number which indicates the amount of page scrolled top or left.
so changing the clientX to pageX and clientY to pageY
solved the problem and now I can resize any element. :) :)
//css objects
function cssOBJ(e,key){
var css = {
vertical:{height:(e.pageY - resizeMe.offset().top)},
horizontal : {width:(e.pageX - resizeMe.offset().left)},
both: {
height:(e.pageY - resizeMe.offset().top),
width: (e.pageX - resizeMe.offset().left)
}
};
//return objects
return css[key];
}

How to get hold of div on mousemove?

JSFiddle code
I am trying to get hold of div with blue lines when I move the mouse pointer within a distance of 20px from the div. I am able to get hold of the div with blue lines only when the mouse pointer is on that div. Basically, selecting a div using the mouser pointer is difficult as the div width is only 1px which cannot be changed.
I am executing the below code but still not able to catch hold of the div which is 20px away from either right or left of the mouse pointer.
Note:The div mentioned above indicated the div with blue lines and not the gray box.
//Div positions and their id has been added to map
var hmap = new Map();
hmap.set("hguide1",96);
hmap.set("hguide2",284);
hmap.set("hguide3",520);
var vmap = new Map();
vmap.set("vguide1", 96);
vmap.set("vguide2",384);
vmap.set("vguide3",720);
$(document).mousemove(function(e){
var mx = e.pageX, my = e.pageY;
//Catch hold of vertical div's
for (var [key, value] of vmap) {
var dist = value - mx;
if(dist >= -20 && dist <= 20){
$('.'+key).css({width: '10px', left:});
} else {
$('.'+key).css({width: '1px'});
}
}
//Catch hold of horizontal div's
for (var [key, value] of hmap) {
var dist = value - my;
if(dist >= -20 && dist <= 20){
$('.'+key).css({height: '10px'});
} else {
$('.'+key).css({height: '1px'});
}
}
});
I looking for a way thru which I can catch hold of the div, which is 20px away from either the left or right side of the mouse pointer, and drag it.
Any suggestions much appreciated.

You can use CSS styling to get this result. We set the ::after size to 100% - 20px on either the left or top, depending if it's the horizontal or vertical line. We then set our width or height, depending on if we're adjusting the row or column, to either 100% or the buffer size(40px, because we want 20px on either side of the line).
I realize that sounds a little confusing, so I'll split them up. Here's the vertical:
.vguide1,.vguide2,.vguide3 {
border-left: 1px solid blue;
padding-bottom: 20px;
position: absolute;
width:1px;
height:650px;
}
.vguide1::after,.vguide2::after,.vguide3::after {
content: '';
position: absolute;
left: calc(50% - 20px);
width: 40px;
height: 100%;
cursor: col-resize;
}
Horizontal:
.hguide1,.hguide2,.hguide3 {
padding-right: 20px;
position: absolute;
width:850px;
height:1px;
border-top: 1px solid blue;
}
.hguide1::after,.hguide2::after,.hguide3::after {
content: '';
position: absolute;
top: calc(50% - 20px);
width: 100%;
height: 40px;
cursor: row-resize;
}
With shading to show the hit box: https://jsfiddle.net/Ljxpj5bt/27/
Without hit box: https://jsfiddle.net/Ljxpj5bt/28/

Vanilla JS Box Shadow on Scroll

I've been learning vanilla JS and most of the solutions to this problem are jquery dependent and I find myself getting a little muddled. (This is not a js over jq argument I am looking for a specific solution).
I am attempting to create a box shadow that activates on a fixed position menu as it scrolls.
If I capture the header element in a variable,
var header = document.getElementById("header");
and then add the scroll event to it:
header.onscroll = function(){};
What am I checking for at this point? The y-offset?

This should help
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("fixedMenu").className = "myFixedMenu-box-shadow";
} else {
document.getElementById("fixedMenu").className = "myFixedMenu";
}
}
body{
height: 900px;
}
.myFixedMenu{
width : 100%;
height: 70px;
background-color: black;
position: fixed;}
.myFixedMenu-box-shadow{
width : 100%;
height: 70px;
background-color: orange;
position: fixed;
box-shadow: 0px 0px 5px 5px #e1e1e1;
}
<div class="myFixedMenu" id="fixedMenu">
Some Menu Item
</div>

your code is binding to the onscroll event of header but based upon what you've explained, you could bind to to the onscroll event of the body and check for window.scrollY
http://mdn.io/scrollY

Calculate height with JQuery for sticky header

I want to change the first header to be 100% page height and then using the javascript use this height to have the sticky header appear after the first header.
So I need to calculate the height of the page I think using jquery. Not sure how to implement it.
http://jsfiddle.net/obmerk99/VvKq3/1/
#header{
width: 100%; background-color: red;
border: 1px solid black;height:40px;}
#header_stick{
width: 100%; background-color: black;
border: 1px dotted grey;color:white;}
.stick{
position:fixed;top:0;opacity:0.7;}
h1{
font-size: 130%; padding-bottom:1px;}
jQuery(window).scroll(function(){
var top = jQuery(window).scrollTop();
if(top>42) // height of float header
jQuery('#header_stick').addClass('stick');
else
jQuery('#header_stick').removeClass('stick');
})
<div id="header">My floating header</div>
<div id="header_stick">My stick header</div>

I was able to adapt your code into the following: Here's a fiddle
$(function() {
var wH = $(window).height(),
top;
$("#header").css("height", wH);
$(window).scroll(function(){
top = jQuery(window).scrollTop();
if(top>wH) // height of float header
$('#header_stick').addClass('stick');
else
$('#header_stick').removeClass('stick');
});
});
and for shiggles, watch me play this fiddle.
$(function() {
// cache vars
var wH = $(window).height(),
$stick = $("#header_stick"),
isStick;
// adjust 1st div height
$("#header").css("height", wH);
// sexier implementation with toggle
$(window).scroll(function(){
$stick.toggleClass('stick', jQuery(window).scrollTop() > wH);
});
});

Some Jquery / CSS help regarding navigation

I'm currently working on my pfolio website and im quite far but not there yet...
http://thinkagain.nu/?page_id=2501 See this page I have this navigation bullets / dots on the right which you can navigate through the projects. I got it working for so far that if you click a bullet / dot it becomes selected (orange color) but what I want is that it also becomes selected state when you scroll down the sections, so without clicking on it.
So when your scrolling the 2nd project, the 2nd bullet / dot becomes selected, 3rd project makes the 3rd bullet / dot become selected and so on.
This is my code:
CSS:
#floatnav {
position: fixed;
right: -50px;
top: 50%;
width: 8em;
margin-top: -2.5em;
}
.bullit {
background-color:#242424;
-moz-border-radius:17px;
-webkit-border-radius:17px;
border-radius:17px;
border:0px solid #000000;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:12px;
padding:5px 5px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
box-shadow: inset 1px 4px 9px -6px;
box-shadow: 2px 2px 1px #888888;
}
.bullit:hover {
background-color:#ebebeb;
box-shadow: inset 1px 4px 9px -6px;
}
.bullit.active {
position:relative;
top:1px;
background:orange;
}
HTML:
<ul id="floatnav">
</ul>
Jquery/javascript:
$('#floatnav a').click(function() {
$('#floatnav a').removeClass('active'); /*Remove previous*/
$(this).addClass('active'); /*Active clicked*/
})
If anyone could help me it would be greatly appreciated! Thanks in advance.
Nick

Try this (see example http://jsfiddle.net/shtrih/Z3BTd/)
$(window).on('scroll', function () {
var positions = [],
elements = [],
scrolltop = $(this).scrollTop()
;
$('> div', '#main').each(function() {
var pos = Math.abs($(this).position().top - scrolltop);
positions.push(pos);
elements[ pos ] = this.id;
});
var array_min = Math.min.apply(null, positions);
var current_element_id = elements[ array_min ];
console.log(current_element_id);
$('a', '#floatnav').removeClass('active');
$('a[href="#'+ current_element_id +'"]', '#floatnav').addClass('active');
});
Used materials:
JavaScript: min & max Array values?
How to know the end of scrolling event for a <div> tag
http://jqapi.com/

Here is some code that I hope it will help you understand and use on your website:
http://jsfiddle.net/dragulceo/KMnmb/1/
Notice that I included an external link to a jQuery plugin - jQuery throttle / debounce
You need to register a scroll handler and because the scroll handler is triggered many times you should use throttle method so that you don't affect the scrolling speed (avoid hiccups).
onScrollCallback = $.throttle(250, function () {
var el;
floatNavs.find('a.active').removeClass('active');
el = getVisibleElement();
if(el) {
floatNavs.find('a[href="#' + $(el).attr('id') + '"]').addClass('active');
}
});
$(document).on('scroll', onScrollCallback);
So now the browser triggers scroll event the code - moderately - will check to see which div is on screen and then add the active class for the a element that has the target the same with the id attribute.
The function that finds the element on screen is this one:
//gets the div on screen
getVisibleElement = function () {
var scrl = window.scrollY,
height = jQuery(window).height(),
elHeight,
i;
for (i = 0; i< numberEls; i++) {
item = $(targetEls[i]);
pos = item.position();
elHeight = item.height();
// the criteria if the element is on screen is that
// the topX position is greater then the scrolled pixels
// minus half of the element. There can be variations
// depending on the scrolled items
if (pos.top > scrl - elHeight / 2) {
return targetEls[i];
}
}
return false;
}
And as you can see in the comments you can play with or change the condition that determines when the element is on screen depending on the height of the scrolled elements.