Increase width of divs, displayed side by side, using draggable events - javascript

I have two divs of fixed length as of now, which loads external URL by dynamically embedding iframes inside them. Divs are appearing next to each other - one on left and other right.
As of now, I have fixed their width to 50% each. But, I want to give user a flexibility to increase the width of any div to view the URL inside easily without scrolling horizontally. Something like dragging the border separating the two divs to either left or right according to his need.
Is there a way I could achieve this? Please suggest any library or something.
I have gone through a library twentytwenty which is used for images. I don't know how will that work for dynamic iframes.
Here is the JSFiddle which displays the divs.
<div>
<div id="originalPage" style="width:54%;height: 730px;float:left">
<p>one div </p>
</div>
<div id="diffReport" style="width:45%; height: 730px;float:right">
<p>another div</p>
</div>
</div>

There is a awesome jQuery plugin, go with jQuery Splitter here:
http://jquery.jcubic.pl/splitter.php

<div>
<div class="resizable" id="originalPage" style="width:54%;height: 730px;float:left">
<p>one div </p>
</div>
<div class="resizable" id="diffReport" style="width:45%; height: 730px;float:right">
<p>another div</p>
</div>
</div>
$(function() {$( ".resizable" ).resizable({animate: true,animateEasing:'swing',imateDuration: 500
});});
#diffReport, #originalPage{
border: 1px solid;
}
.ui-resizable-helper { border: 1px dotted gray; }
.resizable { display: block; width: 400px; height: 400px; padding: 30px; border: 2px solid gray; overflow: hidden; position: relative; }
#diffReport { width: 100%; height: 100%; }
#originalPage { width: 100%; height: 100%; }

Use jQuery UI library in order to do resizing/dragging.
HTML
<div id="demo"></div>
Script
<script>
$(function(){$('#demo').draggable().resizable();});
$('#demo')
.resizable({
start: function(e, ui) {
alert('resizing started');
},
resize: function(e, ui) {
},
stop: function(e, ui) {
alert('resizing stopped');
}
});
</script>
Fiddle is
http://jsfiddle.net/VuqbN/
Updated your fiddle
http://jsfiddle.net/vw9qt/1/

var isDragging = false
var lastPageX = null
Make a new div in the middle of the existing ones.
Attach an event listener to mousedown on that div.
set isDragging to true and lastPageX to event.pageX
Attach an event listener to mousemove on the enclosing div.
only run if isDragging
var diff event.pageX - lastPageX
add diff to the left resizable div
remove diff from the right resizable div
set lastPageX to event.pageX
Attach an event listener to mouseup on the document
set isDragging to false

Related

React: Prevent click on scrollbar from propagating

I have a div that is scrollable unfortunately I also have event associated with onMouseDown on the div.
My problem is that when I want to scroll by clicking on the scrollbar those events are then fired.
Is there a way to make it so I can prevent the mouse event on the scrollbar from propagating ?
There doesn't seem to be a way to do this; not to my knowledge anyway.
However, there is one half-decent solution:
If you click on the scrollbar, the cursor coordinates is equal to the width of your element, in which case you can just return and prevent the event handler from doing its stuff.
Here, I have added an extra 7 pixels to the logic, to account for the width of the scrollbar on Chrome.v.58/MacOS. The width of the scrollbar is determined by browser through, so that value might need a slight tweak.
class MyApp extends React.Component {
divMouseDown(e) {
if((e.clientX + 7) >= e.target.clientWidth) return;
console.log("do stuff on click");
}
render() {
return (
<div id="my-div" onMouseDown={this.divMouseDown}>
<p>foo</p>
<p>bar</p>
<p>baz</p>
</div>
);
}
}
ReactDOM.render(<MyApp />, document.getElementById("myApp"));
#my-div {
background: beige;
height: 60px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>
I had the same problem. I had a div element, with another scrollable div inside of it. I wanted the onclick event to fire on both the outside and inside div, but not on the scrollbar.
The problem is that the scrollbar gets the mousedown as well.
The clean solution to prevent the mousedown on the scrollbar is to create a div that contains the scrollable content inside the div that contains the scrollbar. Then, we disable our onmousedown function when the target is the div with the scrollbar. Maybe it is clearer with an example:
document.onmousedown = function(e){
if(e.target.id != 'scroll'){
console.log('mousedown');
}
}
#outside {
position: relative;
width: 300px;
height: 200px;
background-color: green;
}
#scroll {
position: relative;
top: 10px;
left: 10px;
background-color: red;
width: 280px;
height: 100px;
overflow-y: scroll;
}
<div id='outside'>
<div id='scroll'>
<div id='container'>
foo<br>
bar<br>
eee<br>
foo<br>
bar<br>
eee<br>
foo<br>
bar<br>
eee<br>
</div>
</div>
</div>
The solution works because the 'scroll' div contains the scrollbar, but the 'container' div does not (you can see this really well if you inspect element). The only time the mousedown event's direct target is the 'scroll' div is when we are clicking on the scrollbar. Any clicks on the scrollbar are stopped, but everything else triggers the event.
Hope this helps.
Then put this on your onMouseDown function:
function myFunction(event, element) {
// Your code for div
// ...
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
And your div should be something like this:
<div onmousedown="myFunction(event, this);">Click me!</div>

How to keep a scrollbar always bottom?

I have a scroll-bar in a div element and initially it's position is top. Whenever i add some text to the div element then the scroll-bar does not move. Is there any way, the scroll-bar of the div element's position will be always bottom and whenever I add some text to the div element, the scroll-bar also goes to the bottom automatically?
Here's my div element:
<div class='panel-Body scroll' id='messageBody'></div>
And CSS class
.scroll {
height: 450px;
overflow: scroll;
}
What i need is, initially the position of the scroll-bar should be bottom.
Also when i clicked a send message, I'm adding the message to the div elements 'messageBody'. On that time the the scroll-bar should be down again.
This is the current style of my scroll-bar
And I want it to be always
Thanks in advance.
var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
Something like this should do what you want if I understood what you want correctly.
Replace messageBody in getElementById() with your chat message container id.
var chatHistory = document.getElementById("messageBody");
chatHistory.scrollTop = chatHistory.scrollHeight;
This will scroll the message container to the bottom.
Since scroll position is recorded in pixel and not percentage, the scroll position doesn't change as you add more elements into the container by default.
Do this after you have appended a new message into your chat message container.
Assume your html code like this.
HTML
<div id="parentDiv">
<div class="people">1</div>
<div class="people">2</div>
<div class="people">3</div>
<div class="people">4</div>
<div class="people">5</div>
<div class="people">6</div>
<div class="people">7</div>
<div class="people">8</div>
<div class="people">9</div>
</div>
And then wrap your js like this
JS
var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Here you go. Follow this concept.
$('#messages').scrollTop($('#messages')[0].scrollHeight);
#chatbox-history {
overflow: none;
position: relative;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
#messages {
overflow: auto;
position: absolute;
bottom: 0;
width: 100%;
max-height: 200px;
}
#messages div {
border: 1px solid #e2e4e3;
margin: 5px;
padding: 10px;
background: #fafafa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox-history">
<div id="messages">
<div>asdjf ;asd</div>
<div>ajsd fa ;skd f;s</div>
<div>asdjf ;akjs d;lf a;lksd fj</div>
<div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div>
<div>Wassup?</div>
</div>
</div>
That'd be :: messageBody.lastChild.scrollIntoView(); //for the initial scroll to bottom position.
p.s.: After the page load, this command should be called by your message handler on message update.
It's already 2023 and you can simply use Element.scrollIntoView() now! Check MDN documentation.
var messageBody = document.querySelector('#messageBody');
messageBody.scrollIntoView();

Jquery .animate acts unintentionaly

I don't know why suddenly the sidebar moves unintentionally. I'm creating a fixed sidebar that show only when hovered.
When I slowly point the mouse on the parent div #containter element it works fine, but when I move the mouse several times on the parent div element #containter the div shows and hide like insane. And also there an area where the parent div shows even you didn't actually hovered on the parent div.
I'm using this code.
HTML
<div id="containter"><!-- parent div -->
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
</div>
CSS
#containter {
width: 140px;
height: 282px;
position: fixed;
margin-top: 30px;
left: -104px;
border: 1px solid red;
}
.wrapdownload {
width: 100px;
height: 90px;
border: 2px solid black;
}
JAVASCRIPT
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").animate({
left: "-104px"
});
});
});
When you hover on the parent div for six times the div show 6 times also. I just want it to show when the mouse is pointed on div element and if i move the mouse outside the parent div, it must hide.
Here is the sample on jsfiddle https://jsfiddle.net/py0622ms/6/
Use stop() method:
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").stop().animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").stop().animate({
left: "-104px"
});
});
});
Working fiddle:
https://jsfiddle.net/py0622ms/7/

On touching uppermost div selects contents of div under it - z-index property

I have a strange problem though, when i click the content with z-index 20, the thing with z-index 1 gets selected in my phone.
The image has both the screen shot - the part on the right side of the image is only for illustrating my problem, as such the white gray div is behind my content div.
Can someone please rescue.
Related CSS files:
#content {
background: #000000;
background: url(../img/WireFrame_test.png) center center no-repeat;
box-shadow: 0 0 15px 15px #222222;
overflow-x: hidden;
z-index: 20;
}
.snapjs-right .snap-drawer-right {
display: block;
z-index: 10;
}
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
z-index: 1;
}
As requested related HTML scripts:
<body>
<div class="snap-drawers" id="leftid">
...
<div class="snap-drawer snap-drawer-right overthrow">
<div>
<h3>Questions</h3>
<div class="demo-social">
</div>
<h4>Java</h4>
<ul>
<li>What is Java?</li>
<li>Uses of Inheritence?</li>
...
</div>
</div>
<div id="content" class="snap-content">
my content goes here
</div>
</div>
</body>
Surely because "Uses of inheritance" is the only link element (other than "What is java"), it will be selected - there's nothing else to select!
Try setting the display of that element to "none" when it is hidden.
You could try to hook into the event when clicking / dragging on the content panel and do an event.stopPropagation(); or an event.preventDefault(); when the panel is closed.
As far as i know, you can see that coz Snap.js add's corresponding classes like (class="snapjs-right" or class="snapjs-left") to the body in order to indicate if a panel is open or not.
So first you've got to check that.
With jQuery it would look something like this:
$(document).ready(function() {
$("#UsesofInheritence_Anchor_ID").bind("click", function() {
if (!($('body').hasClass("snapjs-right"))){
event.stopPropagation();
event.preventDefault();
}
});
});

jquery blind and exposing child div behind?

I'm trying to achieve the effect of a sliding div using the jquery animate option. I'm able to "slide" the parent div up but I'm having issues with showing the div behind the slider.
I've created this jsfiddle to show my issue.
Try uncommenting the photoOptions div. I'm trying to hide this div so it's only revealed when the parent div is slid up.
<div class="photoWrapper">
<!-- <div class="photoOptions"> This is your data. </div>-->
<div class="photoHolder">
Image Here
</div>
<div class="photoMeta">More data here</div>
<div class="photoCredits">
Trigger
</div>
</div>
Code
jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
return this.animate({
marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
}, speed, easing, callback);
};
$(document).ready(function(){
$(".trigger").click(function(){
$('.photoHolder').blindToggle('slow');
});
});
Current CSS:
.photoWrapper {
width:200px;
border: solid 1px #ddd;
}
.photoHolder {
border: solid 1px #eee;
width:200px;
height:266px;
}
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
}
Any thoughts on how I can achieve this?
The browser renders elements based on there place in the DOM, if an element preceeds another element in the dom, it is rendered under it.
To change this default behaviour, you should use the CSS rule z-index, by defining a lower z-index on your .photoOptions div, it will be rendered below it.
as seen in this fiddle
Also be aware that z-index values may be handled differently for elements that are positioned absolute, due to the fact that they are not rendered in the normal flow.
Using the callback on .blindToggle() can achieve that effect but you're going to have to edit your CSS so that .photoCredits is visible and just start off with .photoOptions hidden:
$(document).ready(function () {
$(".trigger").click(function () {
$('.photoHolder').blindToggle('slow', function () {
$(".photoOptions").show();
});
});
});
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
display:hidden;
}

Categories

Resources