|
JavaScript - Trying To Resize/move Annotations In Html/javascript
Similar TutorialsHello everybody. i need to know how can i draw lines over images using javascript libraries. i already did that using wz_jsgraphics library but what do i need next is to be able to move the drawn line and change its position or be able to delete it if i no longer need it . i need to treat draw lines as if they were objects in their common sense. how can i do that ? any help will be greatly appreciated. How do I change the <br /> tags in the follow code to javascript code that performs the same function. I need new lines where you see the <br /> tags and I can't use <br /> since my javascript is within the header section of my HTML file and the W3C validator doesn't like it. Therefore, how do I change the following code to pure javascript with no <br />'s. I tried using \n and \r\n but maybe I didn't use this right as it didn't work. Please help, I am new to javascript txt="Name: "+name+"Sex: "+sex+"<br />Ethnicity: "+ethnicity+"<br />Region: "+region+"<br />Profession: "+profession+"<br />Membership_status: "+membership_status+"<br />Seeking: "+seeking+"<br />Education: "+education+"<br />Body Type: "+body_type+"<br />Eye Colour: "+eye_colour+"<br />Smoker: "+smoker+"<br />Drinker: "+drinker ; I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled. Here is my code so far. <form name="form1" method="post" action=""> Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')"> Beef <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br> </FORM> <form> <p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;"> Shoulder: <br /> Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br /> Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br /> Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br /> Specific Cuts wanted:<br /> <textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea> </div> </form><br /> <div id="divt2" style="visibility:visible; position:absolute; top "> Type 2 Input: <input name="t2" type="text" value=""> </div> <BR> </p> <script type=text/javascript> var isIE=document.all?true:false; var isDOM=document.getElementById?true:false; var isNS4=document.layers?true:false; /* _w : which ID (1) or (2) */ /* _h : (h)ide or (s)how */ function toggleT(_w,_h) { if (isDOM) { if (_h=='s') document.getElementById(_w).style.visibility='visible'; if (_h=='h') document.getElementById(_w).style.visibility='hidden'; } else if (isIE) { if (_h=='s') eval("document.all."+_w+".style.visibility='visible';"); if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';"); } else if(isNS4) { if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';"); if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';"); } } </script> Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request. I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how. I tried this and it didn't work in Firefox nor in IE. Code:
THE HTML FILE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Greenbrain</title>
<script language="javascript" type="text/javascript" src="greenbrain.js"></script>
<link rel="stylesheet" type="text/css" href="greenbrain.css">
</head>
<body>
<div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div>
<div id=img_intrare> <img src="soare.png"; class="soare"> </div>
</body>
</html>
THE .CSS FILE
body {background-image:url(fondhome.png); position:fixed;}
img.soare {position:absolute; left:-459px; top:100px; z-index:1;}
h1.intrare {z-index:2}
THE .JS FILE
function intr()
{
var x, xi;
x=0;
xi=document.getElementById('img_intrare').style.left;
if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"}
}
ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it... Hey everyone My project was to create 4 buttons , 2 for div 1 and 2 for div 2. The two divisions have overflow container so that the information will never leak outside the div. At the moment I have it so the style is 1x1 with opacity to 0 , then when visitors want to find information about a subject they press a button to move the div to a possition , opacity to 1 and the size is changed and the other button to return it. Ive hit many problems and for my project I need to follow these lines, Ive found that I cant make javascript resize the same div more than once after a while. could someone help me with this, Im trully baffled. I have an asp.net textbox. I need to use javascript so that there are no postbacks. I would like to click the button and the textbox height kept increases each time the user clicks the button. So far I can toggle: function resize(){ var textbox = $get('<%=txtWhoTo.ClientID %>'); textbox.style.height = textbox.style.height == '56px' ? '23px' : '56px'; } I would like to increase the height 56px each time the clicks the button. hey guys i'd like to have a javascript code that resizes the window to full screen it's my 404 page and I need it to resize the custom 404 page to fullscreen, or full window size how would I go about doing that? hi, I have created a flash video that work on a php table (like php-nuke), this is seen well on my PC, instead with various screen the video size is not good. ON screen big the video is small, on screen small the video is big... How i can made a script that change the dimension of flash video ? any idea ? please help me.. Hi all let me start off by saying: "AAAAAAHHHHHHHAAAAAAA" Feel better now! I have an iFrame which loads individual pages from my site, I am using javaScript to tell the iFrame to resize to the size of the page that is being loaded, the problem is when I click on the link the iFrame does not resize but if I click on the link again it does resize! The fuction is called but only the second time round. Also the none of the script works in FireFox! HELP PLZ! My Code: Code: <SCRIPT LANGUAGE=javascript>
<!--
function reSize()
{
try{
var oBody = ifrm.document.body;
var oFrame = document.all("ifrm");
oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
}
//An error is raised if the IFrame domain != its container's domain
catch(e)
{
window.status = 'Error: ' + e.number + '; ' + e.description;
}
}
//-->
</SCRIPT>
<body onload="reSize()" onresize="reSize()">
<li>
<a href="home.html" rel="nofollow" target="info" onclick="reSize();">
<img src="css/images/home.gif" width="40" height="40" alt="" class="nav_menu_image" />
<span class="nav_title">Home</span>
<br/>
</a>
</li>
<iframe onresize=reSize() id=ifrm src="home.html" name="info" frameborder="0"
padding="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500px"
allowTransparency="true" noresize>
</iframe>
hi, which is the first code in javascript to load an image from my computer and then to automatically resize it to me ... as in the facebook thanks
Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this? Thank you in advance. Hi' there Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized? favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks Hey all im getting used to using .js still and I am trying to figure out how to create a button to move a selected field within a box of fields to the top, instead of just moving it one-by-one to the top. Here is what I currently have that moves the selected just up one. Can someone expand on this and make it so it will move to the top instead of just one? SearchFieldsWindow.prototype.cmdMoveUp_OnClick = function() { var searchFields = this.__searchFields; var items = this.__lstSelected.get_Items(); var selectedIndices = this.__lstSelected.get_SelectedIndices(); var count = selectedIndices.get_Count(); for (var i = 0; i < count; i++) { var selectedIndex = selectedIndices.get_Item(i); // Don't allow when first item selected if (selectedIndex == 0) break; var uniqueID = items.get_ItemValue(selectedIndex); var label = items.get_ItemLabel(selectedIndex); searchFields.MoveUp(uniqueID); items.RemoveAt(selectedIndex); items.Insert(selectedIndex - 1, uniqueID, label); this.__lstSelected.SetSelected(selectedIndex - 1, true); this.__lstSelected.SetSelected(selectedIndex, false); } }; So if the user enters a serial number in the "Serial_Number" field and hits enter I would like the cursor to move DOWN to the next "Serial_Number" field. Is this possible?? Tracy Code: <table>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4853" >
</td>
<td>Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4853" >
</td>
</tr>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4854" >
</td>
<td> Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4854" >
</td>
</tr>
<tr>
<td>
Serial Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Serial_Number"
class = "textfield"
id = "Serial_Number.4855" >
</td>
<td>Cat Number:<br>
<input
type = "text"
size = "30"
onclick = "this.select();"
onChange = "updateField(this.name,this.id,this.value)";
value = ""
name = "Cat_Number"
class = "textfield"
id = "Cat_Number.4855" >
</td>
</tr>
</table>
Hello. Could you guys point me in the right direction. I have a DIV that I woul like to move along with the users vertical scrollbar. So when the user scrolls down on the page the DIV will follow. Where can I find information on how I can do this.
Right. I'm trying to create a little game (If you can call it that) where every time the user hovers over a <div> which contains a button, said <div> moves to a random point on the page. I've tried a way of moving the item and Googled extensively but have not yet come up with a way of doing it. This is my current code: Code: if(document.getElementById)
{
var carrier = document.getElementById(btnarea);
carrier.style.top = randomHeight + "px";
}
if(document.getElementById)
{
var carrier = document.getElementById(btnarea);
carrier.style.left = randomWidth + "px";
}
Which does not work. I hover over the <div> and the button, yet nothing happens. I can click the button, which seems to be the only thing working right now. I have a feeling the issue could be with another part of the code, but I wanted to see what you people thought first. Any ideas? You can see it working (Or not) at http://zeroerror.co.uk/public/clickme.php. Thanks in advance. Hi all, I'm trying to do something with a WYSIWYG editor. Below is a piece of code that takes selected text and wraps various BBCodes around it. The code almost works... but I want a few changes and I hope someone has an idea for me. Note: the var range = ed.selection.getRng(true); line gets a W3C compatible range containing the current selection - even under MSIE. The editor takes care of this. Note: The var elem = ed.dom.create('span', false, ' '); line creates a SPAN element with the initial content " " and returns it's element in "elem". Code: var ed = (tinymce.activeEditor || opener.tinymce.activeEditor);
if(ed)
{
var sel = ed.selection.getContent();
var range = ed.selection.getRng(true);
var elem = ed.dom.create('span', false, ' ');
elem.innerHTML = bbopen + sel + bbclose;
range.deleteContents();
range.insertNode(elem);
ed.selection.select(elem);
ed.focus();
return;
}
This code works, but not exactly as I want. For example, if I type "This is a test" and wrap code tags around it, I get this: But what I WANT is this: Also, if I select no text and hit the BBCode button, I get the open tag and the close tag, all highlighted. What I want in this case is the open tag, the close tag and the cursor IN BETWEEN them ready for text insertion. I'm thinking that I can take the range start and end offsets and move them to get what I want, but so far I've failed. One thing I DON'T want to have to do is create THREE spans... one for the open, one for the selection and one for the close. Trying to avoid that if possible. Any help will be greatly appreciated! Thanks! -- Roger Hey, I have a script which uses an array of numbers to represent their position in a div. its 5 by 5 like so: Code: tileMap = [ [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], ]; images = new Array(); images[1] = "no block"; images[3] = "brick.PNG"; Image[1] means you can move on the tile, 3 means you cannot (aka a collision). Now this is fine but i have issues regarding my movement of the image. I want to use WASD keyboard buttons which i can do using a CASE statement. But how do you make the image move Regarding Left/Right/Up/Down (also so that it stops moving when you stop holding down one of the keyboard buttons. I use this to detect the key button pressed: Code: function handleKeyMovement(keyValueDown)
{
switch(keyValueDown)
{
case 97: //A Move Left
//move it left
break;
case 100: //D Move Right
//move it right
break;
case 119: //W Move Up
//move it up
break;
case 115: //S Move Down
//move it down
break; }
}
p.s ideally i would like to move the said image by certain pixel amounts so it looks more smooth in movement. Is it possible? Hope you can help ! |
|||||||