Closing popup and other script on clicking close - javascript

i'm not great with Javascript and jquery etc.
Using http://odyniec.net/projects/imgareaselect/ and a CSS popup, i'm trying to create a file upload that you can crop the image by choosing your selection with and then cancel or continue to upload the file.
I've got the popup opening with the image inside and you can crop the part of the image you want. My issue at the moment is that when you click on the "Cancel" button, the crop highlight still remains. How would I go about getting that to close too?
I've tried numerous things, checking to see if it can hide the div if the other div is pressed, or hidden, or not visible, and I just can't seem to get anything to work.
Here is my jsbin, the upload part isn't working though, so you can't actually see the error on there.
http://jsbin.com/eKaNupU/1
Thanks in advance for any help!
UPDATE:
Working (up until it doesn't!) example: http://www.costapass.es/imageupload/

Looks like you need to do cancelSelection() (see: http://odyniec.net/projects/imgareaselect/usage.html).
In order to get access that method you need to get a reference to your imgAreaSelect object. To do that, put the following in your <head> (or similar).
var ias = null;
$(document).ready(function() {
ias = $('#uploadPreview').imgAreaSelect({ instance: true });
});
Then modify your close button to be:
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
Cancel
<img id="uploadPreview" style="display:none;"/>
</div>
Your modified jsbin: http://jsbin.com/eKaNupU/11/edit

Related

javascript gallery not displaying main image when thumbnails clicked

I'm wanting to create a gallery which displays a main image when the thumbnails are clicked. When clicked the thumbnails rather than altering the image in the webpage take the user to the file where the image is kept and display it in the top right corner.
No idea why this is happening ? Any suggestions where I'm going wrong and how to fix this ?
<img id="veiwer" src="images/motorbike-girl.jpg" />
<div id='thumbs'>
<a href='images/chicks.jpg' onclick="gallery(this);"><img src='images/chicks-
thumb.jpg'/></a>
<a href='images/motorbike-girl.jpg' onclick="gallery(this);"><img
src='images/motorbike-girl-thumb.jpg'/></a>
<a href='images/yamaha-thumb.jpg' onclick="gallery(this);"><img
src='images/yamaha.jpg'/></a>
</div>
function gallery(change) {
document.getElementById('viewer').src = change.href;
}
The problem occurs because of the default behavior of the anchor tag : by default, when you click a link, you get to the page/document it's pointing to.
So, in your javascript you would need to tell "Don't run the default behavior, only what I want to do". It's done through the preventDefault() method of the event.
cfr this fiddle for a working example, where I removed also the inline javascript (= onclick attribute).

What am I not doing that I should

I have been trying to debug a click on a thumbnail sized "jump map" initiating scrollTo on a large 8000x6000px full sized map (main_map) but it was not behaving and I become very confused so I went back to basics.
You will see below the setup is very simple, but when the page loads the first time I get the scrollbars as expected, however if I clear cache with Ctrl F5, thereafter I may or may not get them, and in fact I may or may not get the image appear, (sometimes just an apparently empty space) then after refresing once or twice they reappear. The patten seems random. In fact this behaviour seems the same on a refresh only.
I also discovered that if the main_map displays in part whilst the scrollbars remain invisable, turning on firebug and pressing the "Reload to see all sources" link forces the scrollabrs to reappear.
What am I not seeing?
for your info - Using the simplest method:
$(document).ready(function() {
$(function()
{
$('.scroll-pane').jScrollPane();
});
});
and the html part:
<!-- Begin Column main -->
<div id="column_main">
<div class="scroll-pane">
<img id="main_map" src="maps/map.bmp" />
</div>
</div>
<!-- End Column Main-->
When you clear the cache and reload the page the images will be re downloaded and offcourse you will see some delay before the images are downloaded. The javascript you have in ready method is redundant use the below.
$(document).ready(function()
{
$('.scroll-pane').jScrollPane();
});

open file upload dialog on click

I have to open file upload dialog by clicking some other button i.e i am hiding file upload control(visibility:hidden) and on clicking of some other button i want to open that dialog.
Below is the code which i am having:
<input type="file" style="visibility: hidden;" />
Below is the javascript:
$('#button').click(function() {
$('input[type=file]').click();
});
It is working fine in Firefox 4 and IE8 but in chrome12 it is not working i.e the dialog is not being opened. Any idea why?
Tested today the simple code given in the question and the situation has changed:
IE9: works
Chrome23: works
Firefox15: works
There is just one catch - on IE the .click() is a blocking operation while on other browsers it is not.
In your example, your file input did not have an id, yet you are trying to reference it with #input. This works for me:
$('#button').click(function() {
$('input[type=file]').click();
});
You should position input[file] just above your custom control. And then bind to it`s onclick.
Also make in it bigger font-size, as only this way you can increase it's height.

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.

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

Categories