Change form position on page load

Question

Ok, I know this can be done, for I've seen it before. Yet I have no idea how to make it work I have searched everywhere for an answer.

What I need is for my form to randomly change positions when the page loads from 3 different spots on the page. So for example....

[Here] [Here] [Here]

Could all be possible spots the form could load in but only in 1 spot for each time it loads. I don't know what information you need to help me. I will just give my form for now.

<form name="inputt" action="" method="post">
  <div align="center">
    <input type="submit" class="catch" value="Catch Pokemon" name="catch">
  </div>
</form>

If you need more just ask.

How structured is this? You could make a grid of possible locations using a table with `` then use `document.getElementById()` or something. — David Starkey, Mar 29 '13 at 20:47

Nick Mitchinson · Accepted Answer · 2013-03-29T20:59:46.600

2

Just my inital thought, but you could write CSS for the 3 different position class, and call them things like 'position1', 'position2','position3'. Then on page load in javascript (or in PHP) if you want, generate a random number between 1 and 3, add the class "position"+randomNumber to the element, and then it will be in one of those places. This is similar to a technique I used for random background images.

Update

Also, if you want to use more descriptive class names for the locations, you could keep a mapping of a number to a class name (or use something like position in an array), to relate a a random number to the class to apply.

Code

CSS:

<style>
    .position1 {
        // Whatever style you want for position 1
    }
    .position2 {
        // Whatever style you want for position 2
    }
    .position3 {
        // Whatever style you want for position 3
    }
</style>

JS:

$(document).ready( function () {
    var randomIndex = Math.floor(Math.random()*3)+1; //3 is the number of options you have; +1 makes the range 1 - 3 instead of 0 - 2
    $('#my-form').addClass('position'+randomIndex); //Adds the new class the element with id = 'my-form'
}

edited Mar 29 '13 at 20:59

answered Mar 29 '13 at 20:48

Nick Mitchinson

5,246
1
23
31

This sounds like my best bet on the matter due to my limited coding capabilities, but I'm still a bit lost on the matter woudl you mind giving me some type of example on what you mean? sorry I'm really new to all of this. – Sakai Mar 29 '13 at 20:54
I gave you some quick code to do this in javascript. Note that I'm making use of jQuery. If you are not, it is not that hard to use native javascript to do the same thing. I would also recommend adding an 'id' tag to your form to make it easier to select. – Nick Mitchinson Mar 29 '13 at 21:01
Thank you very much, so I need to convert the js code you gave me to work with my code since I don't use jquery? – Sakai Mar 29 '13 at 21:06
You will only have to convert the jquery specific parts, such as $(document).ready() (http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery), selecting the form (document.getElementById('id') I believe), and adding the class (http://stackoverflow.com/questions/7388626/how-do-i-add-a-class-to-the-html-element-without-jquery). In short though, I would probably recommend using jQuery, especially if you are a beginner. It will make your life so much easier for things like this. – Nick Mitchinson Mar 29 '13 at 21:10
If this works for you feel free to accept the answer to close the question. – Nick Mitchinson Mar 29 '13 at 21:22
If you're interested, a good place to start is by reading through the docs. It'll give you an idea of what you can use it for, and how it can help you. http://docs.jquery.com/ – Nick Mitchinson Mar 29 '13 at 21:37
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/27207/discussion-between-user1908445-and-nick-mitchinson) – Sakai Mar 29 '13 at 22:33

score 0 · Answer 2 · answered Mar 29 '13 at 20:48

If you mean by "load" a page refresh than you will have to persist the previous location of the form either in cookie or some other mechanism. Based on the last location of the form you can decide which location should be next.

If the form is being reloaded based on ajax calls, then I would advise using a var to store the previous location of the form and make the next location not be the same as previous by checking the value of the var. If each time form loads position should be unique than use an array to store previously used display locations.

HTH.

Change form position on page load

2 Answers2