I want to make a simple animation with CSS3 Transform rotate in JQuery but it seems it is not working. Here my codes below:
<script>
function sun() {
$('#sun').animate({opacity:0.5, '-webkit-transform':'rotate(360deg)'},5000).animate({opacity:1, '-webkit-transform':'rotate(-360deg)'},5000);
setTimeout('sun()',2000);
}
$(document).ready (function() {
sun();
});
</script>
Help
Related
$(function() {
$(".header-dialogue").hover(function() {
$(".console").draggable();
});
});
The thing is to make block draggable only when the header is hovered. Now the whole block stays draggable even when the element is not hovered. How to perfom else function?
Example http://codepen.io/NeedHate/pen/LExPqR
Change your jQuery code to :
$(function() {
$(".console").draggable({ handle: ".header-dialogue" });
});
creating a mobile website using PinchZoom.js plugin to zoom in and zoom out on a map. It also has a search feature that highlights areas on the map.
When the map is zoomed in, and someone searches, I want pinchzoom.js to reset back to the zoomed out view. I can achieve this by removing the style on the Zoom Container through jquery. but when I tap back on the map, it starts zooming from the original zoomed in location, before the search.
How would I go about resetting the pinchzoom.js plugin back to its original onload scale from a jQuery click function?
<script type="text/javascript">
jQuery(function ($) {
$(function reset() {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {
maxZoom: 10
});
});
})
});
</script>
<script>
jQuery(function ($) {
$(document).ready(function() {
$('#contactlink').click(function(){
$('#formbox').slideToggle('fast');
$('.pinch-zoom .activeLocation').removeClass('activeLocation');
});
});
$(document).ready(function() {
$('#formbox').click(function(){
$('#formbox').slideToggle('fast');
});
});
})
</script>
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery('#E1').click(function() {
jQuery('.pinch-zoom').empty();
jQuery('.E1').addClass("activeLocation");
});
});
</script>
In my case I need to reset zoom image.So save old image src of zoom image in one variable and create new html element i.e. image with same id and set old image src which we saved in temporary variable.With orientation change we can use same solution.
In your case save your value of zoom element and delete it and recreate html element and assign old value.
May be it is not proper solution.But it works for me.
so I'm working on my Tumblr Theme right now. I'm using Masonry to have all my posts in a 5-column grid and the infinite scroll script to load new images into the grid when I'm scrolling down. Unfortunately, most of the time as I scroll down images are overlapping. I figured out that the problem may be Masonry triggering before the images are loaded, but right now I have no idea how to fix this. I'm already using (window).load instead of (document).ready but the pictures keep overlapping nonetheless. Here's the full code snippet:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js">
</script>
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('.posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 11000,
loadingImg : "",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
<script type="text/javascript">$(window).load(function(){$("p").remove(":contains('Source:')");});</script>
Does anyone have an idea on how to get it working? Any help would be appreciated!
Masonry is placing the items absolutely before your images have loaded and take more space.
Utilize Jquery imagesLoaded to overcome this. You may want to initially hide your elements and then show them after they have finished loading. Try something like this:
//Wire masonry onto the photolist with whatever defaults you need
$photolist.imagesLoaded(function () {
$photolist.masonry({
// options
itemSelector: '.photo',
columnWidth: 226,
isFitWidth: true,
gutterWidth: 12
});
});
Ok, I was doing a simple JQuery animation. When a user will click on an image,it will move to the left by 1000px. Here is the code below:
function cloud2 () {
$('#cloud2').animate({left:'1000px'},40000);
setTimeout(cloud2,2000);
}
$(document).ready(function() {
$('#cloud2').click(function() {
cloud2();
});
});
Very nice nothing is wrong, all is working like a BOSS! When the image reaches 1000px, it stops. All good! What I want now, is to replace the image with another image once it stops when it completes the 1000px animation. How to do that? For example, once it stops, the image changes to another one, let's say image2.jpg for instance.
Thank!
animate() has an event for ending animation.
For example you have something like:
<img src="image1.jpg" id="myimg">
function moveimg() {
$('#myimg').animate({left: '1000px'}, 40000, function() {
$('#myimg').attr('src', 'image2.jpg');
});
}
setTimeout("moveimg()", "2000")
I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the "Title" tag.
Here is the code i am using to invoke TipTip
<script type="text/javascript" src="jquery.tipTip.js"></script>
<!-- ToolTip script -->
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});
</script>
<!-- End ToolTip script -->
and in the body
sample content. sample,stuff.
This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.
<script type="text/javascript">
//loading sample ajax data
$(document).ready(function(){
$('#remote').load('sample.html');
});
</script>
Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.
Could someone please advise me?
An easy solution would be to create a function that activates TipTip:
function activateTipTip() {
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}
$(document).ready(function(){
activateTipTip();
$('#remote').load('sample.html', function() {
activateTipTip();
});
});
Not very elegant, but should work though.
This code will make it so that any link that has a title attribute will have TipTip's functionality applied to it:
$('a[title]').live('mouseover', function()
{
$(this).tipTip({
delay: 200,
maxWidth: '400px'
});
$(this).trigger('mouseenter');
});
Source: https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live
This is my solution for this problem:
$(ElementParent).on('mouseover', YourElementSelector, function()
{
if($(this).data('hasTipTip') !== true)
{
$(this).tipTip(TipTipOptions);
$(this).data('hasTipTip', true);
$(this).trigger('mouseover');
}
});