I work on a webpage that opens a popup with a picture selector. The pictures added to a selection list are immediately cloned as thumbnails to opener window - that part works fine.
Problem occurs when I try to make these thumbnails clickable, like this:
opener.document.getElementById("someid").onclick = function(){ alert("bam!"); }
So far I only managed to have this working when a popup window is still opened (instead of plain alert(...) I used opener.window.alert("bam!")). However, when I close popup window, clicking the thumbnails results in errors.
Anyone out there who had similar problem and got it working? Thanks in advance.
UPDATE:
OK, I found not the prettiest solution, but so far it works. I had to declare extra function in opener window:
function addbam(id){
document.getElementById(id).onclick = function(){ alert("bam!"); }
}
And in a popup window:
opener.addbam("someid");
If this solution survives multi-browser test, it will stay with me, however I'm pretty sure it should be possible to remove "wrong" scope from such onclick declarations in much straightforward manner.
Thanks guys, your suggestions got me thinking more productive way.
If you use jquery:
$("#someid").on('click', function () {
alert("bam");
});
or without jquery:
---------EDIT----------
//you put your element in a variablle
var div = document.getElementsByTagName("div")[0];
/*you add an event listenner to your variable, when click is triggered, it runs what's inside the brackets*/
div.addEventListener("click", function (evt) {
alert("BAM!");
});
here's an example made just for you :)
http://jsfiddle.net/YDFLV/50/
Related
Lets say I want to go to the previous page in Chrome and I click "<-". Can I add an EventListener or some kind of function that activates when I click the button.
function goBack() {
document.getElementsByTagName("body")[0].style.overflow = "auto";
}
So in the example above. I want to call goBack() function when user goes to previous page that changes body overflow to auto.
When I searched how to solve this problem I only found instances on how to move back using history.back().
Yes, this is possible. You could actually do this in either jQuery or plain JavaScript, based on your preference.
Here is how you would do it in jQuery:
$(window).unload(goBack);
Alternatively, here is javascript:
window.onbeforeunload = goBack;
That should do it!
I have a webpage where you can blow up the content into a pop up window using window.open.
The pop-up will have a class on its body called pop-up. Important to note, both windows use the same JavaScript file where it handles the click events.
I want to know if I am clicking in the pop-up or in the main (parent) window. Since the HTML is going to be basically the same.
Here is how I am attempting to do this. I maintain a global variable of the last clicked element and this seems to work:
$(document).click(function(event) {
window.lastElementClicked = event.target;
g_lastClicked = window.lastElementClicked;
});
I know this is good because when I check the tagName of the last clicked element it is always correct.
Then when I want to check "Where Am I" I wanted to do this:
var fromPopup = $(g_lastClicked).closest("body").hasClass("pop-up"); // the line in question
alert(fromPopup);
if (fromPopup) {
// unrelated; I need a check to do resizing if I am in the pop-up
var height = $(window).height();
$("#cvApplication").height(height - 120);
}
So it will check the last element, traverse up the DOM to the body and see if it has the class. I get false every time in the above alert. Is my logic wrong? Or is there a completely different way I need to be doing this?
They're separate windows, there's no need to track an "active" element. Each window has its own copy of the script and its own variables, event handlers, etc.
All you need in your code is
if ($(document.body).hasClass("pop-up")) { // Without the . before pop-up
// This code is running in the pop-up
} else {
// This code is running in the main window
}
I haven't checked the rest of your code, but you do not use a . when checking if an element has a class.
var fromPopup = $(g_lastClicked).closest("body").hasClass(".pop-up");
should be
var fromPopup = $(g_lastClicked).closest("body").hasClass("pop-up");
I want to show a bootstrap modal immediately after user close another. So I use the following code trying to do this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
});
Everything happens normally. First modal closes and next modal appears.
However, the class="modal-open" should be in body element to scroll works properly, what is not happening. After second modal is shown, that class disappears from body.
Am I doing something wrong?
Am I doing something wrong?
I don't think so. The large number of issues on this topic suggests that this was either not well-designed, or not designed to support this. Relevant bugs would be
Multiple modals fix #5022, Multiple modals #11872 and
.modal-open is not applied to body when "switching" to another modal #11865 where it is explicitly said by #mdo:
Yup, we won't be supporting multiple modals.
So what to do about it?
A small timeout should definitely help:
currentModal.modal('hide').on('hidden.bs.modal', function (){
setTimeout(function() {
nextModal.modal('show');
}, 100);
});
Without seeing this in action, my guess is that there is some kind of callback handler that removes the class "modal-open". You can try manually adding it like this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
body.addClass('modal-open');
});
But instead of overriding Bootstrap, have you looked into data-dismiss and data-target?
I am using jQuery to have a promotional window opening up -say- 5 seconds after a page is loaded. But the effect is lost for people who open the page in a new window or a new tab. When they get to my tab the window will already be open.
Is there a way to get this to fire when people actually start viewing my site?
I was thinking about catching a scroll or something, but people don't get started scrolling immediately and most won't scroll at all. Other than that I am out of ideas.
I am not sure if jQuery offers a solution here... javascript?
Thanks.
the following should do the trick .. (jQuery)
<script type="text/javascript">
function initiatePopup(){
$(window).unbind('blur');
$(window).unbind('focus');
// do the popup
};
$(document).ready(
function(){
$(window).focus( initiatePopup ).blur( initiatePopup );
// your other functions should go from here on
}
);
</script>
[EDIT] on OP request..
code edited to make the example all inclusive
[EDIT 2]
The code above has been edited again because we need to handle the blur event as well.. so we take the code for the popup somewhere else in order to not duplicate it inside both events..
[EDIT 3]
if you want to pass parameters to the popup if they are created later on, then change the event binding line to
$(window).focus( function() { initiatePopup(params); } ).blur( function() { initiatePopup(params); );
and of course change the initiatePopup to accept parameters ..
Would putting a div around everything work with an onmouseover event listener? I've never tried it, so I'm not sure whether that would fire or not, but it might be worth a shot.
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();
});