Develop Reference

How to set focus on DIV when the lightbox_me trigger?

I have a div with only one focusable element button (close button), when the lightbox opens focus should be on div. when i press tab focus should goto 'close' button.
As per assertive technology(blind users) close button should be at the bottom of the DOM,that is one reason DIV should be focus when lightbox triggers.
I have set
<div id="div-id" role="dialog" tabindex="-1" aria-labelledby="operations-help">
and in jQuery set :
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
$('#div-id').focus();
}
});
but focus is setting on close button only, is there any way i can set focus on DIV.
Thanks

A div can't take focus afaik. If the div has a button you could instead call
$('#div-id button').focus();
Or if I've misunderstood and the div is the button can changing the div to a button or submit input should allow focusing.

Use
window.location.hash = '#div-id';
This will scroll to the element, essentially focusing it.
So finally,
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
window.location.hash = '#div-id';
}
});
I guess this should work.

A div is not a focusable element.
A possible solution is to set a button/link with dimensions 1px by 1px somewhere on the corner of the div and set focus on it.
aria-labelledby could be then set on that button instead of the entire div :)
Do let me know if that works. If using a link, make sure you set href as #.
You could also, add a button and hide it. Not with display: none, but with z-index, so that it remains tabbable.

Hey you cannot focus div element but you can do a little work around and put after or inside of this div element that you can. Here is example:
var div = document.getElementById("test2");
div.addEventListener("focus", function(){alert("it's a test")});
#test{
width:200px;
height:200px;
background-color:#0CF;
z-index:1;
}
#test2{
position:absolute;
z-index:0;
width:100;
height:100%;
opacity:0;
cursor:default;
}
<div id="test"><textarea id="test2"></textarea>sdfsdf</div>

I am able to fix by setting property :focusPopover : false , this solved my problem.
$('#div-id').lightbox_me({
destroyOnClose: true,
focusPopover : false,
onLoad: function() {
$('#div-id').focus();
}
});

Change your jQuery to
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
$('#div-id').attr('tabindex', 1).focus();
$('.close').attr('tabindex',2);
}
});
UPDATE
$('#div-id').lightbox_me({
destroyOnClose: true,
centered: true,
onLoad: function() {
$('#div-id').find('a:first').parent().focus()
}
});
here is the fully functional working demo https://jsfiddle.net/jfy5n2nf/1/
NOTE: on pressing tab key focus shifts to close button and a red border appears

Try it with HTML5 contenteditable
$('#focusbtn').click(function(){
$('#div-id').focus();
});
$('#div-id').on('focus', function(){
alert('I am focusing in div!');
});
$('#div-id').keypress(function(e){
e.preventDefault();
});
#div-id{
pointer-events: none;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-id" role="dialog" contenteditable="true">
I am the div. Please focus on me
</div>
<BR/>
<button id="focusbtn">Focus</button>

you can try,
position:fixed;
it will always be in the same position even when scrolling,
here is my code, it will be always on the center of the screen.
.example
{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:800px;
height:450px;
background:#ffffff;
z-index:51;
padding:20px 10px 10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

Blog / Message - How do I fix that empty message divs will piling on / next to each other and make the close button work?

So I'm making a sort of blog posting system or TODO list, however you want to call it.
I want that the following can happen / is possible:
[Working] The user types something in the textarea
[Working] The user clicks on the button.
[Working] A new div will be created with the text of the textarea.
[Working] The textarea will be empty.
[Not Working] The user has got the choice to delete the post by clicking the 'X' on the right side of each '.post' div.
BUT: If I click on the button when there's nothing in the textarea, there appears an empty div, with only an 'X' close button, no background color either. They appear on the same line as the previous message, so you can get a lot of 'X's next to each other.
AND: Clicking the 'X' close button doesn't do anything. No errors in Firefox console.
If it's not clear enough, run this JSFiddle, click the button and I think you'll understand what I mean:
JSFiddle
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="blog">
<h1>Blog post application</h1>
<div id="post-system">
<textarea id="poster" rows="5" cols="50" placeholder="Update status."></textarea>
<div id="button">Post</div>
<div id="posts">
</div>
</div>
</div>
</body>
</html>
jQuery Script:
<script>
$(document).ready(function () {
$('#button').click(function () {
var text = $('#poster').val();
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('.close-post').click(function () {
('.close-post').parent().hide();
});
});
</script>
CSS:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#blog {
background-color: blue;
margin: 50px;
padding: 50px;
text-align: center;
border-radius: 10px;
color: white;
display: block;
}
#poster {
color: default;
resize: none;
border: 1px solid black;
text-decoration: blink;
font-size: 20px;
display: inline-block;
position: relative;
border-radius: 5px;
border: 2px solid black;
padding-left: 10px;
padding-top: 5px;
}
#button {
background-color: #00FFFF;
color: white;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
width: 50px;
float: left;
}
.post {
background-color: white;
color: blue;
margin-top: 20px;
width: auto;
display: block;
}
.close-post {
margin-right: 10px;
float: right;
color: red;
cursor: pointer;
}

You appear to have two issues:
1) You don't want a post to be created if the textarea is empty
Simple fix . . . check to see if it is empty, before calling the logic to add the new post (and use jQuery's $.trim() to account for only blank spaces):
$('#button').click(function() {
var text = $.trim($('#poster').val());
if (text !== "") {
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
}
});
2) The 'X' buttons are not closing the posts
This also should be a pretty easy fix . . . the reason that they are not working is because the 'X' buttons don't exist when the page is loaded so $('.close-post').click(function() { is not binding to them on page load. You will need to delegate that event binding, so that it will apply to the 'X' buttons that are dynamically added after the page is loaded.
Now, not knowing what version of jQuery that you are using (I can't access jsFiddle from work), I'll point you to the right place to figure out the correct way to do it: https://api.jquery.com/on/
If it is jQuery 1.7 or higher, you would do it like this:
$("#posts").on("click", ".close-post", function() {
$(this).parent().hide();
});
If your version is earlier than that, then investigate the jQuery .delegate() and .live() methods to determine which is the right one to use for your code..

Try this:
$(document).ready(function() {
$('#button').click(function(event) {
event.preventDefault();
var text= $('#poster').val();
if (text === '') {
alert('Nothing to post!');
return;
}
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('#posts').on('click', '.close-post', function() {
$(this).closest('.post').fadeOut();
});
});
JSFiddle

The way you are doing this, the user will only ever see what they are posting - if you're trying for a chat type where users talk to each other then you will need to store what is being typed on the server side and refresh the screen using something like ajax
but in response to your question, you need to bind the close click like this:
$( "#posts" ).on( "click", ".close-post", function() {
$(this).parent().hide(); // $(this) is the clicked icon, the way you did it above wouldn't as if it had the dollar, it would close all .close-post parents
});
See the part about delegated events: http://api.jquery.com/on/

Side panel to close when I close anywhere outside it

I have left panel which slides in as I press the menu button (it is a mobile version). When the left panel slides in, I want it to close when I click anywhere else except the left panel itself. The jquery I made is this:
$(document).ready(function(){
$('.menu').click( function() {
if ($('.sidemenuu').hasClass('hidden')) {
$('.sidemenuu').animate({left:"0%"},255);
$('.sidemenuu').removeClass('hidden');
return true;
}
else {
if($('.sidemenuu').css("left","0")){
alert('jkk');
$('html').click(function() {
$('.sidemenuu').animate({left:"-80%"},255);
});
}
$('.sidemenuu').addClass('hidden');
$('.sidemenuu').animate({left:"-80%"},255);
}
});
$('.close').click(function(){
$('.sidemenuu').animate({left:"-80%"},255).addClass('hidden');
//$('.sidemenuu').addClass('hidden');
});
$('.sidemenuu').click(function(e){
});
});
html:
<div class="sidemenuu hidden">
<div class="close"></div>
<div class="over-y-auto">
<div data-role="content">
<div id="getVerificationSearchList" >
<button onClick="getVerificationSearchList()">Verification Data</button>
</div>
<div id="getNewHomeLoan" >
<button onClick="getNewHomeLoan()">New Home Loan</button>
</div>
<div id="getNewLoan" >
<button onClick="getNewLoan()">New Loan</button>
</div>
<div id="getContactRecording" >
<button onClick="getContactRecording()">Contact Recording</button>
</div>
<div id="getCPU" >
<button onClick="getCPU()">CPU</button>
</div>
<div id="getphotoupload" >
<button onClick="getimageupload()">Photo Upload List</button>
</div>
<div id="getdocumentupload" >
<button onClick="getdocumentupload()">Document Upload List</button>
</div>
<div id="getreceiptupload" >
<button onClick="getreceiptupload()">Receipt List</button>
</div>
</div>
</div>
</div>
css:
.sidemenuu{ background-color: #181818;
height: 100%; left: -40%;
position: relative;
box-shadow: 9px 0 10px #303030;
position: fixed;
border-right: solid 1px #444;
padding: 1%;
width: 75%;
left: -80%;
z-index: 10;}
.over-y-auto{ overflow-y: auto; height: 100%;}
.sidemenuu button{ background-color: #141414;
border-bottom: solid 1px #000 !important;
border-left: 0;
border-right: 0;
border-top: solid 1px #171717 !important;
color: #565656;
height: 55px;
width: 98%;
font-size: 18px;
}
.sidemenuu button:hover{ background-color: #202020; box-shadow: 0 0 7px #000 inset;}
.close { background: url("img/close.png") no-repeat scroll center 5px #252525;
border: solid 1px #333;
border-radius: 4px;
cursor: pointer;
height: 40px;
margin: 0 auto 19px;
padding: 0;
width: 73px;
}
.menu{ cursor: pointer; left: 0;
position: absolute;}
fiddle is here: http://jsfiddle.net/cLJVV/

This is a fairly common and potentially tricky problem. You'd like to bind to any click 'outside' your element, but DOM events don't work that way. Every click is inside something, and that's what's going to receive the event and bubble it up the DOM.
So, the way to solve this is to listen to clicks on the document itself, and check whether those clicks are inside the element you want to detect clicks outside of (your sidebar). If the clicks made it all the way to the document without passing through your element, they are outside. The simplest function to check for that would look like this:
var openSidebar = function(){
$('.sidemenuu').removeClass('hidden').animate({left:"0%"},255);
}
var closeSidebar = function(){
$('.sidemenuu').addClass('hidden').animate({left:"-80%"},255);
}
$('.menu').click( function(event) {
event.stopPropagation();
openSidebar();
});
$(document).click( function(event){
if ( !$(event.target).closest('.sidemenu').length ) {
closeSidebar();
}
});
See updated fiddle here: http://jsfiddle.net/cLJVV/2/
Note one really important thing: in the .menu click function, the first line is calling event.stopPropagation(). This call stops the event from continuing to bubble up to the root of the document.
Recall that the click binding on the document is going to catch all clicks, and any clicks that didn't originate inside your side menu element will call the function to close it. So, if you have an element that is outside and you don't want that element to trigger your sidemenu to close, you need to stop propagation of clicks on that element. In this case, that's what I did to the menu button on your fiddle.
Hope this helps!

Why not use the focusout event handler.
The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
Example:
$('.close').click(function () {
$('.sidemenuu').animate({
left: "-80%"
}, 255).addClass('hidden');
//$('.sidemenuu').addClass('hidden');
});
$('.sidemenuu').focusout()(function () {
$('.sidemenuu').animate({
left: "-80%"
}, 255).addClass('hidden');
//$('.sidemenuu').addClass('hidden');
});
You can also use a separate function for both as they do the same thing.
Example:
$('.close').on( "click", closeSidemenu )
$('.sidemenuu').on( "focusout", closeSidemenu )
function closeSidemenu() {
$('.sidemenuu').animate({
left: "-80%"
}, 255).addClass('hidden');
//$('.sidemenuu').addClass('hidden');
}
Either way is valid, but the second one is easier to maintain, requires less code, and is easier to troubleshoot.

Html/CSS/Javascript Function to flip image is not working

I have to flip an image in my project and im using a function in combination with css to implement it. When it's flipped, it shows another div en when flipped again ofcourse back to the original div. But when I click nothing happens. So something is still wrong, but no idea what.
Javascript:
<script type="text/javascript">
$(document).ready(function () {
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click", function () {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false);
}
else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function () {
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
HTML:
<div class="sponsorListHolder">
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip" >
<img src="Images/edan.png" alt="More about Edan" id="test" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
Edan
</div>
<div class="sponsorURL">
<!-- Edan-->
</div>
</div>
</div>
CSS:
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
I have included the jquery plugin:
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
Greets

I guess you have added the Jquery, and you may also add the Jquery UI
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
before
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
http://lab.smashup.it/flip/ On the right side, it mentions that this plugin depends on Jquery and Jquery UI.
Hope it works.

jQuery override css hide on mouse out

I have a hidden div that I show when the mouse hovers.
Then when I click the text changes and I want the div to be permanently shown. The problem is that it disappears again when the mouse moves off.
Is there a way in jQuery to override the mouse out hide in the css?
Thanks
CSS
.saveCompare {
display:none;
margin-left: 10px;
background-color:#BDD455;
color:#ffffff;
padding: 2px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.listingContainer:hover .saveCompare {
display: inline;
}
jQuery
$("div.saveCompare").click(function() {
$(this).text('Compare Added');
$(this).show();
return false;
});

Thats probably because of your "display:none" in the ".saveCompare". The div still has this class. So its going to hide the div.
Maybe you can write a new class:
.saveCompareNew {
display:inline;
margin-left: 10px;
background-color:#BDD455;
color:#ffffff;
padding: 2px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
And then use this call to remove your old class and add your new class
.removeClass("saveCompare").addClass("saveCompareNew")
Thats probably no the best solution, but it should work.

Before you hide the form on mouseout do a check
$('#yourElement').hover(function(){
//show your form
},function(){
if (!textHasChanged)
//hide your form
});

As far as I know it is not possible to manipulate pseudo-classes in JavaScript (correct me if I'm wrong). You could go for a all-jQuery solution with sth like this:
$('.saveCompare').hide(); //you could do this in the CSS as well
$('.listingContainer').hover(function(){
$(this).children('.saveCompare').show(); //on mouse over show child .saveCompare
},function(){
$(this).children('.saveCompare').hide(); //on mouse out hide child .saveCompare
});
$('.saveCompare').click(function(){
$(this).append('<p>Added</p>').parent('.listingContainer').unbind(); //remove parent element's hover handler when clicked and show .saveCompare forever
});