I'm looking at the new Twitter Follow Button (https://twitter.com/about/resources/followbutton), but unfortunately my sidebar is smaller than the default size, thus throwing my whole site out of whack.
Is there an easy way to hack the script to resize the button, or at least to put a line break between the actual follow button and the account name?
If you look at the page source, then your twitter code converts from
<div class="twitter">
<!-- twitter code here -->
</div>
to
<div class="twitter">
<iframe ...>...</iframe>
</div>
Now it's easy to change the width of the button via css:
.twitter iframe {
width: 80px !important;
}
I'd wrap the button in a container with a nice class name and use CSS to adjust the styling.
.twitter-button-container{
width: 100px;
height:100px;
}
Something like that.
UPDATE
On second thought, it seems that the image is a background image to the anchor tag. I don't think it's possible to resize background images using CSS etc. You'd need to have the image in an img tag.
Related
I am using font awesome icons in my HTML.
Heres what that looks like
<button type="button" ng-click="authenticate('facebook')"><i class="fa fa-facebook-official fa-5x"></i></button>
Here's what the button actually looks like...
I want it to just be the icon.
Is this possible?
This is because every browser add their own CSS rules. You can solve it by removing border, background and padding from the button element:
button {
border: none;
background: none;
padding: 0px;
}
Also take a look at some css libraries like "normalize.css" or "reset.css" to remove any CSS rules defined by your browser.
Use CSS to re-position the background image and make the button width and height smaller.
Edit.
Just had a look into fontawesone and the icons are created using an actual font and not a background image. I would therefore look at Alejandro RodrÃguez's answer.
I want to embed Wanelo's share button.
This is the embed code:
<a class="wanelo-save-button"
href="//wanelo.com/"
data-url=""
data-title=""
data-image=""
data-price=""></a><script async="true" type="text/javascript" src="//cdn-saveit.wanelo.com/bookmarklet/3/save.js"></script>
When I embed it, I get this button:
I want to replace that button with their icon, which looks like this:
Being new to JS, I am unable to understand how I can swap that button from being generated and have this icon be in it's place while still making the share feature work.
Here's their link: http://wanelo.com/about/buttons#save-button
My JSFIDDLE:
http://jsfiddle.net/VCG8c/
Please point me in the right direction.
The button is being loaded dynamically via JS with inline CSS. So in the anchor tag, do this:
style="background:none !important;"
Ok, here is a the updated version of your fiddle, all nice and working. Basically, the little JS snippet at "save.js" changes your anchor by adding an appropriate background image (in this case, the rectangular button that says "Wanelo"). So, that will need to be replaced inline - this will change the background image to the one you want. Of course, the default CSS style associated with "wanelo-save-button" looks like crap, so you'll need to make some stylistic changes in a custom class.
The JS:
setTimeout(function(){
//Get the anchor element
var anchor = document.querySelectorAll('a.wanelo-save-button')[0];
//Change the backgroundImage property
anchor.style.backgroundImage = 'url("http://i.stack.imgur.com/X0r5e.png")';
//Add an appropriate CSS class for styling
anchor.className += ' myCheckerBackground'
}, 3000);
And the CSS:
a.wanelo-save-button.myCheckerBackground{
height: 88px;
width: 101px;
background-repeat: no-repeat;
background-size: cover;
}
You'll notice that I used "setTimeout." This is due to a limitation on jsFiddle. In the production environment, you'll want to place your custom js file AFTER save.js loads, then in THAT file create a DOMContentLoaded listener to make sure the first Wanelo image has loaded before you modify it.
<a class="wanelo-save-button" href="//wanelo.com/">
<img src="whatever image you want here" alt="">
</a>
<script async="true" type="text/javascript" src="//cdn-saveit.wanelo.com/bookmarklet/3/save.js</script>
Works.
I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.
I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/
How can I set the direction of the facebook "flyout" on the like or send button. We currently float our facebook social plugins on the right side of the page. But, when someone opens the facebook "flyout" it opens right, expanding the page when ideally it would open to the left.
Example: http://compfight.com
I promise, we don't need you to like the site:) Any help would be greatly appreciated.
<div class="side-right">
<fb:like href="http://compfight.com" send="true" layout="button_count" width="150" show_faces="false" action="recommend" font="" class=" fb_edge_widget_with_comment fb_iframe_widget">
</div>
The class side-right has a float:right; and text-align:right attached to it.
Try adding this style to your page:
<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
}
</style>
You can HIDE the flyout if need be, as in Firefox where the flyout can push the content out of position (we had a LIKE button in a jQuery slider in a sidebar, and each LIKE clicked was pushing the sidebar image out of the frame.
Using Andrew's CSS from the post above, I found that a simple display:none did the trick.
<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
display:none;
}
</style>
That precented our content from being forced upwards and out of frame.
No support for this at the moment as everything is within an iframe and out of your app's control.
Subscribe to the official bug to get updates on the issue:
https://developers.facebook.com/bugs/1420124294938118/
You can't customize the location of the fly out window but see my alternative here.
Facebook send button flyout
does not do it automatically?
http://jsfiddle.net/Zf7mY/
example with
.fb-like { float:right; }
I just added fb like to div with overflow:hidden...
Add comment to your like is not so important to destroy your web design, you want that like, comment is just bonus ;-)
I have an image viewer using a js module called "cloud zoom."
It works wonderfully and seems to be just what I need. Except! It messes up the viewer when I try and center the IMG in a div.
Here is my unfortunate example. Roll over the image and you will see that the mouse and the view don't match up. It works fine if I were to remove the auto margin style on the IMG. I just need that image in the middle of the div.
http://forumgallery.rollinleonard.com/test2.php
Please help!
Something like this seems to work okay in IE8/Chrome.
<div style="display:inline-block; margin: 0 auto 0 auto">
<img src="/small.jpg" alt='' title="Optional title display" />
</div>
Remove the auto margin from the IMG
Add the auto margin to the A tag enclosing the IMG
Set the A tag to display: inline-block