i have insert a CSS code to an element to show it only on mobile:
#media only screen and (max-width: 780px) { #footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
z-index: 10;
}}
So far works great. then i added this jQuery, to display it in on scroll.
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop()>100)
{
jQuery('#footer').fadeIn();
}
else
{
jQuery('#footer').fadeOut();
}
});
but now, the element is shown on PC as well. what do i need to insert into the JS code in order to tell him no to show it on PC?
thanks.
Apply display: none to your footer by default. Then, wrap the code that checks the scroll position in an if statement that checks the window's width.
jQuery(window).scroll(function() {
if (jQuery(window).width() <= 780) {
if (jQuery(this).scrollTop() > 100)
{
jQuery('#footer').fadeIn();
}
else
{
jQuery('#footer').fadeOut();
}
}
});
body {
background: #eee;
height: 300vh;
}
#footer {
display: none;
background: #dfd;
}
#media only screen and (max-width: 780px) {
#footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
z-index: 10;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer">This is my footer.</footer>
Related
I am trying to make one CTA as a image, which will appear on some certain height and will disappear once a users crosses that scroll amount.
my codes-
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 900) {
$('.cta-bg').fadeIn();
} else {
$('.cta-bg').fadeOut();
}
});
.wrapper {
height: 3000px;
}
.cta-bg {
display: none;
position: sticky;
bottom: 10%;
top: 60%;
width: 60%;
height: auto;
z-index: 1;
}
#media only screen and (max-width: 767px) {
.cta-bg {
display: none !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="cta-bg"><img src="https://via.placeholder.com/150" class="img-fluid"></div>
</div>
It's coming after a scroll amount of 900 but I want to make it disappear again at scroll amount of 1200, please guide me.
I see in your question you said it's coming after 900 but don't disappear after 1200.
Basically you only need to use and operator && in your if statement, if your y is between 900 and 1200 your image will fadeIn else will fadeOut, also you can change that limit ( 1200 ) by your preference.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 900 && y < 1200) {
$('.cta-bg').fadeIn();
} else {
$('.cta-bg').fadeOut();
}
});
.wrapper {
height: 3000px;
}
.cta-bg {
display: none;
position: sticky;
bottom: 10%;
top: 60%;
width: 60%;
height: auto;
z-index: 1;
}
#media only screen and (max-width: 767px) {
.cta-bg {
display: none !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="cta-bg"><img src="https://via.placeholder.com/150" class="img-fluid"></div>
</div>
I'm using an hero section to show some content.
It's responsive using the padding-bottom percentage technique and an inner absolute positioned container to center the content.
Now the catch: reaching a breakpoint, let's say 768px, and on lower window size I would like the box to start growing again.
I found some js/jQuery code around the web and was able to get the result but it only works if I load the page when the window is <768px. In that case it works brilliantly. But if the page is loaded in a larger window the below 768px resizing get lost.
This is the html:
<div class="row row-home-hero" id="hero">
<div class="cont">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="cta-hero-home">
» CTA1
<span class="cta-hero-spacer">or</span>
» CTA2
</div>
</div>
</div>
This is the JS.
It's a mess since it's a mix from different sources.
And I'm using Wordpress so I've to replace some $ with jQuery.
Please forgive me :)
function screenClass() {
if(jQuery(window).innerWidth() < 768) {
jQuery('.row-home-hero').addClass('small-hero');
} else {
jQuery('.row-home-hero').removeClass('small-hero');
jQuery('.row-home-hero').css("height", "");
}
}
// Fire.
screenClass();
// And recheck if window gets resized.
jQuery(window).bind('resize',function(){
screenClass();
});
if (document.documentElement.clientWidth < 768) {
var $li = jQuery('.small-hero'), // Cache your element
startW = $li.width(); // Store a variable reference
function setMarginDiff() {
area = 500000;
width = jQuery('.small-hero').width();
jQuery('.small-hero').height(Math.ceil(area/width/1.7));
}
setMarginDiff(); // Do on DOM ready
jQuery(window).resize(setMarginDiff); // and on resize
}
And this is the CSS
.row-home-hero {
background-position: center;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-color: red;
}
.row-home-hero:before {
display: block;
content: "";
width: 100%;
padding-top: 46%;
}
.row-home-hero .cont {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
text-align: center;
}
a.cta-hero-link {
display: block;
width: 100px;
max-width: 80%;
line-height: 40px;
background: white;
color: #1b9fdd;
text-transform: uppercase;
text-decoration: none;
margin: 10px auto;
text-align: center;
font-weight: 500;
box-shadow: 0px 0px 7px 1px rgba(0,0,0,.4);
}
#media screen and (max-width: 768px) {
.row-pre-footer .cont div {
width: 100%;
padding: 0 5%;
float: none;
margin: 0 auto 30px;
}
.progetto-footer, .loghi-footer {
width: 100%;
max-width: 320px;
margin: 0 auto 30px;
float: none;
}
.double-box .tib-tab {
float: none;
width: 90%;
margin: 5% auto;
padding-bottom: 90%;
}
.tib-box h2, .tab-box h2 {
font-size: calc(28px + (46 - 28) * (100vw - 320px) / (768 - 320));
margin-bottom: 18vw;
}
.double-box-inner p {
font-size: 22px;
line-height: 30px;
}
.row-home-hero.small-hero {
height: 500px;
}
.row-home-hero:before {
display: block;
content: "";
width: 100%;
padding-top: 0;
}
}
And this is a working demo
Thanks!
I moved the if (document.documentElement.clientWidth < 768) { block inside the resize event. So that it gets called whenever the window is resized.
In the original version, it would only get called when the page was loaded (and only if the screen was smaller than 768). With this adjustment, it will always be rechecked when resized.
I also merged all your code into one smaller function.
var breakpoint = 768
var area = 500000
var target = $('.row-home-hero')
$(window).bind('resize', function() {
if(window.innerWidth < breakpoint) {
var width = target.width()
target.addClass('small-hero')
target.height(Math.ceil(area / width / 1.7))
} else {
target.removeClass('small-hero')
target.css('height', '')
}
})
.trigger('resize')
I'm trying to make a chat HTML template. But I'm having some problems to make scrolleable the messages area.
My structure is like this:
Chat header: to the top with the title of the chat or name person.
Chat input message: to the bottom you can write.
Chat visible area: total height - (chat header height + chat input message height).
Messages: Must increment it height but always be at the bottom of the chat visible area, to read the last message.
All this structure lives with other html elements, is not fullscreen.
My HTML structure is like this:
<div id="chat-1" class="chat-ventana">
<div class="chat-header">
<h4>Header</h4>
</div>
<div class="chat-mensajes-contenedor">
<div class="chat-mensajes-contenedor-general">
<div class="mensaje-contenedor">
<!-- messages content -->
</div>
</div>
</div>
<div class="chat-textarea">
<textarea class="form-control" placeholder="Type your message"></textarea>
</div>
</div>
And my CSS looks is this:
.chat-container {
height: 70vh;
min-height: 400px;
}
.chat-ventana {
position: relative;
display: inline-block;
width: 65%;
float: left;
}
.chat-ventana, .chat-mensajes-contenedor {
height: 100%;
}
.chat-mensajes-contenedor, .chat-mensajes-contenedor-general {
padding: 15px 15px 20px 15px;
}
.chat-header {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.chat-mensajes-contenedor {
position: relative;
overflow-x: hidden;
overflow-y: scroll;
height: 400px;
}
.chat-mensajes-contenedor-general {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.chat-ventana, .chat-mensajes-contenedor {
height: 100%;
}
.chat-mensajes-contenedor {
height: calc(100% - 46px);
}
.chat-mensajes-contenedor, .chat-mensajes-contenedor-general {
padding: 66px 20px 25px 20px;
}
.chat-textarea {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.chat-textarea .form-control {
resize: none;
height: 46px;
padding: 10px 20px;
}
I see if I set .chat-mensajes-contenedor-general to position: relative; it becomes scrolleable but I can't position it to the bottom.
I think I get what you're after.
And it's probably obvious but since you didn't say we can't use javascript you can of course employ a little of it (using jQuery in the case below) to achieve the same end result:
[JSFIDDLE]
function returnScrollHeight() {
return this.scrollHeight;
}
$('.chat-mensajes-contenedor').scrollTop(returnScrollHeight);
$('textarea.form-control').on('keyup', function (e) {
if (e.ctrlKey && e.keyCode === 13) {
$('.mensaje-contenedor').append('<div class="line">' + this.value + '</div>');
$('.chat-mensajes-contenedor').scrollTop(returnScrollHeight);
this.value = '';
}
});
I couldn't come up with a non-js solution in the brief time I tried. Hopefully someone else will come along and give the pure html/css answer.
Here is a fiddle: https://jsfiddle.net/gLahjk5z/3/
I changed the position styles to position: relative and altered some of your height elements.
I then added this Jquery function to run on document ready:
$(document).ready(function() {
var bottom = $(".mensaje-contenedor").height();
$(".chat-mensajes-contenedor").scrollTop(bottom);
})
To make messages always appear at the bottom use this CSS:
.chat-mensajes-contenedor-general {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mensaje-contenedor {
align-self: flex-end;
}
I'm trying to display a right / left navigation arrow within a container (the arrows replace the existence of a scrollbar) when the corresponding edge of the content overlaps the container's sides.
Also, when the content is scrolled all the way to the end and can't scroll any further, the arrow should disappear.
My problem is, I'm confused as to how I write the function to check whether the element's contents are overlapping one edge or the other to hide one arrow or the other.
I started writing logic like this:
function setArrows(elem){
if (elem.scrollLeft() > 0) { //scroll position is greater than zero
// show left arrow
}
if () { //scroll position is less than zero
//show right arrow
}
}
but that doesn't seem to be the right logic. It sounded simpler in my head before I went to actually write the function.
How do I check whether the right/left edge of an element is overlapping the side of it's container?
Here's a Stack Snippet:
$('#wrapper').scroll(function(){
//check edges
});
div {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 500px;
height: 100px;
background-color: blue;
overflow-x: scroll;
overflow-y:hidden;
}
#content {
width: 1000px;
height: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
</div>
</div>
You need to check if the content width minus the scrollLeft is greater than the wrapper width. If it is show the right scroller..
Something like this
$(function() {
var content = $('#content'),
arrows = $('.arrow'),
wrapper = $('#wrapper').scroll(function() {
//check edges
// handle left arrow
if (this.scrollLeft > 0) {
arrows.filter('.left').addClass('visible');
} else {
arrows.filter('.left').removeClass('visible');
};
// handle right arrow
if (content.outerWidth() - this.scrollLeft > wrapper.width()) {
arrows.filter('.right').addClass('visible');
} else {
arrows.filter('.right').removeClass('visible');
};
});
arrows.on('click', function() {
if ($(this).is('.left')) {
wrapper[0].scrollLeft -= 100;
} else {
wrapper[0].scrollLeft += 100;
}
return false;
});
// initialize
wrapper.trigger('scroll');
});
div {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 500px;
height: 100px;
background-color: blue;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
#content {
width: 1000px;
height: 100px;
background: url('http://lorempixel.com/1000/100/abstract/2') 0 0 no-repeat;
}
#full-container {
position: relative;
display: inline-block;
}
.arrow {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
background-color: black;
display: none;
z-index: 100;
cursor: pointer;
color: #fff;
text-align: center;
line-height: 100px;
}
.arrow.visible {
display: block;
}
.arrow.left {
left: 0
}
.arrow.right {
right: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="full-container">
<div class="arrow left"><</div>
<div id="wrapper">
<div id="content"></div>
</div>
<div class="arrow right">></div>
</div>
I'm trying to develop following functionality for a sidebar. In a nutshell, Sidebar will have 100% height and will be absolutely positioned. Inside it there is content, which should scroll with the page, while sidebar is fixed. And as addition there is a shadow effect / response to show user if he can scroll down or up. So for example if there is something that can be scrolled down / up show shadow there, if not don't show shadow. I made a quick mockup, hopefully it will help you understand what happens if page is scrolled:
I made a quick jsfidle with content and sidebar, this is as far as I can get at the moment. http://jsfiddle.net/cJGVJ/3/
I assume this can't be achieved only with css and html and work cross browser, so jQuery solutions are welcome.
HTML
<div id="main"> <!-- Demo Content (Scroll down for sidebar) -->
<!-- Demo content here -->
</div>
<aside id="sidebar">
<div id="side-content-1"></div>
<div id="side-content-2"></div>
</aside>
CSS
body {
background: #f3f3f3;
margin: 0;
padding: 0;
}
#page-wrapper {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#sidebar {
width: 30%;
float: left;
background: #ffffff;
padding: 10px;
height: 100%;
position: fixed;
}
#main {
width: 60%;
float: right;
}
#side-content-1, #side-content-2 {
height: 400px;
}
#side-content-1 {
background: red;
opacity: 0.4;
}
#side-content-2 {
background: green;
opacity: 0.4;
margin-top: 10px;
}
EDIT
Bare in mind content in sidebar sums up to less than one of the page content, so once it reaches the bottom (so when bottom shadow disappears) it should stay there, while main content can be still scrolled down.
This is still a little rough, but its a start:
I went through and polished it a little more and took care of some window resizing issues.
I think this will work for you:
Updated Working Example
JS
$(window).scroll(function () {
var y = $(window).scrollTop();
var x = $(window).scrollTop() + $(window).height();
var s = $('#sidebar').height();
var o = $('#side-content-1').offset().top;
var q = $('#side-content-1').offset().top + $('#side-content-1').height();
var u = $('#side-content-2').offset().top;
if (x > s) {
$('#sidebar').css({
'position': 'fixed',
'bottom': '0',
'width': '27%'
});
$('#bottomShadow').hide();
}
if (x < s) {
$('#sidebar').css({
'position': 'static',
'width': '30%'
});
$('#bottomShadow').show();
}
if (y > o) {
$('#topShadow').show().css({
'position': 'fixed',
'top': '-2px'
});
}
if (y < o) {
$('#topShadow').hide();
}
if (y > q - 4 && y < q + 10) {
$('#topShadow').hide();
}
if (x > u - 10 && x < u + 4) {
$('#bottomShadow').hide();
}
});
var shadow = (function () {
$('#topShadow, #bottomShadow').width($('#sidebar').width());
});
$(window).resize(shadow);
$(document).ready(shadow);
CSS
body {
background: #f3f3f3;
margin: 0;
padding: 0;
}
#page-wrapper {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#sidebar {
width: 30%;
float:left;
background: #ffffff;
padding: 10px;
}
#main {
width: 60%;
float: right;
}
#side-content-1, #side-content-2 {
height: 400px;
}
#side-content-1 {
background: red;
opacity: 0.4;
}
#side-content-2 {
background: green;
opacity: 0.4;
margin-top: 10px;
}
#topShadow {
display:none;
height:2px;
box-shadow:0px 5px 4px #000;
}
#bottomShadow {
position:fixed;
bottom:-3px;
height:2px;
width:99%;
box-shadow:0px -5px 4px #000;
}
CSS Tricks website have an article on Persistent Headers where they accomplish something similar with a bit of JQuery