We Keep Coding

Creating multiple instances of the same id

I have a question I can't seem to figure out myself.
Say I have created a paragraph that says "+1". When I click a button that already exists in my code, I can make this paragraph appear above the button and I can transform it so that it's 'y' increases and it moves up while fading slowly.
So, you click the button, a +1 appears above and moves up while fading.
How do I make it so I can create a new instance of this +1 without removing the first one if I click the button before the first one has a chance to disappear?
So, if I clicked the button really fast, a stream of +1's would appear above the button and slowly fade out, one by one. Any idea of how I would go about doing this?
Thank you!!

Here's a solution using jQuery:
$('button').on('click', function() {
var $newPlus = $('<div class="plus">+1</div>');
$('#area').append($newPlus);
setTimeout(function(){ $newPlus.addClass('fade'); }, 50);
setTimeout(function(){ $newPlus.remove(); }, 650);
});
#area {
position: relative;
padding: 70px;
}
#area .plus {
position: absolute;
left: 100px;
top: 50px;
opacity: 1;
transition: top 300ms ease-out, opacity 600ms ease-in-out;
}
#area .plus.fade {
top: 0px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
<button>Plus One</button>
</div>

Javascript - Reversing a Modal Animation

I have a few items on a site I'm building that onclick activate a modal like this.
Right now the animation is a one-way in that, when you close it or click off from the modal's focus, it just disappears. From what I've been reading, people seems to use the fadeIn/slideIn animation for one time effects, but is it possible, to reverse the animation so instead of just changing display to none, it slides back out?

#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; }
#modal.hidden{bottom: -300px; opacity: 0}
Then in button click event:
$("#modal").addClass("hidden")
On close event:
$("#modal").removeClass("hidden")
If you need pure javascript, it would be a bit more code but essentially that's it

Depending on how you've structured your code, you can approach this in a few ways:
Make use of the animation-direction: reverse; CSS property
Use a Javascript framework (like jQuery) that enables manipulation of DOM elements (with jQuery you could do something like: $('element').slideIn(); to show the modal and $('element').slideOut(); to hide the modal).
Use CSS classes and apply / unapply them with Javascript (the option I'd recommend, and have given an example below):
$(document).ready(function() {
$('.open').on('click', function(e) {
e.preventDefault();
if ($('.modal').hasClass('hide')) {
$('.modal').removeClass('hide');
}
$('.modal').addClass('show');
});
$('.close').on('click', function(e) {
e.preventDefault();
$('.modal').addClass('hide');
if ($('.modal').hasClass('show')) {
$('.modal').removeClass('show');
}
});
});
.modal {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 300px;
left: -305px;
z-index: 999;
transition: all 0.3s ease;
background: #ffffff;
border: 1px solid blue;
}
.modal.show {
left: 150px;
}
.modal.hide {
left: -305px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click here to open modal</p>
<div class="modal">
<p>This is a modal window.</p>
<p>Click here to close</p>
</div>
Please note that this example is only there to illustrate a proof of concept - you'll need to tidy it yourself :)

How can I make this Jquery animate() with css3 animations?

This is my jfiddle
And this is my actual code
$card.animate({
left: "1000px"
}, 500, function(){
$card.hide(500);
});
(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated

First of all, create a class that you can trigger via jQuery that will have the animation.
Then, using you have two options: transition or animation. Transitions are simpler and more direct, but you can do more with animations.
Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function.
#keyframes hide {
99% { display: auto; }
100%{ display: none; opacity: 0; }
}
.myelement {
transition: all .5s;
position: absolute;
left: 0;
}
.myelement.toLeft {
left: 2000px;
animation: hide .5s 1 forwards;
}
To trigger it, simply do this:
$(".myelement").addClass("toLeft");
Here is a working JSFiddle.
And like #MohitBhardwaj said, it is necessary for you to set position to absolute, relative, or static in order for positioning (i.e., the left property) to work.
It's also important to note that a transition needs an initial value. I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.
Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden, so that the extraneous scroll bar doesn't appear.

Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.
var my_div = $('.myelement');
my_div.on('click', function() {
var $this = $(this);
$this.addClass("gone");
setTimeout(function(){
$this.hide();
}, 600 );
})
#mywrapper
{
overflow: hidden;
}
.myelement {
height: 200px;
width: 200px;
background-color: red;
opacity: 1;
position: relative;
transition: all 0.5s ease;
opacity: 1;
left: 0px;
}
.myelement.gone
{
left: 500px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
Click me please
</div>
</div>

Rotate on Click to Show Info

This is my first question, so please go easy on me. I am trying to make a Tumblr theme in which the posts rotate on the y-axis to show the like and reblog info when you click on them. I have managed to make it so that this happens on hover using the code from here, but as I mentioned, I want to make it so that it happens on click. I've seen a couple of tutorials on how to do this with Javascript or jQuery, but I can't get them to work. So can someone please explain how to do this, in the simplest way possible/in layman's terms, because I am very new to Javascript and jQuery?
Thanks so much!
Here is my CSS:
#f1_container {
position: relative;
margin: 10px auto;
width: 250px;
z-index: 1;
perspective: 1000;
}
#f1_card {
width: 250px;
transform-style: preserve-3d;
transition: all 1.3s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
.face {
position: absolute;
backface-visibility: hidden;
}
.face.back {
position:absolute; transform: rotateY(180deg);
background-color:{color:Text};
width:250px;
top:0;
height:100%;
box-sizing: border-box;
text-align: center;
}
...and here is some HTML:
{block:Photo}
{block:IndexPage}
<div id="f1_container">
<div id="f1_card">
<div class="photo"><div class="front-face"><img src="{PhotoURL-250}" alt="{PhotoAlt}"> </div></div> <div class="back face center">
<div class="perm"><span class="like"style="padding-right:7px">{LikeButton color="grey" size="13"}</span> <span class="rb" style="padding-left:5px;">{ReblogButton color="grey" size="13"}</span> <span class="noteslabel" style="padding-right:5px;">{NoteCount}</li></ol></div>
</div>
</div>
</div>
{/block:IndexPage}
{block:PermalinkPage} <img src="{PhotoURL-500}" alt="{PhotoAlt}"> {/block:PermalinkPage} {/block:Photo}
Edit: Here is the link to the page: http://shimmeringdaydreams.tumblr.com. (Sorry it's kind of a mess right now; this is just where I test out my themes that I'm making, and I'm in the middle of making this one.)

If I'm not mistaken, I'm pretty sure Tumblr allows jQuery and Javascript integration.
At the head of your file, put this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
This will allow you to use jQuery. Now, all you have to do is write the click function:
var r=0;
$(document).ready(function() {
$('#Image-ID-or-DIV').click(function(){
$("#Image-ID-or-DIV").css("transition", "500ms linear all");
$("#imgs").css({transform: 'rotateY(' + (r += 180) + 'deg)'});
});
});
0) The r=0 will play a big factor in resetting the animation once it is done.
1) Document.ready is a basic jQuery function, nothing special
2) This states that when the Image (must have an ID) is clicked, a function will be executed.
3) This states that when the image is clicked, the transitions it will have will be 500 milliseconds long (subject to change to your liking) and will go smoothly.
4) The actual rotating of the image happens here. Read some documentation about this. Basically, This states that upon click, the images css will change so that it will rotate r + 180 degrees (r is 0, but it resets the animation, so this is crucial).
If you need to add more css to when the image is clicked, just add:
$("#Image-ID-or-DIV").css('[css goes here]')
But you might want to look at some documentation, as different rules apply to jQuery .css().
I hope this was of some help to you!

I think Ramsay was on the right track with :focus. Try wrapping f1_container in an anchor like this:
<a href="#" class="focus-wrapper"> <!--also stop re-using IDs - they're supposed to be unique-->
<div class="f1_container">
<!-- just pretend I copy+pasted stuff in here -->
</div>
</a>
And then remove the special anchor styles as in HTML Anchor, Disable Style:
.focus-wrapper:hover, .focus-wrapper:visited {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
Then make a rule to make the change on focus:
.focus-wrapper:focus .f1_container .f1_card {
transform: rotateY(180deg);
}
And remove the browser's focus outline:
.focus-wrapper:focus {
outline:none;
}
Also, in case it's not clear, you'd take out the rule that looks like:
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
Ugly example: http://jsfiddle.net/yb9exv9b/

Change how fast "title" attribute's tooltip appears

Is there a way to change how fast the tooltip from an element's "title" attribute? I'd like it if the tooltip appeared immediately, but it seems to take a few seconds to appear.

No, there's no way. The title attribute is implemented in a browser dependent fashion. For example I remember differences between IE and FF when using \r\n inside it.
Mozilla's docs explain the limits and functionality well.
If you want customization you may take a look at third party plugins such as qTip2 which mimic it using divs and stuff and provide you full control.

You could use jqueryUI as suggested. An example of controlling the duration on the show property:
$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });

Jquery UI tooltip is extremely simple and customizable: Just download or include jquery UI in your page.
If you want all the tooltips of your page to show immediately at hover, just use this:
$(document).tooltip({show: null});
Note that this applies to all elements that have a 'title' attribute.
You can modify the selector to affect only a class, and set custom speed or effect:
$('.yourClass').tooltip({show: {effect:"none", delay:0}});

Unfortunately, there is no way to do this yet,
so I am using the following methods to help. (No dependencies required)
<style>
[title] {
position: relative;
}
[title]:after {
content: attr(title);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
}
[title]:hover:after {
opacity: 1;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>
If you don't want the title to conflict with it, you can use data-* w3school.data-* help you, for example.
<style>
[data-tooltip] {
position: relative;
}
[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out;
}
[data-tooltip]:hover:after {
opacity: 1;
}
div[data-tooltip]:after {
left: 5px!important;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>
below link may help you too.
fade in and out on simple css tooltip

It isn't possible to change how fast default browser's tooltip appear, but you can use one of the tooltip plugins (here is few: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ ) where you can customise lot's of things, including delay.

TippyJS has a billion customization options.
https://atomiks.github.io/tippyjs
https://github.com/atomiks/tippyjs