Bootstrap: Link stays selected after click - javascript

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;
}
}

Related

How to set an element focused on click?

Basically I've a HTML 5 video element which on click I need to make it to be focused so I could control user keyboard triggers.
Here is my code:
$(function(){
var focused_vid;
$('.videoe').click(function(){ focused_vid = this });
$(document).keydown(function(e){
if (focused_vid){
// keyboard handler
}
});
});
Beside my video element I've a Text Box. The problem is once the video is focused It disable me to type on my Text Box and keeps triggering Key button for video handler even though I've:
$(window).click(function(e) {
$(e.srcElement.className).focus();
});
Regards :)
Do not use event.srcElement it's a non-standard IE property that Firefox doesn't support. Use event.target which is supported by all modern browsers. Try the .blur() method to take the focus away from the video. See the Snippet for example of how this could be done.
SNIPPET
$(function() {
var focused_vid;
$('#vid1').click(function() {
focused_vid = this
});
$(document).keydown(function(e) {
if (focused_vid) {
console.log('focused on ' + e.target.className);
}
});
});
$(window).click(function(e) {
$('#vid1').blur();
var tgt = e.target;
$(tgt).focus();
console.log('focused on ' + tgt.className);
});
/* This just to prevent the console from obscuring the demo */
input {
display: block;
}
.as-console-wrapper.as-console-wrapper {
margin-left:270px;
max-width: 250px;
height: 100vh;
color: blue;
font: 400 15px/1.3 Consolas;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inp1' class='txt' tabindex='2' placeholder="Enter this video's title">
<video id="vid1" class='vid' src="http://html5demos.com/assets/dizzy.mp4" controls tabindex='1' width='250'></video>
It might help others too.
var focused_vid=null;
$(function(){
$('.videoe').click(function(){ focused_vid = this });
$(document).keydown(function(e){
if (focused_vid){
// keyboard handler
}
});
});
function notfocused(){
focused_vid=null;
}
And later on we Can call notfocused method to remove handling keyboard buttons for video.
$(document).click(function(e) {
$('.videoe').blur();
var tgt = e.target;
$(tgt).focus();
if(tgt.className!="videoe")
notfocused();
});

Document ready button.click only works in console

I have a button<button id="stbutton"></button> and I can enter into the Chrome Dev Console $('#stbutton').click(); and it works. Sounds easy enough, however:
$(document).ready(function () {
$("#stbutton").click();
});
Doesn't work. Also tried waiting for the parent div to load, no dice,
$('#panel').ready(function () {
$("#stbutton").click();
});
As for this page, I know it works in console. And jquery is definitely being loaded before it hits this line of code.
As #charlietfl pointed out, you're probably triggering the event before attaching the click listener to the element.
$(document).ready(function(){
$("#stbutton").click(); //This doesn't work
$("#stbutton").on("click", function(){
alert("clicked");
});
$("#stbutton").click(); //trigger event after listening to it.
});
#stbutton {
background: #000;
width: 100px;
height: 100px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="stbutton"></div>
$(window).load(function () {
$('#stbutton').click();
})
I found the magic that is window.load!

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.

Temporarily disable button using jQuery

I would like to disable a button element without removing the listener, for example I have ths following code:
<input id="in" />
<button id="sub">Submit</button>
$('#sub').click(function (e) {
//Some actions
});
$($('#in').keyup(function (e) {
if (new Date($(this).val()) == 'Invalid Date') {
$(this).addClass('invalid');
$('#sub').addClass('disabled');
}
else {
$(this).removeClass('invalid');
$('#sub').removeClass('disabled');
}
});
I would like to unbind the button click listener, but if I'll use off() or unbind() I will have to 're-bind' it in the else clause.
Is there any better way of doing this?
How about disabling the button instead of adding a class?
HTML:
<button>Disable Me</button>
JS
$(function() {
$("button").click(function() {
alert("click!");
$(this).prop("disabled", true);
});
});
CSS
button[disabled] {
color: red;
}
Here is a jsFiddle to demonstrate.
use $('#sub').prop('disabled');

Javascript Div rollovers

I am using Jquery - is there a simple way to change the background color on a div when a user rolls over it?
You can do this with CSS:
#myDiv:hover { background-color: red; }
//or...
div:hover { background-color: red; }
If you need IE6 support and such and have to use jQuery, toggle a class, like this:
.hover { background-color: red; }
Then use .hover() and .toggleClass(), like this:
$(".myDivs").hover(function() {
$(this).toggleClass('hover');
});
You could use the .hover() event:
$('#divid').hover(function() {
// mouse enter
$(this).css('background-color', 'red');
}, function() {
// mouse leave
$(this).css('background-color', 'blue');
});
I think mouseenter & mouseleave is better than hover. Why? Bubbling reason ;)
if($.browser.msie && $.browser.version < 7) {
$('element').bind({
mouseenter:function(){ $(this).addClass('over'); },
mouseleave:function(){ $(this).removeClass('over');}
});
}
After this, you can simply add some CSS magic:
#element.over,
#element:hover {
/* do something */
}

Categories

Resources