JavaScript - Onclick Move Text?

I have searched this forum for similar queries & have come up with this
http://jsfiddle.net/defencedog/P33FR/

I don't know why this ain't working

Im currently working on a project for class and have been directed to use Javascript for what im looking to do.

Im a beginner when it comes to coding w/ javascript. Over the last couple days I've spent good time reading and practicing tutorials but have yet to do something I imagine is very basic for what I want to do.

At the moment, im looking to insert text into a webpage, that links to images. The images, ideally will layer on top of each other (Multiple images can be shown based on the "text" which activates it) Images shown, if done what im looking for, will have a transparent background to view images set behind one another.

I've spent a couple hours looking up code through google, found similiar code which i've tried to manipulate to do what I want. I have yet to put something successful together. Was hoping I could look upon experience programmers to help me out by pointing me in the right direction. Im willing to do the work, just looking for that guidance

I'm very inexperienced with Javascript, but want to use the onclick event to change an image to text. I'm working on a directory type website and want users to have to click on the image of a telephone in order to reveal the telephone number they are looking for. how do i do this?
Also is there a way of tracking how many clicks each person gets?
I'd really appreciate any help you guys can give me on this

Hi,
This button changes the button text when clicked, but it is always calling the same function. How to make the button depending on the button text to call different functions on onclick?

[CODE]
<script type = "text/javascript">
function button_switch(){
if (document.switch_form.switch_b.value == "Adam"){
document.switch_form.switch_b.value="Eva";
}
else{
document.switch_form.switch_b.value = "Adam";
}
}
</script>

<form name = "switch_form">
<input type = "button" name = "switch_b" id = "switch_b" value = "Adam" onclick = "button_switch()" />
</form>
[CODE]

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.

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.

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);
}
};

Hi Guys.
First off i'd like to say Hi as i'm new to the forums. But am looking forward to spending a lot of time here. I am currently studying Javascript to help create a bit more user interaction with my websites which I use CSS/XHTML and PHP5 to design.

Ok with that said I was hoping someone might be able to lend a slight hand. I am trying to create an Image menu for a site I'm working on that is rather simple in essence. When the user hovers over a button I have the menu will move left or right depending.

I have not got a great deal into it yet as I have become stuck, as I'm new I figured it would be easier to troubleshoot if I build up the program bit by bit.


----> menupic variable is being passed by php into javascript

Code:

function moveImagesLeft() {		
        for (i=0; i<=100; i++) {
        	setPixels = (i + 2);
        		for (L=1; L<=menuPic; L++){ /* this loop makes sure that all the pictures move together */
        			indexpic = "menupic"+L;
				document.getElementById(indexpic).style.left="-"+setPixels+"px";
		}
	}  
}

Ok, very simple. I have a DIV container that holds my images and the overflow is hidden, php works out how many images there are and feeds that into javascript. This all works fantastically however it seems that once I reach the bottom of my second for loop Code:

document.getElementById(indexpic).style.left="-"+setPixels+"px";

Nothing else happens, the pictures all shift left 2pixels as they should but nothing else.

The top loop is not going again (excuse the poor use of terminology)

I dont know if it makes a different but where the images are they are declared as so.

Code:

<a href="#"><img class="menupic" id="menupic1,2,3,4,5 (etc)" src="_image" border="0" height="50" width="60"></a>

Code:

.menupic {position:relative; display:block; width:60px, height:40px}

and the Id class is there so that my javascript can control it.

I hope that I have worded this in a way that is easily understandable.
Any help would be greatly appreciated.

I try not to ask for too much help because working things out is part of the learning curve but in this instance I have spent a lot of time and not found a solution.

Kindest Regards
Oli

Hi once again!

Is it possible to detect was the mouse on the move or not in the moment when button is released ?

Hi there, I am pretty new to javascript coding, and I could use little help...

As you can see here, I got this code where I can move image inside of a box, and I do it by clicking these "links".

And now I want to ask you, is there any way that I could move image using keys on keyboard (arrows or WSAD)?

I'd like to keep this as simple as possible since I am not really into very advanced scripts (although I could probably understand them if you give little explanation).

Code:

<html>
 <head>
 <body>
  <script type="application/ecmascript">

    // X position of image
    var x = 0;
    // Y position of image
    var y = 0;
    // Move per click
    var inc = 10;

  function Init()
 {
   document.getElementById('autic').style.left = x + 'px';
   document.getElementById('autic').style.top = y + 'px';
 }
  function moveRight()
 {
   x += inc;

   document.getElementById('autic').style.left = x + 'px';
 }

  function moveLeft()
 {
   x -= inc;

   document.getElementById('autic').style.left = x + 'px';
 }

  function moveUp()
 {
   y -= inc;

   document.getElementById('autic').style.top = y + 'px';
 }

  function moveDown()
 {
   y += inc;

   document.getElementById('autic').style.top = y + 'px';
 }
   </script>


 <style>
  #box
 {
   width: 500px;
   height: 300px;
   position: relative;
   margin: 20px auto 0px auto;
   border: 5px outset #000;
   overflow: hidden;
 }

 .image
 {
   position: absolute;
   z-index: 100;
 }
  </style>
 </head>

  <body onload="javascript:Init()">
  <div id="box"><img class="image" id="autic" src="auto.png"/></div>
   <a href="javascript:moveLeft()">Left</a>
   <a href="javascript:moveUp()">Up</a>
   <a href="javascript:moveDown()">Down</a>
   <a href="javascript:moveRight()">Right</a>
 </body>
</html>

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, '&nbsp;'); line creates a SPAN element with the initial content "&nbsp;" 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