I have two images and i want to animate these on click of a button.i want when i click on button then both images comes closer to each other. How can do it? can someone please help me to do it.
Something like:
$('input[type=button]').click(function() {
$('#pic1').animate({left:+=50});
$('#pic2').animate({left:-=50});
});
On button click, get both elements by jquery or java and change their postions.
Write down your HTML so that I can help you with the code.
Related
I have a form, that when the "Next" button is clicked, a new div appears in place of the old one with this code:
function showDiv() {
document.getElementById('2').style.display="block";
document.getElementById('1').style.display="none";
}
I am then, once the form is submitted, sending my data to a server so that it is emailed to me. The problem is that the previous action, the transition between divs after the button click, is being performed far too quickly. People have told me that it would look a lot better with some sort of transition or a quick loading icon, and that it doesn't look authentic.
Is there any way to have my second div "slide" into the position of the new one? Or some sort of transition? Keep in mind, this is just switching two divs out for one another. No actual data is being processed yet, and no new page is being loaded. Or is there any way to create a loading icon on this action to last for 1second?
Thank you for your help.
Try this
// send data
// show loading gif
setTimeout(function () {
// hide loading gif
// show other div
}, 2000);
You get a 2 second delay this way. Hope it helps.
I assume you're open to using jQuery based on your tags. jQuery offers a number of ways to animate changes to divs. .animate() provides a way to do custom animations, or your can use one of the provided options. In your case, perhaps something like .fadeToggle() would work?
Detailed information here: https://api.jquery.com/category/effects/
I have 4 links, and 4 content boxes which the first content box is visible and the other 3 are hidden. I believe I need to use javascript to toggle these content boxes. When I click the second link it should show the second content box and hide the first one. if it was possible to fade in and out that would be awesome. Please help I have been searching for a tutorial doing exactly this and I just cant put it together
According to your current structure, I changed the HTML code and come up with this jQuery:
$("a").click(function(){
$("div").fadeOut("slow")
$("#"+$(this).text()).fadeIn("slow");
});
Check out this Fiddle..
I want to create this:
Multi Image Change
If you click on the Color picker Tumbnail("Farbe:"), other Pic will appear in the
"pvImagesContent" section. I tried this on my self:
http://m4terialrmk.bplaced.net/list%20zoomer/demo.html
So far so good but now I cant figure out how to go on? I tried to put the several list zoom control in a div and make one appear and another disappear, but it broke my functionality.
Or must I just change the image path with help of Javascript? If so, I just want to change a section of the img path.
img/red/pic-1.jpg >>will be>> img/blue/pic-1.jpg
You can use the jQuery
$(function() {
$('img').each(function() {
if($(this).attr('src').indexOf('/red/')) ($(this).attr('src')).replace("/red/","/blue/");
});
});
Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps
I want a jQuery modal box that appears near or next to the button that triggers it. The box should appear in shape as well as in the following:
It should be height resizeable, so if the content is long, the box will refit.
How can I do this?
The qTip jQuery plugin is pretty good.
http://craigsworks.com/projects/qtip/
I'm not sure if there is one exactly how you want but here is a list of a few that you may be able to modify slightly.
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
This one in particular seems good
http://flowplayer.org/tools/tooltip.html
I don't think there's anything quite like what you're looking for out of the box. However, with a little customization and tweaking, you might be able to get pretty close to your goal.
To use a jQuery modal, simply design your modal div somewhere on your page (I usually do it at the very bottom) and give it an initial sytle of "display: none":
<div id="promotion_dialog" title="Choose a piece for promotion:" style="display: none;">
<table id="my_table"> .... </table>
</div>
If you design the div correctly, you might be able to create the shape you're looking for.
Then when the button is clicked, call a Javascript function that displays and positions the div:
function openPromotionDialog() {
$("#promotion_dialog").dialog({width: 350, height: 100, modal: true, zIndex: 10000});
$("#promotion_dialog").dialog('open');
}
See the jQuery UI Dialog docs for more information. Providing a position parameter to the dialog() method should allow you to place it where you want (you'd need to examine the clicked button to get the positions).