I have one link
<a ng-click="logout()">
I want to change the above link to below code
<a ng-click="logout()" onclick="setTimeout(function () { window.location = 'https://demo.test.ca/log'; }, 3000);">
I am using third party solution, In this you can change the code directly without modifying the actual code.
But the problem is that when I write policy for changing the code. When this application is loaded it gives me the following error
Uncaught SyntaxError: missing ) after argument list
So please help me to fix this.
you have to close <a> tag
<a ng-click="logout()" onclick="setTimeout(function () { window.location = 'https://demo.test.ca/log'; }, 3000);">
</a>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<body>
<a ng-click="logout()" type="button" value="Load new document" onclick="myFunction()">Click Me</a>
<script>
function myFunction() {
setTimeout(function () {
window.location.assign("https://stackoverflow.com/")
}, 3000);
}
</script>
</body>
</html>
This should work,
Can you try
<!DOCTYPE html>
<html>
<body>
<a ng-click="logout()" type="button" value="Load new document" onclick="myFunction()">Click Me</a>
<script>
function myFunction() {
setTimeout(function () {
window.location.assign("https://stackoverflow.com/")
}, 3000);
}
</script>
</body>
</html>
If you are using angularjs and ng-click then do it properly and remove that onclick and assign function to $scope in your controller/directive/component so your template would look like:
<a ng-click="logout()">Logout</a>
and in your controller/directive/component in logout function:
$scope.logout = function () {
// logout code ....
$timeout(()=> {$window.location = 'https://demo.test.ca/log'; }, 3000);
}
Also make sure you inject $window and $timeout, if you don't already have it you will need to add it.
Related
I have an HTML page with an image that I set to be invisible by CSS visibility: hidden. I want to make a link called "Show image", so that when I click on it, the image appears.
Now, I don't know how to make such a link, since normally a link with <a href=...> links to some other page. In my case, I want the link to invoke a JavaScript to display the image.
If you already have a JavaScript function called showImage defined to show the image, you can link as such:
show image
If you need help defining the function, I would try:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Or, better yet,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Then, your links would be:
show image
hide image
It's pretty simple.
HTML:
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
#theImage { visibility: hidden; }
This is working code:
<html>
<body bgcolor=cyan>
<img src ="backgr1.JPG" id="my" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
<script type="text/javascript">
function tend() {
document.getElementById('my').style.visibility='visible';
}
function tn() {
document.getElementById('my').style.visibility='hidden';
}
</script>
<input type="button" onclick="tend()" value="back">
<input type="button" onclick="tn()" value="close">
</body>
</html>
Here is a working example: http://jsfiddle.net/rVBzt/ (using jQuery)
<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});
You can do this with jquery just visit http://jquery.com/ to get the link then do something like this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').show('slow');
});
});
</script>
or if you would like the link to turn the image on and off do this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none;" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').toggle();
});
});
</script>
HTML
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.display = "block";
}
CSS:
#theImage { display:none; }
How can I execute the following js function inside js instead of using a button with it? Also, can it be achieved without jQuery?
The function is myFunction()
The button is:
<button onclick="myFunction()">Toggle dark mode</button>
The full code is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>
<button onclick="myFunction()">Toggle dark mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
Also, instead of using a button, use a span with a css pointer settle.
So basically I'm trying to achieve something like this:
HTML:
<span id="mybutton">Toggle nightmode</span>
JS:
<script>
function myFunction.getElementbyID(#mybutton).(click) {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
It's ok if you offer a solution in jQuery, but I prefer vanilla javascript.
There are quite a few ways to achieve this, the shortest way would just be to do:
document.getElementById('mybutton').onclick = () => { /* CODE GOES HERE */ };
If your function is already defined somewhere, you can replace the lambda function (This ()=>{} thingy) with the name of your function, leaving you with this:
document.getElementById('mybutton').onclick = myFunction;
However, all that does is set the onlcick property of your element programatically, rather than setting it inline. If you want your element to not have the onclick property at all, you need to set an event listener for that element. This can be done like so:
document.getElementById('mybutton').addEventListener('click', () => {
/* CODE GOES HERE */
});
Once again, that lambda function can be swapped out for the name of your function if its already defined somewhere else.
tldr your script element should look like:
<script>
document.getElementById('mybutton').addEventListener('click', () => {
var element = document.body;
element.classList.toggle("dark-mode");
});
</script>
I tried to find the easiest way to set the active class to the active Navbar point.
My Code looks like this:
function setActive(i) {
$(document).ready.getElementById(i).addClass("active");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script>
setActive("contact");
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
Why is this not working?
Thanks for the help!
In jQuery, you use $().addClass(). You should call the function inside $(document).ready(), not have the function run only if the document has loaded.
In your setActive function, it looks like you are mixing up Javascript and jQuery. You should only use one or the other.
$(document).ready.getElementById(i).addClass("active");//this line is a syntax error
.active{
color: green;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function setActive(i) {
$('#'+i).addClass("active");
}
$(document).ready(function(){
setActive("contact");
});
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
With pure Javascript, you can use Element.classList.add() to add a class to an element.
.active{
color: green;
}
<head>
<script>
function setActive(i) {
document.getElementById(i).classList.add("active");
}
document.addEventListener("DOMContentLoaded", function(){
setActive("contact");
});
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
To set the contact active you need to this it this way. You already have jQuery in you code so it is more easy.
function setActive(tag){
//This bloc is optinal. It will remove active class from all other elements. You may not need that
$('body a').removeClass('active');
//End optional block
$(`#${tag}`).addClass('active');
}
$(document).ready(function(){
setActive('contact')
});
please try:
function addActive(el){
document.querySelector(el).classList.add("active");
}
You should call setActive("content") inside main.js inside a ready function
You are also missing the id selector (#) in your jQuery selector
$( document ).ready(function() {
setActive("contact");
});
function setActive(id){
$(`#${id}`).addClass("active");
}
.active{
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="contact" class="nav-link" href="">Example</a>
Try this
function setActive(i) {
document.getElementById(i).classList.add("active");
}
function setDisable(i) {
document.getElementById(i).classList.remove("active");
}
.active{
background-color: yellow;
color: red;
}
<html>
<body>
<button type="button" onclick="setActive('demo')">
Activate
</button>
<button type="button" onclick="setDisable('demo')">
Disable
</button>
<p id="demo">Here</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown-content a{
display: block;
background-color: blue;
}
</style>
</head>
<body>
<div class="dropdown-content">
<a>1</a>
<a>2</a>
</div>
<script>
window.onclick = function(event){
if(!event.target.matches('.dropdown-content')){
alert("foo");
}
};
</script>
</body>
</html>
I'm trying to make alert(foo); execute only when we are NOT clicking on anything inside of the div tag in the body. Unfortunately, it executes no matter where I click. Why?
window.onclick = function(event){
if (document.getElementsByClassName('dropdown-content')[0].contains(event.target)){
// inside
} else{
// outside
alert('foo');
}
};
.dropdown-content a{
display: block;
background-color: blue;
}
<div class="dropdown-content">
<a>1</a>
<a>2</a>
</div>
Get your element and use contains to check whether click is in or outside. If outside then alert.
matches is not working because you are clicking in a tag which is not having .dropdown-content tag. So everytime value comes false. And it alert('foo')
As i seen you have to add content to de div.conta, i made a demo
And work with the dom, className( imade right, but can use any):
<div class="dropdown-content">
abc
<a class="name">1</a>
<a>2</a>
</div>
window.onclick = function(event){
console.log(event.target.className);
if(event.target.className!=='dropdown-content'){
console.log("foo");
}
};
If you're using jQuery you can do the following:
$(event.target).closest('.dropdown-content').length
See the following JSFiddle:
https://jsfiddle.net/4nb691a0/
Because your if statement returns false and with ! operator returns true. It happens because when you clicked inside the div your actual target is <a> element which does not have class .dropdown-content.
When click outside the div it also does not have class .dropdown-content. So your statement always returns false but with ! operator it becomes true.
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown-content a{
display: block;
background-color: blue;
}
</style>
</head>
<body>
<div class="dropdown-content">
<a class="link">1</a>
<a class="link">2</a>
</div>
<script>
window.onclick = function(event){
if(!event.target.matches('.link')){
alert("foo");
}
};
</script>
</body>
</html>
I have an HTML page with an image that I set to be invisible by CSS visibility: hidden. I want to make a link called "Show image", so that when I click on it, the image appears.
Now, I don't know how to make such a link, since normally a link with <a href=...> links to some other page. In my case, I want the link to invoke a JavaScript to display the image.
If you already have a JavaScript function called showImage defined to show the image, you can link as such:
show image
If you need help defining the function, I would try:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Or, better yet,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Then, your links would be:
show image
hide image
It's pretty simple.
HTML:
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
#theImage { visibility: hidden; }
This is working code:
<html>
<body bgcolor=cyan>
<img src ="backgr1.JPG" id="my" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
<script type="text/javascript">
function tend() {
document.getElementById('my').style.visibility='visible';
}
function tn() {
document.getElementById('my').style.visibility='hidden';
}
</script>
<input type="button" onclick="tend()" value="back">
<input type="button" onclick="tn()" value="close">
</body>
</html>
Here is a working example: http://jsfiddle.net/rVBzt/ (using jQuery)
<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});
You can do this with jquery just visit http://jquery.com/ to get the link then do something like this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').show('slow');
});
});
</script>
or if you would like the link to turn the image on and off do this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none;" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').toggle();
});
});
</script>
HTML
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.display = "block";
}
CSS:
#theImage { display:none; }