How to change attr width on object, I'm trying with this, but seems does not work...
jQuery('.big').click(function(){
jQuery('#flvPlayer').attr("width", "100");
});
Here is code where I need change height and width on click
<a class="big">100</a>
<textarea><object id="flvPlayer" height="665" width="425"></object></textarea>
Use .css instead of .attr.
jQuery('.big').click(function(){
jQuery('#flvPlayer').css("width", "100");
});
width is a CSS property.
Edit: In textarea you have text. Your <object> is not a HTML element. It is text in your text area.
So, just change the text in textarea.
$('.big').click(function(){
var text = "<object id=\"flvPlayer\" height=\"665\" width=\"100\"></object>"
$("textarea").val(text);
});
Also, I suggest you to use $ instead of jQuery. It's easier and faster to write.
Related
Say that a textfield is flexed horizontally and no minWidth value has been set. If you resize the textfield to have a small enough width, the body will have its own default minimum width. The following is an example: https://fiddle.sencha.com/#view/editor&fiddle/2hp9
How does Ext JS set the minimum width of the textfield body?
Never mind. I debugged, and I tried textfield.el.dom to show all the elements that composed the textfield. I found out that the element with a data-ref value of 'inputEl' had padding-left and padding-right values. I think that is what makes up the default amount of space of the body.
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 using d3.js to build a little project that involves data, shapes and text. According to the data, the text appears inside of a shape. If you mouse-over the shape, the shape should become larger and show more text.
The text is added in the following manner and it works fine:
Shapes
.append("foreignObject")
[...]
.append("xhtml:body")
.style("font", "14px 'Helvetica Neue'")
.html(function(d) {return d.text; });
I use foreignObject rather than text because I need the text to line-wrap and this is the only way that I've so far been able to achieve this effect.
What's giving me grief is the mouse-over. I can re-size the shape just fine but I am having trouble calling a transition on the text. In fact, I don't really know how to access it successfully.
Here is some of the code from the mouse-over event:
d3.select(this)
.transition()
.duration(250)
.attr("height", function(d,i) {
d.showAll()
//d.textObject.width = 4;
return d.height;
} );
d3.select(this).select("foreignObject").transition()
.duration(250)
.select("xhtml:body")
.html(function(d) {return d.text; });
The idea is that the showAll() function has already changed the text to a new value, however the code does not get that far. The message that Chrome gives me is "Uncaught TypeError: Object [object Array] has no method 'html' ".
So, how do I access the text and update it so that my transition will lead to the new text being visible and the old text disappearing?
I've been banging my head against this for a while so any help is deeply appreciated.
Replace d3.select(this).select("foreignObject") with d3.selectAll(this.getElementsByTagName("foreignObject"))
I just solved this myself and thought I would help.
I have some CSS I am applying to a view header and view column.
Here is a sample
.viewHeaderName {
width:235px;
background-color:rgb(192,192,192);
color:rgb(0,0,0);
font-family:Trebuchet MS,sans-serif;
font-size:10t;
font-weight:bold;
text-align:left;
}
.viewColumnName {
font-family:Trebuchet MS,sans-serif;
font-size:9pt;
}
Basically I am trying to set the width of the column to what I want. I don't want the text in the header or in the column to wrap. This works perfectly for categorized views for all the columns.
But for simple sorted views, the header is being offset to the right from the text in the column several characters.
If I remove the width parameter in the CSS then everything lines up fine but I don't get the width I want.
you can use td/th nowrap attribute described here
http://www.w3schools.com/tags/att_td_nowrap.asp
or
use white-space element in css described here
http://www.w3schools.com/cssref/pr_text_white-space.asp
white-space:nowrap;
I'm using DOJO's ContentPane module. I have a div element in one of the panes and I need to give it a certain height - 100 pixels less than the height of the ContentPane so that the div changes its height dynamically when you change the ContentPane size by dragging the splitters. I'm new to Dojo and would be happy if somebody could help me with this.
Thanks.
I think the best solution is via nested BorderContainers with properly set splitters, because that way dijit/layout will take care of resizing and you won't need to write any JavaScript code and your layout will be based solely on CSS.
It's kinda cumbersome to explain, so I created a working example for you at jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + a diagram:
NB: Do not forget to set height: 100% for html, body and the top BorderContainer.
The drawback of this solution is you will have to replace plain divs with ContentPanes. If you do not want to or can't you can use dojo/aspect and connect to BorderContainer or ContentPane resize method and resize your divs manually whenever the size changes:
require([
"dojo/ready",
"dojo/aspect",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function(
ready,
aspect,
registry
) {
ready(function() {
var bc = registry.byId("borderContainer1");
aspect.after(bc, "resize", function() {
// calculate and set <div> size here
console.log("resize divs");
});
});
});