Facebook LIKE button hiding when page is already LIKED by user - javascript

I'm trying to create a page on my site where the Like button should be hidden if the user already likes the page. If I can't hide it, then maybe there's a way to get a callback when the like button is rendered with a user who already likes the page. This way I can hide/reveal the iframe myself.
Any clues?
Howie

Assuming you can echo the ids of the like buttons to the page for the likes you want hidden/get from a JSON call.
var hideLikes = ["#like1", "#like2", "#like3", "#like4", "#like5"];
var hideLikesSelector = hideLikes.join(",");
$(hideLikesSelector).hide();

You should not hide the Like button as you're suggesting. It is against Facebook policy to hide it after the user has liked the thing in question, you should give them the opportunity to unlike it if they chose to do so.

#Graphain, why are you commenting? You have no valid input.
#Others, I have been trying this too and had it working by looking at the opacity of certain tag's classes but it no longer works again. You can make an api call to /me/likes and go through the returned array to look at each name or id...
Hope that helps.

Related

Added an Image"A". Want to Display the image in div"A" , div"B" and div"C". How?

-
I am making an order form with a review page.
when order form is fully filled, then it automatically send each data to
each div on the review page. This is what I want.
I know I can copy a data into another div by using javascript like
<script>
function filling() {
var something = $('#input').val();
document.getElementById("divbox").innerHTML = something;
}
</script>
but when it's not a data that can be displayed with text(for example, an image or a video), then how can I send the data into another div?
Thanks to digging really hard the internet, I found an open source contact form with the image attachment function. what's cool about this is, when I attach an image, it resizes and show to client-side.
(http://webreflection.blogspot.kr/2010/12/100-client-side-image-resizing.html)
So, I am modifying this into an order form, and I want, when a client attach an image, it shows to the client the resized version of it, and it also shows in the div on review page.
How can I do this?
getElementbyClassName or Name did not work because of the "auto resizing script"
-
I'm sorry for my english being to poor. and thank you for your patient to have read this last line. Have a nice day.
Few ways:
<script>
function filling() {
var something = $('#source').html(); // Can be some element, like another DIV
$("#divbox").append(something);
}
</script>
Depending on what you need, can also use clone() (https://api.jquery.com/clone/):
function filling(){
$("#source").clone().append("#divbox");
}

Passing a model to an added to DOM popup window in Grails

Here is the problem:
I have a page e.g www.app.com/home and I have some windows that are added in a slide way to the DOM via jquery. One of those windows has the functionality of looking into a gmail account for contacts.
This is done in this way:
User is in the home page.
Clicks the search Friends button, and a window with many options
slides in (added by jquery, rthe content is in another .gsp)
Clicks the option gmail and it redirects to googles oauth,
permissions and account selection, where he must accept the access
to his/her contact list.
Once accepted, it redirects to my home page again, where I have a
var to know if its the callback from google, so I ran the script
that shows the popup again.
The problem Im having, is that from the home page itself, I can access the model passed by the controller that has the ${friendList}, but when I add some code to the popup window, the ${friendList} is not detected.
I have used grails render templates to solve this problem in the past. You can have a hidden div that jquery unhides when it is popped up. e.g
<div id="theSlideWindow" style="display:none">
<g:render template="gsptemplate" collection="${friendList}" var="myfriend" />
</div>
Now when the button is clicked, jquery will unhide the div and animate it however you are animating it. Now this is not very efficient depending on the size of friendList because it is loaded with every refresh.
But you can still make jquery load work by doing the following:
add user id to a hidden input.
<input type="hidden" value="${userid}"/>
use jquery so send the id as a param:
$('button').click(function() {
var page = "gspurl/show?userid=" + $("#hidden").val();
$("div").load(page, function(response, status, xhr) {
//do something here
});
return false;
});
In your gsp use userid to load friendList.
Another alternative would be to use a controller that returns html or json instead of a gsp.
Obviously, there several different ways of passing friendList around but hope this gives you some ideas.

jquery, replace html on submit

I have a form which is using a select list to jump around my site. This is currently using onclick window.location so user selects the page and presses go and it goes to that page.
I now need to add a small text box for the user to type in a code (say 123456) and then when they click go, it should go to the url selected, but with the [CODE] being the number entered in the box. I discovered jquery replaceAll so it gave me the idea to have this in the select html:
http ://jumptothispage.com/parts/p[CODE]/edit
http ://jumptothispage.com/jobs/j[CODE]/edit
When you press go, it would replace all [CODE] in that html with the code entered and then jump to that page selected, e.g.
http ://jumptothispage.com/parts/p123456/edit
http ://jumptothispage.com/jobs/j123456/edit
I am already using jquery on my site so makes sense to try and utilize that again. I'd appreciate a pointer and or other suggestions instead.
Thanks,
Paul.
A workaround: Store the code in a cookie, so at least it's not visible to every person who looks at the URL bar. Then in every onclick, fit it into the URL to send the user to the "right" page.
Or, have your select option's value literally read CODE, which your onclick interprets to mean "The user hasn't set the code yet." When the user types in the code, store it in a variable (in the example below, realcode), and you can then do this:
$('select#navigation option').each(function(idx, el) {
$(el).attr('value', $(el).attr('value').replace(/CODE/, realcode));
});

onclick event - call a button using something other than id

I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->
<input type="submit" value="Continue">
Is there anyway I can call to this by using the value of 'Continue'?
FYI: the button is coded with php and I want to rerun the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function resizePole(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
and I am attempting to call this using:
onclick="return resizePole();"
Oh and I know next to nothing about javascript :)
Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later
link to site
What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.
This will work.
$('[type="submit"][value="Continue"]').click(function () {
{
return resizePole();
});
EDIT
As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).
$('[type="submit"][value="Continue"]').click(resizePole);
EDIT 2
To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.
$('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);
EDIT 3
This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).
$('[type="submit"][value="Continue"]:last').click(resizePole);

Get Element in div with JavaScript

I want to disable/enable a button with JavaScript. Because the JavaScript is called, after a Flash animation is rendered, the button exists at the time of the execution.
The button is in a hierarchy:
<html><body><form#form1><div#control><asp:Button#Export1>
I tried for hours to get a reference to that button, but nothing seems to work:
document.getElementById("Export1")
// and
document.getElementbyId("form1").getElementById("control").getElementById("Export1")
// and many more
How to get a reference to that button (in order to change btnref.disabled = true)?
Thanks a lot for your help!
Have you tried right-clicking in the document and selecting "view source" to see how that code actually renders? An asp:Button is a server control, that gets translated to an input field during render. During this, the ID of the field will not be exactly what you set it to in your aspx.
You can use Export1.ClientID at serverside to get the ID of the control.
If it's the only button in your div, this should work:
var btnref = document.getElementById("controls").getElementsByTagName("button")[0];
Usually the id of the button won't stay the same in the page source. Click on view source in the HTML and look for that tag to find the new id. You can then use that id in something like:
document.getElementbyId("Export1_some_unique_id")...

Categories