We Keep Coding

Javascript - Add style when we tap on the div

$(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');

Alternative for scrolling on MacOS

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 />

Scrolling/fixed sidebar gets cut off when sidebar is very long

I have a small jQuery script to keep the sidebar visible when you scroll down the browser. However, the sidebar can get very long since it will contain filters (dropdowns and checkboxes) so the bottom part gets cut-off.
I'd like to have an effect like on this website:
http://www.lyst.com/
In a way, when the sidebar is long, you are still able to scroll up and down. It will only become fixed when it reaches the bottom/top of the sidebar.
Does anybody know where I can get a script that does this exactly?

Set your CSS and HTML markup in a fashion that you can easy reference the objects you want to avoid collision with. Create conditional statements to compare said references.
Firstly, the working jsFiddle.
The HTML ->
<div class="content">
<div class="main">
Main Content
</div>
<div class="sidebar">
Sidebar
</div>
<div class="footer">
Footer
</div>
</div>
The CSS ->
#content{
position:relative; /* required */
height:2000px;
}
.main{
margin-left:100px;
border:1px solid rgb(120,120,120);
height:1500px;
}
.sidebar{
position:absolute; /* required */
top:25px; /* required -- does NOT need to be this value, however. */
left:5px; /* required -- does NOT need to be this value, however.*/
border:1px solid rgb(8,8,8);
background:rgba(70,70,70,.9);
color:#ecebeb;
width:93px;
}
.footer{
border-top:1px solid #ff0000;
height:498px;
}
The jQuery ->
$(window).scroll(function(){
var dist = $(window).scrollTop();
var sTop = $('.sidebar').position().top;
var mHeight = $('.main').height();
var userDist = 100;
if((sTop > (mHeight - userDist)) && (dist > (mHeight - userDist))){
//the sidebar is pinned now. it won't scroll further.
}else if(dist < (mHeight - userDist)){
$('.sidebar').animate({
top: dist + $('.sidebar').height()
}, 0);
}
});

jQuery : Make Automatically Scrolling Div

Can anyone tell me how to implement the scroll 'sidebar' follows the users scrolling the page, but stops when it reached the 'footer'
<div id="section">
<div id="sidebar"> </div>
<div id="hello"> </div>
</div>
<div id="footer"> </div>
Div 'section' doesn't have a set height meaning it grows whenever the div with an id of hello grows. This means that neither the 'hello' nor 'section' has a set height
Div 'section' has a width of 728 and 'hello' has a width of 400. 'sidebar' has a width of 200.
What I want to happen is (using jquery) when the person scrolls just a little past the sidebar then the sidebar should scroll with the page. Hoever the sidebar should not overlap with the footer.
Therefore sidebar should only scroll along with the page till the end of the div section.
The red block (on my website) is the sidebar that want to scroll.

Something like the following should get you started (Tested CHROME only): http://jsfiddle.net/MyFB9/3/
JS
var $sb = $('#sidebar');
var $foot = $('#footer');
var footerTop = $foot.offset().top;
$foot.html(footerTop);
$(document).scroll(function(){
//+ 100 since the height of the sidebar is 100px
if($(this).scrollTop() + 100 > footerTop){
//when we get close, line up perfectly with the footer
$sb.css({top:footerTop - 100});
}else{
//otherwise scroll with the page
$sb.css({top:$(this).scrollTop()});
}
//Visualy display the position of the bottom edge of the sidebar
$sb.html($sb.offset().top + 100)
});
HTML
<div id="section">
<div id="sidebar"> </div>
<div id="hello"> </div>
</div>
<div id="footer"> </div>​
CSS
#section{
vertical-align:top;
}
#sidebar, #hello{
display:inline-block;
position:relative;
vertical-align:top;
top:0px;
left:0px;
}
#sidebar{
height:100px;
width:50px;
background-color:red;
}
#hello{
height:900px;
width:50px;
background-color:green;
}
#footer{
height:450px;
width:100px;
background-color:yellow;
}
​

duplicate div then do a horizontal scroll

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.