Unfortunately I cannot post a working code/example because it's part of a huge HTML template and I cannot extract only the interesting part :( sorry for that.
Anyway, I have this popup that I define like this:
<a id='bookShopping' class="popup-text" href="#book-shopping-dialog"></a>
<div id="book-shopping-dialog" class="mfp-dialog mfp-hide">
random popup text...
<button>Close the popup!!!</button>
</div>
and that I call with
<a onclick="document.getElementById('bookShopping').click(); return false;" >PopUp!</a>
The popup itself has a "X" close button on the upper right corner, defined with
<button class="mfp-close">X</button>
I want MY BUTTON, inside the "random text", to be able to close the popup as well.
I tried:
1) Give my button the mfp-close class.
NOPE. My button will jump to the upper right corner
2) Setting the div to display:none and/or display:block
NOPE. The popup will close but IT WILL NEVER REAPPEAR.
So, my last resort would be to call the same code that the "mfp-close" class is calling. My problem is that I can only find the mfp-close class defined in CSS, nothing in JS.
If I try to "inspect" the "X" button, it will not give me any event linked to it, nor any JS associated with its "click".
I know that without the source code is hard to understand, but the general question is: where, in Chrome or Firefox, can I find ALL THE JS CODE EXECUTED when I click on an element?
Thank you in advance.
You appear to be using the Magnific popup jQuery plugin, which has an API including a close() method. You should call that method rather than try to hack around with classes.
http://dimsemenov.com/plugins/magnific-popup/documentation.html
$.magnificPopup.close();
Related
When hovering an a tag, such as <a href="/question/jacobs_question">, in the browser you expect either on the bottom right or bottom left to see the URL of where that tag is going to take you, in this case https://stackoverflow.com/query/jacobs_question
I currently have an ajax site and my a tags have a href of <a href="#"> so, on hover, on the bottom of the screen it looks like https://jacobs_site.com/#.
Is there a way to change this so that a different URL appears?
Side note: I may not be using the correct terminology since I haven't found anything in my searches. If that's the case, please let me know as to the correct terminology I should be using.
EDIT:
as soon as I submitted, I figured out the answer. Using jquery, you can use preventDefault() to stop the a action
$(function() {
$('a').on('click', function(event) {
event.preventDefault();
changePage( $(this).data('myAction') );
});
});
This will show the A tag's destination but won't actually take you there. Sort of a hack, but I guess it works.
I think you could solve this problem by adding a alt-attribute to your -tag.
Link Text
Usually the alt-attribute is used to change/add the text field appearing on hovering over links, images and other elements alt-attributes are added to.
Hope this solves your problem. :-)
I am creating a JavaScript bookmarklet to toggle the visibility of an HTML Element on a page, but it seems like just hiding the element is troublesome:
http://codepen.io/anon/pen/HtkzL
Code:
<div id="hideme">
<p>I am a div that needs to be hidden</p>
</div>
<p>I am a paragraph that doesn't need to be hid.</p>
<blockquote>
I am a blockquote that the whole world must see
</blockquote>
Click me to hide the div.
what's happening is that every the anchor link is clicked, the entire page goes blank and says "none".
When I inject the exact same code in the <a> ... </a> in a JS console, it works just fine.
Any possible fixes for the problem?
It actually is hiding the element, but it's also following your anchor right after (to nowhere). You can return false, or a falsy value. I'd wrap it in void which will return undefined, but either will work. Here's your codepen and the code: http://codepen.io/anon/pen/dsgKk
Click me to hide the div.
(This would also work, but is less clean, imo):
Click me to hide the div.
getElementById('hideme');a.style
Offhand, I'd say because the browser is confused with your variable name;
also, the code would be:
getElementById('hideme').style.display.....
I have a problem with a very simple JavaScript pop-up script.
I have this example page: http://www.onofri.org/example/example4/
At the end of this page there is a box containing some flags including the British flag that is reprsented by the #reportEng div (inside the engLink link).
What I want is that when the user clicks on this element a pop0up message will show.
So I have add to the page this simple script:
<script>
var test = document.getElementById('engLink');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
I have put the script inside the body section of the page and not in the head section because this is only a test page and the final result will be put into a page of a CMS in which I do not have access to the template (so I can't put the script in the head section).
The problem is that it does not work. If I click on the English flag the page is reloaded and the pop-up not shown.
Can you help me?
Thank you,
Andrea
I went a completely different approach. The addEventListener is pretty cool, but I'm a bit OLD and I've defaulted to nasty habits. This works just fine for me.
<script>
function myExample(){
alert("BaZing! It works!");
}
</script>
And for the HTML part...
<div id="reportEng" onClick="myExample()"></div>
I also want to point out that this 'fix' is a bit taboo (see here)
You don't prevent the link from being followed, so when you click the link which has an empty href, you simply reload the current page.
There are many ways to prevent the defaul link behaviour, but here is the old school way:
<div id="reportEng"></div>
Also on a side note I don't think a div element is allowed inside an a in HTML or XHTML.
FIDDLE
You are using a <a> tag, change it to use a <div> tag, or remove <a> tag at all
You can follow this to make div clickable.
I'm putting together a new app and, while I normally use JQuery for things like this I'd like to compare it to Coffeescript and choose the right approach. Moreover, I want to make sure I understand how to invoke JQuery correctly using coffeescript.
The Dialog is in the following div:
<div class="alert-message error">
<a class="close" href="#">X</a>
<p>Here is some error text</p>
</div>
The styling puts an 'X' on the right margin of the dialog. When the user clicks the 'X', the entire div needs to disappear.
What JQuery code or Coffescript code would I use to close the dialog? This dialog could appear on any page in the site.
Try this:
$('.close').click(function(){
$(this).parent().hide(); //finds parent element of clicked .close and hides it
});
Here is samura code using coffeescript
$('.close').click() ->
$(this).parent().hide()
// or on 1 line
$('.close').click() -> $(this).parent().hide()
// fat arrow version, not 100% sure on this, typing from ipad
$('.close').click(e) => $(e.target).parent().hide()
http://jashkenas.github.com/coffee-script/
I'm trying to resize my modal dialog window when certain items are hidden/shown.
window.resizeTo(800, 600);
I've tried using code like above, but it doesn't seem to work. I think because it is a modal dialog, and not a regular window. Any suggestions as to how I could resize this?
If you're trying to resize the modal dialog window from within the window itself, you might be tempted to use the javascript window.resizeTo() or window.resizeBy().
However, those will not work. Instead, use:
window.dialogWidth='640px';
window.dialogHeight='480px';
P.S.
Rsolberg: The poster did say modal dialog window. That seems like the way I'd describe it. I'm not sure that could be interpreted as being related to jQuery. I'd remove the jQuery answer in order to avoid confusion.
You'll want to identify the element or container ID and do something like this:
document.getElementById('MyModal').style.height = '500px';
document.getElementById('MyModal').style.width = '800px';
If you are using jQuery for this it can be quite a bit easier as you can attach it to the actual show modal function.
Edit
Within the javascript functions above, MyModal will be the ID of the container or modal. For example, if you are using a DIV for the outer element of your modal, you would set the DIV up like this:
<div id='MyModal' class="IFNEEDED">CONTENTS OF MODEL</div>
EDIT #2
Since this is not a "modal" as most would describe today, its more of a new window popup, this line of code should work for you (found it here):
window.open('http://www.pageresource.com/jscript/jex5.htm','mywindow','width=400,height=200')