How do I close this dialog using JQuery? Using Coffeescript? - javascript

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/

Related

JS code linked to a "close" button on a modal popup

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

How to add content to a bootstrap panel by using jQuery?

After retrieving info, I want to show it inside a bootstrap panel by using jQuery.
I use the .html() function to show the panel.
$('#id_div').html('<div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">'+my.awesome.title+'</h3></div><div class="panel-body">Content here :) There is more and this is becoming a super long line ...</div></div>');
I have found that there is a way to break this into several lines by using .append() . I have tried the following:
$('#id_div').append('<div class="panel-body">Adding more content here :) </div>');
This does not work, since the added text appears outside the panel.
How do I specify where exactly I want the code to be appended?
Solved.
According to David, by using the .find() function, you can specify where exactly you want the text to be appended.
$('#id_div').find('.panel-body').append('Adding more content here :)');

Content popup box called by href

I use Wordpress and I would like to have a plugin that allow me to open a box/popup content for "a href" call.
Something like this:
Text use it in a div tag
this is the code i use:
<div class="tracklist download-button2" style="display: initial-block">
<a href="#">
<span class="header-clip2">
<span class="header-triangle2"></span>
</span>
<span class="header-bg2"></span>
<div class="clear"></div>
<div class="file-icon-inner2">
<i class="icon-download2"></i>Tracklist
</div>
</div>
please check http://af-sound.ro "Tracklist" button
so whoever will click on Tracklist, i would like to have a box popup opened with the content inside.
There will be more "tracklist" buttons, so i dont need just a global popup box. I have tried with Anything popup but that doesn't work as it use a shortcode like: [anythingpupup=id1] which cannot be used in "a href" call
The first issue here is that you are missing the closing anchor tag
Secondly, you should give the box which you'd like to open an "id" attribute.
<div id="popup-box"></div>
Wherever you place your anchor tag, you can then reference the box using
Click to open popup
The "#" will refer to the id attribute of the matched element.
There is no need to install an entire Wordpress plugin. You can use something like Bootstrap Modals
The instructions are very straight forward to help you set it up.
I think you don't need a plugin for that. You could use just javascript to open such popup from an anchor. Here is an example code:
Open Popup!
<script language="javascript">
function Popup()
{
var win = window.open('', '',"toolbar=no, width=100, height=20");
var doc = win.document.open();
doc.write('<html><body> <b>Hello!</b> </body></html>');
doc.close();
}
</script>
As you can see, you can add any dynamic html as content of the popup, including the html that you want in the doc.write method.
Cheers!
There are a number of ways of achieving this, depending on the result you want to get.
Maybe the simplest way is not using a plugin at all; just add a hidden div with the content of the popup in it. And then, from jQuery, capture the click of your tag a and show up that hidden div. From CSS you can style that div in any way you need.
If you want to use a plugin, you could use Fancybox or any other similar, given the fact that you already have jQuery on your website.

How to change the contents of a div with a link click?

Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!

Resize Modal Window in Javascript

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')

Categories

Resources