im reading datas from xml.
{
XmlDocument doc = new XmlDocument();
doc.Load(Server.MapPath("~/multipleimage.xml"));
XmlNode root = doc.DocumentElement;
XmlNodeList nodeList = root.SelectNodes("Image");
foreach (XmlNode node in nodeList)
{
HtmlAnchor a1 = new HtmlAnchor();
Image imagesource = new Image();
string path = "Uploads/";
string imageurl = path + node.SelectSingleNode("Imagepath").InnerText;
imagesource.Style.Add(HtmlTextWriterStyle.PaddingLeft, "7px");
imagesource.Style.Add(HtmlTextWriterStyle.PaddingRight, "5px");
imagesource.Style.Add(HtmlTextWriterStyle.PaddingTop, "5px");
imagesource.Style.Add(HtmlTextWriterStyle.PaddingBottom, "5px");
imagesource.ImageUrl = imageurl;
imagesource.Height = 90;
imagesource.Width = 90;
string imagetitle = node.SelectSingleNode("imagetitle").InnerText;
a1.Attributes.Add("href", imageurl);
a1.Attributes.Add("rel", "lightbox[roadtrip]");
a1.Attributes.Add("title", imagetitle);
a1.Controls.Add(imagesource);
Div1.Controls.Add(a1);
}
}
so im binding the controls in codebehind.i'm using lightbox effect also in code behind . everything is working fine.but can i set height and widht for the href from code behind?
Try this
HtmlAnchor a1 = new HtmlAnchor();
a1.Style.Add("height", "120px");
Href is an attribute of an anchor tag (<a />) and refers to the location the hyperlink will direct the browser to.
In general I would try to set classes and/or id's in the code behind and set style through css. This way you can change the style without recompiling:
a1.Attributes.Add("class", "my-class");
And in css:
.my-class
{
width:100px;
height:10px;
}
or for the image:
.my-class img
{
width:100px;
height:10px;
}
However lightbox may be updating these values. I would use a tool such as firebug (or the built in inspection tools - try pressing F12) to see what style is actually being added to the image elements.
Related
I'm using the Html Agility Pack to copy html content from several files that only contain body elements and their inner HTML, into a single, new html file. The essential code that does this is as follows. The _pageDoc is the HtmlDocument for the new file, and contentNode is a child of that doc, while for each file I build a div and append it to contentNode.
var contents = GetContentDescs(courseId);
foreach (var content in contents)
{
var html = File.ReadAllText(Path.Combine(HtmlDir, content.ContentId + ".html"));
var contentDoc = new HtmlDocument();
contentDoc.LoadHtml(html);
var bodyNode = contentDoc.DocumentNode.Descendants("body").Single();
var contentDiv = _pageDoc.CreateElement("div");
contentDiv.InnerHtml = bodyNode.InnerHtml;
contentNode.AppendChild(contentDiv);
}
This works as expected and the rendered html is perfect, but every contentDiv is on one line, and not very readable. How can I insert a line break in the html file (vs in the rendered html) between each contentDiv?
Something like
HtmlNode linebreak = doc.CreateElement("br");
var contentDivs= doc.DocumentNode.SelectNodes("contentDiv");
for (int i = 0; i < contentDivs.Count; i++)
{
if (i > 0)
{
doc.DocumentNode.InsertBefore(linebreak1, contentDivs[i]);
}
}
I've put up some dirty code by reading documentation but I've never used Agility pack
All:
Right now, I want to draw a svg and style it with external style. Everything goes well until I try to down load it:
function chartExporter(svg){
// svg is a D3 object
svg.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg");
var svgDOM = svg.node();
var html = svgDOM.outerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
imgobj.src = imgsrc;
imgobj.onload = function(){
var a = document.createElement("a");
a.download = "sample.svg";
a.href = imgsrc;
a.click();
}
}
The problem here is: If I use D3 to add inline style or attributes, the svg downloaded seems good, but if I use external css file to include style, those styles can not be applied to svg when converted( it make sense, cos they are not in that html string), I wonder how to bring those style into svg?
Thanks
I'm interested in creating a PNG from SVG. I followed the code given in:
https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
But the image does not come out right due to styling from CSS. I made a local CSS file and do an import into the SVG, as described in:
How to apply a style to an embedded SVG?
But it does not appear to be using the style sheet. Any ideas why I would have this error?
Thanks.
Have a look at PhantomJS - You need to install it then either write your own script or run something along these lines:
phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png
You can also save to PDF, set Zoom setting, etc.
You could use html2canvas to generate a canvas from any dom element (including svg elements).
However, style definitions for svg elements defined in stylesheets are not applied to the generated canvas. This can be patched by adding style definitions to the svg elements before calling html2canvas.
Inspired on this article, I've created this:
function generateStyleDefs(svgDomElement) {
var styleDefs = "";
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
var rules = sheets[i].cssRules;
for (var j = 0; j < rules.length; j++) {
var rule = rules[j];
if (rule.style) {
var selectorText = rule.selectorText;
var elems = svgDomElement.querySelectorAll(selectorText);
if (elems.length) {
styleDefs += selectorText + " { " + rule.style.cssText + " }\n";
}
}
}
}
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = "<![CDATA[\n" + styleDefs + "\n]]>";
//somehow cdata section doesn't always work; you could use this instead:
//s.innerHTML = styleDefs;
var defs = document.createElement('defs');
defs.appendChild(s);
svgDomElement.insertBefore(defs, svgDomElement.firstChild);
}
// generate style definitions on the svg element(s)
generateStyleDefs(document.getElementById('svgElementId'));
// after generating the style defintions, call html2canvas
html2canvas(document.getElementById('idOfElement')).then(function(canvas) {
document.body.appendChild(canvas);
});
The example at
"How to apply a style to an embedded SVG?" as you mentioned should work. You need to define youObjectElement in this line of code when you test it.
var svgDoc = yourObjectElement.contentDocument;
try again.
I would like to apply the following style to an element:
style = "transform-origin: top left;"
I'd like to use in GWT
element.getStyle().setProperty("TransformOrigin", myValue);
where "myValue" is a String. Which value should take "myValue" to end up applying the "top left" attributes?
I can't find any documentation on the TransformOrigin property for GWT!
This solution works for all major browsers:
String[] engines = new String[]{"","webkit","ms","Moz","O","khtml"};
String value = "0 0";
String name = "TransformOrigin";
for( String prefix : engines ) {
element.getStyle().setProperty( prefix+name, value);
}
I have this :
private function tileList_itemClick2(evt:ListEvent):void {
img = new Image();
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = "products/images/" + evt.itemRenderer.data.imgH;
img.setStyle("addedEffect", image_addedEffect);
img.setStyle("removedEffect", image_removedEffect);
PopUpManager.addPopUp(img, myCanvas, true);
}
Is it possible to limit the modal ( model transparency color ) inside myCanvas ?
Or even inside other thing than a canvas ?
Something like when you click on one of these products:
http://www.conforama.fr/webapp/wcs/stores/servlet/ambiance_10001_10051_-2
I think you want to make changes to modal transparency.
Inside style sheet put this piece of code.
global
{
modal-transparency: 0.0;
modal-transparency-color: white;
modal-transparency-blur: 0;
}