I used this fb like tag
<fb:like href="http://www.facebook.com/favoritebibleverses" send="false" width="300" height="30" show_faces="false" font="" ></fb:like>
and I wanted to center it's content.
I've tried these but nothing works properly
<fb:like href="http://www.facebook.com/favoritebibleverses" send="false" width="300" height="30" show_faces="false" font="" text-align="center" ></fb:like>
<fb:like href="http://www.facebook.com/favoritebibleverses" send="false" width="300" height="30" show_faces="false" font="" style='text-align:center;' ></fb:like>
You will need to encapsulate the code in a div in order for it to work. Center the div and the content contained inside will be centered as a result. I believe that fb:like results in an iframe being created which prevents it from being centered without a surrounding div.
Alternatively, you may also use the <center></center> tags in order to center the content.
Related
I am working on a Nativescript-vue app, and am having a strange problem with the Image component not sizing correctly.
I am trying to use stretch="aspectFill" to correctly size an image for a component. It works initially when live previewing in the ios simulator, but when you next render the component it reduces size to fit the space rather than aspectFill. My component code is below.
<StackLayout>
<Image :src="promo.image" stretch="aspectFill" height="200" />
<StackLayout class="promocontainer" row="1" padding="0">
<GridLayout columns="*,*" class="region">
<Label col="0" :text="promo.region" />
<Label col="1" :text="'$' + promo.price" textAlignment="right" />
</GridLayout>
<Label :text="promo.inclusions_heading" class="heading" />
<Label :text="promo.heading" padding="10" textWrap="true" class="tagline" />
<Label :text="promo.introText" padding="10" textWrap="true" class="text" />
</StackLayout>
</StackLayout>
When you change the strech option, the live preview in ios show the intended behavior as shown below
When interacting with the app, navigating away from this page and back, or previewing on a physical ios device, the image is show as below, instead of the intended aspect filled image as above.
I am hoping someone has run into this before and might be able to assist with working out a solution.
The component was being added to a ListView, which was causing the rendering issues above. I resolved this by instead wrapping the components in a ScrollView and StackLayout. This solved the stretch rendering issue straight away.
Original code with stretch bug:
<ListView for="promo in promos" #itemTap="onPromoTap">
<v-template>
<PromoListItem :promo="promo" />
</v-template>
</ListView>
Solution:
<ScrollView>
<StackLayout>
<PromoListItem margin="10" v-for="promo in promos" :key="promo.heading" :promo="promo" />
</StackLayout>
</ScrollView>
It looks like ListView calculates it's item sizing differently, and is not compatible with Image stretch, at least when there is other content involved.
I´m trying to populate a CustomListItem cell in SAPUI5 with an image from my project´s source folder, but it is not showing on the cell. It is placed directly in the WebContent folder: App/WebContent/TEST.jpg, and the view code:
<Page title="View" showNavButton="true" navButtonPress="onBack">
<content>
<CustomListItem type="Inactive">
<Image src="{TEST.jpg}" class="content" />
<Button text="Press me!" class="content" />
</CustomListItem>
</content>
</Page>
the button is being shown in the first cell of the list (where the image should be), but not the image, does anyone know how can I fix it?
You need to change the url path in the src property. If you enclose it in the brackets ({}), SAPUI5 expects a property binding path which in you case is invalid.
So replace this,
<Image src="{TEST.jpg}"
with
<Image src="TEST.jpg"
I have this svg
<svg viewBox="0 0 462 40" height="40" width="462" id="lol-text-1" class="lol-text__svg">
<desc>Created with Snap</desc>
<defs>
<linearGradient x1="0" y1="0.3" x2="0" y2="0.8" id="Sikjr46ql1nr">
<stop offset="0%" stop-color="#cbac62"/>
<stop offset="100%" stop-color="#66481f"/>
</linearGradient>
<mask id="Sikjr46ql1nz">
<text x="0" y="35" class="lol-text__mask" style="" fill="#ffffff">Pentakill</text>
</mask>
</defs>
<g style="" mask="url('#Sikjr46ql1nz')">
<text x="0" y="35" class="lol-text__shadow" style="" fill="#ad986a">Pentakill</text>
<text x="1" y="36" class="lol-text__text" style="" fill="url('#Sikjr46ql1nr')">Pentakill</text>
</g>
As it says in the svg code, it was created with snap.
Here is the html tag used to generate the svg:
<span class="lol-text" style="display: none;">Pentakill</span>
I asume that the style="display: none;" was inserted after the svg was generated.
What i need is an example on how do i generate the same svg from an html tag using snap.svg or svg.js
Thank you!
Snap.svg will help you generate graphics, but it can also work with existing SVG. This means that your SVG content does not necessarily have to be created with Snap.svg, you're also free to manipulate graphics created with tools like Adobe Illustrator, Inkscape, or Sketch.
Here are some examples, which you can also find on the Demo section of their website.
<html>
<head>
<meta charset="utf-8" />
<title>Sample snapsvg</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
var snap = Snap(912,912);
var headline = snap.paper.text(56,100, ['The Three Layers','of','Every Web Page']).attr({fill: '#FBAF3F', fontFamily: 'Impact'});
}
</body>
</html>
here you can see the output
UPDATE
if you want to know more about it with example.
http://www.sitepoint.com/create-infographic-using-snap-svg/
I have searched a lot to find what I wanted and I found exactly what I was looking for.
Here is the code and an example: text gradient generated with snap.svg
I have this img slideshow that changes when I click.
I would like no effects when the image change, like it used to be in the old jquery-cycle, but instead I get a strange effect of 2 images overlapping each others until the second one finally appear and the first then disappear.
<div class="imgCyclerBody">
<div><img class="sortArrow" src="~/Content/imgs/arrow-left.png" alt="left"/></div>
<div id="slideshow" class="cycle-slideshow" data-cycle-fx="none" data-cycle-hide-non-active="true" data-cycle-prev=".prev" data-cycle-next=".next">
<img alt="Item" src="~/Content/imgs/image1.png" width="30" height="30" />
<img alt="Item" src="~/Content/imgs/image2.png" width="30" height="30" />
<img alt="Item" src="~/Content/imgs/image3.png" width="30" height="30" />
<img alt="Item" src="~/Content/imgs/image4.png" width="30" height="30" />
<img alt="Item" src="~/Content/imgs/Pixels.png" width="30" height="30" />
</div>
<div><img class="sortArrow" src="~/Content/imgs/arrow-right.png" alt="right"/></div>
</div>
Does anybody knows how to avoid this problem?
I moved from the old jquery-cycle to the new one becaue I had a problem with my DIVs format when I used fx: 'none'.
Thanks
Have you tried using the easing plugin?
This doesn't appear to be having an issue on my fiddle.
<div class="cycle-slideshow"
data-cycle-slides="li"
data-cycle-fx='none'
data-cycle-speed='700'
data-cycle-timeout='7000'
data-cycle-pause-on-hover="true"
data-cycle-prev=".prev"
data-cycle-next=".next"
data-cycle-easing="easeOutBack"
>
I am adding a class value to sc:image but when it renders it doesnt show up correct. Here how it looks like in HTML without render:
<a href="/">
<sc:Image ID="Logo" runat="server" Field="Header Logo" class="logo" />
</a>
But when it renders to the webpage it shows up like this:
<a href="/">
<img src="/~/media/logo.png" alt="" width="196" height="34">
</a>
However, I want to accomplish something like this:
<a href="/">
<img src="/~/media/logo.png" alt="" width="196" height="34" class="logo">
</a>
How should I approach this problem?
One way to apply a class to the image would be to place the CSS class at a higher block level that is not a web control, perhaps on a wrapping DIV. This might allow you to leverage styling across the whole block and not just the image itself.
To apply the class directly to the IMG tag, you should use the CssClass property of the Image control so that it will render out as a "class" tag:
<a href="/">
<sc:Image ID="Logo" runat="server" Field="Header Logo" CssClass="logo" />
</a>