I'm using Twenty Eleven theme of WordPress.
In other themes, there is no problem but in twenty eleven there is a problem with Facebook like button's comments popup window. it's half shown. when I click "Like" button, the view is like below:
You can see the website at: http://www.deneyimokulu.com/
I use Facebook plugin for Wordpress. How can I fix this problem?
You have a span element right before the iframe of the like buttons.
<span style="height: 20px; width: 85px;">
Try change this to:
<span style="height: 20px; width: 450px;">
or add the width to the below element:
.fb_iframe_widget span {display: inline-block; position: relative; text-align: justify; vertical-align: text-bottom; width: 450px !important; }
Related
I am using Ionic Framework to build an Android Application. I need to display horizontally scrollable cards. Each card will display a product image, product title, product price and a button. I tried using ion scroll in x-direction, but cards doesn't seem to scroll in x-direction.
I tried using this plugin, but it seems like it can be use only with ion-pane and i am using ion-content.
In the meanwhile, i found another solution -
<div class="cardHolder">
<ul>
<div>
<img ng-repeat="feature in featured track by $index" ng-src="{{feature.featured_image.source}}" class="examplePic" >
</div>
</div>
CSS
.cardHolder {
height: 200px;
width:100%;
padding: 8px;
margin: 6px;
}
ul {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.examplePic {
height: 150px;
width: auto;
border:1px solid black;
margin: 2px;
}
The issue with this solution is that, I am only able to retrieve the image and not the other details.
You should look into ionic's built-in ion-scroll. Your code would look something like this. Also checkout this example
<ion-scroll direction="x">`
....your scrollable content here...
</ion-scroll>
Also checkout this example
I am using OpenCart 1.5.6 and a version of the YooResponsive theme.
When I am in my shopping cart and choose to Estimate Shipping, I add my state/zip and click the button and I get a popup box that is too small.
Both the right side and the bottom are cut off. The HTML code on the live site is:
<div id="colorbox" class="" style="padding-bottom: 57px; padding-right: 28px; top: 456px; left: 653px; position: absolute; overflow: hidden; width: 572px; height: 343px;">
If I use firebug to change width: 572px; height: 343px; to width: 600px; height: 400px; it looks correct but I can't seem to find anywhere in the code to make these changes.
This looks like it is hard coded rather than brought in from a css file.
In my cart.tpl I have the following javascript code:
$.colorbox({
overlayClose: true,
opacity: 0.5,
width: '600px',
height: '400px',
href: false,
html: html
});
This code seems to be setup right but why is it not displaying at the correct size?
It also does this with the Terms and Conditions link that shows up at the end of the checkout process. I imagine that if I check other pop-up boxes it would do the same.
One thing I noticed was that for both pop-up boxes (which are different sizes) the measurements that change are exactly the same as the padding in the HTML code (padding-bottom: 57px; padding-right: 28px;). So the height is always 57px smaller and the width is always 28px smaller. If I use firefox to change the padding in the HTML code above it does nothing to make it display correctly, only by changing the height and width does anything change.
Any help would be much appreciated.
Nevermind, I got it! I had a stylesheet attached to the site that was changing the box-sizing
The code was:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And I just added this code to the stylesheet.css to override it:
#colorbox {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
I am completely flumoxed on this one. I have a Facebook button that seems to be hidding the overflow but only on the y axis???
You can see it live here: www.new.thebespokeflorist.co.uk/blog just scroll down and mouse over the facebook icon below a blog post.
The facebook button is held in a div:
<div class="share-facebook social-noshow" onclick="toggleSocial()">
<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="lucida grande"></div>
</div>
The CSS is:
.social-show { width: 60px; overflow: auto; }
.social-noshow { width: 0px; overflow: hidden; }
.share-facebook { background: url('http://www.new.thebespokeflorist.co.uk/wp-content/themes/V3 TBF/images/blog/fb.png') left bottom no-repeat; height: 20px; float: left; padding: 0 0 0 30px; transition: width 0.25s ease 0s; }
.share-facebook:hover { width: 90px; transition: width 0.25s ease 0s; overflow: visible; }
The onclick() java is:
<script>function toggleSocial() {
var noShow = document.getElementById("social-noshow");
noShow.classList.toggle("social-show"); }</script>
As far as I can tell the button is croping within the span width of the facebook button itself which is 71px. If I increase the span width I can see more of the comment box.
Does anyone have any idea what is causing this?
I have also tested loading the facebook button elswhere on the site and I have the exact same issue.
Ok figured it out. I had further up in my CSS a 'fix' for Iframes that made them 100% span. Removing that fixed my problem.
I have a css menu that works well in most desktop browsers, but I have had issues get my drop down menu to work on IPad and Iphone. Here is the site in question: http://bakersfield.kernhigh.org/
I am quite new to css and javascript, so any help would be great.
Thanks
Currently, iOS does not support :hover, so your navigation will not unfold in iOS as it does on a desktop.
Have you considered jQuery Mobile? I would only suggest that if you were developing a seperate mobile version, though.
Otherwise, you could use this jquery (you must also include jQuery then):
$('nav li').bind('touchstart', function(){
$(this).addClass('hover');
}).bind('touchend', function(){
$(this).removeClass('hover');
});
This will add a class (hover) upon the touch, and remove it upon removal of the finger.
You will of course have to edit this for your needs. I only say this because you say you are new to javascript and I don;t want to confuse you.
Drop down menus can suck, especially making them work with touch screen devices since you can't 'hover' on a touchscreen. This is how I do my drop down menus, it is pure CSS, and I have tested it on chrome, ff, ie7+, safari, iPhone and multiple Android (of course, you will want to tweak colors and sizing):
HTML
<div id="navigation">
<ul id="nav">
<li><a href="index.html>Home</a></li>
<li>Drop Down <!--Notice didn't close the li yet->
<ul>
<li>Drop Down Item</li>
<li...../li>
etc...
</ul>
</li>
<li>Another Drop Down</li>
<ul>
...
</ul
</li>
</ul>
</div>
CSS:
#nav {
display: block;
text-align: center;
font-size: 1em;
position: relative;
height: 3em;
width: 950px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
}
#nav li {
float: left;
display: block;
width: 75px;
height: 3em;
position: relative;
}
#nav li a {
text-decoration: none;
display: block;
height: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
#nav li a:hover {
color: #990000;
background-color: #999999;
}
#nav li ul {
width: 100%;
display: none;
z-index: 9999;
position: absolute;
}
#nav li ul li {
display: block;
clear: both;
width: 100%;
height: 100%;
background-color: #B5BDC8;
}
#nav li:hover ul {
display: block;
}
The idea behind all of this is to create a list, then inside that other lists to create the drop down elements....
Then, from there, display only the primary list items to begin with, then show the drop down menu on hover (or in the case of a mobile device on click by making the main list item a link to "#" thus creating and active/hover state)...
The only issue is that by using display:none it isn't screen reader friendly, however I always include site navigation at the bottom that is screen reader friendly, and SEO friendly as well.
You can see an example of this in action on this website I am working on here
In general, drop down menu's such as this usually aren't good practice to have for mobile sites. This is because you can't really hover over a navigation item with your finger, and pressing an item could prove difficult without zooming in on the menu.
A solution is having different CSS styles for your navigation when being viewed on a mobile device. Here is a great resource for helping you convert your navigation to be more mobile friendly:
http://css-tricks.com/convert-menu-to-dropdown/
I am working on FB Send button and implementing it on a new site. The problem is the flyout that FB display on the click of Send button is below the Send button. Can anyone let me know how can we set the "flyout" (dialog that appears on clicking the send button) can be customized to be displayed above the send button and not below it.
Thanks in advance!
I too wanted to add this button to the right of the page, had problems moving the iframe so that is was visible so instead decided to open the send button in a dialog window. http://developers.facebook.com/blog/post/514/
You will need to use the JS SDK to do this, and also provide a button or a link that will trigger the send dialog to open. Here is some example code to make a link look like a send button
HTML
<a class="fb-send-button"><i></i><span>Send</span></a>
CSS
.fb-send-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
color: #3b5998;
-moz-outline-style: none;
text-decoration: none;
background: #eceef5;
border: 1px solid #cad4e7;
display: inline-block;
padding: 4px 5px;
white-space: nowrap;
padding: 2px 5px;
font-family: 'trebuchet ms', sans-serif;
font-size: 11px;
}
.fb-send-button:hover {
border-color: #9dacce;
text-decoration: none;
color: #3b5998;
}
.fb-send-button span {
line-height: 14px;
line-height: 13px;
}
.fb-send-button i, .fb-send-button img {
float: left;
height: 14px;
margin-right: 3px;
width: 14px;
}
.fb-send-button i {
background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png);
background-position: -1px -47px;
}
Javascript
FB.ui({
method: 'send',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/'
});
You will need to already have the Javascript SDK loaded on your page, and will need to either put the above JS in the anchor tag in an on click attribute, or preferably adding it using your own Javascript.
The best solution I've tried so far is this:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -45px !important;
}
This temporary solution moves the pop-up box to a somewhat centered position under the Send button, which makes it accessible on the mobile.
This is how it looks like on an iPhone (notice it's still too a bit too wide for mobile):
http://s16.postimage.org/3xeep2uo5/foto_1.png
Same page viewed in a PC browser:
http://s16.postimage.org/nukby1dj9/xotc_browser.png
Notice the small arrow on top of the popup is now no longer aligned with the Send button (due to my css). Notice how it switches position to be on the left or right side of the popup, depending on where it's viewed (mobile or PC browser).
(I tried it on a Lumina 920 as well, but gave the same issue as iPhone)
This Facebook plugin doesn't allow you to specify a custom css file like some of the older ones do so it will be pretty tough to change the appearance aside from messing with the iFrame style/size. Your css changes won't apply to the iframe content Facebook renders because it is hosted on a different site so cross-domain restrictions will apply.
I had the same problem and used the following to solve this problem:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -290px !important;
}
Try to play with left, top, right, bottom values as you want it to be placed.