jQuery - set button title - javascript

I want to change the title of a button using jQuery
<button id="pub2" class="pub2" title="ok">Bibtex</button>
<script>Tippy('.pub2', {interactive : true})</script>
Also, I have a small paragraph to test
<p id="testP">
text
</p>
To change the properties, I'm doing the following:
$(document).ready(function(){
$("#testP").text("test worked");
$("#pub2").attr("title", "new title not working");
});
Updating the text of the paragraph works just fine, but the title of the button won't change, why?

Your code working fine:-
$(document).ready(function(){
$("#testP").text("test worked");
$("#pub2").attr("title", "new title not working");// you can use prop() also
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="pub2" class="pub2" title="ok"> Bibtex </button>
<p id="testP">
text
</p>
Note:-
You have this code under button
<script>Tippy('.pub2', {interactive : true})</script>
Try to remove it from there and add into you script code like below:-
$(document).ready(function(){
$("#testP").text("test worked");
Tippy('.pub2', {interactive : true})
$("#pub2").attr("title", "new title not working");// you can use prop() also
});

Use this one:
HTML:
<button id="pub2" class="pub2" title="ok"> Bibtex </button>
Jquery:
$("#pub2").prop("title", "new title not working");

Related

jquery button value change with efffects

I want to change the button's value with fading effect when i click on it. My code is:
html:
<button> some value </button>
script:
$(document).ready(function(){
$("#btn_1").click(function (){
$(this).prop('value', "new value!"); // line1
});
});
From another stackoverflow answer, I found that if i replace line1 with $(this).find('span').html('Collapse').hide().fadeIn('slow');
and change the html part to <button> <span> some value </span> </button> it works. However, is there a way to achieve the transition effect using jquery without using span tags ?
Do you want something like this?
just use $(this).text('new value!').hide().fadeIn('slow');
$(document).ready(function() {
$("#btn_1").click(function() {
$(this).text('new value!').hide().fadeIn('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_1"> some value </button>
You can set text property of button. and you can fadeOut and fadeIn
$(document).ready(function(){
$("#btn_1").click(function (){
$(this).text("You Clicked").fadeOut().fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_1">Click HERE</button>

Toggle buttons to show a content and hide the others

Not sure if my title states clearly, sorry about that. Let's say I have 2 buttons, each with jQuery toggle() to show/hide its own content. It works like when I click Button 1, Paragraph 1 shows (I make it hidden on page load.) And so does Button 2 and Paragraph 2.
However, I really want to hide the current paragraph when clicking on the other buttons so that I can show only 1 paragraph at a time. For example, when I click Button 1 , Paragraph 1 shows. Then when click it again, the paragraph hides. But if I click the other button (says, Button 2), I want Paragraph 1 to hide while Paragraph 2 is showing. Is it possible to do so?
Please look at my pen here: Codepen
Thank you.
Try this:
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
$("#btn1").click(function(){
$("#p1").toggle();
$("#p2").hide();
});
$("#btn2").click(function(){
$("#p2").toggle();
$("#p1").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
Have modified your html and js to be little simpler. Here is how it is..
HTML
<button id="btn1" class="btn" data-toggle="#p1">Button 1</button>
<button id="btn2" class="btn" data-toggle="#p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
Add an attribute data-toggle to toggle particular paragraph and add its id as value for this attribute.
Add class to each button so that we can have only one event written for all the button.
JS
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
//attaching event to .btn class
$(".btn").click(function(){
var targetElement=$(this).data('toggle'); //get its data-toggle value
$('p').hide();//hide all p tags
$(targetElement).show(); //show only targeted p tag
});
});
UPDATED PEN
If you want something extensible, you can use a data attribute to identify the paginated paragraphs.
$(function() {
var $pages = $("p");
$pages.hide();
$("button").click(function() {
$pages.hide();
$('#' + $(this).data("target")).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-target="p1">Button 1</button>
<button data-target="p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
yes it is possible to hide other paragraphs and show specific paragraphs. Change your jquery code to following :
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
$("#btn1").click(function(){
$("#p2").hide();
$("#p1").toggle();
});
$("#btn2").click(function(){
$("#p1").hide();
$("#p2").toggle();
});
});
OR
you can even simplify the code by adding attribute to button tag :
HTML :
<button id="btn1" class="btn" data-ref="p1">Button 1</button>
<button id="btn2" class="btn" data-ref="p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
jQuery :
$(document).ready(function(){
$("p").hide();
$('button').click(function() {
var id = $(this).attr('data-ref');
$('p').hide();
$('body').find('#'+id).show();
});
});

zClip - Copy only visible text

Hey hopefully this is an easy solution:
On click of the button I want to be able to copy only the text that is visible within the id="description". what am I doing wrong?
HTML:
<p id="description"> Test <span style="display:none">test2</span></p>
<button type="button" id="copy-description">Click Me!</button>
jQuery:
<script type="text/javascript" src="js/jquery.zclip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
// The link with ID "copy-description" will copy
// the text of the paragraph with ID "description"
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
// The link with ID "copy-dynamic" will copy the current value
// of a dynamically changing input with the ID "dynamic"
});
</script>
It needs to be in a parent tag like a p tag and then call the span visible within that tag.
HTML:
<p id="description">
<span id=""> Test </span>
<span style="display:none; visibility:hidden;">test2</span>
</p>
jQuery:
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('#description span:visible').text()
});

How to replace html button with plain text

How do you replace a button with whatever words were on the button before? I was looking at an answer to another similar question, which said to use something like:
var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);
but that had made what other buttons do change. Does anyone know another way to change a button to regular text?
I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. I'm just wondering if anyone knows another way to do it.
Thanks
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">
<input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
</div>
</body>
</html>
<script type="text/javascript">
function change(){ //function to run when you click on the button...
var buttonValue = document.getElementById("submit").value; //stores the button value
document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely
}
</script>
EDIT:
I've just noticed you had multiple buttons in your page, which will make my previous example wrong. heres something that will make you work easier i think in case you will add extra buttons:
first heres the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
<li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
<li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
</ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
var buttonValue = document.getElementById("button_"+id).value;
document.getElementById("id_"+id).innerHTML = buttonValue;
}
</script>
In the HTML part, you can create a list (li) of buttons if that's your layout...
each list will have its own id, in this case id_x that will be used later when you replace its content. each button calls a function change(id) while id is just a unique number for each button.
In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text.
Let me know if you still need any other help.
Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way.
HTML
<div>
<button id="btn1" class="change-button">A button with some text 1</button>
<button id="btn2" class="change-button">A button with some text 2</button>
<button id="btn3" class="change-button">A button with some text 3</button>
</div>
jQuery
// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
// First we get the ID value of the clicked button
// example: "btn2"
var buttonId = $(this).attr('id');
// Then we get the html value of the clicked button
// example: "A button with some text 2"
var buttonText = $(this).html();
// We use the function replaceWith, to replace the button to a <span>
// with the buttonText variable we have
$('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});
As you can see, it's a lot more cleaner with jQuery. You should try it!
Here is the fiddle so you can test it.
<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;
document.getElementById("ad").innerHTML = a;
}
</script>
<body>
<div id="ad">
<input type="button" value="hello" id="hello" onClick="fun()">
</div>
</body>
</html>
sorry, edited the wrong post

delete an appended text using an appended button on jquery

<html>
<head>
<title></title>
</head>
<body>
<button id="btn_id">CLICK THE BUTTON</button> RESULTS:
<div id="result"></div>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$("#btn_id").click(function () {
$("#result").append("<button type='button' id='btn_id2' class='close pull-right' aria- hidden='true'>×<\/button>" + "<pre class='one'>Sample text<\/pre>");
$("#btn_id").click(function () {
$("#btn_id").remove();
$(".one").empty();
});
});
</script>
</body>
</html>
I'm having a problem on the above code. I'm trying to append text with a button on it. The button will be the one to trigger to remove the appended text. But what happening is I can't remove the appended text one by one. The first appended text with the button has only the capability to remove all the appended text. But what I wanted to happen is that, it should be one at a time even though that I clicked the "CLICK THE BUTTON" a number of times.
What I needed is the "CLICK THE BUTTON" to be clicked a number of times and it will produced an appended text with a close button on it. The close button will be the one to remove the appended text, only for that specific text.
Are you looking for something like this?
jsfiddle
JavaScript:
$("#btn_id").on('click', function(){
$("#result").append("<div><button type='button' id='btn_id' class='close pull-right' aria-hidden='true'>×</button>"+"<pre>Sample text</pre></div>");
});
$(document).on('click', 'button.close', function(){
$(this).parent().remove();
});
HTML:
<button id="btn_id">CLICK THE BUTTON</button>
RESULTS: <div id="result"></div>

Categories

Resources