in my blog I add a fb like box. but I would like to change the background colour from transparente to white. can anybody help me?
this is the java script
<div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
and this is the code for plug in
<div class="fb-like-box" data-href="http://www.facebook.com/paritambo" data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
thank you
Your FB likebox is transparent. You can wrap it with a div and specify a color for the wrapping div and it will change the color of the background
Even though this is an old question, I think I can explain this and others might find it useful.
When you get the Facebook like box code from Facebook developers, it is already wrapped inside a div element with class name "fb-like-box".
Now, just modify your style-sheet to customize this div.
You can modify its background-color and size like any other div, but not its inner content.
Hope this helps you.
Related
Im writing a python script which reads from a file and plots graphs in seperate html files with plotly.I would like to have a button to redirect from one page to another(load from disc).I've come across this :
updatemenus = list([
dict(type="buttons",
buttons=list([dict(label = 'Next',method = 'update', args = ['shapes', []])])
)])
layout=go.Layout(title="Iteration_Number:"+str(counter_iter),updatemenus=updatemenus)
But this is used for updating data or changing layout. What i want is open another html page from disc on button click. Is that possible ?
I have also seen this :
import webbrowser
url = "file:///home/tinyOS/Simulation_"+str(counter_iter+1)+".html"
webbrowser.open(url)
Which helps me open a new page but again i want it to happen when clicking on the button.Any ideas? Thanks a lot !
From the question I understand that you want a group of buttons on the plotly graph, that are going to open a plotly graph in new tab.
So you need not use plotly buttons for this requirements.because they are mainly used for restyle, relayout, etc., so there is no relation between these buttons and opening links in new tabs.
I would recommend having simple html buttons which on click are going to take you to the new tab.
A simple way to do it will be, wrap the plot in a div set to relative positioning and make the div wrapping the button absolute positioned and position it anywhere over the graph, please refer the below example and let me know if this solves your issue!
Solution:
import plotly.plotly as py
import plotly.graph_objs as go
import plotly.offline as py_offline
from IPython.core.display import display, HTML
py_offline.init_notebook_mode()
display(HTML("""
<style>
.wrapper{
position:relative;
}
.button-group{
position:absolute;
top:40px;
left:90%;
z-index: 30000;
}
.button-group a{
display:block;
}
</style>
"""))
What is happening in the above piece of code is, first we include the necessary packages, then styles needed!
data = [go.Bar(
x=['giraffes', 'orangutans', 'monkeys'],
y=[20, 14, 23]
)]
display(HTML("""
<div class="wrapper">
<div class="button-group">
Google It
Yahoo It
</div>"""
+str(py_offline.plot(data, filename='plot_name' ,output_type="div", include_plotlyjs=False))
+ '</div>'))
The main piece of code, with which we embed the buttons is shown above, first we define the plotly plot , then using display and html functions, we can embed the buttons inside a div with class button-group and with CSS we position that button.
Please do try the above code and let me know if there are any doubts regarding the working!
I need a help. I followed this tutorial https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-line-graph-using-data-from-mysql-table-and-php.
I managed to start chartjs-plugin-zoom.
Now i want to add button "Reset zoom"
I fallowed this tutorial:
Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
But when i add right after $.ajax({}); in app.js
$('#reset_zoom').click(function() {
mycanvas.resetZoom();
})
and press the button error is displayed:
app.js:131 Uncaught TypeError: mycanvas.resetZoom is not a function
at HTMLButtonElement.<anonymous> (app.js:131)
at HTMLButtonElement.dispatch (datatables.min.js:15)
at HTMLButtonElement.r.handle (datatables.min.js:15)
Can you give me an advice?
Kind of surprised this hasn't been answered yet. I remember running into this myself a while back. You are doing the same thing I was doing..
Effectively what you're doing is trying to run the .resetZoom() function on an HTML canvas element. You need to do this on the chart object, not the canvas element.
YouTube video walking you through it: https://www.youtube.com/watch?v=tWlENvyr9cY
Working CodePen: https://codepen.io/vpolston/pen/MWGVmrX
A couple examples of what not to do..
document.getElementById('myChart').resetZoom() // vanilla JavaScript
or even
$("#myChart").resetZoom() // jQuery
What you actually need to do is tack the .resetZoom() onto the Chart object from when you instantiated the chart. So in your code here:
const myChart = new Chart('myChart', {}
Whatever you set the variable to when you created the chart is what needs to have the .resetZoom(). So this would work:
myChart.resetZoom();
Now to make that a clickable button we can create a function. That function accepts whatever the chart Object was named.
JS
resetZoomBtn = (chart) => {
chart.resetZoom()
};
and then in our HTML we call that function and pass whatever you called the chart when you instantiated it as the parameter.
<div class="chart-container">
<canvas id="myChart"></canvas>
<button onclick="resetZoomBtn(myChart)">reset zoom</button>
</div>
Hopefully that helps anyone who views this question since it comes up at the top of the search results on Google. I know chances of it being marked 'answer' four years later are slim.
Thanks,
VP
not sure but seems I've read this is the unofficial forum to use for Facebook developer questions (and no doubt the source for many solutions in general).
I've recently tried to add a like and comment plugin to the end of my articles on an online newspaper, however, nothing shows up on any browser. I created it as an app (for app id purposes) and created a page for said app.
I've generated the code via this link ( https://developers.facebook.com/docs/plugins ).
Like button example:
added the API call just below the body tag...
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=XXXXXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
...
and the required html tags...
<div class="fb-like" data-href="http://mywebsite.com/article.php?num=<? echo $number; ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
I get the following errors via chrome's console...
1)The endpoint used to load this resource has been deprecated.
Please update to the current Facebook JavaScript SDK.
https://developers.facebook.com/docs/reference/javascript/
FB.Share:53
2) Invalid App Id: Must be a number or numeric string representing the application id. FB.Share:53
3) The "fb-root" div has not been created, auto-creating FB.Share:53
4) FB.getLoginStatus() called before calling FB.init().
Any ideas as to why this is happening would be great. I can provide a live link, but preferably only if necessary.
Looks like the old method I was using stopped all calls to the Facebook API. The following line was the culprit...
<script src="static.ak.fbcdn.net/connect.php/js/FB.Share"; type="text/javascript"></script>
I know there are many threads on this subject; I read them all (I think) and none of them is an answer to my problem, so here goes:
I want a facebook 'like' button om my website; the kind which invites the liker to add a comment. It is working 'a bit', but not the way I'd expect. I use a special fb-account for testing and found that:
The fact that I 'liked' my webpage shows up under 'actions', but NOT under 'likes'.
The 'comment' gets lost (is not published). Consequently, the 'like doesn't show up in the timeline. (From FB's documentation, I gather that 'likes' are published on the timeline only if a comment was added. And indeed, it seems to work that way when I click the like-button on other websites and add a comment.) Consequently, it doesn't show up on the 'newsfeed' of my 'friends' either.
What did I do wrong?
Of course I used the FB debugger (the 'linter') to make sure my webpage passed all tests.
I used the iFrame version as well as the javascript version of the button, but that doesn't seem to make a difference.
I used the code as generated by fb's own code-generator (that is the xdbml-version using javascript), as well as iFrame code from other code-generators. Finally, I copied the exact iFrame-code from another website, which DOES exactly work as expected (that is: the like action shows up in the timeline with the provided comment and the 'like is added to my set of 'likes'.) I just replaced the URL with my own, taking care it is properly url-encoded. But this code, while clearly working for someone else, is not working for me: I get the same disappointing result.
There is, in fact, another difference still: when, in facebook, I click on the link of some other website I 'liked' I am immediately taken to that website and the page I 'liked'. But when I click on the link to my wn website, I first get a 'warning' dialogue-box, informing me of the dangers of clicking links. For the life of me I can't understand why these differences in behaviour occcurr.
A hint that something is wrong may be (?) that on my website, when the 'comment-box' appears after clicking the button, it doesn't close when I click 'publish'; instead the box stays visible until I click 'close'.
Here is the code I use:
Meta-tags:
<meta property="og:title" content="Modern soefisme - Modern Sufism" />
<meta property="og:description" content="Home Page of Mabel van Asperen, devoted to sufism, sufi acivities and sufi literature" />
<meta property="og:type" content="non_profit" />
<meta property="og:url" content="http://www.phlogiston.nl/speeltuin/" />
<meta property="og:image" content="http://www.phlogiston.nl/speeltuin/images/hearts_with_wings.jpg" />
<meta property="og:site_name" content="Sufi Stuff" />
<meta property="fb:admins" content="100000985117039" />
<meta property="og:locale" content="en_US" />
The iFrame:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww%2Ephlogiston%2Enl%2Fspeeltuin%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
The xfbml-version:
<script Language="javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://www.phlogiston.nl/speeltuin/" data-send="true" data-width="450" data-show-faces="false"></div>
Can anybody shed some light on this? I would be most grateful, as I'm getting rather frustrated since 'everybody' seems to be able to make a well-functioning like-button but I can't. (And I'm also getting tired of the fact that 'experimenting' seems to be so difficult: after clicking the like-button once I can't use it again. So, for each try I have to make up a new webpage. Or does someone know a better way?)
I'm not really sure if this will solve your problem but try changing the overflow css value in the iframe to something other than hidden.
The facebook reference for the like plugin states:
When I click the Like button, the popup window (or "flyout") doesn't
show. Why?
If the Like button is placed near the edge of an HTML element with the
overflow property set to hidden, the flyout may be clipped or
completely hidden when the button is clicked. This can be remedied by
setting the overflow property to a value other than hidden, such as
visible, scroll, or auto.
As far as 'unliking' your like button, its hard to see but if you move your mouse cursor to the left side of the like button, a grey 'x' will appear.
Click on that and you will unlike.
Hope that helps!
I'm having a tough time with this too so your not alone! I can't seem to get the pop up from the like button which allows me to share a link in my feed. I keep getting this 'Unknown RPC service: widget-interactive' error. Wish it was easier.
I have the following output.
<img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre1.jpg" />
There are same outputs with centre2.jpg etc.
Now I want to replace this centre1.jpg to hover.jpg when I hover.
But when I use the following it becomes centre1hover.jpg
$(".centreimg").mouseover(function() {
var hoverimg = $(this).attr("src").match(/[^\.]+/) + "hover.jpg";
...
Something is wrong with match(/[^.]+/) + "hover.jpg part.
How can I do this?
Thanks in advance.
Don't you think this would be easier:
var newSrc = oldSrc.replace(/[^\/\.]+\./, 'hover.');
Anyway: you shouldn't use Javascript for hovers =) If there is another way: use it. Not only is it a bad practice, it's also not user friendly: when the image loads when you hover, the user will see a 'flash' because the entire image still has to be loaded = not pretty.