We Keep Coding

How to clear content div and reappear with javascript

I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??

You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo

Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.

left click to activate onclick and right click to activate href

I have an img tag as(which of course is not of the exact syntax)
<img src="http://localhost/img/img_1.png" id=1 onclick="say_hi(id)" href="/img_page_1/" alt="Aim Pic" width="230" height= "164" />
what i need here is when user left clicks on img, i need onClick to be triggered and when user right clicks on it, it must act like a general href showing option ("open in new window" etc)
why i need it is, i want to show the page preview related to image with in the home page by bluring rest of page(ajax is used here to load preview of image page in say_hi function) and when user right clicks on it i want it to feel like a normal href so that he can directly open the page in other tab rather than a preview.
EDIT:
In simple terms i want to state/write/give a link to some image which acts normally as a link when right clicked(showing the context menu which has all the options for a link) but it must trigger a onClick event(or run a function in javascript) when left clicked.
Thank you.

Removed previous answer in reply to question edit.
The new edit is much simpler, see the following (using inline-JavaScript as an example - it's bad practice and shouldn't be used in any production code - see here and here for more info.):
HTML/Inline-JS:
<a href="/img_page_1/" onclick="left_click(id)">
<img src="http://localhost/img/img_1.png">
</a>
Firstly, href isn't a valid attribute on images - give it to an anchor (<a>), which you can then wrap around the image.
Only the left-click will trigger your function, right click still has default behaviour.
Function:
function left_click(id) {
event.preventDefault(); // Prevents the default anchor action.
// Rest of your function here.
}
Here we prevent the default behaviour triggered by the anchor - stopping the link from taking you to a different page.
jsFiddle example.

You need to differentiate between mouse buttons through the button member of the event object:
var left, right;
left = mie ? 1 : 0;
right = 2;
var clickHandler = function (e){
if(e.button === left){
// do onClick stuff and return
}
else if(e.button === right){
// show your context menu
}
}, false);
But this does look like you could simply have your link as description if I'm not misunderstanding what you want to do.

Determine whether a video was clicked

I'm trying to register/log ad clicks on my site.
I run video ads and want to know if it is possible to some how register an ad click.
One idea that I'm thinking about is to place a div over the video then onclick do some function foo.
Can you please point me in the right direction ?

If you use Google Anlytics, you can add this to each div you want to track. In GA it will organize the clicks in by what page the user was on for the click and which video was clicked.
onclick="_gaq.push(['_trackEvent', 'Video', window.location.pathname , href]);"

I'm not sure if this is what you're looking for exactly. I would recommend wrapping a div around whatever you're trying to count.
var clicks = 0;
$('#someDiv').click(function(){
clicks++;
});
This will count how many times a user clicks on that div. Or if you just want to see if a user clicked on a div:
$('#someDiv').click(function(){
alert('you clicked on a div');
});

How to get a screen reader to stop reading and read different content

I've written a site that uses jQuery to display a modal popup. It essentially covers the entire viewable area of the screen with an overlay, then shows a DIV that contains the actual popup on top of the overlay. One of the requirements for this project has to do with accessibility.
When the page loads, the screen reader starts reading from the top of the page. When a user clicks on a particular link, we display a modal dialog. My question is: how do I interrupt the screen reader's reading of the main portion of the site and tell it to start reading the dialog text?
My modal container is wrapped in a div like this:
<div id="modalcontainer" tabindex="0" class="popup" role="dialog" aria-labelledby="dialog-label" >
The jQuery that fires the modal looks like this:
$("#modalLink").click(function (e) {
e.preventDefault();
$("#modalcontainer").center();
$("#modalcontainer").show();
$("#closeBtnLink").focus();
$("#wrapper").attr('aria-disabled', 'true');
});
The "closeBtnLink" is the close button within the modal dialog. I would have thought setting the focus on this would instruct the screen reader to start reading from that element.
The "wrapper" element is a SIBLING of the modal dialog. Per a suggestion from another SO user for different reasons, I set "aria-disabled=true" on the wrapper element that contains the entire page. The modal dialog exists as a sibling outside of this container.
My main goal here is to get the screen reader to read the contents of my modal DIV element when they click on a specific link. Any help would be appreciated.

This can be accomplished using ARIA role="dialog". you'd have to modify this code for your example, it's vanilla js, so yours will probably be shorter/easier via jQuery.
HTML:
<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
<h3 id="myDialog">Just an example.</h3>
<button id="ok" onclick="hideDialog(this);" class="close-button">OK</button>
<button onclick="hideDialog(this);" class="close-button">Cancel</button>
</div>
JavaScript:
var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;
function showDialog(el) {
lastFocus = el || document.activeElement;
toggleDialog('show');
}
function hideDialog(el) {
toggleDialog('hide');
}
function toggleDialog(sh) {
dialog = document.getElementById("box");
okbutton = document.getElementById("ok");
pagebackground = document.getElementById("bg");
if (sh == "show") {
dialogOpen = true;
// show the dialog
dialog.style.display = 'block';
// after displaying the dialog, focus an element inside it
okbutton.focus();
// only hide the background *after* you've moved focus out of the content that will be "hidden"
pagebackground.setAttribute("aria-hidden","true");
} else {
dialogOpen = false;
dialog.style.display = 'none';
pagebackground.setAttribute("aria-hidden","false");
lastFocus.focus();
}
}
document.addEventListener("focus", function(event) {
var d = document.getElementById("box");
if (dialogOpen && !d.contains(event.target)) {
event.stopPropagation();
d.focus();
}
}, true);
document.addEventListener("keydown", function(event) {
if (dialogOpen && event.keyCode == 27) {
toggleDialog('hide');
}
}, true);
source: http://3needs.org/en/testing/code/role-dialog-3.html
more reading: http://juicystudio.com/article/custom-built_dialogs.php

It is your responsibility as a developer to present the content of a page in a way that makes it readable for the screenreader.
from http://www.anysurfer.be/en/index.html:
Use the right HTML tags to structure your documents. By doing so, assistive technologies can translate headings, paragraphs, lists and tables to braille or speech in a comprehensible manner.
Make sure that the website is also operable without using the mouse. In most situations, no special actions are required, except if - for instance - you use dropdown menus. This particular guideline is of great importance to visitors that are only able to use the keyboard.
You can make your audio and video fragments accessible to visitors with an auditive or visual constraint by adding subtitles or by offering a transcription.
Never solely rely on colors to convey structural information. The message ‘The fields in red are mandatory’ has no use for a blind person or someone who is colorblind.
A refreshable braille display cannot display images. Therefore, you should add short descriptions for images and graphical buttons. They don't appear on the screen, but they do get picked up by the screenreader software used by the blind and visually impaired.
The use of technologies like Flash and JavaScript should be well-considered. Moreover, heavy animations and flickering are very disturbing for people who suffer from dyslexia or epilepsy.
But is ultimately the responsibility of the screen reader to make
sure that it stops and starts when it makes sense to the user, if not
possible the user should pause the reader itself.
Because of the large variety of screen readers out there, what you
are asking seems quite impossible.

aria-hidden="true" will make screen readers to not perceive that element and its content, which means that it will not be read out.
aria-label will set the text which assistive technologies (screen readers, etc) will perceive.
http://www.w3.org/TR/wai-aria/states_and_properties

Can you use ARIA Live Regions? https://developer.mozilla.org/en/ARIA/Live_Regions
Then in Javascript during the modal display, swap the regions with assertive and off.

I faced the same issue and solved with following setp's
created one more div (#message) inside modal container wrapper to place all the message
And set aria-labelledby attribute to the close button to point to the #message container

jQuery click detection outside of specified area problem

Hey guys, ok, so, I have a jPlayer jQuery plugin playlist hidden on my home page (http://www.marioplanet.com).
Now, it is hidden by default and is only supposed to be activated upon clicking the image labeled "Music" in the upper-right-hand-corner of my header <div>.
This works great, and once an end-user clicks the image, a nice, slick slideToggle action occurs on the <div id="player"> element and it is revealed.
Now, everything holds.
Until, the end-user clicks anywhere except the Music image again, the <div id="player"> element will slideToggle yet again, vanishing.
The only problem, is when the end-user clicks upon the Music image again, because, as far as I know, it slideToggles twice!
That is definitely not what we want.
So, here is the code which was adapted by Magnar's helpful post:
$('#text_music').click(function() {
$('#jplayer').slideToggle(500, function() {
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#jplayer").slideToggle(500);
$("body").unbind("click");
}
});
});
});
#text_music is my image reading "Music"
#jplayer is my <div> containing my jPlayer plugin
So, what I want to try and do is declare a variable, just like how var outside is declared in the above code, which handles with the clicking of the #text_music image once the #jplayer <div> is already visible.
However, I need a little assistance in understanding the meaning of this variable.
Anyone want to offer any words of wisdom?
:) Thanks!

Have a look at jQuery outside events plugin to detect events outside of the specific element.