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

Make footer, with variable height, at the bottom

Well, I'm using Materializecss framework and I have a issue with the footer. Materialize's footer have a variable height. In small devices, it gets bigger. So I can't use the classics method that use a padding-bottom equal to footer height.
My CSS:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height: 100%;
position: relative
}
#conteudo {
padding-bottom:425px; /* Fail height equal to footer height */
}
#rodape {
width:100%;
position:absolute;
bottom:0;
left:0;
}
My HTML:
<html>
<body>
<div id="wrapper">
<div id="conteudo">
<div class="container">
</div>
</div>
<div id="rodape">
</div>
</div>
</body>
</html>
I tried to add this script, but doesn't work:
JS:
$(document).ready(function fix_layout(){
if($(#rodape).height()<350){
$("#conteudo").css("padding-bottom", "276px");
}
if($(#rodape).height()>350 && $(#rodape).height()<500){
$("#conteudo").css("padding-bottom", "354px");
}
if($(#rodape).height()>500){
$("#conteudo").css("padding-bottom", "506px");
}
$(window).trigger('fix_layout');
});
Help!

If a jQuery solution is fine for you, then you can count the footer height and add it as padding-bottom to #conteudo, either once on DOM ready or on resize:
$(document).ready(function(){
var $conteudo = $('#conteudo'),
$rodape = $('#rodape'),
addPaddingBottom;
addPaddingBottom = function addPaddingBottom(){
var extraPadding = 6,
rodapeHeight = $rodape.height();
$conteudo.css({
'padding-bottom' : (rodapeHeight + extraPadding) + 'px'
});
}
//make it once on DOM ready
addPaddingBottom();
//and recalculate padding when window is resized
$(window).resize(addPaddingBottom);
});

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.

JQuery Stack of Cards

I have a stack of cards. They are stacked so each one has about a centimetre at the bottom visible. What I want, is when a card is clicked it moves to the right, then gets sorted to the top and moves to the left back onto the pile. I then wish to trigger a page change (to the page that's represented by the card).
How would I do this through JQuery? I'm still at a basic level with this language.
<style>
#cardStack{
height: 700px;
width: 400px;
overflow:visible;
}
#cardStack ul{
display:inline;
}
#cardStack li{
z-index:auto;
}
.top{
margin-top:-670px;
z-index:1;
}
.middle{
margin-top:-670px;
z-index:2;
}
.bottom{
margin-top:100px;
z-index:3;
}
</style>
</head>
<body><br /><br />
<div id="cardStack">
<ul>
<li class="bottom"><img src="images/cardA.png" /></li>
<li class="middle"><img src="images/card6.png" /></li>
<li class="top"><img src="images/card8.png" /></li>
</ul>
</div>
I know there's an animate function, but how would I initiate this on a click?
EDIT: Added more code above

for the hash change use ben alman's BBQ plugin
tried your code at jsbin
but because the link to the cards is missing the HTML doesn't render right
if you put here a working jsbin sample - helping you will be mush easier
concerning the animations: if you layout the Li's to have an absolute position, you can move them around freely,
so you can animate them to the left and then animate back and then change the z-index to put it on the top
[edit]
So.. here is a link to a quick solution:
you had some problems with the animations code, + better to change the position and not the marign
for ref the code:
$('#cardStack img').click(function ()
{
var img = $(this);
img.animate({left: '+=50px'},200,function()
{
img.animate({left: '-=50px'},200,function()
{
img.parent().prependTo($("ul"));
arrengeClasses();
});
});
});
function arrengeClasses()
{
var allListItems = $("#cardStack ul li");
for(var i=0;i<allListItems.length;++i)
{
allListItems.eq(i).removeClass().addClass("pos" + i);
}
}
and changed the css a bit:
#cardStack li img{
position:absolute;
top:0px;
left:0px;
}
.pos2{
z-index:1;
margin-top:100px;
}
.pos1{
z-index:2;
margin-top:50px;
}
.pos0{
z-index:3;
}

You can set an event to occur on any of the images being clicked like:
$('ul li img').click(function () {
$(this).animate( ... );
.
.
.
}
I can't give any more specific help without knowing the CSS you are using to "stack" the cards.

As for the part where you want to trigger a page change, you can use window.location to append a hash to the end. So your URL might end up being example.com/cards#joker