I have a fixed menu that scrolls on top of both light and dark backgrounds.
If the text is white it becomes invisible when on top of white elements. I would like to find a way where the color of the text changes dynamically as I scroll on the page.
My menu:
<div class="nav-wrapper footer-wrapper">
<nav>
<div class="column">
Previous
</div>
<div class="column links">
Next
</div>
</nav>
A working JSFiddle: https://jsfiddle.net/ua06Lbwk/5/
Any ideas?
You can use jQuery to add/remove a css class depending on the height of the divs.
Like this:
HTML:
<nav>
link
</nav>
<div id="element1">
</div>
<div id="element2">
</div>
<div id="element3">
</div>
CSS:
.wrapper {
height: 100px;
}
nav {
position: fixed;
width: 100%;
color: white;
text-align: center;
}
#element1 {
height: 50vh;
background-color: gray;
}
#element2 {
height: 20vh;
background-color: white;
}
#element3 {
height: 100vh;
background-color: black;
}
.active {
color:black;
}
jQuery:
$(document).ready(function() {
$(window).scroll(function() {
var element1height = $( "#element1" ).height();
var element2height = $( "#element2" ).height();
var total = element1height + element2height;
var st = $(this).scrollTop();
if( st > element1height ) {
$("nav").addClass("active");
}
else {
$("nav").removeClass("active");
}
if( st > total ) {
$("nav").removeClass("active");
}
});
});
You can use jQuery to get the height of the divs - if the user scrolls past the height of <div id="element1">, it will add a class to <nav> which changes the color of the text within. If the user scrolls past the sum of <div id="element1"> & <div id="element2">'s height - it will remove the class.
JSFiddle Demo
Related
Okay, so I'm basically trying to achieve that if you click div1, the width of this specific div changes to 50%, and all the other divs their widths change to, let say 2%. (see jsfiddle for more clarity)
I've tried to do this by giving them a separate class, so the div being click is Online, the rest of Offline. I thought it might work if I then said something like; if .. hasClass .. do this.
In the end, I've managed to indeed scale the div on click to 50%, but sadly enough I made quite a mess of the rest. I'll include the code, and I hope someone can explain to me how I should proceed. I also thought of an Array but did not know how to move forward with this.
https://jsfiddle.net/6cjmshrq/
1
$(".sliding-panel1").click(function(){
$(".sliding-pane2").addClass("Active");
$(".sliding-pane2").addClass("Offline");
$(".sliding-pane3").addClass("Offline");
$(".sliding-pane4").addClass("Offline");
$(".sliding-pane5").addClass("Offline");
$(".sliding-pane6").addClass("Offline");
$(".sliding-pane7").addClass("Offline");
$(".sliding-pane8").addClass("Offline");
$(".sliding-pane9").addClass("Offline");
$(".sliding-pane10").addClass("Offline");
$(".sliding-pane11").addClass("Offline");
});
2
$(".sliding-panel1").click(function(){
if ( $(this).hasClass("Active") ) {
$(this).animate({
width: '9%',
height: '100%'
});
} else {
$(this).animate({
width: '50%',
height: '100%'
});
}
$(this).toggleClass("Active");
});
3
$(function(){
$('.sliding-panel1').click(function(){
$(".container").children().each( function(){
if (!$(this).hasClass('Active') ){
$(this).animate({
width: '9%'
})
else {
$(this).animate({
width: '50%'
})
};
4
var elements = document.getElementsByClassName('Offline');
for (var i = 0; i < elements.length; i++) {
elements[i].style.widht='2%';
elements[i].style.height='100%';
}
5
$(".sliding-panel1").click(function(){
$("#selectedwhip").addClass("active");
});
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
You can minimize the css your css isnt dry , just use a single default class for the default state and add a class with name .Active in css with the transition property and you dont have to write that much jquery code too to control the width and height, instead you add or remove the .Active class see a demo below if that is how you want it
$(".container div").on('click', function(e) {
var $this = $(this);
$(".container div").filter(function() {
return !$(this).is($this);
}).removeClass('Active').addClass('Offline');
$this.removeClass('Offline').addClass('Active');
});
*,
*:before,
*:after {
margin: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
position: relative;
width: 100%;
height: 100%;
background-color: grey;
}
.panels {
width: 9%;
float: left;
height: 100vh;
background-color: red;
border: 1px black solid;
}
.Active {
width: 50%;
transition: 1s linear;
}
.Offline {
width: 5%;
transition: 1s linear;
}
<div class="container">
<div class="panels">1
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Maybe this is:
$("[class^='sliding-panel']" ).click(function(){ //selector part of class name
$("[class^='sliding-panel']" ).addClass("Offline").removeClass("Active"); //for all
$(this).addClass("Active").removeClass("Offline"); //for this element
});
Slight adjustment of Muhammad Omer Aslam's answer to account for shrinking the un-clicked divs instead of pushing them off screen (if I'm seeing it right):
script:
$(".container div").on('click', function() {
$(".container div").removeClass('Active');
$(".container div").addClass('Inactive');
$(this).removeClass('Inactive');
$(this).addClass('Active');
});
append to his css:
.Inactive {
width: 2%;
transition: 1s linear;
}
enter image description hereI am having issues while implementing Sidebar with mouse scrolling. If i drag the scroll manually with mouse, the sidebar leaves some white space and not able to map with the page height.
$(window).on('scroll resize', function() {
var marginTop = $(window).scrollTop();
var marginFooter = $('#divFooter').height();
var limit = $("#divMain").height() - $("#navMenu").height();
if (marginTop < limit) {
$("#navMenu").css("margin-top", marginTop);
}
});
#navMenu {
padding-left: 0;
padding-right: 0;
float: left;
height: 100%;
z-index: 10001;
}
#divMain {
padding: 0 20px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navMenu">
<ucl:ucNavMenu ID="ucNavMenu" runat="server" />
</div>
<div class="clearfix visible-xs-block"></div>
//div for entire page content inculding page header menu
<div id="divMain"> content </div>
How to Show hide div area with jquery
if scrollbar or overflow element active and no active
and this example code for My question
example html
$(function(){
var t = $('#container-ts-plugin-area'),
s = t.find('.container-ts-plugin-area'),
e = s.find('.ts-plugin-area'),
f = (e.outerWidth()+parseInt(e.css('margin-left'),10)+parseInt(e.css('margin-right'),10))*e.length;
s.css('width', f);
$('._ts_cont_btn_N_P button').on("click mouseenter", function() {
var role = $(this).data('role');
t.stop().animate({
scrollLeft: (role=="N")?"+=300px":"-=300px"
}, 400);
});
});
._ts_cont_btn_N_P {
overflow: hidden;
}
.plugin-area {
overflow-x:auto;
overflow-y:hidden;
}
.ts-plugin-area {
width:100px;
height:100px;
background-color:red;
display:block;
float:left;
margin:0 5px;
}
._ts_btn_prev_plugin {
float:left;
}
._ts_btn_N_plugin {
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="_cont_plugin_tse">
<div class="_ts_cont_btn_N_P"> <!-- auto show hide -->
<button class="_ts_btn_P_plugin" data-role="P"><<</button>
<button class="_ts_btn_N_plugin" data-role="N">>></button>
</div>
<div id="container-ts-plugin-area" class="plugin-area">
<div class="container-ts-plugin-area">
<div class="ts-plugin-area" data-position="1">1</div>
<div class="ts-plugin-area" data-position="2">2</div>
<div class="ts-plugin-area" data-position="3">3</div>
<div class="ts-plugin-area" data-position="4">4</div>
<div class="ts-plugin-area" data-position="5">5</div>
<div class="ts-plugin-area" data-position="6">6</div>
</div>
</div>
</div>
To check if element have scrollbar or overflow active or no active state you need to check if the child element is bigger than the parent element.
Also its depend on your overflow settings of your parent thats its should be auto or scroll in order to show the scrollbar.
Global example
if($('.child').width() > $('.parent').width()) {
// then do something
console.log('scrollbar is active');
}
.parent {
width: 300px;
overflow: auto;
}
.child {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
// add something in here
</div>
</div>
And for your code can check if the .container-ts-plugin-area width is bigger than the #container-ts-plugin-area width and then you show the buttons
And by default to hide this buttons in css
._ts_cont_btn_N_P {
overflow: hidden;
display: none;
}
And in the jQuery to add
if(s.width() > t.width()) {
$('._ts_cont_btn_N_P').show();
}
here is the full demo of your code
https://jsfiddle.net/p2y79f7x/1/
I have a side nav bar which looks like this:
.scroll-box {
overflow: hidden;
width: 128px;
}
.filler {
height: 256px;
overflow-y: auto;
}
.selector {
background-color: #369;
padding: 8px 4px;
text-align: center;
flex-grow: 1;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.bar {
height: 8px;
width: 100%;
background-color: #808080;
}
.label {
padding: 4px 8px;
background-color: #707070;
}
.active {
background-color: lightgrey;
color: #369;
}
<div class="scroll-box">
<div class="label">Dates</div>
<div class="filler">
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector active" id="today">15-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
</div>
<div class="bar"></div>
</div>
I want to get it so that when the page loads, it automatically centers the view of the side nav bar to the today id element. I've tried putting myUrl#today but that changes the entire page scroll, which I do not want. I
I only want the scroll in the side nav bar to change it's position and center on the #today bit. Does anyone know of a way to do this?
I am willing to use jQuery and JS as well.
Thank you.
I think you can use jQuery code such as
$(document).ready(function(){
// when document is ready
// first check if #today is defined in HTML
// the $('') is the jQuery selector of to select an element
// $('#today') means select an element with the ID "today"
// the .length attribute is default javascript attribute to check
// how many of elements selected has existed
if($('#today').length > 0){
// the offset() function is a jQuery function that is used for check the
// relative distance from the border of current element to its parent
var distance_to_top = $('#today').offset().top;
var top_label_height = $('.label').height();
var distance_to_scroll = distance_to_top - top_label_height - 8;
// 8 px is body margin on jsfiddle
// scrollTop() function is another jQuery function to scroll an
// overflow element
$('.filler').scrollTop(distance_to_scroll);
}
});
find the offset of the today element relative to its parent, then minus the label height because the label will cover on top of the #today. the scroll to top
The demo can be found at here
Maybe this can do. (I can't test it right now...).
Basically, we get every element of the div that doesn't have the id "today" and we add the height of those elements. When we finally reach "today", we set the scrollbar to the height of every past elements added together and go out of the loop.
$(document).ready(function(){
var height = 0;
$(".filler *").each(function () {
if($(this).is("#today"))
{
return false; //to get out of the .each
}
else
{
height += $(this).height();
}
})
$( "div.demo" ).scrollTop(height); //set the scrollbar
});
I want to create horizontal responsive page navigation as illustrated by the below image :
This is what I have managed to do : DEMO
$(document).ready(function () {
var slideNum = $('.page').length,
wrapperWidth = 100 * slideNum,
slideWidth = 100/slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');
$('a.scrollitem').click(function(){
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');
var slideNumber = $($(this).attr('href')).index('.page'),
margin = slideNumber * -100 + '%';
$('.wrapper').animate({marginLeft: margin},1000);
return false;
});
});
html, body {
height: 100%;
margin: 0;
overflow-x:hidden;
position:relative;
}
nav{
position:absolute;
top:0; left:0;
height:30px;
}
.wrapper {
height: 100%;
background: #263729;
}
.page {
float:left;
background: #992213;
min-height: 100%;
padding-top: 30px;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
}
#page-3 {
background: #0000FF;
}
a {
color:#FFF;
}
a.selected{
color: red;
}
.simulate{
height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<nav>
page 1
page 2
page 3
</nav>
<div id="page-1" class="page">
<h3>page 1</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>page 2</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>page 3</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
</div>
I have however hit a few brick walls, as mine is responsive to a certain degree, its just as you scale it needs to stick to the page its on and not reveal the others.
Also if the pages are long it shows a scroll bar which is perfect, but on the last slide there is a gap as wide as the scroll-bar.
I have the following Requirements:
Needs to be Responsive
pages need to be able to be long (800px) and still scrollable, without the gap on the last one.
needs to work on minimum ie9
Horizontal page sliding
with left-margin animation
This jQuery snippet :
Calculates the number of slides and set the width of the wrapper accordingly.
According to which link is clicked, left-margin is animated on the wrapper to show the corresponding slide with a smooth transition
Toggles the class of the clicked link for active link highlighting
Note that this solution:
Uses only one menu occurence to minimize markup and prevent content repetition.
Requires only the jQuery library
works for a dynamic number of slides
$(document).ready(function() {
var slideNum = $('.page').length,
wrapperWidth = 100 * slideNum,
slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');
$('a.scrollitem').click(function() {
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');
var slideNumber = $($(this).attr('href')).index('.page'),
margin = slideNumber * -100 + '%';
$('.wrapper').animate({
marginLeft: margin
}, 1000);
return false;
});
});
html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
position: relative;
}
nav {
position: absolute;
top: 0;
left: 0;
height: 30px;
}
.wrapper {
height: 100%;
background: #263729;
}
.page {
float: left;
background: #992213;
min-height: 100%;
padding-top: 30px;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
}
#page-3 {
background: #0000FF;
}
a {
color: #FFF;
}
a.selected {
color: red;
}
.simulate {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<nav>
page 1
page 2
page 3
</nav>
<div id="page-1" class="page">
<h3>page 1</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>page 2</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>page 3</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
</div>
"as you scale it needs to stick to the page its on and not reveal the others"
To achieve this, keep a reference to the current page element and then do a no-delay scrollTo this element when the window is resized:
var currentPage; //here is where we will hold the reference
jQuery('a.scrollitem').click(function () {
var targetPage = $(jQuery(this).attr('href'));
jQuery('a.scrollitem').removeClass('selected');
jQuery(this).addClass('selected');
jQuery('.toggle').css({'display':'none'});
jQuery('.wrapper').scrollTo(targetPage, 1200, function(){
jQuery('.toggle').css({'display':'block'});
});
currentPage = targetPage; //here is where we set the reference
return false;
});
//and here we do a no-delay scrollTo
$(window).resize(function(){
if(!!currentPage){
console.log('window resized. scrolling to: ', currentPage.attr('id'));
jQuery('.wrapper').scrollTo(currentPage);
}
});
This makes it pretty responsive, in my opinion.
pages need to be able to be long (800px) and still scrollable, without the gap on the last one.
To get rid of that gap, I just make all pages a little longer than they need to be. The scrolling is not affected by this since the pages are left-justified with left:0;. I suspect that the other pages had the same gap and and that the gaps on those pages were covered by the scroll bar.
.page {
width: 110%;
}
needs to work on minimum ie9
I'm afraid I can't help in this regard; I have only IE11 installed. But hey, it works great in IE11.
Working fiddle