I would like know how i could add a button that inserts things on html or php.
So here an example
Before I click the button
Before
After I click the button
After
How do I do this?
If you have to do exactly like shown in image then try,
$('#btn').on('click', function(){
var text = "> blockquote";
$('#test2').append(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test2">Hello world</textarea>
<button id="btn">
click me
</button>
Related
I am currently using a basic bootstrap daterangepicker. However I need the range inputs (apply and cancel buttons) to be on the right side after the calendars.
Currently, it's on the left as so:
Is there any way that it is already programmed for me to easily move it to the right?
UPDATE CODE
I am using the basic code that they've provided.
<div id="reg-date" class="btn">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span>
<b class="caret"></b>
</div>
and here is the script that i used
<script type="text/javascript">
$(document).ready(function() {
$('#reg-date span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
$('#reg-date').daterangepicker({
opens: 'right'
});
});
</script>
If you are anticipating apply and cancel buttons on right side of control irrespective of calendar icon and caret to open datepicker controls. You could use simple code like this. It gives you the same result. Apply and cancel on right side of calendar controls
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
Also if you would like to work out through existing code you would need to update question with CSS and update screenshot with calendar and caret icon.
Here's my case: I'm developing a little widget, and I was looking for a way to hide/show different DIVs on selecting a set of radio buttons. I found the proper code and adjusted it to my needs. The only problem is that the hide/show feature stops working after clicking on save while configuring the widget :S
Here's the JS:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="link_to_image"){
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page"){
$(".radio-option").hide();
$(".linked-page").show();
}
});
});
});
And the HTML:
<p>
<label>Link:</label><br>
<label>
<input type="radio" name="link_to" value="link_to_image">
Link to image
</label><br>
<label>
<input type="radio" name="link_to" value="link_to_page">
Link to page
</label>
</p>
<div class="linked-image radio-option">
<label for="linked_image">Linked image:</label>
<p>
Content for linked_image DIV
</p>
</div>
<div class="linked-page radio-option">
<label for="linked_page">Linked page:</label>
<p>
Content for linked_page DIV
</p>
</div>
And the [JSFiddle] (http://jsfiddle.net/ccwsy5z4/)
Could you give me a hand with this, guys?
So finally I found out that the problem was that the JS stopped working after the AJAX started by clicking on the Save button.
And the solution for that was to recall the JS function after AJAX finished it job. To do that first I had to give a name to the JS function, called it after that, and then call it again after AJAX stopped. Like this:
jQuery(document).ready(function($) {
function radioButtonShow() {
if($(this).attr("value")=="link_to_image") {
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page") {
$(".radio-option").hide();
$(".linked-page").show();
}
};
$('input[type="radio"]').click(radioButtonShow);
$(document).ajaxStop(function() {
$('input[type="radio"]').click(radioButtonShow);
});
});
Hope this may be useful to somebody :)
I am following the Tutorials but I am stuck at 4. Event Proxies:
The following doesnt work for me, it just happens nothing:
<button on-click='activate'>Activate!</button>
...
ractive.on( 'activate', function ( event ) {
alert( 'Activating!' );
});
Here is a live example:
http://jsbin.com/kupetofawavu/1/
What am I missing, please?
Put your buttons inside the template and you're good.
Cheers!
Your buttons are outside of the template... move them into the template script tag, and it should work.
The buttons need to be in the template. Change
<script id='template' type='text/ractive'>
<p>Hello, [[name]]!</p>
<p>[[counter]]</p>
<p>[[format(date)]]</p>
</script>
<button id="doit">Count</button>
<button on-click='activate'>Activate!</button>
to
<script id='template' type='text/ractive'>
<p>Hello, [[name]]!</p>
<p>[[counter]]</p>
<p>[[format(date)]]</p>
<button id="doit">Count</button>
<button on-click='activate'>Activate!</button>
</script>
I'm trying to add a button on the accordion heading. but when I click on the button, the accordion group collapse or open. but i dont want to trigger the accordion click when I click on the button.
If i put the button tag inside accordion-heading, it will put that into accordion-toggle class. so it wont trigger the button click. not sure if there is an easy way to change it.
http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview
Anyone can help?
Thanks
Add $event.stopPropagation(); in the ng-click.
http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview
The check marked solution didn't work for me, until I added $event.preventDefault() before $event.stopPropagation(). Maybe I got different results because I'm dealing with a check box or a newer version of Angular?
<uib-accordion-heading>
{{ thisGroup.stringThatShouldOpenAndCloseTheHeader }}
<!-- my checkbox changes -->
<div class="material-switch pull-right">
<input type="checkbox" id="{{ thisGroup._id }}" name="{{ thisGroup._id }}" ng-checked="thisGroup.active" />
<label for="{{ thisGroup.template._id }}" ng-click="$event.preventDefault(); $event.stopPropagation(); $ctrl.checkOrUnCheck(arg)"></label>
</div>
</uib-accordion-heading>
I needed BOTH, though. If I removed either, any clicking on the checkbox would open or close the accordion
or you can create a directive in your button tag for further usage :
.directive('yourDirective',function(){
return{
restrict:'A',
link : function(scope,ele,attr){
ele.bind("click",function(event){
alert('I will not toggle accordion');
event.preventDefault();
event.stopPropagation();
})
}
}
})
HTML
<button your-directive> Click Me <button>
I've been looking on the internet for solutions as to why IE7 isn't opening links correctly for example
<button class="class1">Google</button>
Does IE7 not like having ?
I hear I should use jquery for this? But no one linked to any article.
According to the W3C's specifications on anchor (<a>) tags and <button> tags, you should be able to do that fine, but according to a quick Google search, you can't and/or shouldn't do it, and it doesn't work in Internet Explorer.
This article actually recommends adding Javascript, so the link can be opened in IE also:
<button type="button" onclick="window.location('http://www.expertsguide.info/')">Click Me to go to Experts Guide</button>
Although you can, you shouldn't have a button (<button>) inside anchor (<a>).
Add an event handler to the button like this:
<input type="button" value="Google" onClick="javascript:location.href = 'http://google.com';" />
Note: you should considered not doing this, for a variety of reasons. Bottom line you can (and should) style your <a> element to look like a button.
You're better off not using a button inside a hyperlink.
Style the hyperlink to look like a button.
Try these
http://www.webresourcesdepot.com/css3-buttons-10-awesome-ready-to-use-solutions-all-related-tutorials-you-need/
Try this:
<script>
$(document).ready(function() {
$('.class1').click(function() {
window.location = $(this).parent().attr('href');
return false;
}
});
</script>
Or simply remove the button tag and use this:
<script>
$(document).ready(function() {
$('a').click(function() {
window.location = $(this).attr('href');
return false;
}
});
</script>
To be JavaScript independent (so that it also works on browsers with JS disabled, in contrary to many other answers here), I'd suggest to just wrap it in a <form> the usual way and make it a <button type="submit"> (or <input type="submit">) instead.
<form action="http://www.google.com">
<button type="submit" class="class1">Google</button>
</form>
or
<form action="http://www.google.com">
<input type="submit" value="Google" class="class1" />
</form>