I am developing an Epub Reader application.
I need to add changing font tool in my application.
I have problem in my JavaScript side.
My app opens different Epub files and therefore I can not predict Epub HTML,CSS files content.
My function works for elements that doesn't have font-family attribute and it doesn't effect on elements could have font-family attributes like p,body and h tags.
changeFont function :
function changeFont(fontIndex) {
var fontFamilyValues = ["aldhabi.ttf", "b_nazanin.TTF", "b_nazanin_outline.ttf", "iransanse_mobile.ttf"];
var newStyle = document.createElement('style');
var font=fontFamilyValues[fontIndex];
var fontUrl="file:///android_asset/fonts/"+font;
var fontName=font.substring(0,font.lastIndexOf('.'));
newStyle.appendChild(document
.createTextNode("#font-face{ font-family:"+fontName+";src: url("+fontUrl+");}"));
document.head.appendChild(newStyle);
newStyle.appendChild(document.createTextNode("*{font-family:"+fontName+";}"));
}
inline style overrides <style> block (and style block overrides external css file). So you have to remove inline styles first:
$("*").css('font-family', '');
or using pure javascript:
var all = document.getElementsByTagName("*");
for (var i=0; i < all.length; i++)
{
all[i].style.removeProperty('font-family');
}
to force your new style over everything else you can also apply !important on your styles like this:
newStyle.appendChild(document.createTextNode("*{font-family:"+fontName+" !important;}"));
Related
Actually i am using iframe element in html page but it is inside tag which means javascript. so I want to add css to that iframe element, how can I do that? Can someone help please
Styles from the parent will not be applied to the document within the iframe. The best solution is to add the stylesheet to the document in the iframe. Either via javascript or creating a template page to load in via src.
Something like:
var head = doc.head
var link = doc.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = ...src...
head.appendChild(link)
This is an example: link
yourElement.style.attribute = value
for example
var button = document.getElementById("btn")
button.style.color = "red"
button.style.marginTop = 0;
when writing css in javascript you must use camel case css for example type marginTop not type the margin-top
I have a component under test that behaves differently based on a current css of the site. I would like to add a css for a single test. Is it possible to add it without creating a file, like a temporary css for the test only?
Is it possible to add a css code in the qUnit test function?
You can create style node dynamically with desired CSS rule.
var tempCSS = document.createElement("style");
tempCSS.type = "text/css";
tempCSS.innerHTML = ".myClass { background-color: red; }";
document.body.appendChild(tempCSS);
<div class="myClass">yahoooooooo</div>
I generated some css from database values on Page_Load and Then wrapped it like-
CssDiv.InnerHtml = "<style id=\"main_styles\" type=\"text/css\">\n" + {Css as string} + "\n</style>"
here CssDiv is like-
<div id="CssDiv" runat="server"></div>
user are allowed to change these css values with color pickers and drop downs. on change of picker or dropdown, I am making ajax call with the selected value to server, saving it into database. Now on success of this request, I have to change the content of $("style#main_styles") according to user's selection.
The problem is
1) When I am changing the Css its being reflected on the page but not under developer tool (that open when you right click to Inspect element). For example assume following css-
#zoneBody .blocktextContent {
background-color: #99daee;
}
now user selected #1066cc from the picker, when my code runs #1066cc is being applied on the element "#zoneBody .blocktextContent" on page but when I am inspecting the element in the developer console its still showing-
#zoneBody .blocktextContent {
background-color: #99daee; // while it should be- "background-color: #1066cc;"
}
2) The changes I made are not permanent on browser, i.e. when any other element on Page is causing partial post-back, although I am not touching CssDiv on server yet its resetting the users selection.
(I have an update panel, that wraps complete page content, even CssDiv... This is causing partial post-backs).
I am using following code to apply the user's selection-
var layoutelement= "#zoneBody .blocktextContent";
var style = "background-color";
var stylevalue= "#1066cc"; // user's selection
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
var sheet = sheets[i];
if (sheet.ownerNode.id == "main_styles") {
var rules = sheet.cssRules;
for (var j = 0; j < rules.length; j++) {
var rule = rules[j];
if (rule.selectorText == layoutelement) {
rule.style.setProperty(style, stylevalue);
// I also tried "rule.style[style] = stylevalue;"
break;
}
}
break;
}
}
I can not use-
$(layoutelement).css(style, stylevalue);
because layoutelement can be more complex like-
layoutelement = "#zoneBody .blockTextContent a,#zoneBody .blockTextContent a:link,#zoneBody .blockTextContent a:visited,#zoneBody .blockTextContent a .yshortcuts";
I hope I am clear enough, but if you need any more description.. let me know in comments.. Thank you
Instead of changing the values of the styles, why not write the styles down in advance, and just toggle the element's classes? You can use jQuery addClass, removeClass and toggleClass if you want. Much more practical than fiddling with the CSS style definitions themselves.
For problem 1, the issue is probably that the developer tool (or view within the developer tool) you are using does not show applied styles, but simply the rules in the style sheet that match that element based on the selector. Or, in other words, it only shows the css rules in the style sheet that apply to the element you are inspecting. To see the styles that are applied at a given time, you will need to examine the styles by inspecting the element in the DOM or use javascript and the CSSStyleDeclaration object returned by getComputedStyle.
I have some JavaScript code that creates some div elements and it sets their CSS properties.
Because I would like to decouple CSS logic from my JavaScript code and because CSS is easier to read in its own .css file, I would like to set the CSS className of my element and then dynamically inject some values into the defined CSS property.
Here is what I would like to do :
style.css:
.myClass {
width: $insertedFromJS
}
script.js:
var myElement = document.createElement("div");
myElement.className = "myClass";
I want to do something like this but at that point myElement.style.width is empty
myElement.style.width.replaceAll("$insertedFromJS", "400px");
I think my problem here is that after the call to myElement.className = "myClass", the CSS is not yet applied.
If I understand your question properly, it sounds like you're trying to set placeholder text in your css file, and then use javascript to parse out the text with the css value you want to set for that class. You can't do that in the way you're trying to do it. In order to do that, you'd have to grab the content of the CSS file out of the dom, manipulate the text, and then save it back to the DOM. But that's a really overly-complicated way to go about doing something that...
myElement.style.width = "400px";
...can do for you in a couple of seconds. I know it doesn't really address the issue of decoupling css from js, but there's not really a whole lot you can do about that. You're trying to set css dynamically, after all.
Depending on what you're trying to accomplish, you might want to try defining multiple classes and just changing the className property in your js.
Setting the style, might be accomplished defining the inner-page style declaration.
Here is what i mean
var style = document.createElement('style');
style.type = 'text/css';
style.cssText = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);
document.getElementById('someElementId').className = 'cssClass';
However the part of modifying it can be a lot of tricky than you think. Some regex solutions might do a good job. But here is another way, I found.
if (!document.styleSheets) return;
var csses = new Array();
if (document.styleSheets[0].cssRules) // Standards Compliant {
csses = document.styleSheets[0].cssRules;
}
else {
csses = document.styleSheets[0].rules; // IE
}
for (i=0;i<csses.length;i++) {
if ((csses[i].selectorText.toLowerCase()=='.cssClass') || (thecss[i].selectorText.toLowerCase()=='.borders'))
{
thecss[i].style.cssText="color:#000";
}
}
could you use jQuery on this? You could use
$(".class").css("property", val); /* or use the .width property */
There is a jQuery plugin called jQuery Rule,
http://flesler.blogspot.com/2007/11/jqueryrule.html
I tried it to dynamically set some div sizes of a board game. It works in FireFox, not in Chrome. I didn't try IE9.
I'm looking for a lightweight dialog plugin that doesn't require css.
I need it for a userscript, which means I can't include a css file
Any ideas?
You could dynamically inject a css file from a remote domain, which is what disqus does, for example.
var link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'http://yourhost.com/your.css'
You'd make to make sure your css has low chance of clashing with your user site's styles by restricting the styles using id or class names.
you can simply set the innerHTML of a style tag created via javascript. In this way you obtain an inlined stylesheet.
E.g.
var styleText = "body { background-color: red } div { color: lime }";
var styleBlock = document.createElement("style");
styleBlock.innerHTML = styleText;
document.head.appendChild(styleBlock);
Another idea is to use a dataURI of a css file:
E.g.
var linkEl = document.createElement("link");
linkEl.href = "data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6YmxhY2sgfQo=";
linkEl.rel = "stylesheet";
linkEl.type = "text/css";
document.head.appendChild(linkEl);