change mouse trail script - javascript

I found this cool Codepen Mouse Trail script. How can I change it that it only works inside a div, and that it uses an image (of a cursor) instead the css-code (like it is 1996)? Tnx!
https://codepen.io/tomhodgins/pen/bgRVKL
var coord = new Array(50)
function update(e){
var x = e.clientX || e.touches[0].clientX
var y = e.clientY || e.touches[0].clientY
coord.push([x,y])
coord.shift()
EQCSS.apply()
}
document.addEventListener('mousemove',update)
document.addEventListener('touchmove',update)
#element '[data-dot]' {
$root, $this {
cursor: none;
}
$this {
width: 30px;
height: 30px;
background: white;
border: 2px solid black;
border-radius: 100%;
border-top-left-radius: 0;
position: fixed;
left: eval("coord[50-(getAttribute('data-dot')*5)][0]")px;
top: eval("coord[50-(getAttribute('data-dot')*5)][1]")px;
opacity: calc(eval("10 - getAttribute('data-dot')") / 10);
}
}
<aside data-cursor>
<div data-dot=10></div>
<div data-dot=9></div>
<div data-dot=8></div>
<div data-dot=7></div>
<div data-dot=6></div>
<div data-dot=5></div>
<div data-dot=4></div>
<div data-dot=3></div>
<div data-dot=2></div>
<div data-dot=1></div>
</aside>

Related

How to make a div resizer with pure JAvaScript

I am trying to create a div resizer and due to some restrictions, I cannot use jQuery and I am forced to use pure JavaScript for that. In the current state, it works, but it breaks if the div that will have the slider does not have the position set to absolute. Is there a way to solve that issue? Thank you very much.
I am a student learning to write JavaScript/CSS/HTML code and so I am relatively new to this.
const BORDER_SIZE = 4;
const panel = document.getElementById("left_panel");
const StationaryPanel = document.getElementById("right_panel");
const parent = document.getElementById("parent");
const label1 = document.getElementById("lb1");
const label2 = document.getElementById("lb2");
const label3 = document.getElementById("lb3");
let m_pos;
function resize(e) {
const dx = m_pos - e.x;
m_pos = e.x;
lb1.innerHTML = panel.offsetWidth;
lb2.innerHTML = StationaryPanel.offsetWidth;
lb3.innerHTML = parent.offsetWidth;
//lb3.innerHTML = document.body.clientWidth;
panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
StationaryPanel.style.width = (parent.offsetWidth - panel.offsetWidth) + "px";
//StationaryPanel.style.width = (document.body.clientWidth - panel.offsetWidth) + "px";
}
panel.addEventListener("mousedown", function(e) {
if (e.offsetX < BORDER_SIZE) {
m_pos = e.x;
if (panel.style.width < panel.minWidth || panel.style.width > panel.maxWidth) {
return;
}
document.addEventListener("mousemove", resize, false);
}
}, false);
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", resize, false);
}, false);
#left_panel {
position: absolute;
width: 96px;
min-width: 50px;
max-width: 500px;
padding-left: 4px;
height: 100%;
right: 0;
background-color: #f0f0ff;
}
#left_panel::before {
content: " ";
background-color: #ccc;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#right_panel {
width: 1000px;
height: 100%;
background-color: #ff0000;
}
#parent {
width: 800px;
}
<body>
<div id="parent">
<div id="left_panel">
This is the left div, the one that moves
</div>
<div id="right_panel">
This is the right div, the one that stays the same
</div>
</div>
<p id="lb1"></p>
<p>This is the left panel width ^</p>
<p id="lb2"></p>
<p>This is the right panel width ^</p>
<p id="lb3"></p>
<p>This is the parent width ^</p>
</body>
Here is the simplest way you can do it using CSS if that is not an issue here no need to use JS for this feature, it is just an example but it definitely help you on your way.
#MainDiv {
display: flex;
flex-direction: row;
height: 200px;
width: 400px;
border: 1px solid red;
position: relative;
}
#leftDiv {
width: 200px;
border: 1px solid yellow;
}
#rightDiv {
border: 2px solid;
padding: 20px;
width: 300px;
/* you can make this vertical/auto to make resize both ways */
resize: horizontal;
overflow: auto;
}
<div id="MainDiv">
<div id="leftDiv">
Left Div
</div>
<div id="rightDiv">
Right Div
</div>
</div>
Here is it in Javascript:
var h = $('#handle'),
l = $('#left'),
r = $('#right'),
w = $('body').width() - 18;
var isDragging = false;
h.mousedown(function(e) {
isDragging = true;
e.preventDefault();
});
$(document).mouseup(function() {
isDragging = false;
}).mousemove(function(e) {
if (isDragging) {
l.css('width', e.pageX);
r.css('width', w - e.pageX);
}
});
#left,
#right {
border: 1px solid #aaa;
float: left;
height: 100px;
width: 48%;
}
#handle {
background: #000;
float: left;
height: 100px;
margin: 1px;
/* Slider width */
width: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left"> Left</div>
<div id="handle"></div>
<div id="right">Right</div>

Show vertical tracking line on hover over multiple elements

I want to show a vertical line that will appear as and of my charts are hovered over and will disappear when the mouse exits the chart elements. Weirdly, the mouseleave and mouseout events seem to fire when the mouse is not moving or when it is moving up and down (rather than side-to-side), see the code snippet below. I don't want the line to disappear when the mouse pauses and I want it to track the mouse wherever it goes.
I've tried firing the code on hover, mouseenter and mouseover but mousemove (see below code) is the only event that continuously fires as the position of the cursor changes.
//$(document).ready(function() {
function showVerticalLine(e) {
var topBarHeight = 56;
var bottomHeight = 100;
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$('.verticalTrackerLine').css({
'opacity': '1',
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px",
'transition': 'left 0.1s'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you are moving/hovering');
};
function hideVerticalLine(){
//Hide the line
$('.verticalTrackerLine').css({
'opacity': '0'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you have left');
}
$("#chart1").add("#chart2").mousemove(showVerticalLine);
$("#chart1").add("#chart2").mouseout(hideVerticalLine);
//})
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68,74,79);
position: fixed;
z-index: 1;
opacity: 0;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<SPAN id="testSTRING"></SPAN>
<SPAN class="verticalTrackerLine"></SPAN>
<DIV id="chart1" class="chart">Chart 1</DIV>
<DIV id="chart2" class="chart">Chart 2</DIV>
</head>
Any help/suggestions would be gratefully received.
Your guess is right, when you hover over the actual line that interferes with hovering over the buttons. So, just adding pointer-events: none; to the .verticalTrackerLine selector will fix this so that the mouse has no interaction with the line at all.
I also did some minor JS cleanup on your code, nothing too major. The CSS rule transition: left 0.1s doesn't need to be re-applied every time the mouse moves, so that has now been set in the CSS instead.
$(function() {
var topBarHeight = 56;
var bottomHeight = 100;
var $line = $('.verticalTrackerLine');
var $charts = $("#chart1, #chart2");
var $test = $("#testSTRING");
function showVerticalLine(e) {
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$line.css({
'opacity': 1,
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px"
});
//Update string to show when the charts are being hovered over
$test.html('you are moving/hovering');
};
function hideVerticalLine() {
//Hide the line
$line.css('opacity', 0);
//Update string to show when the charts are being hovered over
$test.html('you have left');
}
$charts
.mousemove(showVerticalLine)
.mouseout(hideVerticalLine);
});
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68, 74, 79);
position: fixed;
z-index: 1;
opacity: 0;
transition: left 0.1s;/* <------ this was moved from JS */
pointer-events: none; /* <------ this was added */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<output id="testSTRING">nothing has happened yet...</output>
<span class="verticalTrackerLine"></span>
<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>
You can simplify it further:
move the tracking line into an :after pseudo element inside each chart element and position it absolutely within the chart
position it 10px more to the top and bottom using:
top: -10px;
bottom: -10px;
set opacity: 0 to the tracking line and on :hover set it to one - now you'll have the line on hover - see demo below:
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
position: relative;
box-sizing: border-box;
}
.chart:after {
content: '';
border-left: 2px dashed rgb(68, 74, 79);
position: absolute;
z-index: 1;
opacity: 0;
top: -10px;
bottom: -10px;
}
.chart:hover:after {
opacity: 1;
}
<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>
Now comes the javascript part - we can modify the left property to show the line moving with the mouse:
first add a CSS variable (say --left) that can be adjusted from JS
now in a mousemove listener you can use e.pageX - this.offsetLeft to get the relative position (left value) of the mouse inside the box.
update the --left CSS variable using document.documentElement.style.setProperty('--left', ...
Note that I've made a maximum value for the left value to be on the safe side to this.offsetWidth - 2.
See demo below:
$(".chart").mousemove(function (e) {
document.documentElement.style.setProperty('--left', Math.min(e.pageX - this.offsetLeft, this.offsetWidth - 2) + 'px');
});
:root {
--left: 0;
}
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
position: relative;
box-sizing: border-box;
}
.chart:after {
content: '';
border-left: 2px dashed rgb(68, 74, 79);
position: absolute;
z-index: 1;
opacity: 0;
top: -10px;
bottom: -10px;
left: var(--left);
}
.chart:hover:after {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>
Add pointer-events: none; to .verticalTrackerLine
//$(document).ready(function() {
function showVerticalLine(e) {
var topBarHeight = 56;
var bottomHeight = 100;
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$('.verticalTrackerLine').css({
'opacity': '1',
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px",
'transition': 'left 0.1s'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you are moving/hovering');
};
function hideVerticalLine(){
//Hide the line
$('.verticalTrackerLine').css({
'opacity': '0'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you have left');
}
$("#chart1").add("#chart2").mousemove(showVerticalLine);
$("#chart1").add("#chart2").mouseout(hideVerticalLine);
//})
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68,74,79);
position: fixed;
z-index: 1;
opacity: 0;
pointer-events: none;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<SPAN id="testSTRING"></SPAN>
<SPAN class="verticalTrackerLine"></SPAN>
<DIV id="chart1" class="chart">Chart 1</DIV>
<DIV id="chart2" class="chart">Chart 2</DIV>
</head>

Image Comparison Slider Containers Won't Flex Wrap

Here's a link to my codepen: https://codepen.io/Bryandbronstein/pen/NLVQjB
So this is a strange issue and I'm at the end of my rope with this one. I've been learning a bit more about CSS and Javascript, and decided to try out an image comparison slider I found on W3C's website. It works perfectly as a single element, however I want to have a full gallery of these. Yet no matter what I try, they don't seem to want to obey any of the flex rules I set for their parent container. You'll notice in the codepen that one comparison container is hidden behind another. Any ideas?
function initComparisons() {
var x, i;
/*find all elements with an "overlay" class:*/
x = document.getElementsByClassName("img-comp-overlay");
for (i = 0; i < x.length; i++) {
/*once for each "overlay" element:
pass the "overlay" element as a parameter when executing the compareImages function:*/
compareImages(x[i]);
}
function compareImages(img) {
var slider, img, clicked = 0, w, h;
/*get the width and height of the img element*/
w = img.offsetWidth;
h = img.offsetHeight;
/*set the width of the img element to 50%:*/
img.style.width = (w / 2) + "px";
/*create slider:*/
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
/*insert slider*/
img.parentElement.insertBefore(slider, img);
/*position the slider in the middle:*/
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
/*execute a function when the mouse button is pressed:*/
slider.addEventListener("mousedown", slideReady);
/*and another function when the mouse button is released:*/
window.addEventListener("mouseup", slideFinish);
/*or touched (for touch screens:*/
slider.addEventListener("touchstart", slideReady);
/*and released (for touch screens:*/
window.addEventListener("touchstop", slideFinish);
function slideReady(e) {
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*the slider is now clicked and ready to move:*/
clicked = 1;
slider.style.border = "0";
/*execute a function when the slider is moved:*/
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
}
function slideFinish() {
/*the slider is no longer clicked:*/
clicked = 0;
slider.style.border = "3px solid white";
}
function slideMove(e) {
var pos;
/*if the slider is no longer clicked, exit this function:*/
if (clicked == 0) return false;
/*get the cursor's x position:*/
pos = getCursorPos(e)
/*prevent the slider from being positioned outside the image:*/
if (pos < 0) pos = 0;
if (pos > w) pos = w;
/*execute a function that will resize the overlay image according to the cursor:*/
slide(pos);
}
function getCursorPos(e) {
var a, x = 0;
e = e || window.event;
/*get the x positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x coordinate, relative to the image:*/
x = e.pageX - a.left;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
return x;
}
function slide(x) {
/*resize the image:*/
img.style.width = x + "px";
/*position the slider:*/
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
}
html, body {
background-color: #333333;
margin: 0;
padding: 0;
}
* {box-sizing: border-box;}
.gallery_text {
color: white;
font-family: Abel, Helvetica, sans-serif;
font-size: 1.7rem;
text-align: center;
line-height: 1.8em;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.img-comp-container{
position: relative;
flex: 50%;
}
.img-comp-overlay{
border-right: 2px solid rgba(51,51,51, .5) ;
}
.img-comp-img {
position: absolute;
width: auto;
height: auto;
overflow: hidden;
}
.img-comp-img img {
vertical-align: middle;
}
.img-comp-slider {
position: absolute;
z-index: 9;
cursor: ew-resize;
width: 40px;
height: 40px;
transform: rotate(136deg);
background-color: #333333;
opacity: .8;
border-radius: 10%;
border: 3px solid white;
}
<body onload="initComparisons();">
<div class="row">
<div class="img-comp-container" >
<div class="img-comp-img">
<img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?cs=srgb&dl=black-and-white-dark-building-162389.jpg&fm=jpg" width="500" height="450">
</div>
<div class="seperator"></div>
<div class="img-comp-img img-comp-overlay">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSslfAcWKXuMxBpzcJC5ZUyFqMOb2Jtd12x4kBUGG9mTe3KeMJz" width="500" height="450">
</div>
</div>
<div class="img-comp-container">
<div class="img-comp-img">
<img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?cs=srgb&dl=black-and-white-dark-building-162389.jpg&fm=jpg" width="500" height="450">
</div>
<div class="seperator"></div>
<div class="img-comp-img img-comp-overlay">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSslfAcWKXuMxBpzcJC5ZUyFqMOb2Jtd12x4kBUGG9mTe3KeMJz" width="500" height="450">
</div>
</div>
<div class="img-comp-container">
<div class="img-comp-img">
<img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?cs=srgb&dl=black-and-white-dark-building-162389.jpg&fm=jpg" width="500" height="450">
</div>
<div class="seperator"></div>
<div class="img-comp-img img-comp-overlay">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSslfAcWKXuMxBpzcJC5ZUyFqMOb2Jtd12x4kBUGG9mTe3KeMJz" width="500" height="450">
</div>
</div>
</div>
</body>
The images won't wrap because all children of .img-comp-container were absolutely positioned. This collapsed all the flex elements so that the flex wrap wouldn't work.
Either make one of more of the children of .img-comp-container relative or static, or set a width and height to .img-comp-container.
Here are the changes I made to the CSS:
.img-comp-container{
position: relative;
flex: 50%;
}
.img-comp-img {
position: relative;
width: auto;
height: auto;
overflow: hidden;
}
.img-comp-overlay {
border-right: 2px solid rgba(51, 51, 51, 0.5);
position: absolute;
top: 0;
left: 0;
}
See this codepen fork of your pen for a working solution.

How to set jQuery draggable min/max-left and min/max-right

I made a copy of JSbin for practice, JSbin link here, actual site link here.
This is just a practice for making the front-end of websites as I just started learning web dev little over a week ago. You can put in html, css and javascript in the editboxes, and a page spit out in Output just like the actual JSbin.
But the problem is that you can resize the divs pass other divs.
My idea to prevent this from happening is:
1. get the editboxes' current positions
2. store the left/right position of the editbox if resized to 10% window width
3. set the min/max left and right for the draggable div
And hence the question. How do I set the max-left/right for the draggable.
Also, any idea on why the draggable before Output div is diificult to drag to the right.
Edit: How the site is structured. When you drag the .drag (.resize in my JSbin code), it changes its left and right div's left and right. And the draggables are contained in the #main's div.
<div id="main>
<div id="HTML"></div>
<div class="drag"></div> //drag this left and right to change the right of the HTML and left of CSS
<div id="CSS"></div>
<div class="drag"></div> //drag this left and right to change the right of the Css and left of JavaScript
<div id="JavaScript"></div>
<div class="drag"></div> //drag this left and right to change the right of the JavaScript and left of Output
<div id="Output"></div>
</div>
By taking advantage of jQuery Ui's built in draggable event which gives us position information and also allows us to set position on drag.
I came up with the following solution:
var dragDistance = 100;
$(".resize").draggable({
axis: "x",
containment: "parent",
drag: function( event, ui){
ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width()-dragDistance);
ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
resize();
}
});
I removed your onDrag function in the process so it wouldn't interfere.
See the bin here:
JSBin
NOTES:
I haven't looked into it and maybe its just a JSBin issue because I can't reproduce it in your live site. But if the boundary lines disappear while you are dragging the code won't work. You'll probably have to increase the drag distance to the point where the lines don't disappear while dragging.
You may notice you have difficulty dragging the Output box that seems to be caused by the Iframe you have inside. If I comment out the IFrame I can drag it just fine. I haven't looked for a solution but perhaps experiment with some padding or margins so that the Iframe is not pegged so closely against the border. Or maybe if you detached it from the DOM while dragging that would fix it.
Use containment
Constrains dragging to within the bounds of the specified element or
region.
For Eg:
$( ".selector" ).draggable({
containment: "parent"
});
Click Here For a Demo
You could manually keep track of the position of each of the windows in the dragging() function, and only call the resize() method if they don't overlap:
function dragging(event) {
var CSS_left = parseInt($("#CSS").css("left"));
var JavaScript_left = parseInt($("#JavaScript").css("left"));
var Output_left = parseInt($("#Output").css("left"));
var offset = 100;
var checkOverlap1 = $(event.target).is("#1")
&& event.clientX + offset <= JavaScript_left
&& event.clientX >= offset;
var checkOverlap2 = $(event.target).is("#2")
&& event.clientX + offset <= Output_left
&& event.clientX - offset >= CSS_left;
var checkOverlap3 = $(event.target).is("#3")
&& event.clientX - offset >= JavaScript_left
&& event.clientX <= codeboxWidth - offset;
if (checkOverlap1 || checkOverlap2 || checkOverlap3) {
resize(event);
}
}
Here's the complete example - I also refactored/simplified your "resize" function.
var codeboxWidth = $("#codebox").width();
$(document).ready(function() {
$("#codebox").height($(window).height() - $("#topbar").height());
$(".content").height($("#codebox").height());
$(".editbox").height($(".content").height() - $(".contentheader").height());
$("#HTML").css("left", 0);
$("#HTML").css("right", "75%");
$("#CSS").css("left", "25%");
$("#CSS").css("right", "50%");
$("#JavaScript").css("left", "50%");
$("#JavaScript").css("right", "25%");
$("#Output").css("left", "75%");
$("#Output").css("right", 0);
});
function resize(event) {
if ($(event.target).is("#1")) {
$("#CSS").css("left", event.clientX);
$("#HTML").css("right", codeboxWidth - event.clientX);
}
if ($(event.target).is("#2")) {
$("#JavaScript").css("left", event.clientX);
$("#CSS").css("right", codeboxWidth - event.clientX);
}
if ($(event.target).is("#3")) {
$("#Output").css("left", event.clientX);
$("#JavaScript").css("right", codeboxWidth - event.clientX);
}
}
$(".resize").draggable({
axis: "x"
});
function dragging(event) {
var CSS_left = parseInt($("#CSS").css("left"));
var JavaScript_left = parseInt($("#JavaScript").css("left"));
var Output_left = parseInt($("#Output").css("left"));
var offset = 100;
var checkOverlap1 = $(event.target).is("#1")
&& event.clientX + offset <= JavaScript_left
&& event.clientX >= offset;
var checkOverlap2 = $(event.target).is("#2")
&& event.clientX + offset <= Output_left
&& event.clientX - offset >= CSS_left;
var checkOverlap3 = $(event.target).is("#3")
&& event.clientX - offset >= JavaScript_left
&& event.clientX <= codeboxWidth - offset;
if (checkOverlap1 || checkOverlap2 || checkOverlap3) {
resize(event);
}
}
body {
margin: 0;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
background: #F7F7F7;
font-family: Arial;
}
#topbar {
margin: 0;
padding: 0;
width: 100%;
height: 35px;
background: #EEEEEE;
position: relative;
}
h2 {
margin: 2px 0 0 0;
padding: 0;
float: left;
position: absolute;
}
#control {
width: 100%;
margin: 8px 0 0 0;
padding: 0;
position: absolute;
text-align: center;
}
.option {
margin: 0 -5px 0 0;
padding: 5px 10px 5px 10px;
text-align: center;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
text-decoration: none;
font-size: 0.9em;
color: black;
}
.option:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.option:last-child {
border-right: 1px solid #CCC;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.option:hover {
background: #dee5e5;
}
.opactive {
background: #EBF3FF;
}
.opinactive {
background: 0;
}
.active {
display: block;
}
.inactive {
display: none;
}
#codebox {
margin: 0;
padding: 0 width: 100%;
position: static;
top: 35px;
background: white;
}
.content {
margin: 0;
padding: 0;
min-width: 10%;
max-width: 100%;
position: absolute;
float: left;
color: #6DCAFC;
background: #F7F7F7;
overflow: hidden;
}
.resize {
top: 35px;
bottom: 0px;
width: 1px;
margin-left: 0;
height: 100%;
right: auto;
opacity: 0;
position: absolute;
cursor: ew-resize;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgba(218, 218, 218, 0.498039);
z-index: 99999;
background: #666;
}
.contentheader {
margin: 0;
padding: 0;
background: transparent;
position: relative;
}
.selectedcontent {
background: white;
}
.contentbox {
width: 100%;
height: 100%;
background: transparent;
position: relative;
box-sizing: border-box;
border-right: 1px solid darkgrey;
overflow: hidden;
}
.editbox {
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
}
.textareabox {
background: transparent;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
border: none;
outline: none;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Project 04</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="topbar">
<h2>Code Runner</h2>
<div id="control">
HTML
CSS
JavaScript
Output
</div>
</div>
<div id="codebox">
<div id="HTML" class="content active">
<div class="contentbox">
<div class="contentheader">HTML</div>
<div class="editbox" id="HTMLeditbox">
<textarea id="HTMLcode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="1" style="left: 25%" ondrag="dragging(event)"></div>
<div id="CSS" class="content active">
<div class="contentbox">
<div class="contentheader">CSS</div>
<div class="editbox" id="CSSeditbox">
<textarea id="CSScode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="2" style="left: 50%" ondrag="dragging(event)"></div>
<div id="JavaScript" class="content active">
<div class="contentbox">
<div class="contentheader">JavaScript</div>
<div class="editbox" id="JavaScripteditbox">
<textarea id="JavaScriptcode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="3" style="left: 75%" ondrag="dragging(event)"></div>
<div id="Output" class="content active">
<div class="contentbox">
<div class="contentheader">Output</div>
<div class="editbox" id="Outputbox">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jscript.js"></script>
</body>
</html>
Here's a JSBin based on your example.

How to scroll to div and pause/fix then resume scroll?

I am still very new to Jquery. I want to see how I can have one element scroll to a specific location in DOM and pause for a few scroll rotations.
here is a codepen I have been playing with - http://codepen.io/mslfire/pen/dYovBZ
Any pointers where to go from here?
here is codepen code
html
<div class="mine">
<img class="scroll-to-item" src="http://placehold.it/350x150">
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2">
<div id="test" class="box-outline">pause scroll</div>
</div>
<div class="mine2"></div>
Here is css
.scroll-to-item {
margin: 0 auto;
position: fixed; // edit
top: 30%;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
.mine {
height: 500px;
background: grey;
}
.mine2 {
height: 500px;
background: lightblue;
}
.box-outline {
margin: 0 auto;
position: relative;
top: 30%;
left: 0;
bottom: 0;
right: 0;
width: 350px;
height: 150px;
border: 5px solid red;
color: red;
text-align: center;
line-height: 150px;
}
Here is BASIC what I am Seeking to do / JS
$(document).ready(function() {
var pause = $('body').css({'overflow': 'hidden'});
var resume = $('body').css({'overflow': 'scroll'});
var x = 1200; // where x is the position to scroll to and then'pause'at
var x2 = x + 1200; // where x2 is the next position to scroll to and then'pause'at
var scrollRollTimes = 2 + scrollEvent; // where scrollRollTimes is # of times a user scrolls/moves - would be better if could be like a animation in time mil seconds 0.2s ex
var scrollEvent = $(window).scroll(); // capture event
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
]; //record the place of scroll / dom or does it?
$(scrollPosition !== x).scroll(function(){
$(pause).scroll(scrollRollTimes.resume);
});
$(scrollPosition !== x2).scroll(function(){
$(pause).scroll(scrollRollTimes.resume);
});
});
When .scroll-to-item is at x place from start - pause scroll. Pause for 'scrollRollTimes' user scrolls - resume scroll.

Categories