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.
Related
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.
I have a div with a close button on it. The close button has a function fired via Knockout.js that I would like to add a class to the parent of this button, i.e. the encapsulating div. However, in my JS file (see below) the function firing is linked to an object in an array.
HTML
<div>
<button data-bind="click: $parent.myFunc">
</div>
JS file
this.myFunc = function(e) {
// this.addClass('boo'); does not work
}
I can fire a console.log off in this function, but can't seem to manipulate this element through standard jQuery.
Knockout way of doing it would be to add a css binding to the parent and then manipulate it within your function fired by click event:
<div data-bind="css: someClass">
<button data-bind="click: myFunc">
</div>
And within your JS file:
this.someClass = ko.observable("");
this.myFunc = function(e) {
this.someClass("boo");
}
since you tagged jQuery, I assume you can use it, so:
$('button').click(function(){
$(this).parent().addClass('boo');
});
This is my first answer on here but how about looking into jQuery's .parent() api? http://api.jquery.com/parent/
I'm not familiar with Knockout.js but perhaps something like this could work..
$('button').data('bind','click: $parent.myFunc').click(function(){
$(this).parent().addClass('boo');
});
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.
How can I change the visibility of a control with jQuery? I have a control that its visible property to false (not css).
When I used show() function for it nothing happened, it seems that hide() and show() methods are for css set of a control, not visible property.
You can't do this with jQuery, visible="false" in asp.net means the control isn't rendered into the page. If you want the control to go to the client, you need to do style="display: none;" so it's actually in the HTML, otherwise there's literally nothing for the client to show, since the element wasn't in the HTML your server sent.
If you remove the visible attribute and add the style attribute you can then use jQuery to show it, like this:
$("#elementID").show();
Old Answer (before patrick's catch)
To change visibility, you need to use .css(), like this:
$("#elem").css('visibility', 'visible');
Unless you need to have the element occupy page space though, use display: none; instead of visibility: hidden; in your CSS, then just do:
$("#elem").show();
The .show() and .hide() functions deal with display instead of visibility, like most of the jQuery functions :)
.show() and .hide() modify the css display rule. I think you want:
$(selector).css('visibility', 'hidden'); // Hide element
$(selector).css('visibility', 'visible'); // Show element
Here's some code I use to deal with this.
First we show the element, which will typically set the display type to "block" via .show() function, and then set the CSS rule to "visible":
jQuery( '.element' ).show().css( 'visibility', 'visible' );
Or, assuming that the class that is hiding the element is called hidden, such as in Twitter Bootstrap, toggleClass() can be useful:
jQuery( '.element' ).toggleClass( 'hidden' );
Lastly, if you want to chain functions, perhaps with fancy with a fading effect, you can do it like so:
jQuery( '.element' ).css( 'visibility', 'visible' ).fadeIn( 5000 );
It's been more than 10 years and not sure if anyone still finding this question or answer relevant.
But a quick workaround is just to wrap the asp control within a html container
<div id="myElement" style="display: inline-block">
<asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
</div>
Whenever the Javascript Event is triggered, if it needs to be an event by the asp control, just wrap the asp control around the div container.
<div id="testG">
<asp:Button ID="Button2" runat="server" CssClass="btn" Text="Activate" />
</div>
The jQuery Code is below:
$(document).ready(function () {
$("#testG").click(function () {
$("#myElement").css("display", "none");
});
});