When reloading the page, sometimes <li>Dagbladet</li> is rendered with a linebreak before "t", so it looks like:
Dagblade
t
<li>DN</li> is always rendered as:
D
N
I´d like to list each list element to the right for the previous one.
It´s positioned as it should when I don´t activate sIFR3.
All tips on how to use sIFR3 with to achieve this is highly appreciated!
The list should look like this:
Aftenposten Dagbladet Verdens Gang DN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>type-test</title>
<link rel="stylesheet" href="sifr/sifr.css" type="text/css">
<script src="sifr/sifr.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var cochin = { src: '/sifr3-r436/demo/cochin.swf'}
sIFR.activate(cochin);
sIFR.replace(cochin, {
selector: 'h1, h2, h3, h4, li',
css: '.sIFR-root { }'
});
</script>
<style type="text/css" media="screen">
ul li {
list-style: none ;
display: inline ;
}
</style>
</head>
<body>
<p>
<ul>
<li>Aftenposten</li>
<li>Dagbladet</li>
<li>Verdens Gang</li>
<li>DN</li>
<ul>
</p>
</body>
</html>
sIFR uses the width of the original element to fit the Flash text into. In your case, the Flash text is wider than the original element, doesn't fit and instead breaks into a new line.
The solution is to add some letter-spacing (through a .sIFR-active selector) to make the HTML text wider just for sIFR. Then when the replacement happens there'll be enough space to fit the Flash text.
use like this
sIFR.replace(test, {
selector: 'h1',
css: '.sIFR-root { color: #cccccc; width: 100%; text-align: left; letter-spacing:1;}',
wmode: 'transparent',
forceSingleLine: true;
});
forceSingleLine: true; will solve your problem.
I really think you need to be posting this on the SIFR Support Forums. This isn't a programming issue.
Related
I need to upload different text files each containing some popups.
I am using JQM 1.4.5 and I'm pretty sure I don't make any syntax errors.
My main program has a menu and the user can choose the text.
At this point, I have to upload the text file and the popup file related to that text.
All the attempts I've made using the '.load' function work for text but not for popups.
Can you give me some suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup Tooltip</title>
<link rel = "stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel = "stylesheet" href="style/style.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#t1").click (function(){
$("#corpus").load("text1/text1.html");
$("#pp").load("text1/popup1.html #popupBasic").enhanceWithin();
});
$("#t2").click (function(){
$("#corpus").load("text2/text2.html");
$("#pp").load("text2/popup2.html");
});
});
</script>
<style type="text/css">
a:link {color:red;
font-weight:bold;
text-decoration: none;
font-size:100%;
}
#tableMax{
border: 1px solid white;
margin:0 auto;
border-collapse:collapse;
}
#tableMax tr {border-bottom: 1px solid brown;
}
#tableMax td {padding: 18px 25px 18px 20px;
font-family: "Didot";
font-size: 20px;
background-color: antiquewhite;
color:black;
}
#tableMax td:nth-child(1) {
color:brown;
font-size:100%;
text-align:center;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="menu" style="display:block;">
<button class="ui-btn ui-btn-b ui-btn-inline" id="t1">text 1</button>
<br>
<button class="ui-btn ui-btn-b ui-btn-inline" id="t2">text 2</button>
</div>
<div id="corpus"></div>
<div data-role="popup" id="pp"></div>
</div> <!-- chiude content -->
</div>
</body>
</html>
<!-- text1.html> -->
<table id="tableMax">
<tr><td>1a</td>
<td>This text contains a popup
</td></tr>
<tr><td>1b</td>
<td>This text also contains a popup
</td></tr>
</table>
<!-- popup1.html -->
<p id="popup_1" style="background:lightgreen; color:#000; max-width:500px;">
This is the content of popup 1a.</p>
<p id="popup_2" style="background:lightgreen; color:#000; max-width:500px;">
This is the content of popup 1b.</p>
Here are some suggestions to achieve what You want:
Basically, IMHO it is better not to create and destroy again and
again a JQM widget. If possible, create just at the beginning all
needed widgets and change the content, i.e. text and images
when You need it.
In my example I will show You both: dynamic destroying and instancing
a JQM table and dynamic changing the content of one existing popup.
Please, note that for a JQM table the thead and th tags are mandatory.
In Your example, You may need to show some data related to a table
row, but in my example I will attach the popup data to a single cell.
I believe, this is a more flexible approach.
The simplest way to create such a relation is to set a custom
data-attribute. You can call it whatever You want. Just for instance,
data-info: popup
After that, the popup content will be retrieved from the clicked
anchor, just before the popup will be open.
For the menu, instead of push-buttons I am using radio-buttons,
so the code will be much simpler, using just one event handler.
Moreover, it will be nice if You tell the user that something is
going on, by using a spinner and a visual feedback after the table
data has been downloaded (table fade-in).
Here is the most relevant code:
$(document)
.ready(function () {
$('input[name=files]').on('change', function (e) {
var path = e.target.id, $table = $("#tableMax").hide().table("destroy");
$.mobile.loading("show");
$.when($.get(path + '/popup.html'), $.get(path + '/text.html')).done(
function (popupData, tableData) {
$.mobile.loading("hide");
/* each data[0] will contain the response text */
$table.html(tableData[0]).table({create: function() {
var allPopups = $('<div></div>').append(popupData[0]);
$(this).fadeIn("slow").data("mobile-table").allHeaders.each(function() {
$(this).data("cells").each(function(){
$(this).find("a[href='#pp']").each(function () {
var popupLink = $(this).attr("data-info"),
popupContent = $(allPopups).find(popupLink);
$(this).data("popup-content", popupContent);
});
});
});
}
});
});
});
})
.on('pagebeforechange', function (e, ui) {
var link = ui.options.link, ctx = link && link.context, hash = ctx && ctx.hash;
if (hash == '#pp') $(hash).empty().html($(ctx).data('popup-content'));
});
Here is a full workng DEMO: https://plnkr.co/edit/3IXDqQJMVn2QYOed?open=lib%2Fscript.js
I want to set custom fonts in Webview. I have implemented the below code:
#font-face {
font-family: 'Poppins-Bold';
src:url('file:///android_asset/fonts/Poppins-Bold.ttf') format('truetype')
}
body{
font-family: Poppins-Bold
margin: 0;
padding: 0;
color: red;
}
It works fine in android, but it does not working in iOS. Let me know if anybody has a solution for this.
Note: I don't want to use google's CSS font
Set the following font URL based on platform:
const fontUrl = Platform.select({
ios: "Poppins-Bold.ttf",
android: "file:///android_asset/fonts/Poppins-Bold.ttf",
});
Update your CSS styles to the following:
const css = `
#font-face {
font-family: 'Poppins-Bold';
src: local('Poppins-Bold') url('${fontUrl}') format('truetype')
}
body {
font-family: Poppins-Bold
margin: 0;
padding: 0;
color: red;
}`
Note that format('truetype') is used since your font extension is ttf. If you're using an eot font you'll need to use format('opentype').
Once you do that, update your WebView component with the following props:
<WebView
source={{ html, baseUrl: '' }}
originWhitelist={["*"]}
/>
Setting baseUrl to blank will ensure fonts are loaded. Reference this post.
Without setting originWhitelist, you'll get errors on iOS that the URL cannot be found.
This worked for me on both Android & iOS and I happen to be using Poppins as well 😁
I tried the solution outlined by German but this didn't work for me.
The only thing that got it working for me was by base64 encoding the font (you can use the service here), and injecting it that way, which is really annoying but it works across iOS and Android:
const pageHtml = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
#font-face {
font-family: 'Canela';
src: url('data:font/woff2;charset=utf-8;base64,${CANELA_BASE_64}') format('woff');
}
h1, h2, h3, html, body { font-family: Canela; }
</style>
</head>
<body>
${props.html}
</body>
</html>
`;
Then you can set up the WebView like this:
const webViewSource = { html: pageHtml, baseUrl: '' };
return (
<WebView
source={webViewSource}
originWhitelist={['*']}
/>
);
I have problems to set elements draggable using jQueryUI 1.12.1.
There is no problem, when draggable element is <div>, but when I switched it to the <input ... >, it does not move from place. I tried to disable element too in order to make it more "stiff", but it makes no difference.
The similarly pitiful outcomes I had with resizing <label> for <input>. I could move it on the screen, but I was unable to resize it.
Here is code I just copied from the page and made minor changes:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>resizable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#brick {
width: 100px;
height: 100px;
background: #ccc;
} </style>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label id="brickLabel" for="brick">Brick is stiff</label>
<input type='text' id="brick" disabled/>
<div id="goodBrick" style="width: 100px; height: 70px; background-color: #EF45fE"></div>
<script>
$( "#goodBrick" ).draggable();
$( "#goodBrick" ).resizable();
$( "#brick" ).draggable();
$( "#brick" ).resizable();
$( "#brickLabel" ).draggable();
$( "#brickLabel" ).resizable();
</script>
</body>
</html>
So where I do mistake?
I'm trying to style distributed nodes in Dart Polymer with no luck. I'm using the example at:
http://www.polymer-project.org/articles/styling-elements.html#style-distributed
as a starting point. However, I can't even get that working once ported to Dart. Here is my code:
<polymer-element name="test-element">
<template>
<style>
content[select="p"]::content * { /* anything distributed here */
font-weight: bold;
}
/* #polyfill p:first-child */
::content p:first-child {
color: red;
}
/* #polyfill footer > p */
::content footer > p {
color: green;
}
/* #polyfill :host > p */
::content > p { /* scope relative selector */
color: blue;
}
</style>
<content select="p"></content>
<content></content>
</template>
<script type="application/dart" src="testelement.dart"></script>
</polymer-element>
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="testpolymer.css">
<!-- import the test-element -->
<link rel="import" href="testelement.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>TestPolymer</h1>
<p>Hello world from Dart!</p>
<test-element>
<p>I'm red and bold</p>
<p>I'm blue and bold</p>
<footer>
<p>I'm also red</p>
<p>I'm green</p>
<span>I'm black</span>
</footer>
</test-element>
</body>
</html>
The output has no styling applied and is just black text for everything. Any ideas what I'm doing wrong?
polymer-elements polymer-flex-layout / polymer-flex-layout.css still use
::-webkit-distributed(p) {
color: red;
}
which also works in my recent version of Dartium.
I have no idea when the new selectors take effect.
Other polymer-elements that make use of this selector but have recently switched to ::content
polymer-ui-field
polymer-ui-menu-item
polymer-ui-nav-arrow
polymer-ui-pages
polymer-ui-sidebar
polymer-ui-toolbar
You can browse the history to find the previous webkit-distributed selector examples.
I guess they use Chromium which may be a little ahead of Dartium.
Foo.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="testStyle.css" />
</head>
<body>
The appearance of the text is good. This image should be centered, but it isn't:
<img class="centerblock" src="ice cream cone and dish.png" width="320" height="200"></img>
</body>
TestStyle.css:
body {margin-left:30px;}
body {margin-right:30px;}
.centerblock {
margin-left: auto;
margin-right: auto;
display: block;
}
Result:
Try:
.centerblock {
position:fixed;
top:10px;
left: 10px;
}
Maybe that can help, Although i don't know what can happen if you turn the phone.
I would make that main content area to fit to the edge of display and define all align properties for each element.
It's never very smart to do:
body {margin-left:30px;}
body {margin-right:30px;}
There is also option:
.main-container {
margin: 0 auto;
}
That also centers all the content but i think, also would not solve your problem.