I've been checking into some issues with Facebook Like Box plugins on websites my company manages, and have seen different behavior in the past two days. Can anyone help to explain if this is more likely an issue with Facebook, or the target profile/page settings?
I'll focus on the more obvious one here.
When the 'Show Faces' option is disabled and no Data-height is explicitly specified for the plugin, the area to display the Stream activities is reduced to 0 and all that is displayed is a double horizontal line.
Working from the Developers.facebook demo page
(https://developers.facebook.com/docs/reference/plugins/like-box/)
1) Enter a valid facebook Page for the address
-- Defaults should display with width=292, height blank, and all other options checked.
2) un-check 'Show Faces'
-- Like Box shrinks to only display Header, and the Social Plugin footer.
3) Enter a Height value ( anything above 150 px should display some area of content and the vertical slider again, but with the Like Box total height restricted to the height entered)
(I wanted to post this to Facebook as a Bug report, but could not find the correct steps to do so.)
Facebook must have changed something. This only seems to be affecting the HTML5 implementation of this plugin. Some other sites which I maintain, which use the iframe implementation, do not seem to be affected.
I just added a fixed 'data-height' attribute to the 'fb-like'box' div of the HTML5 implementation of the plugin - seems to have done the job.
Looks like they have changed (or broke) the default value for height from "300px" (I think that is what it was) and replaced it with the 120px which leaves no room for the stream. If you add faces it ups the default value and leaves room for the stream.
If you change the height of the box to say 600px (depends on what you want) then even with faces off it will show the stream.
For example if you goto: https://developers.facebook.com/docs/reference/plugins/like-box/
Then turn stream on and faces off (even on the default site of FB Dev) it will still hide the stream with no height specified. Then change the height to say 600px the stream will appear.
Feels like less of a bodge than the other method that Nathan mentioned (which I couldn't get to work anyway! :( LOL)
Hope this helps someone else. :)
Related
On my website, I have an area where a user can create a team profile page. On the top of this page, is a header area that is 960px width x 170px height. This header, I would like to make a customizable area (like a user WYSIWYG) for the users. They must add an image, but I would like for them to be able to size this image and place it wherever they desire. They can also put text at whatever size and location in this header they want, if their image does not take up the whole header.
Does anybody know if this is possible?
Thanks!
Yep, it's possible, but You will need to do some custom work for that kind of module. It is simple, but still i don't think You will find some free versions on JED
Okay... hey guys,
I hope you can help me solve this one, or maybe someone will be able to provide a comprehensible reasoning for the following.
The newer versions of the Opera and Firefox browser are forcing a reduced available width onto websites. I assume that's in order to fit their content better (with less unused space).
However, if a website's content exceeds the width of 1536 px (and your screen resolution is 1920 px in width), the available width is still capped at 1536 (a horizontal scrollbar appears).
I've prepared a demo as well:
http://r00t.li/test/opera_fittowidth_fckup.html
So I think it's a nice feature of those browsers to fit website content to the available width as it often improves the readability, but what on earth can I do if I want/need to utilize the full screen width?
I've toyed around with different meta tag viewport settings, but it hadn't have any effect. I guess that's for mobile devices only.
Ok, so after some more searching I found the culprit: the DPI setting of windows affects how these browsers display websites. For instance with a DPI of 125%, the Opera and Firefox browser try to apply this not just to their UI, but also to websites by rendering the content bigger (even though the website zoom in the browser is set to 100%), effectively decreasing the available pixel width.
As a web designer, one has apparently absolutely no control over this. And even if a user takes the time to change the windows DPI to 100%, it's not an acceptable solution. Granted, the websites look normal again, but the font-size of the windows UI is tiny - very hard to read.
But I don't want this to become a rant, so again; the solution is to change your windows DPI setting to 100%. This can be done like this:
Right click on the desktop and select Screen Resolution
Click on "Make text and other items larger and smaller"
Choose 100% and save your settings
Very sad that those browser developers made that decision... as if the 100 milliseconds it takes the user to hold Ctrl and tick the mouse wheel one or two times were too much.
At which level in Firefox the active zone around active areas (text and image hyperlinks) is defined ? I would like to experiment ways to extend them to ease the use of touchscreens for the web...
After discussions with some Mozilla folks, I tried to implement a solution using javascript with a Greasemonkey script available at http://www.splitted-desktop.com/~flepied/touchscreen/touchscreen.user.js. It tries to find the nearest link when you click on something that is not active.
The only way I know of is via the CSS property padding.
This is mostly not browser-specific, but determined by the layout information (in html or css). Basically, the area that the "link" element occupies is the clickable area. If you need a larger area, you have to make the element larger .. increase the text that is clickable, increase the font-size, increase padding (which might look strange).
I'm developing a Vista/Win7 Desktop Gadget that uses a translucent g:background (doc) area with g:text (doc) on top. I'm adding the text via addTextObject (doc), and this all works as expected.
However, I can't figure out how to set that text to bold style. There doesn't seem to be a way to do this directly via the exposed properties that I can see, and I can't use regular text + CSS in this case due to the fact this text is placed onto a g:background object.
I have also tried specifying a bold font directly, such as Arial Bold (doesn't work) instead of Arial (works).
So how can this be done?
Edit: I have tried setting font-weight:bold for both the body and the g:background object that parents my text; no luck.
See Flip Calendar, by Jonathan Abbott. His code is usually well commented so maybe you can get some ideas from that.
EDIT
The source of my information was from the early days of Vista Beta 2 where that was the official word from MS. I also found the following response to a thread on the MSDN forums regarding the Flip Calendar gadget itself:
http://social.msdn.microsoft.com/Forums/en-US/sidebargadfetdevelopment/thread/841e9d5e-32e9-453f-bd0e-dc5a4e607c33/
The gadget has options for setting bold font on the day of the month (a g:text object) but on closer inspection it doesn't work. Sorry about that. The MS guys have been known to be wrong as well on one or more occasions. I can honestly say that I don't use the g:text object.
This means your only (well, non activex route) option is VML text, which provides a lot of flexibility on layout. However, you will have to place it on a fully opaque area of the gadget which is probably why you wanted to use the addTextObject in the first place. Gary Beene's site really helped me out when I was getting started, but it doesn't go into any detail on the v:textbox element and the v:textpath element, though the MSDN documentation goes into enough detail on these.
If you need to place the text on a non-fully opaque area of the gadget, then you could still go the VML route and place an image behind the text that acts as a shadow, starting out fully opaque and fading to fully transparent. This is how Microsoft does text in window title bars with aero enabled.
Alternatively, you could create an ActiveXObject that draws the text you need in the font you want and saves the image to a temporary file in the gadget folder. Then you set that to the src of an addImageObject. I've done something similar in a gadget and it's fast enough not to be noticeable. You can also set min/max dimensions so shrinking/stretching to fit becomes a breeze.
I'm working with Course Management System Moodle and in the admin the folder tree (which uses folder icons) displays for about a second the alt attribute given (In this case "Open Folder") then it hides and shows the image when the image is ready.
The system is kind of slow so I assume Firefox thinks at first that the images don't exist.
This is a problem because during that split second the layout stretches to fit the wider words making it look unprofessional in my opinion.
Is there a way I can hide this tag without having to remove the alt tags? (which would be labor intensive) maybe using JQUERY or CSS.
displays for about a second the alt attribute given (In this case "Open Folder") then it hides and shows the image when the image is ready.
Yes, that's what alt text is for: it provides a textual alternative for when the image isn't available — whether that's because there's an error, or images are turned off in the browser settings, or, in this case, the file just hasn't arrived yet.
Is alt text really what you want? Unless the image in question actually contains the words “Open Folder”, the above is inappropriate alt text. If we're talking about one of those little plus/minus icons that opens a tree, a better alt text would be ‘+’. “Open folder”, as a description of what the image does (as opposed to what it contains), would be better applied to the ‘title’ attribute used for tooltips.
Note that if you're using Quirks Mode and the image has a fixed size specified, Firefox will use a ‘broken image’ icon with the alt text overlaid and cropped inside, instead of the plain alt text on its own. This is to match IE's old behaviour. But you don't really want to use Quirks Mode, and in the common case where the fixed size is small, the cropping makes the alt text unreadable and useless.
This is a problem because during that split second the layout stretches to fit the wider words making it look unprofessional in my opinion.
I'd recommend: getting over it. That's how the web rolls, any page can move about a bit as it renders progressively. For images you should only ever see it happen once, then the image will be cached and will appear straight away. If it doesn't, there's something wrong with the cacheing setup.
Depending on what kind of layout you are talking about, you can perhaps fix that to not respond to the changing image size, too. For example if using a table, setting “table-layout: fixed” on the table and “width: (some number of)px” on the top row's image cell will make it stick to that width even if the text inside is smaller. Possibly causing the alt text to run over into the next cell though, mind.
If the images are part of the layout, I'd recommend moving them to CSS. You should also optimize your images wherever possible whether they are CSS or otherwise. You could also move your JavaScript files to the bottom of the page where possible as they block parallel downloads. In general, applying a lot of the techniques here would probably help.
If the images have to be a certain width, give them an explicit width.