I have implemented sIFR for the first time, on a test page. The code I have is below. It works fine in IE7, Firefox, Safari and Chrome, but in Opera only the first line of sIFR-ed text appears when the page first loads and after refreshing the page. But, if I scroll the page, all the text appears! It seems to have to do with transparency, because if I turn transparency off, it works fine.
Please can someone help me to make this work?
Thanks,
Gary
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />
<link rel="stylesheet" href="all.css" type="text/css" media="all" />
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var sIFRfont = {
src: 'fontname.swf'
};
sIFR.activate(sIFRfont);
sIFR.replace(sIFRfont, {
css: [
'.sIFR-root { line-height: 1em; font-size: 64px; color: #000000; background-color: blue; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }'
],
fitExactly : true,
forceClear : true,
forceSingleLine : false,
selector : 'div.flashtext',
transparent : true
});
//]]>
</script>
Ditch SIFR for Cufon, even Shaun Inman is not using SIFR himself anymore. He uses Cufon :) http://cufon.shoqolate.com/generate/
Don't know, but transparent Flash movies can have issues. You sure you need transparency?
Related
Here is the part of my code in which I have problems. I can't understand why the Placeholders are not seen. It's not the problem of the browser (I open another HTML here and placeholders work). Please, hint what can be wrong.
<form id="form" action="https://jsonplaceholder.typicode.com/posts" class="contacts__form">
<input name="Имя" type="text" placeholder="Имя*" data-validate-field="name"
class="contacts__form-input form-name" autocomplete="off" id="name">
<input name="tel" type="tel" class="contacts__form-input form-phone" placeholder="Телефон*"
data-validate-field="tel" data-validate-rules="phone" autocomplete="off" id="tel">
<button class="btn-reset contacts__form-btn" id="submit-btn">Заказать обратный звонок</button>
</form>
Head:
<link rel="shortcut icon" href="img/flavicon.png" type="image/png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/choices.min.css">
<link rel="stylesheet" href="css/accordion.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.min.js"></script>
<script src="js/choices.min.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/scroll.js"></script>
<script src="js/painters-buttons.js"></script>
<script src="https://unpkg.com/just-validate#latest/dist/just-validate.production.min.js"></script>
<script src="js/inputmask.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU" type="text/javascript"></script>
<script src="js/ymaps.js"></script>
scripts at the end of the body:
<script src="js/focus-visible.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<script src="js/slider.js"></script>
<script src="js/select.js"></script>
<script src="js/accordion.min.js"></script>
<script src="js/accordion.js"></script>
<script src="js/validation.js"></script>
<script src="js/validation-rules.js"></script>
CSS:
.contacts__form-input {
width: 270px;
height: 50px;
border: 1px solid #333333;
border-radius: 100px;
}
.form-name, .form-phone {
margin-right: 20px;
}
::-webkit-input-placeholder {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: var(--dusty-gray-color);
}
::-moz-placeholder {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: var(--dusty-gray-color);
}
:-moz-placeholder {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: var(--dusty-gray-color);
}
:-ms-input-placeholder {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: var(--dusty-gray-color);
}
.contacts__form-btn {
margin-right: 69px;
padding: 12.5px 35px;
padding-right: 36px;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: var(--amethyst-color);
border: 2px solid var(--amethyst-color);
border-radius: 100px;
}
I tried to change font-family, changed var to normal bright color, and even inserted the code from another HTML, where the placeholders are seen. Nothing works.
The problem turned out to be simple. I have already used placeholder for the a search input above in the code. This link helped Multiple styles for input placeholder text
All is solved.
I'm going crazy here. I thought I had a handle on Polymer styling, but alas.
I've got:
<my-app>
<sign-in>
<core-overlay>
In sign_in.css I style:
core-overlay {
background: red;
}
But it doesn't work!
My sign_in.html is:
<link rel="import" href="../../../../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../../../../packages/core_elements/core_overlay.html">
<polymer-element name="sign-in">
<template>
<link rel="stylesheet" href="sign_in.css">
<core-overlay id="overlay" class="overlay" layered backdrop opened="false" transition="core-transition-center">
<span id="message">Please sign in to comment.</span>
<button class="signin-btn" id="facebook-signin" on-click="{{signInWithFacebook}}">Sign in with Facebook</button>
</core-overlay>
</template>
<script type="application/dart" src="sign_in.dart"></script>
</polymer-element>
The backdrop and core-overlay elements are created dynamically as child of <body>. To style it you add the following css to your entry page CSS
backdrop
<style>
body div.core-overlay-backdrop {
background: red;
}
</style>
overlay
* /deep/ core-overlay {
box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
overflow: hidden;
background: green;
padding:30px 42px;
outline: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
The overlay css is copied from https://github.com/Polymer/core-overlay/blob/master/demo.html#L38-L49.
The core-overlay demo uses a custom Polymer element x-dialog to encapsulate the core-overlay and the CSS.
I'm having issues with my website rendering on iOS devices. I have an iframe that wont scroll on iOS devices at all (testing on iOS 5.1.1). Here is the site: http://pixel2html.sitesbycoop.com/fanwu/ I just need help on this one...I've tried to -webkit-overflow-srolling:touch; on every parent element possible. Please help, I'm more than happy to give more info if needed.
I'm using jquery to load the iframe in from a click function into the following code:
Markup of iframe container on main page:
<div class="overlay">
<div class="frame-container"></div>
</div>
Markup of Iframe Template
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fan Wu | Welcome</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/foundation.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/port-set-viewer-styles.css" type="text/css" />
</head>
<body class="port-set">
<div class="row" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
<!--content and more markup -->
</div>
</body>
</html>
CSS
.overlay{
position: fixed;
background: rgba(0,0,0,0.9) url('img/loader.gif') no-repeat center center;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
z-index: 100;
display: none;
}
.frame-container {
width: 100%;
height: 100%;
}
.frame-container iframe {
position: fixed;
top: 0px;
z-index: 1000;
border: none;
transition: opacity 1s;
left: -100%;
height: 100%;
width: 100%;
}
.frame-container iframe.active{
opacity: 1 !important;
left: 0;
}
JS
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".image-box").click(function(e){
/* Store link into variable, href */
var href = jQuery(this).find("a").attr("href");
/* Activate overlay */
jQuery(".overlay, body, .close").addClass("active");
/* Set iframe's src attribute to the stored href */
jQuery(".frame-container").html('<iframe style="opacity: 0;" width="100%" height="100%" src="'+href+'"></iframe>');
/* Animate iframe into view */
jQuery('iframe').load(function(){
jQuery(this).addClass("active");
jQuery(".overlay").addClass("remove-graphic");
});
e.preventDefault();
});
jQuery(".close").click(function(e){
jQuery(".overlay, .frame-container, iframe, body, .close").removeClass("active remove-graphic");
e.preventDefault();
});
jQuery(function(){
jQuery(".image-box").preloader();
});
});
I have a position absolute div in the body of an html file. I want it to obey the body-margins. Find my code at http://jsfiddle.net/vHApr.
The following is my code:
<html>
<head>
<style type="text/css">
body{
margin: 50px;
background-color: #ddd;
color: #222;
font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
min-width: 1080px;
padding-top: 50px;
}
div.test{
position:absolute;
right:0px;
top:55px;
}
</style>
</head>
<body>
<div class="test">
TEST
</div>
</body>
</html>
Add position:relative for body – then the absolute descendant element will be aligned to the edges of body, and not to the viewport (which happens for absolutely positioned elements with no positioned ancestors).
try this
div.test{
position:absolute;
}
Updated jsFiddle http://jsfiddle.net/vHApr/3/
I am having a bit of trouble with IHtmlElementCollection used from Delphi XE2. My document looks something like this, and I load it into TWebBrowser.
<!DOCTYPE html>
<html>
<head>
<title>Test av skjema</title>
<script type="text/javascript" src="Header.js" ></script>
<style>
body{ font-family: 'Segoe UI'; font-size: 9pt; }
table{ background-color: silver; width=98%; }
td{ background-color: white; vertical-align: top; padding: 2px; }
.fullWidth{ width: 100%; border: 0px solid white; }
.noFrame{ border: 0px solid white; overflow: hidden; width=100%; }
.Header{ font-weight: bold; }
.Question{ font-size: 9pt }
.HelpText{ font-size: 8pt; color: navy; }
</style>
</head>
<body>
<form>
...
</form
</body>
</html>
When I try to iterate over all elements in the document using the IHtmlDocument2 interface, the "all" property will only contain the elements up to the script, for a total of 5 IHtmlElement objects. After that, there are no more elements to find.
However, when I remove the tag:
<script type="text/javascript" src="Header.js" ></script>
the iterator will once again find all elements of the file, which is a great deal more. Does anyone know why this happens?