I want the user to click a resize button which changes the size of a rectangle, but also modifies a text string to announce the new size and the square inches as well... see comments within the code...
the html doc....
<input type="button" id="increaseBoxWidth" value="Make Box Wider">
<input type="button" id="decreaseBoxWidth" value="Make Box Narrower">
<input type="button" id="increaseBoxHeight" value="Make Box Taller">
<input type="button" id="decreaseBoxHeight" value="Make Box Shorter">
and then the javascript.....
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded () {
initializeThings();
}
function initializeThings() {
... canvas, context and such.....
var boxWidth = 5;
var boxHeight = 3;
var boxSquareInches = 15;
var message = "box is 5 inches wide and 3 inches tall... and the total square inches is 15"
... is only one "var" declared for all these listeners?
var formElement = document.getElementById("increaseBoxWidth");
formElement.addEventListener('click', boxWider, false);
formElement = document.getElementById("decreaseBoxWidth");
formElement.addEventListener('click', boxNarrower, false);
formElement = document.getElementById("increaseBoxHeight");
formElement.addEventListener('click', boxTaller, false);
formElement = document.getElementById("decreaseBoxHeight");
formElement.addEventListener('click', boxShorter, false);
function boxWider(){
if (boxWidth < 10) {
boxWidth += 1;
boxSquareInches = boxWidth * boxHeight;
message = "Hey there... your new box size is + boxWidth + inches by + boxHeight+ inches... and the total square inches is + boxSquareInches +"
drawScreen()
}
}
/// THREE MORE FUNCTIONS???? FOR NARROWER, TALLER AND SHORTER????
function drawScreen(){
...
context.fillRect(0,0,boxWidth,boxHeight);
context.fillText (message, 10, 100);
}
}
... is only one "var" declared for all these listeners?
No, each element needs to be declared with a unique name, otherwise, your program can't differentiate when user clicks one button or the other. Something like this:
var iw = document.getElementById("increaseBoxWidth");
iw.addEventListener('click', boxWider, false);
var dw = document.getElementById("decreaseBoxWidth");
dw.addEventListener('click', boxNarrower, false);
var ih = document.getElementById("increaseBoxHeight");
ih.addEventListener('click', boxTaller, false);
var dh = document.getElementById("decreaseBoxHeight");
dh.addEventListener('click', boxShorter, false);
/// THREE MORE FUNCTIONS???? FOR NARROWER, TALLER AND SHORTER????
Yes, that would be the next thing to do. Just like you did for boxWider()
Note on your string: You need to break apart the string in order to have the variables concatenated with your text. In other words, the + sign and variable names do not go inside the quotes. Like this:
message = "Hey there... your new box size is" + boxWidth + "inches by" + boxHeight + "inches... and the total square inches is" + boxSquareInches;
Additional note: In JavaScript, you start a comment with two // not with ...
Hope that helps.
Related
i am trying to get a bigger picture when hovering over another picture on an input field with multiple pictures.
I tried the bellow code.
But the positioning of the bigger picture does not work when i use a variable to get the mouse position.
My problem is this part of the code:
var tooltipSpan = document.getElementById('\"' + popid + '\"');..........
tooltipSpan.style.top = (y - 320) + "px";
tooltipSpan.style.left = (x - 310) + "px";
when i alert this variable"('\"' + popid + '\"')", everything looks good,
when i put in the same as alerted manualy to the last function, everything works fine.
What do i am wrong? Please can someone give me a tip or improve the code.
This is the HTML, i cant change this, it is generated.
<div id= "yyy" class = ..........
<input class =.......
<label for="something" class='ClassExample1'>
something
</label>
<label for="something" class='ClassExample2'>
something
</label>
This is addeded by me, the id of the divs are the class names of the inputs ,
i get the class name of the input fields and make a variable from that
and try to set them for positioning the bigger pictures.
<div id='ClassExample1' class='Class a'>
<p><img src="some source"/></p>
</div>
<div id='ClassExample2' class='Class a'>
<p><img src="some source"/></p>
</div>
.
.
.
.
.
This is the code that i made:
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample1' )[0].onmouseover = function() {mouseOn1()};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample1' )[0].onmouseout = function() {mouseOut1()};
function mouseOn1() {document.getElementById('ClassExample1').style.display = 'block';};
function mouseOut1() {document.getElementById('ClassExample1').style.display = 'none';};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample2' )[0].onmouseover = function() {mouseOn2()};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample2' )[0].onmouseout = function() {mouseOut2()};
function mouseOn2() {document.getElementById('ClassExample2').style.display = 'block';};
function mouseOut2() {document.getElementById('ClassExample2').style.display = 'none';};
.
.
.
.
.
/*Position of mouse hover picture*/
var poper;
window.onmouseover=function(e) {
poper = (e.target.className);
};
var popid = "\'" + poper + "'\";
var tooltipSpan = document.getElementById(popid);
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y - 320) + "px";
tooltipSpan.style.left = (x - 310) + "px";
};
The popid and tooltipspan are not reassigned on mouse move as it is not inside the mousemove function. You could move them inside the function.
var poper;
var popid;
var tooltipspan;
window.onmouseover = function(e) {
poper = (e.target.className);
popid = "\'" + poper + "'\";
tooltipSpan = document.getElementById(popid);
};
the below code gets the first text frame width in my doc. How can I get the active text frame Width in Indesign script? The image shows my problem.
function freamWidth() {
var frameRef = app.documents[0].textFrames[0];
var gBounds = frameRef.geometricBounds;
var y0 = gBounds[0];
var x0 = gBounds[1];
var y1 = gBounds[2];
var x1 = gBounds[3];
//do calculations
var frameWid = x1 - x0;
// var frameHgt = y1 - y0;
return frameWid;
}
This is more a question of how to retreive the parent text frame of a selection. You can usually do this via the parentTextFrames property of a text selection. You could optionally also include a check if the text frame itself is selected instead of some text within the text frame. So the following code should work for your scenario:
var tf;
var sel = app.selection[0];
if(sel.hasOwnProperty('baseline')) {
tf = sel.parentTextFrames[0];
} else if (sel instanceof TextFrame) {
tf = sel;
}
var tfWidth = tf.geometricBounds[3] - tf.geometricBounds[1];
alert("The text frame width is " + tfWidth);
I want to change the size of an image with an input and buttons.
I have an input, to which i insert the desired size, an image and 2 buttons.
One for making the image size change according to the input ( for example, if the user typed 300 in the input, the image width and height, will both change to 300px).
And one for making the image size double itself, by clicking the other button.
javascript :
var myImg = document.getElementById("myImg")
var input = document.getElementById("insert")
function increaseSize()
{
input.value = myImg.size.width
input.value = myImg.size.height
}
function doubleSize()
{
myImg.style.width * 2
myImg.style.height * 2
}
It didn't work.
You've got errors in your code. The first thing I can see is in the increaseSize() function, you are assigning the value to the input, not the image.
input.value = myImg.size.width
This line means that you have taken the width of the image and inserted that value into your input, which is the opposite of what you want to do. You want to take the value in your input and inject it into the images style.width property. So for starters, change that function (also there is no .size property, you wanted .style:
// option 1 create within function
function increaseSize() {
var myImg = document.getElementById( "myImg" );
myImg.style.width = input.value;
myImg.style.height = input.value;
}
// option 2 pass as parameters
var myImg = document.getElementById( "myImg" ); // assign the variables
var input = document.getElementById( "size" );
function increaseSize( img, input ) { // create the function
img.style.width = input.value + 'px'; // assign a unit type to it, as it is a css value
img.style.height = input.value + 'px';
}
increaseSize( myImg ); // run the function, passing in our variables
You have to use style to assign width and height using CSS, please find below example, where I have used the button to change the size, you can do it with input field as well:
document.getElementById("go").addEventListener("click", function() {
var img = document.querySelectorAll("#container .image img")[0];
img.style.height = "200px";
img.style.width = "200px";
});
div#container {
width: 100%;
height: 100%;
}
div.image img {
position:fixed;
width: 100px;
height: 100px;
}
<button id="go">Increase</button>
<div id="container">
<div class="image"><img src="http://libcom.org/files/images/library/black-square.jpg"/></div>
</div>
The width and height properties return string with px appended to it so remove the px part convert it to number and multiply it by 2.
var myImg = document.getElementById("myImg")
var input = document.getElementById("insert")
function increaseSize() {
myImg.style.width = input.value + 'px';
myImg.style.height = input.value + 'px';
}
function doubleSize() {
myImg.style.width = Number(myImg.style.width.slice(0,-2)) * 2 + 'px';
myImg.style.height = Number(myImg.style.height.slice(0,-2)) * 2 + 'px';
}
Try this
function changeSize(){
console.log('Clikced change size!');
var size=parseInt(document.querySelector('#img_size').value);
var img=document.querySelector('#img');
img.width=size;
img.height=size;
}
function doubleSize(){
console.log('Clikced double size!');
var img=document.querySelector('#img');
var size=parseInt(img.width)*2;
img.width=size;
img.height=size;
}
<img src='http://placehold.it/120x120&text=image1' width='200px' height="200px" id="img">
<input type="number" id='img_size' >
<button id="change_size" onclick="changeSize()"> Change Size</button>
<button id="double_size" onclick="doubleSize()">Double Size</button>
i am using flash cc createjs export. i am embedded flash font as well . but it did not fix the issue .
i have attached the link here . just click the rectangle . it will create 10
if you click again it will be 20 . but 20 overlaps 10 . 10 does not goes away.
http://graphicscoder.org/stackover/score/scoring.html
/* js
var score=0;
this.movieClip_1.addEventListener('click', fl_MouseOverHandler_2);
function fl_MouseOverHandler_2(e)
{
text1 = new createjs.Text("LIVES: " + score, "40px Arial");
text1.textAlign = 'right';
text1.y = 30;
text1.x = stage.canvas.width - 10;
stage.addChild(text1);
score=score+10;
text1.text=String(score);
}
*/
Every time you click the button, you are adding a new Text. If you want to just change the number:
Create the text once initially
Update the value on click
Example:
/* js
var score=0;
this.movieClip_1.addEventListener('click', fl_MouseOverHandler_2);
// Moved out of the mouse handler
text1 = new createjs.Text("LIVES: " + score, "40px Arial");
text1.textAlign = 'right';
text1.y = 30;
text1.x = stage.canvas.width - 10;
stage.addChild(text1);
function fl_MouseOverHandler_2(e)
{
score=score+10;
text1.text=String(score);
}
*/
I am creating a diagramming tool using RaphaelJS and have run into a problem, i cannot see how i can edit the shapes that have been painted onto the canvas paper. For example, below is the code i use to create a UML Class shape and would now like to know how to modify the elements contained within, Im using MooTools BTW:
var uml_Class = new Class(
{
initialize: function(name)
{
this.className = name;
this.pointA_X = 1; this.pointA_Y = 1;
this.pointB_X = 150; this.pointB_Y = 1;
this.pointC_X = 1; this.pointC_Y = 40;
this.pointD_X = 150; this.pointD_Y = 40;
this.pointE_X = 1; this.pointE_Y = 100;
this.pointF_X = 150; this.pointF_Y = 100;
this.pointG_X = 1; this.pointG_Y = 160;
this.pointH_X = 150; this.pointH_Y = 160;
this.generate_Shape();
},
generate_Shape: function()
{
this.classSet = paper.set();
this.classSet.push
(
this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y).attr({"fill":"white"}),
this.line_Attrib = paper.path("M " + this.pointC_X + " " + this.pointC_Y + " L " + this.pointD_X + " " + this.pointD_Y),
this.line_Method = paper.path("M " + this.pointE_X + " " + this.pointE_Y + " L " + this.pointF_X + " " + this.pointF_Y),
this.classText = paper.text(this.pointB_X/2, this.pointA_Y+20, this.className).attr({"font-size":"14"}),
this.attribText = paper.text(this.pointD_X/2, this.pointC_Y+10, "Attributes").attr({"font-size":"10"}),
this.methodText = paper.text(this.pointF_X/2, this.pointE_Y+10, "Methods").attr({"font-size":"10"})
);
this.shapeBase.draggable.enable();
},
add_new_Attrib: function()
{
},
add_new_Attrib: function()
{
}
});
The above code works fine and on my canvas classes are created which show there name and are constructed using the rectangle for the base and two line to create the three sections:
name area
attrib area
method area
By making the shapeBase rectangle variable draggable i means that the user can click anywhere within this shape to drag, again this functionality works fine.
i would now like to code the two functions add_new_Attrib and add_new_Method. The attrib function should first resize or grow the cube by adding 20 to the overall height (via point_H_X) to make space for a new attrib entry and then move the method line (line_Method) and text (method_Text) down by 20.
the add_new_method line should also grow the shapeBase rectangle by 20 to make room for the new method entry.
I cant seem to find a way to do this, for example, when i put the following code into the add_new_Attrib shape, i am trying to redraw the shapeBase but instead it draws an entirely new rectangle:
add_new_Attrib: function()
{
this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y+20).attr({"fill":"white"});
},
Could anyone tell me how to resize or reposition the rectangle and paths that are inside my class?
Thanks for any input your may have!
RaphaelJS's getBBox and attr methods is what you are looking for:
add_new_Attrib: function()
{
var bbox = this.shapeBase.getBBox();
this.shapeBase.attr({'height': bbox.height + 20, "fill":"white"})
}
To reposition, look at translate (can't link, but it is in the same doc as above).