I'm using ngDialog to display the content on the page, but for some reason it shows the dialog's head in pre clicked view.
I see this is an old question, but as far as it's not answered still, I leave this answer in order to help people who is leaded here.
ngDialog.open({ template: 'template.html', trapFocus: false});
"trapFocus: false" will do the trick, I hope it helps. Cheers!
Related
Good Day,
I am working through freecodecamp and am currently grappling with the quote generator problem. I have run into a bit of an issue with getting functionality for me scripting a change when clicking the button. Basically I have my own code which I'll post below, but also trying to simply copy and paste the code from them I am still unable to get functionality in my button.
I am sure it's an honest and easy mistake but hopefully that should make it all the easier to resolve :) Let me know if you have any questions and I genuinely appreciate it!
(please note I simply want to change the display message upon clicking the button)
<script>
$(document).ready(function(){
$("#getMessage").on("click", function(){
$(".message").html("New Message");
});
});
</script>
<div id="wrapper">
<button type="button" id = "getMessage" class = "btn btn- primary">Generate New Quote</button>
</div>
<div class= "text-center">
<div class = "message">
Sample
</div>
</div>
As the others have mentioned, you are most likely not adding jQuery, yet you are attempting to use it ($). To confirm this, check your console. It's probably filled with Uncaught ReferenceError: $ is not defined.
Assuming you're using CodePen as the challenege says in the objective, you can very quickly and easily include jQuery. To do so, just click the settings cog next to JS, use the Quick-add drop down, and select jQuery.
If you wish to include it manually (as you will most likely have to in future development) I recommend Drefetr's answer.
There do not appear to be any major issues with the code (with respect to the logic, the editor may have rendered your formatting a little nastily).
Can you confirm that you have included the jQuery libraries within the header of your HTML document? e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
For more information: https://developers.google.com/speed/libraries/#jquery
I'm having problem on the page I'm working with, I'm trying to set a permalink with an id so that if the page is fully loaded, it would show the page and it focuses on the element with the ID as its top of the page. But the scenario here, after the focus goes to the ID, eventually the view goes to the top of the page.
The page view should go to the heading that says "Care facilities with rest home and hospital level care"
http://metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility
What could a quick fix. Not familiar with the issue.
Any help would be greatly appreciated.
Like Evan Knowles said you need to add names to your anchors for the browser to be able to browse there.
Replace
<a id="trigger-sa" href="http://metlifecare.staging.wpengine.com/living-at- metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>
with
<a id="trigger-sa" name="care-facility" href="http://metlifecare.staging.wpengine.com/living-at-metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>
I see what you are referring to as the 'jump to the top'. It looks like this piece of code make the entire page block and then jumps to the top
<script type="text/javascript">
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
</script>
Removing that code stop the jump and makes the #care-facility work correctly.
I have never worked with html2canvas, so I can't comment on what it is doing.
I have implemented a highlighter directive with assistance of rangy library.
Please have a look at current implementation of highlighter directive:
http://plnkr.co/edit/mYrEfehaTIbzvS0hePq2?p=preview plunker.
Here , I have button within the template which onclick toggles the selection.
Now, I want the same behaviour but this time, button needs to be outside directive template.
Can you help me with it ?
After adding $watch to look out for , I am able to handle the issue.
scope.$watch(function(){return scope.highlight;}, function(value) {
cssApplier.toggleSelection();
});
Running code is at : http://plnkr.co/edit/mYrEfehaTIbzvS0hePq2?p=preview
Hope it helps someone.
I have an html button that I want to close the current window when clicked. I thought I could just set the onclick feature like I did below. Am I missing something?
<button type="button" onclick="javascript:window.close()">Discard</button>
When in the onclick attribute you do not need to specify that it is Javascript.
<button type="button"
onclick="window.open('', '_self', ''); window.close();">Discard</button>
This should do it. In order to close it your page needs to be opened by the script, hence the window.open. Here is an article explaining this in detail:
Click Here
If all else fails, you should also add a message asking the user to manually close the window, as there is no cross-browser solution for this, especially with older browsers such as IE 8.
JavaScript can only close a window that was opened using JavaScript. Example below:
<script>
function myFunction() {
var str = "Sample";
var result = str.link("https://sample.com");
document.getElementById("demo").innerHTML = result;
}
</script>
Use the code below. It works every time.
<button onclick="self.close()">Close</button>
It works every time in Chrome and also works on Firefox.
This site: http://www.computerhope.com/issues/ch000178.htm
answers it with the script below
< input type="button" value="Close this window" onclick="self.close()">
Closing a window that was opened by the user through JavaScript is considered to be a security risk, thus not all browsers will allow this (which is why all solutions are hacks/workarounds). Browsers that are steadily maintained remove these types of hacks, and solutions that work one day may be broken the next.
This was addressed here by rvighne in a similar question on the subject.
I know this thread has been answered, but another solution that may be useful for some, particularly to those with multiple pages where they want to have this button, is to give the input an id and place the code in a JavaScript file. You can then place the code for the button on multiple pages, taking up less space in your code.
For the button:
<input type="button" id="cancel_edit" value="Cancel"></input>
in the JavaScript file:
$("#cancel_edit").click(function(){
window.open('','_parent','');
window.close();
});
November 2019:
onclick="self.close()" still works in Chrome while Edge gives a warning that must be confirmed before it will close.
On the other hand the solution onclick="window.open('', '_self', ''); window.close();" works in both.
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.