Scenario :
I have a Simple Hyperlink on Sidebar of a Dashboard.
<a href="/client/workspace">
<i class="fa fa-laptop"></i> <span>Workspace</span>
</a>
Problem:
The hyperlink must be click-enabled only when CONDITION is true, else it must be disabled.
Any suggestions? Thanks in Advance.
NOTE : Using Meteor + blaze only
If you insist on having an for the link, remove the href attribute and make it act like a button like this:
<a class="myLink" role="button" link="/client/workspace">
<i class="fa fa-laptop"></i> <span>Workspace</span>
</a>
Define its behavior like this:
Template.yourTemplate.events({
'.myLink': function (event) {
event.preventDefault();
if (CONDITION) {
// your code to redirect to event.target.link
}
}
})
Ideally a <button> can really be disabled (simply set the disabled attribute value to the result of your condition).
An <a> link can always be clicked, so depending on what UI you exactly you want, we could imagine:
Hiding the link behind a transparent (possibly with some opacity) <div>, so that it can no longer be clicked. The positioning of the <div> must be done carefully, while its presence / absence can be easily set (e.g. using a class that has display: none style).
Listening to the "click" event on the link and preventing the default behaviour (i.e. event.preventDefault(), where event is the first argument of the listener) depending on the result of your condition.
Related
I'm trying to click the "Visit" button here:
<a name="claim" href="#" onmousedown="$(this).attr('href', '/sdf/view.php?dsg=45368');"
class="btn-small larg-btn">Visit<i class="fas fa-eye" aria-hidden="true"></i></a>
There many other buttons (same but with different links) on the page, but I need to click only 1 (first link in a row) each time I visit/load the page.
Tried to combine those two solutions (1 and 2) but unfortunately I'm absolutely dumb in it:-)).
Also tried the simpliest thing which works in most cases
(function (){
document.querySelector('selector').click();
But obviously didn't help at all.
Thank you.
The link in your example doesn't have the correct href therefore click() wont have the desired result.
Method 1:
Get the link e.g. querySelector()
Simulate mousedown on the link so page JS changes the URL
Click the link
Method 2:
Get the link e.g. querySelector()
Get the onmousedown attribute
Get the final URL from the above attribute using Regular Expression
Assign the URL to the link
Click the link or open using GM_openInTab/GM.openInTab
Method 3: (not recommanded)
Get the link e.g. querySelector()
Get the onmousedown attribute
Use eval() to run the onmousedown JS on the link
Click the link
Here is an example of the method 1 using CustomEvent()
// get the link using the correct query
const a = document.querySelector('a.btn-small');
if (a) {
// simulate mousedown
const event = new CustomEvent('mousedown');
a.dispatchEvent(event);
console.log(a.href); // not needed, for debuggin only
a.click();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a name="claim" href="#" onmousedown="$(this).attr('href', '/sdf/view.php?dsg=45368');"
class="btn-small larg-btn">Visit<i class="fas fa-eye" aria-hidden="true"></i></a>
Using GM.openInTab
const a = document.querySelector('a.btn-small');
if (a) {
const event = new CustomEvent('mousedown');
a.dispatchEvent(event);
GM.openInTab(a.href)
}
In a SinglePageApp, I need to use a <button> tag rather than an <a> tag 5 I am using UKit
the <a> tag would be :
<a type="button" class="uk-button uk-button-link" href="#events"><events</a>
But writing the tag this way , does not work
<button #click="location.href='{{ url('events') }}'" class="uk-button uk-button-link">EVENTS</button>
note : I see an ESLint error .. [js] ';' expected
#webnoob answer is correct , however it seems that it's not working in a single page application : I get a scopelocation undefined error..
SO I am using a method :
<button #click="goToEvents()" class="uk-button uk-button-link">EVENTS</button>
and
methods: {
goToEvents: function () {
location.href='#events'
}
},
To do an onclick with Vue, you would do it like this:
<button v-on:click="location.href=url('events')" class="uk-button uk-button-link">EVENTS</button>
You can also use #click="location.href=url('events')"
Take a look at Vue Event Binding for more information.
If you're within a form and don't want the form to be posted as well, you would need to also add in .prevent so it would become v-on:click.prevent="url('events')"
You only use {{ }} (mustache's) when you're rendering content i.e text. When you're within an attribute which you want to use dynamic values in, you would prefix the attribute with : so, for instance, if you wanted to add some dynamic text in a data attribute, it would become :data-something="myDataProp"
I want to create some link buttons that change each others css styling upon being clicked. I found some tutorials on how to do this, which halfway works as shown in this fiddle;
http://jsfiddle.net/6m3rb/23/
<a id="btn1" class="btn" href="#" onclick="btn2.style.background='#007eff'; this.style.background='#9a3e01';">Button 1</a>
<br /><br />
<a id="btn2" class="btn" href="#" onclick="btn1.style.background='#007eff'; this.style.background='#9a3e01';">Button 2</a>
The only problem is that when the link is clicked and the page is loaded, the css-styling of the link resets back to normal, but I want it to keep the styling until the other link is pressed.
As fare as I can imagine, I need to use some javascript to handle this effect, however, javascript isn't the area where I am strongest when it comes to the internet.
Kind regards
Neros
What you will want to try is using jQuery, it is a already predifned library of actions. For this situation you will want something in the .css() section here. http://api.jquery.com/css/
Your code would look something like this
$('#btn1').on('click', function(e){
e.preventDefault(); // In this case I am preventing the link from firing you do not need this if you want to trigger the link, also remove e from your function parameters
$('#btn2').css('background-color': 'red');
});
You can use JavaScript with JQuery (which is easier to use than pure JavaScript). Then you can call a function with the onclick event.
HTML:
<a id="btn1" class="btn" href="#" onclick="changebtn2()">change color of the second button </a>
<a id="btn2" class="btn2" href="#">will change color if you click on the first button </a>
and make sure you also declare the JQuery library in the HTML.
JavaScript:
function changebtn2(){
$("#btn2").removeClass("btn2"); //remove the old class
$("#btn2").addClass("btn2change"); //add the new class with a different color
}
CSS:
.btn2{
color: red;
}
.btn2change{
color: green;
}
Just replace the href="#" with void
Button 1
this void function will stop the browser from passing any query as a request.
I've solved this problem myself.. I already had the same function on a unordered list, so I simply added the buttons within this list.
i want a anchor should act like and input type submit button.
i am using a jquery plugin library that actually uses input type submit but i have styled my buttons on anchors. i dont want to use
<input type="button">
or
<input type="submit">
i want to use anchors such as
<a href="javascript to submit the form" ></a>
and here is my jquery code where i want to use
{
var submit = $('<button type="submit" />');
submit.html(settings.submit);
}
$(this).append(submit);
}
if (settings.cancel) {
/* if given html string use that */
if (settings.cancel.match(/>$/)) {
var cancel = $(settings.cancel);
/* otherwise use button with given string as text */
} else {
var cancel = $('<button type="cancel" />');
how to use anchors instead of button.
If you want an anchor tag to act like a button just do this
<!--YOUR FORM-->
<form id="submit_this">.....</form>
<a id="fakeanchor" href="#"></a>
<script>
$("a#fakeanchor").click(function()
{
$("#submit_this").submit();
return false;
});
</script>
Since you're using jQuery, just use $() to select the form element, and call submit on it; hook all this up to the anchor via $() to find the anchor and click to hook up the handler:
$("selector_for_the_anchor").click(function() {
$("selector_for_the_form").submit();
return false;
});
Probably best to return false; to cancel the click on the anchor.
Off-topic: But note that this makes your page completely unusable without JavaScript, as well as making it confusing even for JavaScript-enabled browsers employed by users requiring assistive technologies (screenreaders, etc.). It makes the markup completely un-semantic. But since you'd said quite clearly that this was what you wanted to do...
<a id='anchor' href="javascript to submit the form" ></a>
now you can use jquery to add an event handler
$('#anchor').click(function (e) {
// do some work
// prevent the default anchor behaviour
e.preventDefault();
})
now you can style your anchor as you wish and it will act as a regular button
And what about:
<form id="formOne">
...
link here
</form>
you can use input of type image (it works as a submit button for a form) or in jquery:
$("a").click(function(event){
event.preventDefault();
$('form').submit();
})
This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...
So I have this code...
<script type="text/javascript">
var pages=new Array();
pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";
var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
document.getElementById('the_iframe').src=pages[end];
i=0;}
else {
document.getElementById('the_iframe').src=pages[i];
i++;}}
if (operation=="back") {
if (i==0) {
document.getElementById('the_iframe').src=pages[0];
i=end;}
else {
document.getElementById('the_iframe').src=pages[i];
i--;}}}
</script>
</head>
<body>
<ul id="menu" role="group">
<li>Welcome
<ul>
<li>Ease of Access Center</li>
</ul>
</li>
<li>Getting Started
<ul>
<li>Considerations</li>
<li>Changing Perspective</li>
</ul>
</li>
</ul>
<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>
<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />
and if I click on the next or prev button, it does move somewhere,but...
let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).
It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.
Many Thanks For Any Help!
Okay, I'll try the code, but don't down-rate it if its off.
This is the function that you could put before the changeSrc function:
function UpdateI(value) {i = value}
This the one click event that you would add to your links in the a tag. Off course, the 4 that is sent the function in this case, would be changed to whatever is appropriate for whatever ListItem is being referenced:
onClick ="UpdateI(4)"
Does this help you?
I don't understand your code here:
document.getElementById('the_iframe').src=pages[i];
i++;
If that is going to advance to the next element AND display it, you need to increase i first. Perhaps I'm just missing something, though.
I think your problem is that if the user clicks one of your direct links, rather than "next" and "previous" i in your code is not getting updated. So if your on page 2 and click the link for 4 and then click back, i is currently 2 and not 4. Hope that helps you. Be sure mark it as the answer if it does.
add an on click event to each of the link tags that would call a single function just like you have in the input tags. Have the function take an input of some number and assign that number to i. That should do it. Sorry I cant show any source code, JAVASCRIPT is not my language. I can read it but I wouldn't dare to write code from scratch. Hope this helps you.