All Macs have this option to show scrollbars but it is turned off by default.
I was wondering if there is a way to show scrollbars even if this option is turned off?
Or is there some sort of alternative (JS/jQuery) that I could use that just puts in an arrow and triggers some sort of scrolling function?
Basically something that would work to scroll without technically having a scrollbar.
Edit
As suggested I've started looking into the scrollTop() function in jQuery. Is there a way to get the current_position variable to get where the scrollbar should be?
$(document).ready(function(){
// var current_position = $("#container").get_current_position();
$("#up").bind("click", function(){
$("#container").scrollTop(current_position - 100);
});
$("#down").bind("click", function(){
$("#container").scrollTop(current_position + 100);
});
});
#container{
width:200px;
height:200px;
padding:20px;
background-color:#e33;
overflow:hidden;
}
#inner{
width:200px;
height:1000px;
background-color:#33e;
}
#up,#down{
width:240px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="up">
Up
</button>
<div id="container">
<div id="inner">
</div>
</div>
<button id="down">
Down
</button>
There are libraries (e.g. https://www.jqueryscript.net/other/iOS-Style-Custom-Browser-Scrollbar-with-jQuery-CSS.html) which add custom scrollbars to pages by js, but you should really question this idea since you are changing the default usability behavior of the browser.
If you just want a button to scroll you can easily implement this e.g. with jquery. See: https://api.jquery.com/scrollTop/#scrollTop2
You can use scrollTop without parameter to get the current scroll position on the page, and if you need you can additional read out the pageheight ($(document).height();) and the viewport height ($(window).height();) in order to calculate the percentage of the page which is shown and where the actual position is relative to the content. See http://api.jquery.com/height/
The closest thing you can get to the scrollbars always being on is using CSS to style the scrollbar.
It won't work in all browsers though
This code does what I want it to do now:
$(document).ready(function(){
$("#up").bind("click", function(){
var current_position = parseInt($("#container").scrollTop());
$("#container").scrollTop(current_position - 100);
});
$("#down").bind("click", function(){
var current_position = parseInt($("#container").scrollTop());
$("#container").scrollTop(current_position + 100);
});
});
#container{
width:200px;
height:200px;
padding:20px;
background-color:#e33;
overflow:hidden;
}
#inner{
width:200px;
height:1000px;
background-color:#33e;
}
#up,#down{
width:240px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="up">
Up
</button>
<div id="container">
<div id="inner">
</div>
</div>
<button id="down">
Down
</button>
<br />
Related
$(document).ready(function() {
$('.nb-team .nb-team-grid').click(function() {
$(".nb-team-info")
.css('opacit:1')
});
});
Hey guys, I'm trying to change style when we tap on a div. And it should only happen in mobile resolution. So I tried but its not working, and I have attached my code above. Please go through for more clarification. Thanks :)
If you want to add this style only to the mobile or small screen size you can try this.
<script>
$(document).ready(function() {
$(".nb-team-grid").click(function() {
$(this).next(".nb-team-info").toggleClass("my-class");
});
});
</script>
.my-class{ opacity:0;}
.parent-div{background:#eee; width:50%; float:left; height:auto;}
#media (max-width:420px){
.my-class{
opacity:0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
<div class="nb-team-grid" style="height:100px; width:100px; background:red;"></div>
<div class="nb-team-info" style="height:100px; width:100px; background:black;"></div>
</div>
<div class="parent-div">
<div class="nb-team-grid" style="height:100px; width:100px; background:red;"></div>
<div class="nb-team-info" style="height:100px; width:100px; background:black;></div>
</div>
We can add styles through javascript like this
$(".nb-team-info")
.css('opacity','1');
You just have small syntax mistake
EDIT 1
To apply styles only when the resolution for mobile we can check for window width and decide whether to apply the styles or not like this
if($(window).width() < 768){
$(".nb-team-info")
.css('opacity','1');
}
or
Without javascript we can do using media-queries
#media (max-width:420px){
.nb-team-info{
opacity : 1
}
}
#media (min-width:421px){
.nb-team-info{
opacity : 0
}
}
Here is the Code
$(document).ready(function() {
$('.nb-team-grid').click(function() {
if ($(window).width() < 767) {
$(".nb-team-info").css('opacity', '.5');
}
});
});
For the HTML/CSS part, depending on what exactly you are dealing with you may be fine making two different <div>'s for mobile and non-mobile resolutions, then just apply the style to the mobile viewport <div>. (similar to how mobile navbars are often created)
You should write like this:
$('.nb-team-info').css('opacity', '1');
or:
$('.nb-team-info').attr('style', 'opacity: 1');
Goldman Sachs has a pretty cool webpage here. What interests me about the page is that when you scroll down, you get a header appearing, which - depending on the section where you're at - has more of its squares turn from white to blue. I was wondering (because I can't seem to find the answer in the code), how exactly they made the scrollbar appear seemingly out of the blue (pun not intended), but also how the squares turn from white to blue depending on where you are on the page.
the most common way to do this is by detecting the position of the scrollbar with javascript. I've used the JQuery library for this demo.
here's some code (merely for illustration purpose!)
$(window).scroll(function (event) {
var numOfButtons = 4;
var scroll = $(window).scrollTop();
var heightContainer = $(".container").height();
console.log('scrollPos', scroll);
if(scroll > heightContainer/ numOfButtons){
$(".header .button:nth-child(2)").addClass('act');
}else{
$(".header .button:nth-child(2)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*2){
$(".header .button:nth-child(3)").addClass('act');
}else{
$(".header .button:nth-child(3)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*3){
$(".header .button:nth-child(4)").addClass('act');
}else{
$(".header .button:nth-child(4)").removeClass('act');
}
});
.header{
height:50px;
background-color:blue;
color:white;
position:fixed;
top:0;
left:0;
width:100%
}
.button{
display:inline-block;
width:10px;
height:10px;
background-color:white;
border-radius:20px;
}
.button.act{
background-color:red;
}
h1{
margin-top:60px;
}
.container{
height:4000px;
background:url("http://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Scroll demo</h1>
<div class="header">
<div class="button act"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<div class="container"><div id="mydiv"></div>
</div>
</body>
</html>
enter link description here
you can easily achieve an effect like that using jquery waypoints: http://imakewebthings.com/waypoints/guides/getting-started/
the first thing that comes to my mind is adding a class with display:block to the header when a certain section hits the top of the viewport to make it visible and playing with addClass and removeClass with css transitions for the squares.
I want my sidebar to have a scrollable div. But it cant have a fixed height. How can I make it scrollable without setting a fixed height?
I tried with this, doesn't work properly.
.sidebar {width:300px; padding:10px; background:#efefef;height:100%; position:fixed}
.scroll-widget {overflow-y: scroll;padding:10px;margin:10px; background:#fffeee; height:inherit}
-
<div class=sidebar>
...
<div class=scroll-widget>
...
</div>
</div>
Demo: http://jsfiddle.net/YK47P
Jquery alternative is also fine with me. But i am a beginner, so please be kind
Somehow I was able to make it work using jQuery and taking help from here.
$(function () { // window load
$(window).resize(function () {
var sidebarH = $('.sidebar').height();
var scrollH = $('.top').height();
$('.scroll-widget').height(sidebarH - scrollH);
}).resize();
});
DEMO : http://jsfiddle.net/YK47P/40/
You just need to add overflow: scroll to your sidebar:
.sidebar {
width:300px;
padding:10px;
background:#efefef;
height:100%;
position:fixed;
overflow: scroll;
}
Updated Fiddle
I'm trying to clone #main then put my ajax result there (hidden), after doing so I will make it scroll horizontally to the left hiding the current one then display the clone.
HTML:
<div class="container">
<div id="main">
<p>Click here to start</p>
</div>
</div>
CSS:
#main{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
}
.container {
position:relative;
}
Javascript:
$('#main').click(function(){
//clone.html(data)
var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
{position:'absolute',right:'0','margin-right':'-460px',top:0}
).attr('class','love').insertAfter($(this));
$(this).css({position:'relative'});
var width = $(window).width()-$(this).outerWidth()/2;
$('#main').animate({'left':'-'+width},4000);
});
but i'm stuck on the idea on how to make both #main animate to the left and position the second div at the center?
Fiddle
EDIT: Now i'm only stuck on how to animate the clone.
I sort of took a different approach to your question, is this kind of what you are looking for?
http://jsfiddle.net/3s7Fw/5/show
I thought, rather than do some animating ourselves, why not let jQuery's hide function do it for us? This could definitely be made to work better, but it communicates the thought.
JavaScript
$('.container').on('click', '.loaded-content', function(){
$this = $(this);
//clone.html(data)
var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');
$this.after(clone);
$this.hide('slow');
});
HTML
<div class="container">
<div id="main" class="loaded-content">
<p>Click here to start</p>
</div>
</div>
CSS
#main, .loaded-content{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
float: left;
}
.container {
position:relative;
width: 920px;
}
If this is not the desired functionality, then you might be interested in a slider. There are a number of good slider plugins already out there that you can use. The difficult part would probably be adding a addNewSlide function to your chosen slider, assuming it didn't already have one.
I can use javascript and everything else, but before reinventing the wheel, I would like to know if there is already a similar plugin for jquery because I would like to use that framework and not mootools.
I don't have problems with money, expecially for a 5€ template, but really I would like to use jquery because I studied it and not mootools.
The template: http://www.globbersthemes.com/demo/upsilum/
EDIT 1: I changed the title for future references for people that know the correct name of this type of effect, thanks to everyone.
i always liked the jquery tools tabs for this - see http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html
Here a plugin that might interest you : http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html
Here, I reinvented the wheel. But had looot of fun! :)
Tested in all modern browsers + IE 6-7-8
Instead of using 'title' images now you can use classic editable text!
Set desired 'start' tab
EDIT: added/fixed title support (rotaion for IE 6-7-8)
H - ACCORDION DEMO
The simple HTML:
<div id="acc">
<div class="title"><p class="button">Title 1</p></div>
<div class="cont">Cont 1</div>
<div class="title"><p class="button">Title 2</p></div>
<div class="cont">Cont 2</div>
<!-- more tabs here.... -->
</div>
The CSS style Ex:
.title{
cursor:pointer;
position:relative;
float:left;
width:20px;
height:200px;
background:#444;
color:#ccc;
padding:15px;
border-left:3px solid #aaa;
}
.cont{
position:relative;
float:left;
width:300px;
background:#999;
height:200px;
padding:15px;
}
.slide{
position:relative;
float:left;
overflow:hidden;
width:0px;
}
.active{
background:#cf5;
color:#444;
}
.button{
white-space:nowrap;
margin-top:180px;
font-size:20px;
line-height:25px;
text-align:left;
}
And the fun part: jQuery !
//+IE678//// HORIZONTAL ACCORDION // roXon //////
var curr = 3; // set desired opened tab
var contW = $('.cont').outerWidth(true);
$('.cont').wrap('<div class="slide" />');
$('.slide').eq(curr-1).width(contW).prev('.title').addClass('active');
$('.title').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.slide').stop().animate({width:0},700);
$(this).next('.slide').stop().animate({width:contW},700);
});
// TITLE ROTATION IE 6-7-8 FIX //
var titleH = $('.title').height();
var btn = $('.button');
btn.css('-webkit-transform','rotate(-90deg)');
btn.css('-moz-transform','rotate(-90deg)');
btn.css('transform','rotate(-90deg)');
if($.browser.msie && $.browser.version<="8.0"){
btn.css({
filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)',
width: titleH+'px',
position:'absolute',
marginTop:'0px'
});
}
One more thing- you'll just have to wrap the accordion into a positioned 'container' with set height and width to avoid accordion elements 'dance' on window resize.