We Keep Coding

Close GLightbox gallery by clicking outside content area

I'm using the GLightbox JS library for a portfolio gallery and want to be able to close the gallery when clicking outside the inner element.
I found other questions of a similar nature, but I'm avoiding jQuery and haven't been able to find a solution that works for this specific use case. Plus it looks like the functionality I want is built in. I'm just trying to access it.
The documentation lists a number of options, and includes what appears to be a function for closing the gallery with something other than the default button.
Their documentation is here: http://glightbox.mcstudios.com.mx/
The markup for the gallery is generated on the fly, and follows this structure:
<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
<div id="lightbox-slider">
<div class="gslide">
<div class="gslide-inner-content"><!-- image/text content -->
<img src="img/image.jpg" alt="">
</div>
</div>
</div>
</div>
Based on their documentation there is a method to trigger closing the gallery listed toward the bottom of the page:
// Close the lightbox
myLightbox.close();
I want to be able to click outside of .gslide-inner-content to close the gallery, and this is the basic idea I've come up with so far:
var closeTheGallery = document.getElementsByClassName('.gslide');
closeTheGallery.onclick = function() {
myLightbox.close();
e.stopPropagation();
};
I've tried several iterations of the above code targeting various parent and child elements to see if there's anything I can hook into. So far no luck - any insights would be appreciated - thanks in advance.

The myLightbox.close(); feature didn't seem to do anything regardless of what event or <div> I used, but Doug provided some helpful guidance.
As a workaround, I added an event listener for a click on the .current slide container and set it to trigger another click on the default .gclose button.
// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'current')) {
document.querySelector('.gclose').click();
}
}, false);
It may not be the most elegant solution, but it gets the job done and doesn't interfere with the existing functionality of the gallery.
Posting the code here in case other folks using the GLightbox gallery run into the same thing.

Flipping a div with the click of a button on the div

I am trying to teach myself HTML, CSS and JS and started to play around on codepen.io. I've been in a rut, trying to get the div (on this pen http://codepen.io/janicedarling/pen/MwNZVp) to flip when the button "create account" or "submit" is clicked. Currently using this tutorial http://callmenick.com/post/css-transitions-transforms-animations-flipping-card
I am able to get the div to flip when anywhere is clicked. I tried changing this in the javascript
document.querySelectorAll(".tab");
to
document.querySelector("#create");
but then nothing happens still. I left the CSS in place. Can anyone offer any advice on how to get the required transformation?

First, add an id to your submit button:
<input id="signup" type="submit" placeholder="Go">
Next, let's fix your JS. You don't need a bunch of code from that other example that looks for all the different cards to wire up. In your case, you have only one card, and you need only two event callbacks (one to flip and the other to un-flip). We use the new id here to find the specific button that causes the un-flip.
(function() {
var tab = document.querySelector('.tab');
document.getElementById('create').addEventListener('click', function() {
tab.classList.add('flipped');
}, false);
document.getElementById('signup').addEventListener('click', function() {
tab.classList.remove('flipped');
}, false);
})();
With this, two specific buttons are wired up to the flip and un-flip actions, so the card only flips when you want it to.

Attaching an event listener for left or right click - onclick doesn't work for right click

I am currently applying for an Internship Internship Link
One of the things that I noticed right away is that you click on upload cover letter or paste cover letter, you're redirected to the home page of the job invite site Job Invite and sadly you can't upload your cover letter. On the other hand, the upload resume works perfectly fine but paste resume has the same issue.
Does anyone know how to resolve this issue and and be able to submit a cover letter?
I am not a web guru but since I am applying for an engineering position, I am trying to find a way around this. I right clicked the upload cover letter link and inspected the link with the inspect element tool. I found that this function
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')
was going to get called when the button is clicked. Now going into the JavaScript file for this html page, Inspect Element -> Sources -> *careers_8.js?v=303, I tried to do a basic alert statement, from alert dialog, to do some debugging to see what the issue is. Here's the code now
function jvAddAttachment2(id, companyId){
alert("I got here");
....
}
I then did control s and the Inspect Element console outputted "Recompilation and update succeeded." so I am assuming the JavaScript file has been updated. However when I click the link(via right click, open new window), no alert box shows up. Does anyone know how to get the alert dialog to show up? I think I've done as much as I can with my working knowledge from one web development course haha.

You're looking for the contextmenu event for right click:
element.addEventListener('contextmenu', function() {
// code here
});
Please don't use inline js, like onclick in your html. The above sample is the proper way to attach event listeners.
You should get your element reference in javascript with var myElem = document.getElementById('the-id') or some similar function like document.querySelector, etc.
Then, you can easily attach both events like this:
// left click
myElem.addEventListener('click', myFn);
// right click
myElem.addEventListener('contextmenu', myFn);
If you're adamant to do this with inline js, that would be:
<div onclick="myFn()" oncontextmenu="myFn()"></div>
Full demo of both approaches for ya:
var myElem = document.getElementById('my-element');
myElem.addEventListener('click', myClickFn);
myElem.addEventListener('contextmenu', myClickFn);
function myClickFn() {
console.log('this is myClickFn!');
}
function someFn() {
console.log('this is someFn!');
}
<div id="my-element" onclick="someFn()" oncontextmenu="someFn()">Left or Right click me!</div>
Also, since you're wanting to pass parameters to the function you'll be calling on click, it is good to use an intermediary function for the event, and have that function call the other function, passing the parameters, like this:
function myClickFn() { // this is called on click
myOtherFunction('some', 'params');
}
That prevents you having to repeat the same function call, passing those same parameters in both places.

Make sure to close your onclick string at the end with a ":
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"
And left click instead of right clicking.

onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"
I think that double quotation was absent.
demo

How to know StartChild when using roundabout.js

Hi I am implementing roundabout with 5 images using roundabout.js that is shown here
http://fredhq.com/projects/roundabout/demos/standard
So I want to know current front image so that i can implement some trigger whenever user click on it. I don't want to enable trigger when user clicks on the images shown behind the front image.
Trigger is launched only for front images and natural behavior happens for rest of the images at back.
I tried using roundabout_startChildren() function in my Html file but not able to know how to exactly use this function.

NOTE:- i have never used this plugin so please instead of down voting the answer correct me if you think i have misunderstood your problem
here is the DEMO
switch the click off for all movable elements as the page loads and on it when the clicked element hasClass roundabout-in-focus and then animateToNextChild
$('ul').roundabout()
$('ul li').off('click');
$('.roundabout-moveable-item').click(function(e){
if($(this).hasClass('roundabout-in-focus'))
{
$(this).on('click')
$('ul').roundabout("animateToNextChild")
}
})
EDIT as per the requirement mentioned in comment
DEMO
$('ul').roundabout()
$('.roundabout-moveable-item').click(function(e){
if($(this).hasClass('roundabout-in-focus'))
{
window.open('http://www.google.com')
//use --window.location="http://www.google.com"-- to open in same window
}
})

A few jQuery questions

First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};

Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});