This is a change in Chrome 49 from previous versions. In 49, if I have a draggable element, when I drag it over a vertical scrollbar it causes the horizontal scrollbar to scroll to the right, even when it's not accepted.
$(document).ready(function() {
$("#dragItem").bind("dragstart", function(e) {
e.originalEvent.dataTransfer.setData("Text", 'data');
});
});
#dropContainer {
border: 1px solid black;
overflow-x: auto;
overflow-y: auto;
width: 250px;
height: 250px;
display: inline-block;
}
#bigContent {
width: 1000px;
height: 1000px;
}
#dragSourceContainer {
display: inline-block;
vertical-align: top;
margin-top: 20px;
}
#dragItem {
border: 1px solid black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropContainer">
<div id="bigContent">
</div>
</div>
<div id="dragSourceContainer">
<div id="dragItem" draggable="true">
drag me to the left, over top the vertical scrollbar
</div>
</div>
JS Fiddle:
https://jsfiddle.net/a1qnbkeb/
My question is: how can I stop this behaviour without doing some crazy temporary scroll binding? The reason I ask this is because inside "dropContainer", I do allow things also to be dragged, and if they are dragged "within" drop container, I do want this behaviour.
I just don't want it when they're dragging new things in from outside.
Related
I have a header div that contains logo and a navigation menu
Lets say I have a logo on the left hand side 100x50 and a navigation menu that should float: right
How do I get the navigation menu to align just above the base of the header div?
What happens if the logo size changes, can it be done with respect to the logo size without having to adjust the margin-top for the nav element?
HTML
<div class="container">
<header class="site-header">
<div class="site-logo">
</div><!-- /site-logo -->
<nav class="site-nav">
</nav>
</header>
</div>
CSS
.site-header nav ul {
float: right;
border: 1px solid green;
}
div.site-logo {
float: left;
width: 100px;
height: 50px;
border: 1px solid #000;
}
P.S.: If it can be done without javascript, it would be nice
I will give you an example with flexbox. It's way much easier than with position absolute, and you don't need to worry about the logo size.
.site-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 500px;
height: 50px;
border: 1px solid #000;
}
div.site-logo {
width: 100px;
height: 50px;
background-color: #00f;
}
div.site-nav {
width: 300px;
height: 25px;
background-color: #f00;
z-index: 1;
}
<div class="container">
<header class="site-header">
<div class="site-logo"></div><!-- /site-logo -->
<div class="site-nav"></div>
</header>
</div>
If you use flex, you may need to add the property names for other browser.
To use absolute positioning for your nav, your header needs relative positioning:
header { position: relative; }
then something like:
.site-header nav ul {
position: absolute;
right: 5px; /* or whatever you choose */
bottom: 5px; /* or whatever you choose */
}
Here is a simple way how to implement it: JSFiddle example
.site-header {
width: 500px;
height: 50px;
border: 1px solid black
}
div.site-logo {
display: inline-block;
width: 100px;
height: 50px;
background-color: blue;
}
div.site-nav {
display: inline-block;
width: 300px;
height: 25px;
background-color: red;
float: right;
margin-top: 4.2vh;
}
If you do not want to use flex. The simplest approach is to add padding for the nav element.
padding top
+
nav height
+
padding top
the total height equal to the height of the header bar.
To align something to the bottom of an element, set the position of that thing to absolute and it's bottom coordinate to 0, so that there will be zero pixels between that thing and the bottom border of the containing element.
.site-header nav {
position: absolute;
bottom: 0; // Aligned to parent's bottom border...
right: 0; // ...and parent's right border.
}
Note that you can position something absolutely only in a positioned parent, either absolutely:
.site-header {
position: absolute;
}
...or relatively, where you have make sure to enforce a Block Formatting Context (BFC) to hold your contents (logo + menu), typically by specifying the overflow behavior of your relative parent to anything but visible:
.site-header {
position: relative;
overflow: hidden; // Enforce BFC
}
Here is a pure CSS demo that shows that it will fit any logo size.
So I have 2 divs children of a display block parent. I would like to make div #2 (green) be on top of div #1 (red). With "on top" I'm not talking about z-index, I'm talking about literally being on top of the other. And then I was wondering if there could be a way to make div #2 slideDown()
As far as I tested, jQuery slideDown() or slideUp() works differently.
In the demo I made, when I run
$('.item-1').slideUp();
The item 2 is sliding up instead of item 1, why is that? I'm getting confused.
Any hints would be appreciated,
Thanks in advance.
window.slide = function() {
$('.item-1').slideUp();
}
.items-container {
height: 400px;
width: 240px;
background-color: #c3c3c3;
display: block;
/* overflow: hidden; */
}
.item {
height: 100%;
width: 240px;
position: relative;
font-size: 30px;
text-align: center;
vertical-alignment: middle;
}
.item-1 {
background-color: red;
}
.item-2 {
float: left;
position: relative;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="slide()">
Click me!
</button>
<div class="items-container">
<div class="item item-1">
1
</div>
<div class="item item-2">
2
</div>
</div>
jQuery's slideUp() and slideDown() methods animate the height of the matched elements, not position as you seemed to want: http://api.jquery.com/slideUp/.
What you seem to want is to translate the div it so that it moves on top of the first one.
http://www.w3schools.com/css/css3_2dtransforms.asp
window.slideUp = function() {
$('.item-2').addClass('slideUp');
}
window.slideDown = function() {
$('.item-2').removeClass('slideUp');
}
.items-container {
height: 100px;
width: 240px;
background-color: #c3c3c3;
display: block;
/* overflow: hidden; */
}
.item {
height: 100%;
width: 240px;
position: relative;
font-size: 30px;
text-align: center;
vertical-alignment: middle;
}
.item-1 {
background-color: red;
}
.item-2 {
position: relative;
transition: transform linear 1s;
background-color: green;
}
.slideUp
{
transform: translate(0,-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="slideUp()">
SlideUp!
</button>
<button onclick="slideDown()">
SlideDown!
</button>
<div class="items-container">
<div class="item item-1">
1
</div>
<div class="item item-2">
2
</div>
</div>
.slideUp() works by changing the height of the element. As that element gets shorter, following elements will move up the page.
As seen in the documentation:
The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items.
In your fiddle, item1 slides up as expected and as defined by the doc :
Description: Hide the matched elements with a sliding motion.
So your div slides up and disappears, and item2 doesn't "move", just fills the space in the DOM after item1 has been hidden.
I'm working on a tag scroller that will basically allow users to scroll through chunks of tags left or right if there are more tags than fit their current containing div. My plan was to have the component div set to overflow:hidden so the tags (and their parent div) would not wrap. Then I'd have left and right arrows that would animate the tag wrapper to the left or right.
I need to determine if the width of the tag-wrapper is greater than the tag-scroller itself. If so, then I know that there are more tags than fit within the tag-scroller and I should make the arrows visible so a user can click to scroll and view some more. The layout and everything looks as expected however my problem is, using $('.tag-wrapper').width(); always returns a different value depending on window width which shouldn't be the case since the actual content hasn't changed. If the screen is wide enough, I may not need to show the arrows so I need to check the width on window resize, etc.
Any ideas why $('.tag-wrapper').width(); would give me different sizes based on the actual window width even thought the scrollable content itself hasn't changed?
Here is my markup:
.tag-scroller {
overflow: hidden;
white-space: no-wrap;
display: block;
width: 100%;
height: 50px;
}
.tag-wrapper {
white-space: nowrap;
display: inline-block;
border: 1px solid green;
}
.tag {
display: inline-block;
width: initial;
text-align: center;
padding: 5px 10px 6px 10px;
}
<div class="tag-scroller">
<div class="tag-wrapper">
<div class="tag"></div>
<div class="tag"></div>
<div class="tag"></div>
<div class="tag"></div>
</div>
</div>
I used the jQuery outerWidth method.
$(function() {
$(document).on('DOMNodeInserted DOMNodeRemoved', '.tag-wrapper', function(e) {
$('#p').text('tag-wrapper width: ' + $('.tag-wrapper').outerWidth() + 'tag-scroller width: ' + $('.tag-scroller').outerWidth());
if ($('.tag-wrapper').outerWidth() > $('.tag-scroller').outerWidth()) {
alert('ok');
}
});
$('#btn').click(function(e) {
$('.tag-wrapper').append($('<div class="tag">1</div>'));
});
$('#btnWidth').click(function(e) {
$('#p').text('tag-wrapper width: ' + $('.tag-wrapper').outerWidth() + 'tag-scroller width: ' + $('.tag-scroller').outerWidth());
});
});
.tag-scroller {
overflow:hidden;
white-space:no-wrap;
display:block;
width:100%;
height:50px;
}
.tag-wrapper {
white-space: nowrap;
display:inline-block;
border:1px solid green;
}
.tag {
display:inline-block;
width:initial;
text-align:center;
padding: 5px 10px 6px 10px;
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div class="tag-scroller">
<div class="tag-wrapper">
<div class="tag">1</div>
<div class="tag">2</div>
<div class="tag">3</div>
<div class="tag">4</div>
</div>
</div>
<button id="btn">Click Me</button>
<button id="btnWidth">Check Widths</button>
<p id="p"></p>
I wish to achieve this effect:
where a draggable will disappear below the edges of the container div.
I am not sure in which direction to head. At first I thought I should use css z-index but so far unsuccessful.
Is there a simple way to achieve it ? I intend to use it with jsPlumb but I don't think my question is limited to this library.
Here is a snippet with the problem. The blue rectangle is draggable, the grey area is my container, and the orange is the full page.
jsPlumb.bind("ready", function() {
jsPlumb.setContainer("conteneur");
jsPlumb.draggable(document.getElementById("item1"),{
});
console.log(document.getElementById("item1"));
});
#master {
background: orange;
position: relative;
z-index: 21;
padding: 20px;
}
#conteneur {
padding: 20px;
width:80%;
height: 200px;
border: 1px solid gray;
position: relative;
background: grey;
z-index:21;
}
#item1 {
left: 100px;
z-index: 12;
}
.node{
background: blue;
position: absolute;
width:20px;
height:30px;
}
<script src="https://rawgit.com/sporritt/jsPlumb/master/dist/js/jsPlumb-2.0.4-min.js"></script>
<div id="master">
<div id="conteneur" class="cont">
<div id="item1" class="node"></div>
</div>
</div>
If I'm understanding your question:
#conteneur {
overflow: hidden;
}
should do the trick.
I'm trying to do what many have asked before, but even after trying everything I still can't get the results I want.
I have an image 600px by 1600px, 4 images of 600px by 400px in a vertical line. I want to show 600px by 400px of the image at any one time. Ideally I would be able to hover over an element somewhere on my page and move the image upwards to reveal the other portions of the 600px by 400px image. In effect, I'd have 4 images viewable by hovering over 4 the elements.
I've tried various css3 and jquery solution but none have worked. I would appreciate any help with this.
HTML
<div class="mainimage">
<div class="buttonsection">
<div class="button1">Button 1</div>
<div class="button2">Button 2</div>
<div class="button3">Button 3</div>
<div class="button4">Button 4</div>
</div><!--end of buttonsection-->
<div class="rollingimage">
<img src="IMG/four-pics.png">
</div><!--end of rollingimage-->
</div><!--end of mainimage-->
</div><!--end of main content-->
CSS
.mainimage {
position: relative;
top: 0px;
left: 0px;
width: 900px;
height: 400px;
border: 2px solid #E78F25;
margin: 0 10px 20px 0;
}
.buttonsection {
width: 290px;
height: 400px;
position: relative;
float: left;
}
.button1,
.button2,
.button3,
.button4 {
display: inline;
height: 98px;
width: 290px;
border: 1px solid #E78F24;
text-align: center;
float: left;
}
.rollingimage {
width: 598px;
height: 400px;
position: relative;
overflow: hidden;
top: 0px;
left: 0px;
float: right;
}
jquery
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage').stop().animate({'top': '-200px'}, 1500);
});
});
Here is the jsfidle: http://jsfiddle.net/dirtyd77/jCvYm/1/
Thanks yet again
Gary
Just for fun, no JS:
http://jsfiddle.net/coma/MTWdb/5/
HTML
<div id="foo">
Button 1
Button 2
Button 3
Button 4
<div></div>
</div>
CSS
#foo {
width: 400px;
border: 2px solid #E78F25;
position: relative;
}
#foo > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 200px;
background: #fff url(http://placekitten.com/600/1600) no-repeat 0 0;
transition: background-position .5s;
}
#foo > a {
display: block;
width: 200px;
line-height: 100px;
text-align: center;
text-decoration: none;
}
#foo > a + a {
border-top: 1px solid #E78F25;
}
#foo > a:nth-child(1):hover ~ div {
background-position: 0 0;
}
#foo > a:nth-child(2):hover ~ div {
background-position: 0 -400px;
}
#foo > a:nth-child(3):hover ~ div {
background-position: 0 -800px;
}
#foo > a:nth-child(4):hover ~ div {
background-position: 0 -1200px;
}
You need to change the positioning of the image inside the div, not the div itself. To animate my example, you could add CSS transitions for better performance than JS animations.
http://jsfiddle.net/jCvYm/8/
$('.rollingimage').find('img')
As Dom mentioned, the jsFiddle you provided didn't reference the jQuery library. It also didn't included any actual images, and only contained code for one of the three buttons. I doubt those were the original problems you were having, though. (The missing reference to jQuery might have been.)
Once I had those straightened out, I noticed that hovering the button caused the picture to slide out of the screen, instead of scrolling. The simplest way to fix that is to move the img element, instead of moving the div. (The more natural way would be to change the scroll position of the div, but I don't recall how to do that off the top of my head.)
Added CSS:
.rollingimage img {
position: relative;
}
New JS:
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage img').stop().animate({'top': '0px'}, 1500);
});
$(".button2").hover(function(){
$('.rollingimage img').stop().animate({'top': '-400px'}, 1500);
});
$(".button3").hover(function(){
$('.rollingimage img').stop().animate({'top': '-800px'}, 1500);
});
$(".button4").hover(function(){
$('.rollingimage img').stop().animate({'top': '-1200px'}, 1500);
});
});
jsFiddle: http://jsfiddle.net/jCvYm/6/