In Codepen, I created a div, and gave it some attributes:
let lettersWritten = document.createElement("div");
lettersWritten.setAttribute("class", "lettersWritten");
lettersWritten.style.height = writtenHeight;
lettersWritten.style.width = writtenWidth;
lettersWritten.textContent = "<------ WRITTEN to date";
Codepen created the div, set the class, added the text, but did not update the height and width. Codepen.io does not update element.style with call to element.style.
How can I update an element's style?
Codepen.io will update an element's style with a call to setAttribute:
let lettersWritten = document.createElement("div");
lettersWritten.setAttribute("class", "lettersWritten");
lettersWritten.setAttribute("style", "height:"+writtenHeight+"px;width:"+writtenWidth+"px;");
lettersWritten.textContent = "<------ WRITTEN to date";
Here's a link to the Codepen with fix and comments:
https://codepen.io/theship/pen/e615b372bd408f89f0cb94d4f7b16cb0
Related
heres a pen of what i'm trying to do:
http://codepen.io/amcc/pen/RVVRPX/
(simplified code below too)
i'm importing raw svg, then nesting it - as this is needed to allow it to be dragged. I want to be able to rescale the svg, whats the best way?
line 12 shows me trying to use size() which isn't doing much
var rawsvg1 = '<g><path d="M265.8,171.5V49H297v122.5H265.8z"/></g>';
var draw = SVG('drawing').size('100%', '100%');
var groupContainer = draw.nested();
var group1 = groupContainer.nested();
group1.svg(rawsvg1);
//change group1 attributes
group1.size(50, 50);
then nesting it - as this is needed to allow it to be dragged.
Why do you think that?
There is no need for all those nested <svg> elements you are creating. A group (<g>) works just as well.
And you can resize the content you are "importing" by using the transform functions.
var draw = SVG('drawing').size('100%', '100%');
var group1 = draw.group();
group1.svg(rawsvg1);
//change group1 attributes
group1.attr('fill', '#fff');
group1.translate(200,100).scale(0.5,0.5);
//make group1 draggable
group1.draggable();
group1.draggable().on('dragmove', function(e){ })
Updated codepen
I am altering the elements contents using
svgTextLines[name].node.innerHTML = line.val();
svgTextLines[name].node.textContent = line.val();
and trying to get the height and width of the element after the content has changed but I cant seem to find any property in the elemement.node object that gets updated. As the element has not transformed I can understand why but is there a way I can get this information?
Regards
I'm using SnapSVG and I had the same problem.
You can use getBoundingClientRect to get an object with this parameter.
var s = Snap("#svg");
Snap.load("mascot.svg", function (f) {
s.append(f);
var rect = s.searchAll("g")[0];
var dimens = rect.node.getBoundingClientRect();
console.log(dimens.width)
});
i need to insert a title (not a tooltip, a text on the top) inside the svg rendered by Dojo. How can i do that?
Here my Dgauge:
http://jsfiddle.net/MacroX/pZU93/1/
PD: The line
gauge.title = 'Test Report'
doesnt show the title
EDIT: The question is regarding a label at the top of the gauge, not the title attribute as I originally thought.
You can use a TextIndicator much like you did for the value label below the needle, but you can set a labelFunc property that defines a function called to set a label and displays whatever string is returned from it.
var labelText = new TextIndicator();
labelText.set('x', 73.3);
labelText.set('y', 55);
labelText.set('labelFunc', function() {return 'Test Report';});
gauge.addElement('labelText', labelText);
Here is a modified version of your fiddle with the title text in place.
Original answer remans below in case someone else needs it
Pass the title in when you create the gauge:
var gauge = new CircularLinearGauge({
title: 'Test Report'
}, dojo.byId("gauge"));
You can also use set to set it after the gauge is created:
gauge.set('title', 'Test Report'); //does work :)
The reason for this is that the gauge widget needs to set the text you give as the title on a specific element within the widget's template. gauge.title just sets the title property of the gauge widget, and the widget has no idea when or with what value that property is being set and thus is not able to make it show up as a title attribute on the gauge.
Finally i got a way to resolve this, and this is useful when you need to personalize your dgauge. Here the example:
http://jsfiddle.net/MacroX/THJqV/
What i did is basicly create a gauge, fill it with background white, and then add elements inside
var baseWidth = 400;
gauge.addElement("background", function (g) {
var auxHeight = baseWidth * objGauge.offsetHeight / objGauge.offsetWidth;
g.createRect({
width: 400, height: auxHeight
//width: 400, height: 300
}).setFill("#FFF");
});
I dont know if is the best way, but works and i didnt find something similar in other sites
And what I think is great, this support multiple chart dgauges in only one SVG
I hope this will useful to someone else
I am having trouble with my view controllers in iOS 7. I'm trying to figure out the best way to adjust my view's layout under the nav bar and status bar while maintaining the transparency/blur of the nav bar. So for example, if I have a view controller with:
def viewDidLoad
#scroll = UIScrollView.alloc.initWithFrame(new_frame)
#scroll.bounces = true
#scroll.delegate = self
#scroll.alwaysBounceVertical = true
#scroll.scrollsToTop = true
#scroll.contentSize = CGSizeMake(UIScreen.mainScreen.bounds.size.width, scroll_frame.size.height)
self.view.addSubview(#scroll)
end
My content appears under the nav bar, which I get given the iOS 7 transition guide. To correct that, if I add the following inside of viewDidLoad:
self.edgesForExtendedLayout = UIRectEdgeNone
The layout is adjusted but the navbar no longer has transparency or blur because the view doesn't extend behind it.
If I don't adjust scrollView insets instead of setting edges for layout:
self.automaticallyAdjustsScrollViewInsets = false
Then change my scroll frame to:
def viewDidLoad
nav_bar_height = self.navigationController.navigationBar.frame.size.height
status_height = UIApplication.sharedApplication.statusBarFrame.size.height
height = nav_bar_height + status_height
scroll_frame = self.view.bounds
new_frame = CGRect.new([0, height], [scroll_frame.size.width, scroll_frame.size.height])
#scroll = UIScrollView.alloc.initWithFrame(new_frame)
#scroll.bounces = true
#scroll.delegate = self
#scroll.alwaysBounceVertical = true
#scroll.scrollsToTop = true
#scroll.contentSize = CGSizeMake(UIScreen.mainScreen.bounds.size.width, scroll_frame.size.height)
self.view.addSubview(#scroll)
end
I no longer get the transparent/blur of the nav bar. Only when I adjust the scroll's frame - at the x origin - with a new height does this seem to happen. So I'm wondering why that is and how I can best adjust my scroll without losing the blur/transparency.
Maybe you can try with inset
[scroll setContentInset:UIEdgeInsetsMake(nav_bar_height + status_height, 0.0, 0.0, 0.0)];
[scroll setScrollIndicatorInsets:UIEdgeInsetsMake(nav_bar_height + status_height,0.0,0.0,0.0)];
Hope that help
Hi
I am new to AS3.0, and what I am trying is to style Label, TextInput from the properties section show to the right.
But I couldnt find any alignment, font-size etc options.
How to style these components at design time, instead of AS3.0 code.
In AS3.0 you can apply these styles to your components with some lines of code. This is an example from Adobe Help
var tf:TextFormat = new TextFormat();
tf.color = 0x333333;
tf.font = "Georgia";
tf.size = 24;
tf.align = "center";
tf.italic = true;
textInput.setStyle("textFormat", tf);
More info here: http://goo.gl/dNCxe