Gallery images overflow to left - javascript

I am working on a carousel - gallery viewer for my website and I have problems with the elements in it.
The images at the bottom are overflowing but only to the left. I have set the overflow property to hidden but it does not seem to work in this side.
In addition, the images are not affected by the property margin-right for some reason, only by margin left.
Here is a demo of the image viewer: http://codepen.io/anon/pen/XbgdWo
This is the code I am using for the image items. I use margin-right to show it is not working properly.
.slider-item img {
width: 100%;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
#include transition('all .2s ease-in-out'); }
.slider-item:hover {
img { #include transform(scale(1.1)); } }
I would really appreciate if you could have a look at it. I have no idea what to do to fix it.
Thanks in advance.

You don't need to have the overflow:hidden on the image itself, just the containing element - which you have.
The effect you are after works fine, you just have an issue with margin - you have put it on the img when it should but on the parent (.slick-slide).
I have forked your codepen here and fixed the issue, I added a red background to the img container so you can see the changes, the code is still messy but it gets the job done. I will continue to refine the code in the same pen.

Your body has 80 percent of width.
First of all, add the following CSS to the body to make it appear properly.
body {
width: 80%;
margin: 0 auto;
}

Related

Unable to resize the textarea height

I've noticed a strange bug while using a textarea in a my project.
At first I thought there was a problem in my code but then I was able to replicate that bug extracting the essenial in a JsFiddle .
The problem is:
If I change the height of the textarea by code without any interactions from the user before, the height get stuck at that size.
For example, if you click to the button "Change size" (in the jsfiddle above) and then try to resize back to the initial size using the element grip (at the bottom-right corner), you can't. It's like if that new height is the new ''minimum allowed size'' of the textarea.
What am I doing wrong? what am I missing?
Thank you in advance.
Height overrides min-height in Chrome.
In older versions of chrome there was no restriction.
So if you use height min-height will be your height. So you need to
set min-height and max-height only. Height overrides min-height in
Chrome.
textarea{
max-height: auto;
min-height: 50px;
resize: both;
}
Okay this solution works for me (chrome Version 47.0.2526.111 m):
https://jsfiddle.net/ezsz8xr5/9/
I found this interestining link: https://code.google.com/p/chromium/issues/detail?id=94583
Seems that it is a known issue.
I know this question has been asked a while ago, but there's no good answer to it, and I found a solution.
What I found is that putting a % height for the textarea will not change it according to its parent.
If you put the rule resize: vertical, changing manually the height you'll notice that your browser will put the style.height in pixels.
So I tried putting height: 150px and it worked.
So here are two solutions :
First, put your textarea's height in pixels, not in percentage.
parent {
width: 150px;
}
parent textarea {
height: 100%; /* not working ! */
}
/* Instead, do : */
/* css variable */
:host {
--height: 150px;
}
parent {
height: var(--height);
}
parent textarea {
height: var(--height);
}
For a SCSS way :
parent {
$height: 150px;
height: $height;
textarea {
height: $height;
}
}
Second, declare the textarea parent's display as flex, and without any additional rule, it will automatically resize your textarea. If it does not, then do this :
parent {
display: flex;
/* if flex doesn't work by itself, add this + textarea rule : */
flex-flow: column nowrap;
}
parent textarea {
flex: 1; /* tells the textarea to fit all the free space it finds */
}
It seems like a browser issue yes, still not fixed in 2022, sadly. If it is intentional, then it's even not documented.
Hope this will help someone in the future.

Scrolling div tags on touch?

Ok, I have got a number div tags, within a section tag and on selected menu button clicks scrolls though to that selected div area.
Each div area has a translate3d css, move each div out one other the other. Then the code fires on a 'click' event to move the div tag into the browser window.
CSS code
#Area1 {
position: absolute;
top: 0px;
z-index: 10;
border-left:10px solid #FFFFFF;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
background-color: #66cc33;
-moz-transform:translate3d(100%,0%,0px) skew(16deg, 0);
-webkit-transform: translate3d(100%,0%,0px) skew(16deg, 0);
}
Area2 code would be the same, but set at 200%. This div tag is set within a div wrapper set with position relative on it.
Jquery code the moves the div
$( "#AreaOne" ).animate({left: "0%"}, 1000, 'easeInOutQuad');
$( "#AreaTwo" ).delay(100).animate({left: "0%"}, 1000, 'easeInOutQuad');
This all works fine. No problems at all. But I want to be able to swipe through these divs as well. But is does not do this on my iphone I am testing on. Now I think this is because I use an click event function? I don't really want to change the code I have made, mainly because it works fine.
Now I tried using touchwipe on the div, but that did not work, not sure if I call it in right or not :).
Just wanted to know if there was a quick a simple way of making a div scroll on touch?
Many thanks,
Glenn.
PS. Sorry if I have not explained myself well. If its not clear, please let me know and I will change my question.
Have you tried adding the web-kit specific declaration?
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch; /* momentum scrolling, iOS Safari only*/
More depth here: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
Also see the documentation for -webkit-overflow-scrolling.

DIV height 100% for remaining space under another div

So I have a header bar for a page I made with a height of 150px. Under that area I want another DIV to fill the remaining space (width and height) all across the screen and to the bottom of the screen. I've tried setting height: 100% for the DIV, but that causes the screen to become scrollable and I only want it to fill the remainder of the page. NOTE: There is NO footer or anything under it.
Using jQuery/Javascript is acceptable, but CSS-only is prefered (if possible). If using jQuery, please explain the proper way to have it implemented into the page (I'm assuming $(function() {...}); under the <style> tag in the head.
I've tried searching for a result before, but nothing seems to work correctly.
tl;dr I basically made 3 options for you. click on the 'like this' in the below paragraph to see what they all look like without any text. Click on the A). B). and C). links in the paragraphs below that to see the difference between the three options. Check how each one scrolls differently, they are all different I promise. After you look at all three you can read how the one you want is implemented. (that is if you like any of them.) Hope you like it, no problem if you don't :)
I'll have a go at this, because it honestly depends on what you're going after there are multiple ways to look at it and it depends on your end goal. I will cover three possible scenarios: (which all look the same without text mind you, like this, but if you want to see what they look like with text click the letters. Make sure you scroll the page to see the difference between them.)
(Just as a side note I based A). and B). off how Twitter Bootstrap does it.)
A). You just want it to look like one div on top of the other (header div on top of main-content div) and display like that, but you still want the page to scroll if the 2nd div's text overflows. In this implementation when they scroll will move the header out of view, but if you don't want the header div to move out of view that leads me to
B). Same as the first header div on top of main-content div, but when they scroll the header div will still stay in place at the top instead of moving out of view.
and last of all,
C). You really do want the div to stretch to the bottom of the screen and never have the scroll bar for the whole page. This could be used in some cases, for instance, Spotify makes a nice music app with this kind of style so that you never scroll the whole page just panes in the page.
Ok so first here is the html code used to construct all three of them
<body>
<div class="header"></div>
<div class="main-content"></div>
</body>
And now to the fun part...
I will provide a Fiddle for the following examples, and with the css I will put the necessary code at the top and the unneccessary code at the bottom. (The html may have some unneccasary text so just ignore that. I just want you to see the page scrolls differently on the three.)
A).
no need to rephrase what it is so I'll just show you the code that is necessary.
First, here is A). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for A). (the background-color isn't completely necessary, but it is somewhat necessary to show the point.)
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
and now for...
B).
First, here is B). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for B).
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
As you can probably tell the only difference is the position: fixed on the .header, but look at the two examples to see the difference it makes.
and now last of all C).,
C).
First, here is C). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 1 where it has a scroll bar just for that area's overflowing content.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 2 where it hides the overflowing content. (This is honestly bad practice and I wouldn't do it. So if I may suggest. I would go with option 1 of C).)
Here is the necessary css for C).
body {
padding-top: 150px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
.main-content {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
}
I won't explain it, but here is an article on positioning that will.
here is the only necessary css for option 1 is adding overflow-y: auto to .main-content, but if you want to go with option 2 which I don't suggest you can go with overflow-y: hidden on .main-content
Well that's all for my post which is probably too long for most people sorry if I bored you, but I'm just trying to help. Hope you figure out the layout you want. This is only a few examples of the layouts possible with good old css. If you don't get the layout you want from this or any other post feel free to send me a message by commenting below, and I'll be happy to answer it sometime. Hope this helped. If it didn't that's fine too. :)
You can try css3 flexbox.
http://jsfiddle.net/wL9aM/1/
.container {
display: -webkit-flex;
display: flex;
flex-direction: column;
height: 700px;
}
.header {
height: 200px;
background: red;
}
.main {
-webkit-flex: 1;
flex: 1;
background: blue;
}
try using script..
var window_h = $(window).height();
var header_h = $("header").height(); //This is what you said you had 150px
$(".filler_div").height(window_h - header_h);
You can also put that inside a function() so that you can add it also when you resize the browser, the filler space also adjusts...
function setfillerDivHeight(){
//the code above
}
$(document).ready(function(){
setFillerDivHeight(); //the initial setting of height
});
$(window).resize(function(){
setFillerDivHeight(); //reapply setting of height when window resizes
});
<div class="full-page-height-wrapper">
<header></header>
<main></main>
</div>
html,body {
height: 100%;
margin: 0;
}
header {
height: 150px;
}
.full-page-height-wrapper {
min-height: 100%;
position: relative;
}
CODE: http://fiddle.jshell.net/N7zJg/9/
preview: http://fiddle.jshell.net/N7zJg/9/show/
I don't think you cannot acheive that in pure CSS.
So, there is two different solutions:
1) You can put the 150px div in the 100% div.
2) You can do it with jQuery:
If your top div is <div id="A"> and the second one is <div id="B">, you'll have:
var b = $("#B");
var height = $("body").height() - b.position().top;
b.css({ height: height });
Feel free to adapt the code if you have some margins.
Found a solution myself finally. Doing it this way makes the design more responsive since (if i choose to add something to the bottom), it will automatically resize the div's height.
.container {
display: table;
}
.row {
display: table-row;
}
.column {
display: table-column;
}
#fullDiv {
height: 100%;
}
I found two solution.
The one is that I have must set the div in the absolute position.
the div float over the screen.
another one is use table-row display.
If you use just CSS, you cant achieve your task by giving 100% height to div. Because what basically CSS is doing is giving 100% height to your DIV plus giving 150 px to above header. Consider giving height of DIV less than 100% or some static value such as 600px or 700px.
Alternate is having a class of DIV with min-height 100% and inside it putting your header and body.

Scroll to bottom not working

Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}

Disable the body scroll, but keep it on individual div elements which are greater in height than the browser

I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.
I'm not exactly sure what you're looking for, but I think you want a div to be scrollable, but not the actual document. You can do this by absolutely positioning the div on the screen with a fixed height and set the overflow to auto. I've done this using the following CSS code:
#scrollable {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}​
See an example: http://jsfiddle.net/rustyjeans/rgzBE/
Have you tried with
overflow-x:hidden;
turns out its quite simple.
CSS
body{
overflow:hidden;
}
#div_you_need_scrolling{
overflow:auto;
}

Categories

Resources