Develop Reference

mouseenter mouseleave within contents of iframe

I'm trying to highlight elements within a iframe with no success. I've tried using mouseenter/mouseleave with no success. It does not fire.
$('#iframe').contents().mouseenter(function (e) {
//var element = $(e.target);
var element = $(this);
$(element).addClass("highlight");
}).mouseleave(function (e) {
$(element).removeClass("highlight");
});
I've had better success with mousemove however it highlights the parents as well which I don't want.
var prevElement;
$('#iframe').contents().find('html').on('mousedown', function (e) {
e.stoppropagation()
//e.preventDefault - did not work either
var element = $(e.target);
if (prevElement == null) {
prevElement = element;
element.addClass("edit-element-selector");
}
else {
if (prevElement != element) {
prevElement.removeClass("highlight");
//prevElement.parents().removeClass("highlight"); did not work
element.addClass("highlight");
}
}
});
HTML
<iframe id="iframe" srcdoc="#Html.Raw(ViewBag.html)"></iframe>

The css rule for .hover is not visible in the context of the iframe.
Either use .css() to set style directly, add the css links or clone all styles in the main document into the iframe with jQuery.
Here is a working jfiddle which you should easily be able to copy.
http://jsfiddle.net/danmana/pMBw2/

My problem had 2 issues.
My css was wrong.
Wrong
.highlight :hover {
outline:4px solid #f00;
}
Right
.highlight {
outline:4px solid #f00;
}
Hover was bubbling up to the parents. Mouseenter and mouseleave worked however.
var $iframe = $("#iframe").contents();
$iframe.find('*').mouseover(function (e) {
$(e.target).addClass('highlight');
}).mouseout(function (e) {
$(e.target).removeClass('highlight');
});

Try jQuery Hover
$(function () {
var iContent = $('#iframe').contents();
iContent.find('#id_username').val("New Value!");
iContent.find('#id_username').hover(function () {
$(this).css("border", "1px solid red");
}, function () {
$(this).css("border", "1px solid #c4c7cb");
});
console.log(iContent.find('#id_username'));
});
jsFiddle
Sorry I guess I misunderstood the question. Here is an updated fiddle changing the value of a text input and changing border color on hover.

Jquery, changing color on hover

This has been driving me crazy for a while, I cannot figure out what I am doing wrong. I am trying to make a 4x4 grid and change the color of each square when I hover my mouse over (the color stays after the mouse leaves) but the changing color part is not working.
Here is what I have so far:
Changing color on hover:
This is the part where I am stuck
$('.square').hover(function () {
$(this).addClass('hover');
});

You can remove your jquery code for adding class hover and just make this css change in the file
.square:hover {
background-color: red;
}
simply fixes your problem in pure Css.
Adding JsFiddle for this
http://jsfiddle.net/jjeswin/nb3dB/1/

You need to first call makeGrid(4); and then bind the event.
also to remove class you need to modify hover function to use mouseenter and mouseleave function:
makeGrid(4);
$('.square').hover(function() {
$(this).addClass('hover');
},function() {
$(this).removeClass('hover');
});
Working Demo
Update: for keeping the color even after mouseleave:
makeGrid(4);
makeGrid(4);
$('.square').hover(function() {
$(this).addClass('hover');
});
Demo with only mouseenter

I have updated the fiddle code http://jsfiddle.net/ZfKM8/5/
In your javascript, i've removed the hover function.
$(document).ready(function() {
function makeGrid(n) {
var grid = $('#container');
for (var i = 1;i<=n; i++) {
for (var j = 1; j <= n; j++){
grid.append("<div class='square'></div>");
}
grid.append("<div class='new_row'></div>");
}
};
makeGrid(4);
});
in your css, instead of .hover change it to .square:hover
.square:hover {
background-color: red;
}

$('#container').on("mouseenter", '.square', function() {
$(this).addClass('hover');
});
$('#container').on("mouseleave", '.square', function() {
$(this).removeClass('hover');
});
Use event delegation for dynamically created elements.
Demo:
http://jsfiddle.net/m6Bnz/1/

Use event delegation for added dom elements dynamically . it is the best way to do
$('#container').on('mouseenter' , ".square" , function() {
$(this).addClass('hover');
});
/* $('#container').on('mouseleave' , ".square" , function() {
$(this).removeClass('hover');
}); */
DEMO

here you go: http://jsfiddle.net/ZfKM8/3/
$(document).ready(function() {
function makeGrid(n) {
var grid = $('#container');
for (var i = 1;i<=n; i++) {
for (var j = 1; j <= n; j++){
grid.append("<div class='square'></div>");
}
grid.append("<div class='new_row'></div>");
}
};
makeGrid(4);
$(document).on('mouseenter','.square',function() {
$(this).addClass('hover');
});
$(document).on('mouseleave','.square',function() {
$(this).removeClass('hover');
});
});

Is there a specific reason why you're not using CSS for this?
.square:hover { color: #superAwesome }
If you want the color to animate (and delay when mousing out) you can use CSS3 transition:
.square { transition: color 1s; }

Try this
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
.hover
{
background:red;
}
</style>
</head>
<body>
<div class="square" style="width:100px;height:100px;border:1px solid"> </div>
<script type="text/javascript">
$('.square').hover(function()
{
$(this).addClass('hover');
});
$('.square').mouseout(function()
{
$(this).removeClass('hover');
});
</script>
</body>
</html>

Since your boxes created dynamically to the DOM, the hover event will not be available for these boxes. In this case, event delegation will help you to attach that event
Try this
OP said the color stays after the mouse leaves
$('#container').on('mouseenter','.square',function() {
$(this).addClass('hover');
});

Make use of .toggleClass():
makeGrid(4);
$('.square').hover(function() {
$(this).toggleClass('hover');
});

Animation only for hovered element

Trying to do some trick with my post information.
When I hover mouse on one element - all elements became active.
How can I made this animation only to hovered element?
Tried it:
$('.post-pic-holder').find('.post-info').hover(function(){
$(this).animate({bottom:'0'},200);
},function(){
$(this).animate({bottom:'-30px'},200);
});
http://jsfiddle.net/fresa150/8ftnF/

You need to target specific descendant, e.g:
$(document).ready(function(){
$('.post-pic-holder').hover(function(){
$(this).find('.post-info').animate({bottom:'0'},200);
},function(){
$(this).find('.post-info').animate({bottom:'-30px'},200);
});
});
--DEMO--
FYI, jQuery hover method accepts in/out handler:
$('.post-pic-holder').hover(function (e) {
$(this).find('.post-info').animate({
bottom: e.type === "mouseenter" ? 0 : -30
}, 200);
});
--DEMO--
But could be done only in CSS for browser which support CSS3 transition:
.post-info {
transition: bottom 200ms;
}
.post-pic-holder:hover .post-info {
bottom: 0;
}
--DEMO CSS--

Try this:
$(document).ready(function(){
$('.post-pic-holder').hover(function(){
$(this).first().animate({bottom:'0'},200);
},function(){
$(this).first().animate({bottom:'-30px'},200);
});
});

Bootstrap: Link stays selected after click

Code:
<h1>link</h1>
<script>
$("a").click(function (e) {
e.preventDefault();
});
</script>
http://jsfiddle.net/U7Y3r/
After the link has been clicked, it keeps a small border:
I have seen this under Firefox and Internet Explorer 10. Does not occur under Chrome or without Bootstrap.

This is outline property, you can set it to none:
a:focus { outline: none }
http://jsfiddle.net/Uqzqy/1/

Try this:
$("a").click(function (e) {
e.preventDefault();
$(this).css("outline", "none");
});

It's also possible (and probably a bit cleaner) to simply remove the link focus using $.fn.blur:
$("a").click(function (e) {
$(this).blur();
e.preventDefault();
});
http://jsfiddle.net/U7Y3r/4/

This works fine
$("a").click(function (e) {
e.preventDefault();
$("a").css("text-decoration","none");
});
http://jsfiddle.net/U7Y3r/1/
to get back the same effect, again, http://jsfiddle.net/U7Y3r/2/

Actually you don't need any javascript. You need to just set "a" on "focus" to "outline: 0;"
/* CSS */
a: focus { outline: 0; }
// SCSS
a {
&:focus {
outline: 0;
}
}

alternatives to jquery animate?

On hover I want my div to scroll down.
I know i can use the .animate({left: 0}, "slow"); but this doesnt go down but what else does jquery have to offer?
Here is my jsfiddle: http://jsfiddle.net/WZvPk/4/
hover over the sectors box and you will see the "view project" move down. I need it to move down in a slow fashion similar to http://www.jeremymartin.name/examples/kwicks.php?example=3
Then need the opacity to be so my image is darker.
edit: slide down wont work with this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").css("margin-top", "-5px");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);

You probably want jQuery slideDown, see: http://api.jquery.com/slideDown/
Edit:
So something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.css("display", "block")
.css("margin-top", "-5px")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);
You could also, add a css class with the margin-top and display-block property, like:
.slideDown { display: block !important; margin-top: 5px !important; }
/* !important so they won't be overwritten..*/
Then you can do something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.addClass("slideDown")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);

What about css3 transitions? They are smooth and are starting to be widely supported.
Here's an example which doesn't use javascript at all.
Update : Another example that doesn't use opacity.

$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, "slow");
},
function () {
$(this).children(".sectorImage").children(".showme").css("display", "none").css("margin-top","-25px");
}
);​

​Now it works
$(".sectorGrid").hover(
function () {
$(".showme").css("margin-top", "-25px");
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, 'slow');
},
function(){
$(".showme").css("display", "none")
}
);
​
​