We Keep Coding

Jquery sliding drawer with overhang

I'm creating a toggling menu using JQuery slide effect. I am trying to make the collapse menu show a bit of over hang for the user to still see a bit of the drawer background when it's closed.
EDIT TO ADD: What do I mean by "overhang"?
In the Google example below, the white app drawer is present at the bottom, it never fully disappears. A piece of it hangs over the content so users can see a few things on it plus a small prompt to slide it up fully. I’d like my own slider to not fully disappear but leave some pixels of overhang.
Here is the code I am successfully using for the drawer:
$(function () {
$("a.toggle").click(function () {
$(".menu-container").toggle("slide", {direction:'right'}, 500);
$(this).toggleClass("open");
});
$(".main-navigation ul li a").click(function () {
$(".menu-container").toggle("slide", {direction:'left'}, 350);
$("a.toggle").toggleClass("open");
});
});
.menu-container {
position:fixed;
top: 0;
left: 0;
right: 0;
height: 999em;
background: rgba(144, 144, 144, 0.85);
display:none;
}
.menu-container ul{padding:2em;}
.toggle{
background:red;
color:#fff;
cursor:pointer;
padding:1em;
transform: rotate(-90deg);
position:absolute;
z-index:999;
top:50%;
right:0;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a class="toggle">Menu</a>
<div class="menu-container">
<ul>
<li>Menu Item 1</li>
</ul>
</div>
Here's how I actually want it to function (I am showing Google Maps mobile drawer as an example):
The white drawer at the bottom has a few settings links
The little grey tictac on the white drawer lets you swipe the container up to take up the whole screen
Is it possible for the jQuery container I'm toggle sliding in and out to have a bit of overhang like this, for users to see even when closed?

You could do this in 10 different ways - but it all depends on your situation. It's always a little bit of a juggling act. - but check out translate. That's what I'd use.
var thing = document.querySelector('[rel="clicky-thing"]');
thing.addEventListener('click', function(event) {
event.target.classList.toggle('open');
});
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.menu {
border-radius: 10px;
border: 1px solid blue;
padding: 1rem;
min-height: 400px; /* arbitrary */
/* */
width: calc(100% - 20px);
position: absolute;
top: 100%;
left: 10px;
cursor: pointer;
/* */
transition: .2s;
transform: translateY(-200px);
}
.menu:not(.open) {
transform: translateY(-50px);
}
<nav class='menu' rel='clicky-thing'>
this is a menu... and it would have stuff in it
</nav>
example with button: https://jsfiddle.net/sheriffderek/zwq2okev/

How can I use css or jquery to change a button image and animate it on click?

On this site: https://usyouthbilliards.com/home/ there is a "Contact Us" button that, when clicked, causes a contact form to slide in. I have been trying to get the actual "Contact Us" button to change to an "X" that rotates as the panel comes out, exactly like it does on this example site: https://www.future500idcamp.com/ but I can't seem to get that to work. Can someone please help me figure this out? Thank you
I tried to just use simple css, and jquery to target the button, but I obviously am doing it incorrectly.
<script type="text/javascript">
jQuery(document).ready(function() {
$('.ncf-tab-icon').rotate({maxAngle:25,minAngle:-55,
bind: [
{"mouseover":function(){$(this).rotateAnimation(85); } },
{"mouseout":function(){$(this).rotateAnimation(-35); } }]});
});
</script>
This code did nothing. Not sure if I am targeting the element incorrectly, or if the script is not correct or if I am completely off the mark.

I made a pen with almost exactly what you need. Just tweak it a bit to your liking.
CodePen
$('a').click(function (){
$(this).toggleClass('active');
});
a {
right: 0px;
top: 50%;
line-height: 1em;
padding: 8px;
position: absolute;
display: inline-block;
background: #CD1349;
font-size: 22px;
color: #fff;
text-transform: uppercase;
text-decoration: none;
transform: rotate(-90deg);
transition: transform .3s;
transform-origin: center center;
}
a span:nth-child(2) {
display: none;
}
a.active {
transform: rotate(90deg);
}
a.active span:nth-child(1) {
display: none;
}
a.active span:nth-child(2) {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
<span>Contact Us</span>
<span>
x
</span>
</a>

Stack customized windows(divs) using CSS

I'm doing a single page application where you're suppose to be able to open multiple customized windows on the page(not browser tabs/windows, but windows created with DOM). I want the windows to stack on top of each-other with a certain XY-offset. I've tried added a transform: translate(5%, 5%)to the divs after the first div, but it simply isn't working.
I want them to stack like this:
But right now, they´re just stacking on top of each other.
HTML:
<main>
<div class=window><div class=app></div></div>
<div class=window><div class=app></div></div>
<div class=window><div class=app></div></div>
</main>
CSS:
main {
transition: margin-left .5s;
padding: 20px;
position: fixed;
margin-left: 100px;
width: 100%;
height: 100%;
top: 0;
}
.window {
z-index: 1;
left: 0;
top: 0;
width: 250px;
height: 400px;
}
Any ideas?

Try adding position: absolute to all the divs and use left: <num>px and top: <num>px to position them. Make sure the containing element is position: relative, otherwise the divs will be absolutely positioned relative to the "viewport".
See this article for more on absolute positioning.

Ok, this works with some caveats: http://codepen.io/anon/pen/dNbqgE
html:
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
css:
.card {
width: 100px;
height: 200px;
outline: 1px solid #cc0000;
position: absolute;
background: #ddd;
}
.card:nth-of-type(n + 1) {
transform: translate(5%, 5%);
}
.card:nth-of-type(n + 2) {
transform: translate(10%, 10%);
}
.card:nth-of-type(n + 3) {
transform: translate(15%, 15%);
}
.card:nth-of-type(n + 4) {
transform: translate(20%, 20%);
}
.card:nth-of-type(n + 5) {
transform: translate(25%, 25%);
}
The caveat is that you have to define a new nth-of-type rule for each level of card you need. If you're using less, sass, or other css build tool you can pretty easily setup a macro to generate any number of these.

transform: translate(...) applies to the element itself, not to the parent, so maybe that's the case it doesn't work for you. I would use a similar approach like the one mentioned by Jason Cemra. Check out this another answer, maybe it helps you: How to use transform:translateX to move a child element horizontally 100% across the parent

to position of window div's, we have to set x-y position relative to a known reference. if all win div's are in a same parent, we have use different offset for them: eg: transform: translate(5%, 5%); for first div, transform: translate(10%, 10%); for second div, and so on.
another way is to nest them in each other such that the same value of offset can be used for all divs, but as their parent have different position, they get desired position:
<html>
<head>
<style type="text/css">
#main {
transition: margin-left .5s;
padding: 20px;
position: fixed;
margin-left: 100px;
width: 800px;
height: 500px;
top: 0;
}
.window {
position:absolute;
z-index: 1;
left: 0;
top: 0;
width: 250px;
height: 400px;
border:1px solid navy;
transform: translate(5%, 5%); /* this is relative to current position */
}
</style>
</head>
<body>
<div id=main>
<div class=window><div class=app>w1</div>
<div class=window><div class=app>w2</div>
<div class=window><div class=app>w3</div>
</div>
</div>
</div>
</div>
</body>
</html>

Zooming on hover

I have an image with a color overlay and i want to add a zooming on the image when user hover over the image.
I'm trying to achieve this without JQuery but to get the result I don't mind using JQuery.
Thanks in advance
Jsfiddle
HTML:
<div class="rss-output">
<div class="body"> <a target="_blank" href="#">
<div class="overlay-feed"></div>
<div class="imagefix zooming" style="float:none;">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>
</div>
CSS:
div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}
.rss-output .body {
width: 100%;
position: relative;
}
.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 2;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}
div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}
div.imagefix img {
margin: -50%;
}

Use following css will do zoom effect:
.overlay-feed:hover + div.imagefix img{
transform: scale(2);
-webkit-transform: -webkit-scale(2);
}
Check your updated Fiddle

The solution proposed by Ketan is good, but I would add an animation, to make the zoom smoother:
For example:
transition: all 1s cubic-bezier(0.23,1,0.32,1);
See updated fiddle (forked from ketan's one): http://jsfiddle.net/alessiozuccotti/84n3hu6v/2/
Or you could change the timing function you prefer. This link may help you:
http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

You can use css, for example:
.zoom_img img:hover{
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
}

Adding a card flip animation to this JS card game?

I am playing around with this card game and I want to add a card flip animation.
I have googled for an answer, but most solutions refer to jquery (which I don't want to implement just for 1 animation) or CSS3 (I liked this example). Not much luck there.
The js game uses the following (from cardgamecore.js):
playingCard.redrawCardImage() Forces a card to redraw
playingCard.showFace(bool: face) Sets the card to be either face up or face down, and redraws if needed. true = face up, false = face down.
playingCard.prototype.redrawCardImage = function () {
// Set or change the image showing on the card face
if( !this.faceImage || !this.cardSet.backImage ) { return; }
// Bug in Firefox - alt attributes do not change unless they are made _before_ an SRC change
this.cardImage.setAttribute('alt',this.wayup?(this.cardSet.cardNames[this.number-1]+' '+this.suit):this.cardSet.cardWord);
this.cardImage.src = this.wayup ? this.faceImage : this.cardSet.backImage;
};
playingCard.prototype.showFace = function (oWhich) {
// Used to flip a card over
if( this.redrawNewImage != oWhich ) {
this.wayup = oWhich;
this.redrawCardImage();
}
};
So when a card shows its back then playingCard.showFace = false. When you click on it, playingCard.showFace = trueand the image is redrawn. At this point the card should have a nice flip animation.
But how to do this?

What you want to google search is "css 3 flip animation"
http://davidwalsh.name/demo/css-flip.php

I was doing a card game as well...
First you could write you card like this:
<div class='card' >
<div class='faces'>
<div class='face front'> Hello</div>
<div class='face back'>Goodbye</div>
</div>
</div>
Both faces are accounted for in your html the css will only display one though:
.card {
-webkit-perspective: 800;
width: 50%;
height: 300px;
position: relative;
margin: 3px;
float:left; /*if you want more than one card in a line*/
}
.card .faces.flipped {
-webkit-transform: rotatey(-180deg); /* this style will help the card to rotate */
}
.card .faces {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d; /* This is a 3d transformation */
-webkit-transition: 0.5s;/*the animation last 0.5secs*/
}
.card .faces .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ; /*hides the back of the card until transform*/
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.card .faces .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.card .faces .back {
-webkit-transform: rotatey(-180deg); /*allows the flip to the back of the card*/
background-image: url("image.jpg"); /*background image for the back if you want*/
background-size:100%;
color:white;
border:1px solid black;
}
The only thing left to do is add the 'flipped' class. So maybe instead of redrawing.
$(".card").on('click',function(){
$(this).children('.faces').toggleClass('flipped');
});
Here's a FIDDLE

Contacted the author of the script and he told me it is not possible in the current script without re-writing most of the code. So this question can be closed. All thanks for trying to help me.