I have a Facebook 'Like' button on my page:
<div class="fb-like" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"/>
I also have the 'fb-root' div and the SDK javascript (the button functions just as it should).
For some reason, when the like button is toggled on (occurs when the visitor is connected to his Facebook account AND had already liked my page before) the button will magically reduce its width (in some last second javascript) and make the other buttons (twitter/g+) hide it. It aligns just fine for a second and then 'collapses'.
I tried disabling my css and many other components of my site, to no avail.
I attached an image illustrating the situation.
EDIT: Something I just found out. The width attribute is the one that seems to be overridden. When setting width = 2000 (rediculusly high), when the like button is enabled (user is not connected/not liked), the button is indeed 2000px wide, but when a previously-liked user is connected, you can see the 2000px width for a second there, and then it 'collapses' again.
EDIT2: I seem to have found the culprit, but I don't know why and how to fix it. It seems the generated code in the toggled on facebook button sets the width to 72 instead of 100.
Generated code for enabled button:
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 20px; width: 100px;">
Generated code for liked(diabled) button:
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 21px; width: 72px;">
Any help would be much appreciated.
Thank you!
Well, I ended up adding this to my CSS:
div.fb-like > span {
min-width:100px;
}
Probably not the best way, but it is working for now.
You could try to use
<div style="width: 100px;"></div>
to wrap around your code. usually the plugin will automatically adapt to the width of its parent element on page load.
If the width of parent element is smaller than your data-width, it could cause your Facebook button to shrink. This could be the reason why your button size changes.
Related
hope you are all safe and well.
Have inherited a SaaS/web based 'design online' website, and it runs okay for our small business, before I have plans for a full Magento2 build, however there is a 'show more/show less' function I would like to get rid of on the product pages. See here, for example:
https://black-rhodium.co.uk/Products#!/products/bolero-s
can drop blocks of code in, but don't have an option in the back end of the web based site builder to turn this 'see more/see less' feature on and off.
Can any of you guys help me with a snippet of code to force it to disappear, so I just have the block of text for the product description to display as normal in full, on page load?
have already tried the below, to no avail
<div class="ws-clamp-text-show-hide {display: none;}">Show more</div>
<div class="ws-clamp-text-show-hide {display: none;}">Show less</div>
Have also tried !important and 1/0/0/0 on the above, and that hasn't worked either.
Have placed in body, body2, head, footer, none has worked.
can delete this in opera inspector, to give me the result I want, with the entire product description there:
<div class="ws-clamp-text-show-hide focus">Show less</div>
Although, nothing I add will essentially override it.
someone could help me out, that would be appreciated. Many thanks.
Just to fully understand.. do you want to hide
<div class="ws-clamp-text-show-hide">Show more</div>
and
<div class="ws-clamp-text-show-hide">Show less</div>
using CSS?
if so, try,
<div class="ws-clamp-text-show-hide" style="display: none">Show more</div> same for the show less one.
Other CSS alternatives would be:
width: 0; height: 0;
visibility: hidden;
opacity: 0;
But I think that in your case you'll have to remove the function from the backend.
I've added the appropriate js link from pinterest in the appropriate place on my website, and checked all the known errors and still can't seem to get the pin it button to appear on the images of my site.
Thanks for any help. Here is the page live on my personal website:
http://lancebeaudry.com/lindsay/
I've noticed:
<div>
<img src="images/img1.jpg" class="slider-img">
</div>
<!----far away---->
<a class="..." title="Pin it!" data-pin-log="button_pinit_floating" data-pin-href="//www.pinterest.com/pin/create/button/?..." style="top: 110px; left: 1895px; z-index: 8675309; display: block;"></a>
Change that to:
<div>
<a class="..." title="Pin it!" data-pin-log="button_pinit_floating" data-pin-href="//www.pinterest.com/pin/create/button/?..." style="top: 110px; left: 1585px; z-index: 8675309; display: block;"></a>
<img src="images/img1.jpg" class="slider-img">
</div>
Fixing the slider can be kind of complicated, but I tell you about the process I'd follow.
Go to https://github.com/kenwheeler/slick/blob/master/slick/slick.js and download it locally.
The error is most probably related to the swiping effect, so you could try to set swipe: false, where you define the slider image container $('.slider-for').slick({
If that doesn't work reiterate the process with any variable set in the _.defaults or _.initials = { that deals with mouse events.
Furthermore, if that doesn't work identify the part of the code that detect the mouse and change the cursor look. Comment it out. If it works notify the author of your findings.
Hope it helps.
Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>
Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.
In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.
I'm having the strangest problem with jQuery's hide() and show() functions.
The site I'm working on (development build) is here
On the page, you'll see a product under Featured Products called Hydrate. This product has some flavor options so what I want to do is make it so that when the user clicks the Add to Cart button it shows a layer that is by default hidden. See the two screen shots here:
However, when I click the Add To Cart button, the layer does not appear. The Firebug screenshot below shows what the elements look like after I've clicked the Add To Cart button.
Notice that the element style is "display: block" as per the jQuery norm, which then should override the CSS element style for "display: none". I've done this hundreds of times, if not more and this is the first time it hasn't worked. Now look at the Firebug screenshot below. If I click the red slash-circle next to display:none in the debug console, the layer appears exactly as it should.
Below are the snippets of what I believe are relevant code, but I can't see where the problem is.
CSS Code:
.carouselProduct {float:left; border:2px solid #e9e9e9; width:223px; min-height:242px; margin:18px 2px 0 2px; position:relative; overflow:hidden;}
.productOptions{
position:absolute;
bottom:0px;
left:0px;
width:211px;
background: url('../images/black_background_75.png');
z-index:99999;
padding: 6px;
height:170px;
display:none;
}
JS Code:
$(document).ready(function(){
$.noConflict();
jQuery('.add_to_cart_btn').live('click',function(e){
e.preventDefault();
$(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'} });
});
jQuery('.choose_options').live('click',function(e){
e.preventDefault();
jQuery('#options_'+jQuery(this).attr('rel')).show();
});
});
Note: I thought maybe there was some way that something was interfering so I implemented noConflict but it didn't make any difference. Also note that I'm not getting ANY JS errors in Firebug.
HTML Code:
<article class="carouselProduct">
<!--productContent starts here-->
<article class="productContent">
<img class='productImage' src="/uploaded/thumbnails/db_file_img_33_autox126.png" style="margin: 3px;">
<hgroup>
<h4>Hydrate</h4>
<h3>$25.00</h3>
<h3 class="orange">$15.00</h3>
</hgroup>
<strong>Key Benefits:</strong>
<ul>
<li>Proper electrolyte balance</li>
<li>Reduce muscle fatigue & cramping</li>
</ul>
</article>
<!--productContent ends here-->
<!--productOptions layer starts here -->
<div class="productOptions" id="options_1">
<div class='selectbox1'>
<label>Flavor</label>
<select class='my-dropdown' name='product_options[4448804864d703e8b696c3fa7713aa23]'>
<option value='Fruit Punch'>Fruit Punch</option>
<option value='Orange'>Orange</option>
</select>
</div><br>
<article class="product_btn">
<a class="yellow_btn" rel="1" title="Add To Cart" href="#" onclick="return $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'},onSuccess: function(){ close_layer(1) } })">Add To Cart</a>
<a class="gray_btn" title="View More" href="#" onclick="close_layer(1)">Cancel</a>
</article>
</div>
<!--productOptions layer ends here -->
<!--product_btn starts here-->
<article class="product_btn">
<a class="yellow_btn choose_options" title="Add To Cart" href="#" rel="1">Add To Cart</a>
<a class="gray_btn" title="View More" href="/shop/product/intensity-hydrate">View More</a>
</article>
<!--product_btn ends here-->
</article>
Note that there are two Add To Cart buttons. Only the last one in the code here (the one that shows up initially) has the "choose_options" class on it. Also, on the Cancel button inside the overlay, I have call to a function called close_layer that passes the id in and then runs the jQuery hide() function which also doesn't work.
I've tried everything I can think of. I've disabled other JS and CSS and still it doesn't work. I've console logged everything and added alerts. It IS running the function because it adds the element display style to the hidden div but something isn't letting it override the CSS file.
Any help would be greatly appreciated.
On your page, there are more than one divs has the same ID - 'options_1'. So your code only change one of them. If you do want to show all of them, then you can do it as below:
jQuery('div[id=options_'+jQuery(this).attr('rel')+']').show();
The issue i feel is being cause by specificity
element.style has higher specificity compared to .productoptions because the property is part of the style attribute
Even if you apply the class to the element element.style will be given preference. .
The better option for you is to Remove the style attribute from your HTML..
Add the display:block inside a class..
.block
{
display : block;
}
<div id="options_1" style="display:block">
should now look like
<div id="options_1" class="block">
Now use .addClass() and .removeClass() to specify your logic.
It seems your DOM is messed up. Perhaps you have a missing tag somewhere or something?
Anyway I visited your page and when I change:
jQuery('#options_'+jQuery(this).attr('rel')).show();
to
jQuery('#options_'+jQuery(this).attr('rel')).show().appendTo(jQuery(this).parent())
everything is fine.
I had a similar problem and after debugging found that I had forced 'display: inline-block !important' in one of the places which was overriding my hide(). Could you check if the !important is used anywhere in the CSS that can be related?
I am using the facebook like button on a page with a red gradient background. I would like the text inside this share button to be white not the dark blue that it currently is (the "be the first of your friends to like this" text):
I'm not sure how to go about this though. This is the code used to generate the button:
<div class="fb-like" data-href="<current page's url here>" data-send="true" data-width="360" data-show-faces="false" data-font="arial"></div>
The code generated according to firebug is this:
<div data-font="arial" data-show-faces="false" data-width="360" data-send="true" data-href="<current page's url here>" class="fb-like fb_edge_widget_with_comment fb_iframe_widget">
<span>
<iframe scrolling="no" id="f29d650aad23b3a" name="fc2a4f4faf238e" style="border: medium none; overflow: hidden; height: 29px; width: 360px;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=271291652883209&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df28525cd54eb78%26origin%3Dhttp%253A%252F%252F<current page's url here>&extended_social_context=false&font=arial&href=http%3A%2F%2F<current page's url here>%2Ftag%2Fzach-galifianakis&layout=standard&locale=en_US&node_type=link&sdk=joey&send=true&show_faces=false&width=360"></iframe>
</span>
</div>
Any ideas how to make that text white?
According to Facebooks TOS Item IV. 7. d.
“You must not obscure elements of the Like button or Like box plugin.”
http://developers.facebook.com/policy/
If you go to this page you can make it dark.
Under Color Scheme you can chose "dark".
https://developers.facebook.com/docs/reference/plugins/like
Here is a blog entry where someone disguises the like button.
http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/
One option is to simply hide the like button and instead just create your own. Then you'd bind a click event on your custom button that simply triggers a click event on the actual, hidden Like button.
I highly suggest you try Anders solution first, as it may be the quickest and simpler solution for your situation, since you can freely change the background image.
But this article will tell you exactly how to even point a css file with your own rules for the facebook box. there's even a demo:
http://line25.com/tutorials/how-to-add-a-custom-facebook-like-box-to-your-site
Good luck =)