Can someone please explain how can I implement text-transform: uppercase; feature with sIFR 3?
On the doc, it explains how to use it but I really don't know how to implement it. Can someone provide an example?
Specifes text transformation. This is
handled by sIFR because Flash does not
support this natively. It is applied
to all text, if you want to apply it
to a specific element you'll need to
use the modifyContent function. If
sIFR.forceTextTransform is false, sIFR
will not perform the transformation.
Thanks
You would add the text-transform property to the CSS rules in the css property of the options object passed to the sIFR.replace method (phew!).
An example:
sIFR.replace(myFont, {
selector: 'h2',
css: '.sIFR-root { font-size: 20px; color: #008cba; text-transform: uppercase; }',
wmode: 'transparent'
});
Related
If in a font-size: CSS attribute you encounter font-size: 14px/19px, that's the same thing as saying font-size: 14px; line-height: 19px, isn't it?
If so then why aren't the following two paragraph tags the same height?:
http://www.frostjedi.com/terra/scripts/demo/line-height.html
First of all, you have font-size: 14px/19px; which is invalid. I think you mean font: 14px/19px; But this is still wrong...
When using the CSS shorthand for font, you cannot omit the size or family values.
Try font: 14px/19px Arial;
See the Omitted Mandatory Values section of http://www.impressivewebs.com/a-primer-on-the-css-font-shorthand-property/ for more info.
In my application.css file I am encountering errors when I have my code inputted below. The h1.title code will execute but the h1 code will not. It may be worth mentioning that in my application the h1.title is above the h1. However, I can get it to work if I insert the h1 code directly after the h1.title code (Repeating myself with the h1 snippet). I don't want to do this as I would like to keep my code DRY. This seems trivial but I have wrestled quite a bit with it and made no progress.
h1 {
color: maroon;
font-size: 150%;
font-style: italic;
display: block;
width: 100%;
border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
margin: 0 0 1em;
padding: 10px;
width: 98.5%;
background-color: orange;
color: white;
border-bottom: 4px solid gold;
font-size: 2em;
font-style: normal;
}
If you add the code directly in application.css, it will appear at the top of the compiled file (I assume your css files are compiled into one). My guess is that other css files included in your application.css overwrite h1 css atrributes.
Use inspect option in your browser (IE, Firefox, Chrome etc. have one built in nowadays) and see where the h1 gets it's attribute values from.
I am trying to click on a link using webdriver but it throws me a ElementNotVisibleException saying "Element is not currently visible and so may not be interacted with"
My WebDriver code:
addProgram.click();
addProgram refers to an anchor element. This is populated by annotating #FindBy(how= How.LINK_TEXT, using="Add Program"). In other words it is similar to driver.findElement(By.linkText("Add Program")).
My HTML is:
<div class="form_btn">
<a href="/program/addProgram">
<span>Addrogram</span
</a>
</div>
It starts working when I remove the css declaration from the above div. The dive has a hover style, may be that is the one causing the problem.
CSS:
.form_btn {
float:left;
background:url(/bg_button_right.gif) no-repeat scroll top
right;
color: #fff;
display: block;
height:22px;
font: bold 10px arial;
margin-right: 0px;
margin-top:2px;
padding-right: 4px; /* sliding doors padding */
text-decoration: none;
}
.form_btn span {
background:url(/assets/images/provider/bg_button_left.gif) no-repeat;
display: block;
float:left;
line-height:18px;
padding: 2px 5px 5px 10px;
font-size:11px;
}
.form_btn a{
color:#fff;
}
.form_btn a:hover{
color:#fff;
text-decoration:none;
cursor:hand;
}
I have trawled the web trying to find a solution but none has worked. Any suggestions/help is greatly appreciated.
Thanks,
Chris.
(UPDATE) This issue was resolved and should be available since Selenium 2.4.0
Sounds like you ran into the same bug as I did:
http://code.google.com/p/selenium/issues/detail?id=1445
the work-around is to get the element inside the link and click.
re-writing your code:
driver.findElement(By.linkText("Add Program")).findElementBy(By.tagName("span"))
I just solve this error while using capybara in ror project by add " Capybara.ignore_elements = true " to features/support/env.rb
Working from #Zernel's solution, the following solves for ror project using capybara.
Add Capybara.ignore_hidden_elements = true to the file config/environments/test.rb
Using texts is not always the good methodology.
Try this:
driver.findElement(By.cssSelector("div.form_btn > a[href*='addProgram'] > span")).click();
Always Use CSS, It performs better than XPath.
i've borrowed some code from link text to nest tabs using jq
everything is ok 'cept I cannot work out to center the tabs
using the YUI library, this is v easy. However, I can't use the YUI library coz my command of JS is negligible and fitting my php to their code is murderful and a time-waster.
are there ways to center jq tabs ?
Tom
You can add a bit of styling:
.ui-tabs .ui-tabs-nav { float: none; text-align: center; }
.ui-tabs .ui-tabs-nav li { float: none; display: inline; }
.ui-tabs .ui-tabs-nav li a { float: none; }
Source - Richard Worth
Make sure to include this after the jQuery UI style-sheet so it overrides, you can see a demo here.
If you can't use a stylesheet and must do this in code, use .css(), like this:
$("#tabs").tabs();
$(".ui-tabs .ui-tabs-nav").css({float: 'none', textAlign: 'center'});
$(".ui-tabs .ui-tabs-nav li").css({float: 'none', display: 'inline'});
$(".ui-tabs .ui-tabs-nav li a").css({float: 'none'});
I inherited a site that uses sIFR 2.0.7 and for reasons beyond my control upgrading to sIFR3 is unlikely.
I have a div with text that is successfully being replaced with sIFR. The text is fairly large and should wrap to the next line, but instead it is scaled down by sIFR. Without sIFR it wraps correctly.
I've searched both the documentation on 2.0.7 and other threads without much luck. Tried setting smaller text, a fixed height on the div, setting line-height, and changing letter-spacing.
Any tips or ideas would be greatly appreciated, thanks!
Base styles are included unchanged from the sIFR download. Relevant code:
HTML:
<div id="menu_header_FuturaStdMedium">Sample Header Text</div>
CSS:
.sIFR-hasFlash div#menu_header_FuturaStdMedium {
letter-spacing: -4px;
visibility: hidden;
font-size: 26px;
}
Javascript:
if(typeof sIFR == "function"){
// Headers
sIFR.replaceElement("div#menu_header_FuturaStdMedium", named
({sFlashSrc: "FuturaStdMedium.swf", sColor: "#000000", sCase: "upper", sWmode: "transparent", sFlashVars: "textalign=center"}));
}
Generated HTML:
<div class="sIFR-replaced" id="menu_header_FuturaStdMedium" style="padding-top: 15px;"><embed style="width: 230px; height: 24px;" class="sIFR-flash" type="application/x-shockwave-flash" sifr="true" bgcolor="transparent" wmode="transparent" flashvars="txt=Sample Header Text&textalign=center&textcolor=#000000&w=230&h=24" quality="best" src="FuturaStdMedium.swf" height="24" width="230"><span class="sIFR-alternate">Sample Header Text</span></div>
Thanks again!
Wes
I had the same issue and found this entry through google. Just in case anyone else comes across the same issue: it seems like most of the weird text-scaling sifr does can be solved by putting the text one wants to replace into a span-tag and replacing the span-tag (this also solved some weird down-scaling sifr did when it just should have wrapped the text...)
So in this case:
HTML:
<div id="menu_header_FuturaStdMedium"><span>Sample Header Text</span></div>
JS:
if(typeof sIFR == "function"){
// Headers
sIFR.replaceElement("div#menu_header_FuturaStdMedium span", named
({sFlashSrc: "FuturaStdMedium.swf", sColor: "#000000", sCase: "upper", sWmode: "transparent", sFlashVars: "textalign=center"}));
}
I hope this helps anyone :)