not changing color when clicking button - javascript

i am using bootstrap to change the button color when clicked, but i think i am doing something wrong and the button is not changing it's color when i am clicking the button.
this is my button code -
<td>
<a class="mylink" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>
</td>
this is my javascript code ---
<script type="text/javascript">
$(document).ready(function() {
if (localStorage.getItem('isCliked'){
$("#mylink").addClass('btn-success');
$("#mylink").removeClass('btn-default');
}
$('#mylink').on('click', function() {
$(this).addClass('btn-success');
$(this).removeClass('btn-default');
// set the value upon clicking
localStorage.setItem('isCliked', true)
});
i need to change the button color when clicked and when the page is called again it should check whether it is activated or not.
Can anyone help me to solve this problem.

Probably the problem is here.
$("#mylink")
This selects the element with the id="mylink" and not the element with the class="mylink"
If you want to select a class, go for this.
$(".mylink")
CSS Selectors: w3schools

First of all, mylink is a class in your code.
<a href="#" class="mylink">
But in jQuery you're using an ID ($("#mylink")). Also, <a> is an ascendent of <button>. So correct your every bit of $("#mylink") to:
$(".mylink button")
That way you'll be targeting the <button> tag inside your <a> tag with class .mylink.
Reference: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

With $('#someID') you are selecting something by it's id. But you use classes ("myLink") so you should use $(".myLink").
And despite that you make it more complicated than it needs to be. Maybe you want to try to do it just with css.
Here is an example which is very similar to your question:
Pressed <button> CSS

There are some errors in your code:
It is jQuery, not JavaScript (it's a little bit different)
You are changing the <a> class "myLink" NOT the <button> class
You are referring to a class (".myClassName") as a id ("#myIdName")
Others things (i.e. how javascript handle the DOM element)... you should read and study a little bit more.
Anyway, I've made you a working fiddle.

Related

Making a button a clickable link (With a twist)

So I have a snippet that I'm using to build some buttons.
<font color=white><button class="button"><span>Register</span></button></font>
<button class="button" onclick="window.location='http://www.google.com';"><span>SP Training</span></button>
<button class="button"><span>Assistance</span></button>
<button class="button"><span>Orders</span></button>
<button class="button"><span>KM Milsuite</span></button>
<button class="button"><span>TMT</span></button>
As you can see I have tried wrapping the whole thing in href, I have tried wrapping the span in href, I have tried wrapping just the font in href, all failed
Ok so I trekked down the java world and tried some on click (numerous variations I have found on this site) none of which work! Every button is a clickable but EVERY button simply links back to the page i'm currently working on. By no means am I an expert at all this but I expected a little give on this!
Any suggestions?
The purpose of a button is to either:
Submit a form (type="submit", the default)
Allow JavaScript to be triggered (type="button")
As you can see I have tried wrapping the whole thing in href
The HTML specification forbids that.
I have tried wrapping the span in href
The span appears to serve no purpose
Every button is a clickable but EVERY button simply links back to the page i'm currently working on
If clicking the button is reloading the current page, then it is probably a submit button inside a form with an action attribute that resolves to the current page (or no action attribute).
If you want a link then use a link and do not use a button.
If you want your link to look like a button, then use CSS to style it that way. Note that the :active pseudo-class is useful for achieving the 3d depressed effect when the link is clicked.
The span tag inside your button is catching the click action. You must take the span out of the "bubbling" chain.
The easiest way is to apply CSS and add the class to your span tags.
span.nonclickable {
pointer-events: none;
}
After that you can catch the button clicks.
A more detailed explanation can be found here: Use CSS to make a span not clickable
It is not quite clear what you want these buttons to do. Use a-tags to link to other pages and use buttons to refer to an action in javascript or a form submit.
You could try this :
<input type="button" onclick="myF()" />
<script>
function myF() {
window.open('http://www.google.com', '_blank', 'resizable=yes');
}
</script>
Hope it helps

click a hyperlink with javascript - href="#"

I'm new to Javascript.
I would like to click a hyperlink with Javascript.
the html looks like this:
<a id="random563e035c2b9149" class="btn" href="#">Launch PDF editor...</a>
the id changes every time I refresh the page, so I can't use it.
how do I click this hyperlink with javascript?
( if it helps, this is the div this hyperlink is in:
<div class="visibleifjs" id="yui_3_17_2_2_1446906385088_829"><a id="random563e0a0eede6f9" class="btn" href="#">Launch PDF editor...</a><div class="assignfeedback_editpdf_unsavedchanges warning">Unsaved changes</div></div>
)
enter code here
the id changes every time I refresh the page, so I can't use it.
id appear to begin with string "random" ? , followed by random integers ?
Try selecting a having id beginning with "random" , having class btn ; calling .click() on DOM element
$("a[id^=random][class=btn]")[0].click()
you can use class asigned to it:
$(".btn").on("click",function(){
alert($(this).html());
});
If the id of the parent div stays the same.
$('#yui_3_17_2_2_1446906385088_829 a').click(function(){
//do something
});
I have a solution but it's ugly... hope someone has a better idea.
luckily there are only three buttons ('btn' class) on this page, so the button I want to push was easy to find (but in other cases, if there are a million button on this page it wouldn't be so easy to find the right one...)
in my case, my button is the first button, so this works:
document.getElementsByClassName('btn')[0].click();

A href not working when onclick works

Subject is a problem. Well I have, for example, this html
Learn more
It doesn't work. Okay, perhaps there are some invisible elements that don't allow to click on it. Here I add onclick property:
Learn more
But now I see that "Hi" message appears (so <a> tag is clickable), but it doesn't change current page.
Well, ok. Now i'm changing javascript to:
<a onclick="window.location.href='/ru/pages/socials.aspx';return false;" href="/ru/pages/socials.aspx">Learn more</a>
and now it works as espected, but I'm looking for non-JS pure HTML solution.
Please, advice. Why <a> could be non-clickable for href, but with workable JS onclick event?
Did you add click event listeners via e.g. JQuery? Maybe you're disabling the default behaviour by something like this:
$(..).click(function(e){
e.preventDefault();
...
});
I would exclude 'wrong' markup ( like an overlapping div or something ) because you can use the link when you add an inline onclick.

Current menu item

I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.

Show/Hide On Click

I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!
You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?
<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}
Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.
There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/
This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs
Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).

Categories