I want to create a div with CSS (preferably without any library) whose contents can be slided right/left on mouse-click if the content of the div is larger than the div width. Like below:
I tried with overflow-scroll but that gives a scroll-bar which is not what I want. Is it possible to create this with CSS and JavaScript (AngularJS, which I am using in my app) combination, without using any other library? I can use jQuery if it can done using that.
Update: Created a working demo after #Shnibble's answer.
$("#left").mousedown(function() {
var y = $("#content").offset();
$("#content").animate({
left: 0
}, function callback() {
$("#left").fadeOut();
});
});
$("#right").mousedown(function() {
var y = $("#content").offset();
$("#left").show();
$("#content").animate({
left: y.left - 200
});
$("#info").text(y.left - 100);
});
I'm not sure I know exactly what you want, do you want the <> arrows to scroll the content or do you want to click+drag the content left and right? Both can be accomplished with JQuery.
The former can be done by having the parent container positioned as relative and the content within positioned as absolute. Then you can use JQuery to alter the left offset of the content +/- depending on which arrow is clicked.
For the latter, you would do the same setup but check the mouse coordinates on click and apply the difference to the content left attribute until the mouse button is released.
As for making all of this only happen if the content overflows, you will need to do some checking with JQuery again to measure the width of the content and compare it to the parent container and only allow one of the above functions to run if the content is wider.
Alternatively, you co use overflow-x: auto and then style the scrollbar to fit in with your theme better? See here: https://css-tricks.com/custom-scrollbars-in-webkit/.
Related
My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
I'm currently working on a CSS-based 3-column layout that has the following requirements:
On the desktop…
…all columns are shown.
On mobile devices…
…only the middle column is shown.
…the left column can slide in from the left, triggered by a swipe or a tap on a button.
…the right column can slide in from the right, triggered by a swipe or a tap on a button.
Independent of the device…
…the middle column contains three rows: The main header, a sub header, and the actual content.
…the main header scrolls away when scrolling down.
…the subheader is sticky on the top of the screen when scrolling down.
Now I tried to implement this:
Creating a 3-column layout and hiding the left and right columns is easy, using Bootstrap.
Having three rows in the middle column is easy, too.
To make the subheader sticky, I have two options:
Use position: sticky (best solution in technical terms, but not supported by any browser).
Use a script, attach to the scroll event and change to position: fixed on demand. This is what Bootstrap offers OOTB with its affix plugin. Using this plugin, it's an easy task, too.
Creating two sidebars and sliding them in is easy as well, using something such as Snap.js.
Problems start when I want to combine the sticky subheader with the sliding sidebars: The affix plugin simply stops working, and the subheader is not sticky any more. Basically, the problem comes down to issues with CSS transform and position: fixed, see Eric Meyer's awesome blog post on this and this answer.
One option to solve this could be to put the headers above the area where the sidebars slide in, so that they are not affected, but this is not what I want: I want the sidebar to push away everything.
How can I solve this? Is this possible at all?
Consider this post:
Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions
Bootstraps affix.js listens to the $(window).on('scroll'... event. Snap.js seems to change the scrollable element from the "window" element to the element where you added the "snap-content" class. I dont see any other solution as to write the sticky functionality provided by bootstrap yourself.
Use this as a reference. Based on your current scroll position (in pixels) you can add css attributes or even whole css classes to the element you want to make sticky:
jQuery(document).ready(function ($) {
$('.snap-content').scroll(function () {
if ($(this).scrollTop() > 140) {
if ($("#navbar").css('position') !== 'fixed') {
$("#navbar").css("position", "fixed");
}
} else {
if ($("#navbar").css('position') !== 'static') {
$("#navbar").css("position", "static");
}
}
});
});
I've been looking around and I can not find anything that solve this problem.
I have a container div, inside this one, I have few floated div, their content is generated dynamically and can vary from few words to almost a page. this basically create a line of a table (I do not want to use table layout for some reasons).
I successfully made the container expand to the bigger of the content using overflow:hidden;
Now I would like all my divs to adapt to the container height.
you can set a class to all the div's inside the container ... let's say class="contained"
then you can add a js function to run when the document is generated that finds the max-height of all the contained div's and sets the same height to all the others.
$(function() {
var maxheight=0;
$(".contained").each( function () {
if (maxheight<$(this).height()
maxheight=$(this).height();
});
$(".contained").each( function () {
$(this).height(maxheight);
});
}
I have a HTML page with an internal DIV used for content. The internal DIV has its own scrollbars. I would like to automatically scroll to a certain position in the DIV.
How can I do this? (Note that I do NOT want to auto scroll the Window scrollbars - I already know how to do this)
A cross platform solution is needed
The div has a scrollTop property that you can set (and its pal, scrollLeft).
jsFiddle Demo
scrollTop on MDN
scrollLeft on MDN
there is this .scrollTo() method which can help you scroll through your divs. try it for more info visit here
As long as JavaScript is acceptable, I created a demo using jQuery that uses a known element with an ID inside the div.
$(function() {
var testOffset = $('#test').offset(),
scrollOffset = $('#scroll').offset();
$('#scroll').scrollTop(testOffset.top - scrollOffset.top);
});
If you only know how far, in terms of pixels, rather than to a specific element, it could be adapted to:
$(function() {
$('#scroll').scrollTop(100);
});
Add a div (where you want to scroll):
<div id="#scroll-here">Test..</div>
and add a link like this:
Scroll to Test
if you want a smooth scroll you can check this
You have to target taht div and set scrollLeft. scrollTop property.
const scrollingDivElement = document.getElementsByClassName("class_name");
if(scrollingDivElement && scrollingDivElement.length > 0){
//this is the div element that scrolls
scrollingDivElement[0].scrollLeft += 50;
}
I would recommend having a look at the scrollTo jQuery plugin. It's a really handy plugin that allows you to animate a scroll within any element. I've setup a small example in jsFiddle that demonstrates how it works. The example shows how you "scroll to" the third p in the first div, and then the second p in the second div. One thing worth noting, is that to ensure the position().top is correct, you'll need to set the containing div to have a position: relative;. Hopefully this isn't too much of a problem though. :)
My jQuery UI dialog contains two div elements. One has a fixed height and should be aligned at the bottom of the dialog at all times. The other one should take up the remaining space.
Basically I’d like all the dimensions highlighted in blue to remain unchanged on resize. Or, in other words, the red div resizes in both dimensions but the green div keeps its height.
What’s the easiest way to do this in jQuery UI or even just plain CSS?
I’ve found a way to do this that doesn’t use any JavaScript. It doesn’t even involve any hacks; just plain normal CSS3. Fiddle here: http://jsfiddle.net/nty5K/16/
Basically, both divs are position: absolute, and each of the sides is anchored individually using the top, bottom, left and right properties. The top div has all four positions specified, making it resize with the container while preserving the exact distance to each edge of the container. The bottom div has three of the positions fixed, whereas the top is defined only indirectly, via a fixed height.
In practice, the divs will need to be placed into a wrapper div that has position: relative, otherwise the top/bottom divs will be positioned relative to the body element.
Not sure about browser compatibility yet, but this worked fine in Firefox 10, IE9 and Chrome 17. Didn’t test this in earlier versions.
Corporate firewall is blocking images, so I am guessing what you are after based on other comments.
EDIT:
Now that I can see what you are after, I have updated my fiddle accordingly. Including the code below for completeness.
I would write a function to calculate the size of the dialog, subtract the height of the fixed div and set the height of the dynamic div to this calculated value. I would then bind a call to this function to the resize event of the dialog. Here is a fiddle, may need some tweaking for your exact layout but should be close.
One gotcha worth noting is that some browsers may not calculate correctly while they are in the middle of a scroll/resize event, queing the calculations to occur after the resize event completes with setTimeout resolves the issues, though it does make the change a bit jumpy while the resize is in progress. See this question and answer for details.
function SetDivHeight() {
var $DynamicDiv = $('div.dynamic');
var $FixedDiv = $('div.fixed');
var $Container = $(window); //Update for containing element
/*Calculate the adjustment needed to account for the margin and
border of the dynamic div.*/
var HeightAdjustment = $DynamicDiv.outerHeight(true) - $DynamicDiv.height();
/*Get the values of the top and bottom margins which overlap
between the two divs.*/
var DynamicBottomMargin = parseInt($DynamicDiv.css('marginBottom'));
var FixedTopMargin = parseInt($FixedDiv.css('marginTop'));
/*Adjust for the overlapping top/bottom margin by subtracting
which ever is smaller from the adjustment value.*/
if (DynamicBottomMargin >= FixedTopMargin) {
HeightAdjustment -= FixedTopMargin;
} else {
HeightAdjustment -= DynamicBottomMargin;
}
/*subtract the height of the fixed div from the height of the
container, subtract the calculated height adjustment from that
value, and set the result as the height of the dynamic div.*/
$DynamicDiv.height(($Container.height() - $FixedDiv.outerHeight(true)) -
HeightAdjustment);
/*May need to use $Container.innerHeight instead, if container
is not a window element.*/
}
var t;
function QueueSetDivHeight() {
if (t) {
clearTimeout(t);
}
t = setTimeout(function() {
SetDivHeight();
}, 0);
}
$(document).ready(function() {
SetDivHeight();
$(window).resize(QueueSetDivHeight);
//Bind to resize of container element instead/as well
});
Just CSS... check it out!
Set a margin to the container and a margin-top to the bottom fixed div. No jQuery required.