Bootstrap Button Link Not Working see code below:
<ul>
<li>
<a href="home.aspx?Id=146">
<button class="btn btn-primary btn">Button Link</button>
</a>
</li>
</ul>
I use firebug for development, is there an easy place to see what javascript events are attached and to which objects such as this button class? find it hard to debug as don't know what code is being called and on what events for bootstrap and other external js files
Or, you can just use a link which looks like a button..
Button Link
Remove a tag and add window.location.href to button onclick
<button class="btn btn-primary btn"
onclick="window.location.href='home.aspx?Id=146'; return false;">
Button Link
</button>
Related
I had properly working link with JS onclick attribute on a CMS, the code looked like this:
<a class="button is-success" onclick="return klaro.show();">click</a>
it was opening the model window.
Now I'm trying to replicate this on an old React.js project.
I remember, that there are a few language notations, but as I'm not working at all with this language it's difficult for me.
I've these kind of links:
<li>{t('Link')}</li>
<li><a class="button is-success" onclick="return klaro.show();">{t('cookie choice')}</a></li>
But since it's React the last link is not working. I tried to change it to <a className="button is-success" onClick={() => "return klaro.show();"}>člick</a> but the onClick event is absent once the page is rendered.
How should it be done correctly with this notation?
Pass a reference to of klaro.show to the onClick prop. This will tell React to call the klaro.show method when you click.
<a className="button is-success" onClick={klaro.show}>člick</a>
People already answered the question correctly; but there is another dirty unclean way to do that as well; I don't recommend it, just for your information:
<li dangerouslySetInnerHTML={{__html: `
<a class="button is-success" onclick="return klaro.show();">click</a>`
}}></li>
Use this
<li>{t('Link')}</li>
<li><a class="button is-success" onClick={klaro.show}>{t('cookie choice')}</a></li>
Or Use Like This
<li>{t('Link')}</li>
<li><a class="button is-success" onClick={() => klaro.show()}>{t('cookie choice')}</a></li>
I have a button in <a> tag like below.
<a type="button" href="{{ url('/team') }}" class="btn btn-primary team">Team</a>
I want to disable this button in some conditions so i used jquery to disable. I implement something like below.
$('.team').prop("disabled", true);
But it didn't disabled.
Instead of <a> if i use <button> it works.
Any solutions?
Try this, bootstrap also has a disabled class, which will put cursor to default arrow and styles like disabled item.
$('.team').addClass("disabled");
working fiddle: https://jsfiddle.net/wvbcxj50/1/
Try this when you don't want the user to redirect on click
I am a useless link
as one of the options you can put a button in a block
<div id="btdis"><a type="button" href="{{ url('/team') }}" class="btn btn-primary team">Team</a></div>
if need disable
document.getElementById('btdis').innerHTML='';
if need enable
document.getElementById('btdis').innerHTML='<a type="button" href="{{ url('/team') }}" class="btn btn-primary team">Team</a>'
I'm working on improving the accessibility of an HTML page. I have a "refresh" button. Is it possible that every time I click the button, the screenreader will read out "refreshing".
This is my HTML code:
<button id="refresh_btn" title="refresh the content" aria-label="refresh" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
You have to investigate the aria-live attribute:
<div aria-live="polite" id="ele"></div>
Each time you press the button you can populate the above tag with the text you want using javascript:
<div aria-live="polite" id="ele">Loading</div>
I want to go through the code of advanced popup window just like godaddy's popup (see the picture)
I got following code but it's very simple.
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
</head>
<body>
<a href="#" onclick="MM_openBrWindow('popup.html','','scrollbars=yes,width=700,height=700')">click me
</a>
For pure educational purposes only, I tried to grab the javascript files and html files for this popup window. But couldn't do it via firebug or any other site grabber. Can someone make or grab the files and post a sample code please which will show a popup exactly as the popup shown in the picture for educational purposes. And the background should be blurred like in the picture.
I know html, but have very little knowledge about javascript/jquery.
P.S : The link to the popup window https://sg.godaddy.com/ and the the clickable text is "* View product limitations and legal policies" and location of the clickable text is bottom of the page.
Regards
simply place the button to text . try it works..!
http://www.w3schools.com/bootstrap/bootstrap_modal.asp
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
to
<span type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</span>
I have an web app which is working phine on the simulator,android and ios, but on windows phone one onclick event does not work. This is my HTML code:
<ul id ="triggerresolutionbg" class="table-view">
<li class="table-view-cell media">
<element>
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav" id ="triggerLeft" onClick = "triggerText(this.id)" ></span>
</button>
</element>
<button class="btn btn-link btn-nav pull-right">
<span class="icon icon-right-nav" id ="triggerRight" onClick = "triggerText(this.id)"></span>
</button>
<element>
<center id ="triggerText">After I...</center>
</element>
</li>
</ul>
I´m using Ratchet,Bootstrap and JQuery.
Why the onclick methods on Windows Phone does not work ?
According to the HTML5 spec for button putting interactive content inside a button element is invalid.
Content model:
Phrasing content, but there must be no interactive content descendant.
So you should not expect event listeners to work on elements inside a button. Some browser violate the spec and permit this, but others do not. Try attaching the onclick handler to the button element itself.
Since you are using this.id, I would recommend restructuring your HTML in the process, but something like this should work.
<button class="btn btn-link btn-nav pull-left" onclick="triggerText(this.firstElementChild.id)">
<span class="icon icon-left-nav" id="triggerLeft"></span>
</button>