I want to hide google's +1 button after the user clicks on it using jQuery; this is the code I'm using but it seems it's not functioning properly:
JS:
$(function() {
$("#button").click(function()
{
$(".HIDE").hide();
});
return false;
});
HTML:
<div class="HIDE">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="small" class="plusone"></g:plusone>
</div>
Use the +1 tag callback parameter to fire the hide function. There's probably a better way to select the +1 button but this works for the purpose of a demo.
<g:plusone size="tall" callback="poHide"></g:plusone>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>function poHide(){ $("#___plusone_0").fadeOut(); }</script>
Demo: jsfiddle.net/Gju6T
You may want to try the HTML5 equivalent syntax:
<div class="g-plusone" data-size="standard" data-count="true"></div>
All in all, the rendered HTML will be the thing to look at.
I think this is what you need, but put it at the end of your page just above </body>
$('g\\:plusone').live('click',function (){
$(this).remove();
});
ELSE
try this...
$('iframe').contents().find('#plusone').live('click',function (){
$(this).remove();
});
orrr
<script>
function mycall(str){
console.log(str);
//$(str).hide();//???
}
</script>
<g:plusone size="small" class="plusone" callback="mycall"></g:plusone>
The button is rendered into an iframe you don't have access to. The <g:plusone> tag is replaced by JS with an iframe and you cannot observe this button via jQuery, for example with live() or bind(). You have to use the API of the button which can be found here.
There you find the option "callback" you could use like this:
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
// Call the API method after the page loaded
$(document).ready(function() {
gapi.plusone.render("HIDE",
{"size": "standard", "count": "true", "callback" : "hideTheButton"});
});
// Method to remove the element
function hideTheButton() {
$("#HIDE").hide();
}
</script>
<div id="HIDE">
<g:plusone></g:plusone>
</div>
Related
I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>
I have trouble getting value of particular item that I'd clicked
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(this).click(function(){
alert($(this).find("button").html());
});
});
</script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
I'd tried $(this).find("button").html(), but it will return the value of 1st button("Yes) even if I clicked the 2nd button("No")
Same for $(this).find("p").html(), will return value of 1st
How do I use $(this) to get the value of item I clicked?
Don't suggest me to insert class or id, I'm not suppose to touch the html.
Please assist, thanks.
this in your click handler is always the document (which you've bound the handler to), so that doesn't help anything. Instead, use something like
$(document).click(function(e){
if ($(e.target).is("button"))
console.log($(e.target).text());
} else {
console.log("not clicked (directly) on a button");
}
});
or rather just
$(document).on("click", "button", function(e){
console.log($(this).text());
});
It is because $(this).click event listener is added to document object and not any specific html element.
$(document).ready(function(){
$('button,p').on('click',function(){
alert($(this).html());
});
});
plunker: https://jsfiddle.net/wx38rz5L/1743/
If you are trying to get each button's html on click, use this.
$('button').click(function () {
alert($(this).html());
});
Bind the click event on both button and get the content of the html element with innerHTML.
$(document).ready(function() {
$('button').click(function(event) {
alert(event.target.innerHTML);
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
You have to detect which $(this) is binded for ? Try something like this:
Setup an object
<button class="btn red btn-xs editbtn" type="button" value="${rs.id}" value="${rs.id}">
Function for this object
$(function(){
$('.editbtn').click(function(e){
common.showSpinner();
var idbbpdtd = $(this).val();
});
});
Try this.
$(document).ready(function() {
$(this).click(function(event) {
alert(event.target.innerHTML);
});
});
In jQuery event.target always refers to the element that triggered the event.
I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/
I have a two buttons with the same selector class. When I do this:
$('.my_button').click(function() {
console.log(1);
});
, and then click on the button it log 1 two times, like I clicked both buttons instead single. So my question is: There exists some way in JS to get only that button what I clicked, without assign unique selector like id. I am newbien in JS, so can somebody explain me? I found related issue here. Thanks!
Edit:
I make buttons a little bit different. And yes, it returns only single button, but why click trigger works two times. Console log log two times.
Every event listener receives the event, which carries the event target. Try the below example.
$('.my_button').click(function(e) {
console.log(e);
console.log(e.currentTarget);
console.log($(e.currentTarget));
});
use this inside your function code
$('.my_button').on('click',function() {
var tempContainer=$(this).parent();
alert($(tempContainer).html()); // you ll see that you are showing the code where exists your clicked button
});
Assign different id to your buttons
$(".my_button").on("click",function(){
console.log($(this).attr("id"))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="my_button" id="test" value="Test"/>
<input type="button" class="my_button" id="test2" value="Test-2"/>
Try this:
<button class="my_button">Content1</button>
<button class="my_button">Content2</button>
<script>
$( ".my_button" ).click(function( event ) {
console.log(1);
});
</script>
https://jsfiddle.net/nt9ryeyr/5/
Try this:-
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".p").click(function(e){
alert($(e.currentTarget).attr("value"));//button text on which you clicked
});
});
</script>
</head>
<body>
<input type='button' class="p" value='test'/>
</body>
</html>
if your html is like this
<button class="my_button">Test</button>
<button class="my_button">Test1</button>
then use this script
$('.my_button').click(function() {
if(this.innerHTML ==="Test")
console.log(1);
else
console.log(2);
});
or if your html is like this
<input type="button" class="my_button" value="Test"/>
<input type="button" class="my_button" value="Test1"/>
then use this script
$('.my_button').click(function() {
if($(this).val() ==="Test")
console.log(1);
else
console.log(2);
});
I want to Change the background colour on click . This is my code work that i tried.pls help me out :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function(){
$(#co).click(change()
{
$(body).css("background-color":"blue");
});
});
Css code
body
{
background-color:red;
}
Body code
<body>
<div id="co" click="change()">
hello
</div>
You're using a colon instead of a comma. Try:
$(body).css("background-color","blue");
You also need to wrap the id in quotes or it will look for a variable called #co
$("#co").click(change()
There are many more issues here. click isn't an HTML attribute. You want onclick (which is redundant). Try this:
<div id="co"> <!-- no onclick method needed -->
<script>
$(document).ready(function() {
$("#co").click(function() {
$("body").css("background-color","blue"); //edit, body must be in quotes!
});
});
</script>
You were trying to call an undefined method. It looks like you were trying to declare it inside the callback statement? I'm not sure. But please compare this to your code and see the differences.
http://jsfiddle.net/CLwE5/ demo fiddle
Try this
$("body").css({"background-color":"blue"});
$("#co").click(function(){
$(this).css({"backgroundColor" : "blue"});
});
The code below will change the div to blue.
<script>
$(document).ready(function(){
$("#co").click({
$("body").css("background-color","blue");
});
});
</script>
<body>
<div id="co">hello</div>
</body>
1.Remove onclick method from div element
2.Remove function change() from jQuery code and in place of that create an anonymous function like:
$(document).ready(function()
{
$('#co').click(function()
{
$('body').css('background-color','blue');
});
});
$("#bchange").click(function() {
$("body, this").css("background-color","yellow");
});
Change Background Color using on click button jquery
Below is the code of jquery, which you can put in your head tag.
jQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").addClass("myclass");
});
});
</script>
CSS Code:
<style>
.myclass {
background-color: red;
padding: 100px;
color: #fff;
}
</style>
HTML Code:
<body>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<button>Click Here</button>
</body>
Try below jQuery snippet, you can change color :
<script type="text/javascript">
$(document).ready(function(){
$("#co").click(function() {
$("body").css("background-color", "yellow");
});
});
</script>
$(document).ready(function(){
$("#co").click(function() {
$("body").css("background-color", "yellow");
});
});
body {
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="co" click="change()">hello</div>