When I enter my website and resize the browser to make it smaller and then scroll horizontally to the right, half of the nav bar is getting cut off, I want the nav bar to show all my links even if I have to scroll to the right.
Why is this happening?
here is my css:
#header{
width:100%;
}
.head{
width: 100%;
min-width: 1350px;
height: 100px;
position: fixed;
top: 0;
left: 0;
background-color:#303030;
}
nav{
width:655px;
margin-top:20px;
float:right;
border:2px solid yellow;
}
$(function(){
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('.head').addClass('shrink');
$('#logo').hide();
$('#postLogo').addClass('now').show();
}
else {
$('.head').removeClass('shrink');
$('#logo').show();
$('#postLogo').addClass('now').hide();
}
});
function getCurrentScroll() {
return window.pageYOffset;
}
});
Related
I'm having trouble with a slick.js display. The "next" arrow is displaying on the left side and doesn't seem to respond positionally when I adjust the right attribute. The "prev" arrow is displaying fine and, as far as I can tell, is being loaded the same way. My dev site is here.
Here's my CSS for this section:
#front-page-slider, #front-page-slider .slide {
min-height:500px;
}
.width-fixed {
max-width: 1200px;
margin: 0 auto;
}
.slider-container {
position:relative;
}
#join-widget {
position:absolute;
text-align:center;
width: 100%;
bottom: 0;
}
#gform_wrapper_3 .gform_heading {
display:none;
}
#join-widget form {
display:flex;
justify-content:center;
}
#front-page-slider .slick-prev {
left: 10px;
}
#front-page-slider .slick-next {
right: 10px;
}
Your CSS for slick.arrow (in the file theme.min.css) includes left: 10px. To override this, include in your slick.next class the value left: auto.
#front-page-slider .slick-next {
right: 10px;
left: auto;
}
I would like my scroll to work like this when the user scrolls. e.g to start to fill up instead of moving.
Is it possible to make the scroll-thumb grow or to style the scrollbar-track-piece different before and after the thumb?
Here is a small example how to implement this loader
window.addEventListener("scroll", (e) => {
var html = document.documentElement;
let step = 100 / (html.scrollHeight - window.innerHeight);
let loader = document.getElementById("scrollprogress");
loader.style.width = (step * html.scrollTop) + "%";
})
#scrollprogress {
height: 5px;
position: fixed;
left: 0;
top: 0;
background: orange;
}
.backgr {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 5px;
background: lightgrey;
z-index: -1;
}
.box {
height: 3000px;
}
<div id="scrollprogress"></div>
<div class="backgr"></div>
<div class="box"></div>
You can approximate this using negative box shadow:
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-thumb {
background-color: orange;
box-shadow:-1000vmax -1000vmax 0px 1000vmax orange;
}
body {
width:300vw;
height:300vh;
background:linear-gradient(60deg,red,blue,orange);
margin:0;
}
html {
background:#fff;
}
I need to make a div square. The height of the div is dynamically changing and I want the width to be equal to the height. I have seen a lot of solutions to set the height to be equal to the width (with padding-bottom on pseudo-elements), but I need it the other way arround. Is this possible with pure CSS?
No .... well, there is this trick, where one use a hidden image
div {
display: inline-block;
height: 170px;
background: red;
}
div img {
visibility: hidden;
height: 100%;
}
<div>
<img src="http://placehold.it/50">
</div>
Updated
And here is a script version, that also keep it within the width
Stack snippet
(function (d,t) {
window.addEventListener("resize", throttler, false);
window.addEventListener("load", throttler(), false); /* run once on load to init */
function throttler() {
if ( !t ) {
t = setTimeout(function() {
t = null;
keepSquared(d.querySelector('.container'),
d.querySelector('.squared'));
}, 66);
}
}
function keepSquared(co,el) {
var s = window.getComputedStyle(co, null);
var m = Math.min(
parseFloat(s.getPropertyValue("width")),
parseFloat(s.getPropertyValue("height")));
el.style.cssText =
'width: ' + m + 'px; height: ' + m + 'px;';
}
})(document,null);
html, body {
height: 100%;
margin: 0;
}
.container {
position: relative;
width: 50%;
height: 50%;
top: 50px;
left: 50px;
border: 1px solid black;
box-sizing: border-box;
}
.squared {
background-color: red;
}
<div class="container">
<div class="squared">
</div>
</div>
Note: Since resize events can fire at a high rate, the throttler is used to reduced the rate so the handler doesn't execute expensive operations such as DOM modifications too often.
So I made this: http://jsfiddle.net/RaV3u/5/
...but haven't been able to figure out how to make the slides loop -- that is, when the last slide finishes, it continues from the first, and the same for the first slide going backwards.
Does anyone have an idea how to do this?
/* THUMBNAIL SLIDER IMAGES
------------------------------------------- */
.slideshow {
height: 200px;
position: relative;
overflow: hidden;
}
.images {
position: absolute;
left: 0; /* Change this value to slide */
top: 0;
height: 100%;
width: 300%;
z-index: -1; /* send this layer behind the .circle layer */
}
/* THUMBNAIL SLIDER NAVIGATION
------------------------------------------- */
.thumb-slide-nav-wrapper {
margin: 70px 15px; /* position of the nav buttons */
overflow:auto;
}
.circle-left {
/* position of the nav buttons */
float:left;
}
.circle-right {
/* position of the nav buttons */
float:right;
}
.circle {
/* nav buttons */
z-index: 1;
border-radius: 50%;
width: 60px;
height: 60px;
background: green;
}
a .circle:hover {
background: lightgrey;
}
Thanks.
Demo
In Your JavaScript Just check whether the end (first or last image) is reached before sliding it.
To get total count of images use: var tot=$(".images").find("img").length;
and use a counter variable i to check the direction of sliding and end image reached or not condition.
So here is your changed JS/JQuery:
$(document).ready(function() {
var tot=$(".images").find("img").length; //total images in slider nav
var i=0; //acts as a counter
var thumbSliderPos = $(".images").css("left");
// Detect thumbnail nav button clicks
$('#circle-left').click(function() {
//Detect if first image is reached?
if(i<=0){
i=tot-2;
$(".images").animate({
"left": "-="+(400*i),
}, 400);
//Yes Show last image
}
else
{
$(".images").animate({
left: "+=400",
}, 400);
i--;
}
});
$('#circle-right').click(function() {
//Detect if last image is reached?
if(i>=tot-2)
{
$(".images").animate({
left: "0",
}, 400);
i=0;
//Yes Show first image
}
else
{
$(".images").animate({
left: "-=400",
}, 400);
i++;
}
});
});
To make it autoSlide after page loads Here is another:
Demo
Hope it Helps you. Cheers :) !
How do i get a fixed sidebar like the one containing the social buttons on this site:
http://www.tripwiremagazine.com/2012/11/social-media-buttons-and-icon-sets.html
I want my sidebar to be fixed to the top of my screen when i scroll down but on the top of the page there must be an absolute position it so that it stops following the browser as i scrool.
Currently I am just using:
#sidebar { position:fixed; }
But this does not give it an absolute position when reaching the top of the page.
Thank you
html
<div class="wrapper"><div class="abs" id="sidebar"></div></div>
CSS
.abs { position: absolute; }
.fixed {
position: fixed;
top: 30px !important;}
#sidebar {
top: 150px;
left: 0;
height: 100px;
width: 20px;
background-color: #ccc;}
.wrapper {
height: 1500px;
padding: 20px;}
jQuery
$(document).scroll(function() {
var scrollPosition = $(document).scrollTop();
var scrollReference = 10;
if (scrollPosition >= scrollReference) {
$("#sidebar").addClass('fixed');
} else {
$("#sidebar").removeClass('fixed');
$("#sidebar").addClass('abs');
};
});
DEMO of this code:
http://jsfiddle.net/B3jZ5/6/
<div class="wrapper">
is the example of content.
You can also try this plugin:
https://code.google.com/p/sticky-panel/