Develop Reference

Fix nav bar on top on scroll down

I tried to achieve something similar to here
but for me its not fixing at top on scrolling down.Someone please provide any example or resources to achieve this feature.
.features-switcher.fixed:after,
{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: fixed;
z-index: 101;
width: 100%;
height: 65px;
top: 0;
left: 0;
opacity: 1
}
For my nav-bar div class features-switcher:
$(window).scroll(function () {
console.log("scrolled down");
console.log($(window).scrollTop());
if ($(window).scrollTop() > 150) {
$('features-switcher').css('top', 0);
}
}
);

You are missing a .
$('features-switcher').css('top', 0);
Should be...
$('.features-switcher').css('top', 0);

Making a pop up modal using dynamically created buttons / divs

I'm currently building a sort of image selection and would like to make it so when clicking the magnifying glass icon on the images it pops up a modal showing the whole picture, title and description. I have one problem though, all of my info is being pulled in from Google Sheets using Sheetrock.js and has a template with Handlebars.js.
// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1it6QkBRPDsIqYOtr_UbFFmHBEADVkKaKjdghLSX5d3E/edit#gid=0';
// Compile Handlebars template for team RBI leaders.
var RBITemplate = Handlebars.compile($('#team-rbi-template').html());
// Load top five team RBI leaders.
$('#image-grid').sheetrock({
url: mySpreadsheet,
rowHandler: RBITemplate
});
I've had my concept sort of working, except when I call {{cells.ImageURL}} it likes to only show the first image(cell) in the pop up. Which doesn't make sense since it just shows all the queries on the load up of the page in the #image-grid container. I want the modal to have an x button in the top right, as well as, clicking on the fullscreen modal will close it.
Here is what I have built to make the modal:
HTML
<div class="modal">
<div class="overlay"></div>
<div class="modal__contents modal--transition">
<a class="modal__close" href="#">X</a>
<img src="{{cells.ImageURL}}">
</div>
</div>
Javascript (jQuery)
$(document).on('click', "a.btn", function() {
$('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function() {
$('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function() {
$('.modal').toggleClass('modal--show');
});
CSS
.overlay {
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
visibility: hidden;
}
.modal__contents {
background: white;
width: 32rem;
position: absolute;
left: 50%;
margin-left: -16rem;
top: 6rem;
min-height: 32rem;
}
.modal__contents h1 {
margin: 0;
padding: 0;
line-height: 32rem;
text-align: center;
display: block;
}
.modal__close {
position: absolute;
right: 2rem;
top: 2rem;
text-decoration: none;
display: none;
}
.modal--show {
visibility: visible;
width: 100%;
position: absolute !important;
z-index: 50;
opacity: 1;
height: 100%;
}
.modal--transition {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal--show .modal--transition {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
I think what is throwing this off is since the button to activate this is generated by the handlebar.js template, it is copied and made dynamically and can't seem to single out the one that is being clicked?
Is there a way I can get this to work so it pulls the {{cells.ImageURL}} of the same cell where it was clicked on?
Here is a JSFiddle to show you what I mean.

$(document).on('click', "a.btn", function() {
$('.modal img').prop('src', $(this).data('img'));
$('.modal').toggleClass('modal--show');
});
although that means that every button would need a data-img="" attribute with the corresponding image or if the image is within the a element you could use
$(document).on('click', "a.btn", function() {
$('.modal img').prop('src', $(this).find('img').prop('src'));
$('.modal').toggleClass('modal--show');
});

Triggering an animation on a div by clicking a button using addClass/removeClass with Javascript

So I'm trying to trigger an animation by clicking on a button using addClass and removeClass with Javascript.
I'm not bad at HTML/CSS but I only strating to learn Javascript by editing snipets.
So here's mine can you tell me why my div won't rotate when I click the black button ?
Thanks in advance !
<button class="menu-circle"></button>
<img class='imgblock' src="http://lorempixel.com/400/200/" alt="" />
.menu-circle {
height: 100px;
width: 100px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: .1s;
z-index: 100;
border: none;
}
.menu-circle:hover {
height: 115px;
width: 115px;
}
.menu-circle:active {
height: 100px;
width: 100px;
}
.imgblock {
display: block;
margin: 20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
$('.menu-circle').on('click', function(){
$('img .imgblock').addClass('rotate');
$('img .imgblock .rotate').removeClass('rotate');
});
WORKING FIDDLE :
http://jsfiddle.net/leokaj/rv5PR/366/

You have several problems with your fiddle:
Wrong class names: in js $('.menucircle') and in html - class="menu-circle"
You don't need space between img and class in jquery selector $('img .imgblock') - space means you're looking for .imgblock class inside the img tag (which is impossible).
.current class is not defined nor in html, nor in css, but appear in js
Here's fiddle where I fixed the problems and which works: DEMO
JS:
$('.menu-circle').on('click', function(){
var $img = $('.crossRotate');
if (!$img.hasClass('rotate')) {
$img.addClass('rotate');
} else {
$img.removeClass('rotate');
}
});

You ve to manage this with 2 different events to animate the image
$('.menu-circle').on('mousedown', function(){
$('.imgblock').addClass('rotate');
});
$('.menu-circle').on('mouseup', function(){
$('.imgblock').removeClass('rotate');
});
fiddle http://jsfiddle.net/3ehcuky5/
if you want to keep the image rotated or not the #alynioke solution is good

As you seem to be trying to make it jiggle a bit in animation and you're using jQuery already then I would say you need to look at the .animate() method of teh jQuery library
https://api.jquery.com/animate/

Javascript / jQuery "Dangle" animation

I would like to create an animation in jQuery or preferable pure javascript that makes a div "dangle". I have attached an animated gif that shows the animation. I don't know how recreate this, if it is something I can use an existing jquery easing / animation for or javascript + css animation or how. I also thought about canvas, but that would limit my ability to manipulate content etc.
RESULT:
Thanks to #peirix for helping me out with the CSS animation. Here is the result I was hoping to achieve. http://jsfiddle.net/zeg61pb7/7/
CSS
#box {
width:30px;
height:30px;
position:absolute;
top:100px;
left:100px;
text-indent: 90px;
background-color:#aaaaaa;
transform-origin: top center;
-webkit-transform-origin: top center;
-webkit-animation: dangle 2s infinite;
-webkit-border-top-left-radius: 50%;
-webkit-border-top-right-radius: 50%;
-moz-border-radius-topleft: 50%;
-moz-border-radius-topright: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
#box:after {
position: absolute;
height: 5px;
width: 5px;
background: #aaaaaa;
top: -4px;
left: 12px;
content: '';
border-radius: 50%;
}
.dims {
position: absolute;
height: 10px;
width: 10px;
background: #aaaaaa;
top: 125px;
left: 110px;
border-radius: 50%;
-webkit-animation: movee 2s infinite;
}
#-webkit-keyframes dangle {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(30deg); }
10% { -webkit-transform: rotate(-28deg); }
15% { -webkit-transform: rotate(26deg); }
20% { -webkit-transform: rotate(-24deg); }
25% { -webkit-transform: rotate(22deg); }
30% { -webkit-transform: rotate(-20deg); }
35% { -webkit-transform: rotate(18deg); }
40% { -webkit-transform: rotate(-16deg); }
45% { -webkit-transform: rotate(12deg); }
50% { -webkit-transform: rotate(-10deg); }
55% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-6deg); }
65% { -webkit-transform: rotate(0deg); }
}
#-webkit-keyframes movee {
9% { left: 110px; }
10% { left: 120px; }
15% { left: 100px; }
20% { left: 114px; }
25% { left: 106px; }
30% { left: 113px; }
35% { left: 107px; }
40% { left: 111px; }
45% { left: 109px; }
50% { left: 110px; }
}

Well. You don't really need javascript for that. All you need is some CSS love. I made a quick fiddle to show the basics. Just play around with the numbers a bit to get what you want.
http://jsfiddle.net/zeg61pb7/3/
One note, though. Keyframes is still in need of -prefix for webkit browsers (chrome, safari, safari on ios, android etc), so you need to write it once with, and once without the prefix to hit all browsers. (Even IE10 and IE11 supports this)

You can have a try with css3.
Here is an interesting demo in Github.
Hope it helps you.

Indeed CSS3 can work some magic here, but you would still need Javascript to start and stop the animations, on hover or click events, for example.
I've made a small JSFiddle. Try and hover the red box. I've used webkit-prefixes, but you should be able to switch that easily with moz or ms.
The key differences to other suggestions here are
use animation-iteration-count: 1 to make it dangle once and then stop.
use $.on('<prefix>animationStop') to remove the animation class. this hack is needed to restart the animation later on.

I created a Fiddle with an example of how it can be done.
It depends on the transit-Plugin for jQuery.
var count = 0;
var deg = 45;
var minus = 5;
var interval = setInterval(function(){
$ $('#box').transition({
rotate: deg + 'deg',
transformOrigin: 'center top'
}).transition({
rotate: '-'+deg+'deg',
transformOrigin: 'center top'
});
if(count === 5){
clearInterval(interval);
$('#box').transition({ rotate: '0deg' })
}
if(deg > 10){
deg = deg-(minus+5);
}
count++;
}, 300);
A big plus is, that you can chain different transitions and transforms to your element.
But it`s an additional Plugin which must be loaded.

How to delay basic HTML tooltip?

I was wondering if there was any way to delay just the classic HTML tooltip (no jQuery plugins like qTip, please). It's just a button as:
<input type="button" title="Click" value="My Button">
I want to know if there is any way to delay the title using pure JavaScript or client-side scripting. From what I have researched, it doesn't seem possible as it is part of the actual OS' GUI programming, which is impossible to access via browser scripting, but if there is any way that I just haven't come across yet, I would love to know! Thanks!

The browser controls the tool tip. If you want to make any changes you will have to create your own. Maybe by using the plug ins your refered to.

I'm 7+ years late, but just stumbled across the same desire and wrote a simple solution to delay tooltips using CSS.
Simply use transition-delay or animation keyframes for opacity. While the transition-delay is easiest, it has the trouble of delaying both reactions in and out of hover, afaik. Animation bypasses that and will only delay the start, for example:
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #444;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 0;
left: 105%;
opacity: 1;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #545 transparent transparent;
}
/*this is the IMPORTANT bit: hover with animation*/
.tooltip:hover .tooltiptext {
visibility: visible;
animation: tooltipkeys 1s 1; //here just change the 1s to you desired delay time!
opacity: 1;
}
#-webkit-keyframes tooltipkeys {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes tooltipkeys {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes tooltipkeys {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes tooltipkeys {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="tooltip"><span class="tooltiptext">delayed tip</span>Example</div>
For more tips on tooltips you should check w3 schools for plenty of good advice.

This is a feature of the system which you cannot manipulate with HTML, CSS or JavaScript.
Keep in mind that different Operating Systems have different set of delays and styling to these tooltips, the best option to consider for better control (delay,styling,animation,etc) would be to implement your own tooltip.