We Keep Coding

Bootstrap on hover button dropdown menu

I want dropdown-menu to appear on mouse hover. Here is jsbin of my code: link
Tried jquery:
$('.dropdown-toggle').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
But it is not working...

In Bootstrap Dropdown with Hover this is fixed using CSS instead of JavaScript. If you change the solution of the accepted answer into
.navbar .btn-group:hover > .dropdown-menu {
display: block;
}
it should work with your example code.

You can use inner Bootstrap API:
$(document)
.on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)

Try this
jQuery(function ($) {
$('.navbar .dropdown').hover(function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function () {
location.href = this.href;
});
});

jQuery if hasclass addclass

this is what i have so far - i'm trying to get the text only to show when the 'timelineTile' is made bigger..
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
fiddle also

Add the following css as well to show text only when box is bigger
.timelineTile table{
display: none;
}
.timelineTile.clicked table{
display: block;
}

http://jsfiddle.net/devools/gjyksjuh/1/
try that fiddle?
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').removeClass('show');
$(this).children('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});

Navigation menu fade in on scroll

I'm designing a website and I'd like the navigation menu to fade in once I scroll down >50px. I'm using the following JavaScript with JQuery library:
(function ($) {
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(500);
} else {
$('.menu').fadeOut(500);
}
});
});
})(jQuery);
The class .menu is set on {display: none;}.

This should work
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('nav').fadeIn(500);
}
else {
$('nav').fadeOut(500);
}
});
});
Codepen Demo

It's working for me.
Your .menu is probably at the top of a page and when you scroll you can't see it.
Add to test:
.menu {
position: fixed;
z-index: 10000; //just to check if it is behind the content
}
DEMO

Try this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(1000);
} else {
$('.menu').fadeOut(1000);
}
});
});
Just corrected your code! It works fine!

Transform (shear) a draggable div

I use the jquery draggable to make this div movable in the window.
When it is dragged (in this chase, to right) I want to be deformed like the image above.
Thank you so much in advance!
If you want more info, please tell me.

This may help you:
<script>
$(function() {
var prevX = -1;
$('.movable').draggable({
drag: function(e) {
//console.log(e.pageX);
// dragged left
if(prevX > e.pageX) {
$(this).addClass('cls');
}
else if(prevX < e.pageX) { // dragged right
$(this).removeClass('cls').addClass('cls2');
}
prevX = e.pageX;
},
stop: function () {
$(this).removeClass('cls').removeClass('cls2');
}
});
});
</script>
If is dragged to right it would be like your photo, and if is dragged to left it would be transformed to 175deg.
CSS:
.cls {
-webkit-transform:skewX(5deg);
-moz-transform:skewX(5deg);
-ms-transform:skewX(5deg);
-o-transform:skewX(5deg);
}
.cls2 {
-webkit-transform:skewX(175deg);
-moz-transform:skewX(175deg);
-ms-transform:skewX(175deg);
-o-transform:skewX(175deg);
}

fiddle Demo
js
$("#drag").draggable({
drag: function () {
$(this).addClass('cls');//add class on dragging
},
stop: function () {
$(this).removeClass('cls');//remove class on drag stop
}
});
CSS
.cls {
transform: rotate(20deg);
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
}

<div></div>
.
$("div").draggable({
drag: function () {
$(this).addClass('skew');
},
stop: function () {
$(this).removeClass('skew');
}
});
.
div {
height:300px;
width:150px;
background-color:cornflowerblue;
}
.skew {
transform: skew(-20deg,0);
-moz-transform:skew(-20deg,0);
-webkit-transform:skew(-20deg,0);
-o-transform:skew(-20deg,0);
}
DEMO

jQuery .mouseover() (.mouseout) div is flickering

i have a problem with this code (i made a jsfiddle http://jsfiddle.net/r2y8J/).
$(document).ready(function() {
/*$(".bulletProj").mouseenter(function () {
console.log("You're Over!");
$(".caption").animate(
{top: "0px"},
300, function() {
console.log("i slided");
});
});
$(".bulletProj").mouseleave(function() {
$(".caption").animate(
{top: "-200px"},
300, function() {
console.log("i left");
});
});*/
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").toggle();
});
});
Part of the code is commented since I tried more ways.
What I want to do is to have a div with some text and a bg image, and when the mouse is over it another div should slideDown with a button. The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering. I found that when i'm over the text it stops but if I am in a blank space of the div it continues flickering.
Anyone has an idea?
Thanks very much.

try this:
$(document).ready(function() {
$(".bulletProj,.caption").mouseenter(function() {
$(".caption").toggle();
}).mouseleave(function () {
$(".caption").hide();
});
});
working fiddle here: http://jsfiddle.net/r2y8J/4/
I hope it helps.

You can easily use
.caption{pointer-events:none}
http://jsfiddle.net/r2y8J/5/

Try this.
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
stopImmediatePropagation();
$(".caption").toggle();
});

I have faced a similar problem, in my case i have used css: opacity like below to stop flickering
css:
.caption {
width: 300px;
height: 200px;
background-color: #69adf1;
position: absolute;
opacity:0;
}
JQuery:
$(".caption").mouseenter(function(){
$(this).css('opacity','1');
})
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").css('opacity','1');
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").css('opacity','0');
});
Working Fiddle

var caption = $(".caption");
$(".bulletWrapper").hover(function(){
console.log("mous is over");
caption.toggle();
}, function(){
console.log("mous leaves");
caption.toggle();
});
or
$(".bulletWrapper").bind("mouseenter mouseleave", function(){
$(".caption").toggle();
});