So im trying to code up a script were if your mouse goes near the image the image will move.
Here is my source and live preview.
http://jsfiddle.net/9CDtE/4/
Has you can see once you move near the button it moves which is what i want.
But now i need to turn the button into a html form and turn the button into a image.
Is there any way to do that ? I am no good with jquery.
html
<button>button</button>
js
$(function(){
$("button").on({
mouseover:function(){
$(this).css({
left:(Math.random()*200)+"px",
top:(Math.random()*200)+"px",
});
}
});
});
css
button{
position:absolute;
top:10px;
left:10px;
}
I own a pokemon online game. I want to grab a random pokemon from the db ( which i can do) and then have the pokemon change every time the user moves there mouse near it and moves around the page.
So there would be a html form with lets say 3 fields a pokemon name a pokemon id and a pokemon image. One page load it will auto grab a random pokemon from the db and fill in these hidden fields in the html form. Which i can do. Once the user moves his mouse near the pokemon/image it will move and then another random pokemon will be grabbed and the html form will change to the new pokemon info. It will keep changing till the user can click on the image which will then submit the form.
By the logic of your code above instead of button in your css and selector.
Insert a img with a specific ID.
<img src="" id="cantTouchThis" />
And use cantTouchThis in your code, your selector would like this:
$("#cantTouchThis").on({
But you are using a button and you said wanted an image, it's confusing, however. You can at any point just insert HTML after your button, like:
$("#cantTouchThis").after('<form>.....</form>');
Please elaborate and explain clearly for a better answer.
Tending to your update, something like this is what you want:
$(function(){
$("#cantTouchThis").on({
mouseover:function(){
$(this).css({
left:(Math.random()*200)+"px",
top:(Math.random()*200)+"px",
});
//Go get PHP via jQuery AJAX
// Grab data and now update your form, or insert form!
// Insert new form $('#following_around').html('<form>...</form>');
// Example change directly the "Pokemon" ID in the form, without the need to completely insert a new form
$('#following_around #random_id').html(Math.random()*10);
}
});
});
Related
I have a form that simply adds a new key name through ajax. I want a message to show every time the user adds a new key (not from a popup box). I'm using Ruby on rails so the Jquery coding below is executed when the data is successfully added to the db.
This is the JQuery coding that runs after an ajax from submit.
$('#status-area').html("");
$('#status-area').append("key added successfully");
$('#status-area').fadeOut(3000);
and here is the div
<div id="status-area"></div>
It works Just like I want for the first submit. Simply removing any previous text in the div and saying 'Key added successfully' then fading out. Problem is if I submit the form again a new key is added but the message doesn't show again.
It should run through this coding again on the second submission removing the old text and re appending the message but it doesn't.
How come it doesn't show again?
It's normal behaviour because fadeOut will set the display: none
so you will have to use
$('#status-area').fadeIn();
$('#status-area').html("");
$('#status-area').append("key added successfully");
$('#status-area').fadeOut(3000);
Wen you use the jQuery fadeOut() method, it decreases the opacity of the html element to from 1 to 0 in the time given in milliseconds as an argument (default 400).
You need to set the opacity of your div to 1 before you append the text. Modify the snippet as below and it should work fine:
$('#status-area').css("display","block"); //div is by default a block element
$('#status-area').html("");
$('#status-area').append("key added successfully");
$('#status-area').fadeOut(3000);
With your code, the text is getting appended but as the div is now transparent, it's not visible to you. If you inspect it in the browser you might get the display property set to none in the style attribute of the div
<div id="status-area" style="display:none"></div>
I was wondering if it's possible to have an HTML form with a text field and a button, wherein you enter a string (say 5) and on pressing the button, the image "image5.jpg", stored on the server, is rendered on the webpage.
I believe it boils down to coding a button "on-click method":
Read a text field and form a filename string for the image
Updating the image, preferably (OR redirecting the user to "http://.../image5.jpg" would do as well)
I'm not terribly familiar with much more than basic HTML, but I can hack it together if I know what will get the job done.
Thanks.
// DOM ready handler
$(function(){
// Click on change image button handler
$('#select').click(function(){
// Get the value entered in the number input
var image = $('#number').val();
// Change the source of the image
$('#image').attr('src', "http://somewebsite.com/image" + image +".jpg");
});
});
JSFiddle: https://jsfiddle.net/0rn00L4a/
There are no real images to show, but if you inspect the DOM you will see it changes the image to things like
<img id="image" src="http://somewebsite.com/image2.jpg">
So if you put in your correct image path, it will just show them immediately when you press the button.
You could just do it on the change event of the input, but that is a little jarring.
-
I am making an order form with a review page.
when order form is fully filled, then it automatically send each data to
each div on the review page. This is what I want.
I know I can copy a data into another div by using javascript like
<script>
function filling() {
var something = $('#input').val();
document.getElementById("divbox").innerHTML = something;
}
</script>
but when it's not a data that can be displayed with text(for example, an image or a video), then how can I send the data into another div?
Thanks to digging really hard the internet, I found an open source contact form with the image attachment function. what's cool about this is, when I attach an image, it resizes and show to client-side.
(http://webreflection.blogspot.kr/2010/12/100-client-side-image-resizing.html)
So, I am modifying this into an order form, and I want, when a client attach an image, it shows to the client the resized version of it, and it also shows in the div on review page.
How can I do this?
getElementbyClassName or Name did not work because of the "auto resizing script"
-
I'm sorry for my english being to poor. and thank you for your patient to have read this last line. Have a nice day.
Few ways:
<script>
function filling() {
var something = $('#source').html(); // Can be some element, like another DIV
$("#divbox").append(something);
}
</script>
Depending on what you need, can also use clone() (https://api.jquery.com/clone/):
function filling(){
$("#source").clone().append("#divbox");
}
For a form I'm building, I'm using a jQuery UI dialog to give the user a list of about 50 check box options. The text boxes get removed from the form completely when they're added to a dialog, so I have to clone and reinsert them to the form before submission so that all of the check box values will be submitted along with the form. The problem is that the checkboxes, when added back into the form, appear visibly. I'm just trying to make them invisible and still be able to submit the values.
I thought maybe doing something like prepend() might be a solution so that the user doesn't actually see the checkboxes, being all the way at the bottom of the form--but it still pushes the form elements down. So I'm looking for a means of appending the #states_container :input to the form without it visibly affecting the form in any way.
Code:
$('#submit_btn').click(function(e){
$("#form_submission").validate({});
if ($("#form_submission").valid()) {
$("#form_submission").append($('#states_container :input').clone());
$("form#form_submission").submit();
} else {
e.preventDefault();
alert("Please make sure all required information has been provided before submission.")
}
});
Create a div at the bottom of your form. Style it's display to none and give it a unique id.
<div id="checkBoxes" style="display:none;"></div>
When you go to clone the check boxes from your jQuery dialog set their location to:
document.getElementById("checkBoxes").innerHTML = varWithCheckBoxes;
This will place all of your check boxes inside an invisible div that will have no affect on your layout and will still be submitted along with your form. In addition if the need arises to repopulate that list of check boxes to make changes you can simply grab them from the div and place them back in the dialog box.
I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->
<input type="submit" value="Continue">
Is there anyway I can call to this by using the value of 'Continue'?
FYI: the button is coded with php and I want to rerun the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function resizePole(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
and I am attempting to call this using:
onclick="return resizePole();"
Oh and I know next to nothing about javascript :)
Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later
link to site
What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.
This will work.
$('[type="submit"][value="Continue"]').click(function () {
{
return resizePole();
});
EDIT
As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).
$('[type="submit"][value="Continue"]').click(resizePole);
EDIT 2
To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.
$('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);
EDIT 3
This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).
$('[type="submit"][value="Continue"]:last').click(resizePole);