I am working on something that might require a bit of animation in html/css or some jQuery or such. The essence of the question lies in alternating one div with another (both located in the same area on the website) constantly...perhaps in ten second intervals. This fiddle here:
http://jsfiddle.net/arunpjohny/asTBL/
the html is here:
<div id="quote1">
<span class="quote">I am a quote</span>
<span class="author">Author Name</span>
</div>
<div id="quote2">I am another quote</div>
<div id="quote3">I am yet another quote</div>
and javascript is here:
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})
basically covers the alternating divs every x amount of seconds. The main issue I have is the animation/transformation part of it. Maybe using the fiddle's elements and layout, how would one make the divs alternate in a revolving door style animation. Where the first div revolves into the page essentially and the other side of that revolving door is the new page? And it does this every 10 seconds or so? I researched and maybe html2canvas is the way to go but I am unsure I could grasp that content. Any help?
UPDATE:
I'm an extreme newbie to coding. I found this wonderful site
http://davidwalsh.name/css-flip
that has the flip effect I'm looking for. Is there a way to use this with jQuery to make this effect occur every ten seconds on some div? Instead of the effect occurring everytime one moves the mouse over it?
The whole thing can be done just with CSS animations and 3D transforms, which give you functions to rotate things round an axis, and to do that continuously at regular frequencies.
For the continuous animation part of it, see an article at http://css-tricks.com/almanac/properties/t/transition/. For a demo of what can be achieved see a small continuously rotating display I put on one of my own sites at http://www.dataprotectioncourse.co.uk/ (it needs a recent version of IE to see it in action, but works on all the other browsers fine). And you already have the reference you quoted to tell you how to rotate things.
You just have to combine the rotations with the continuous animating to get what you want.
Related
I am trying to create some time line effect. It will have couple of points for each time with designated picture inside a circle.
I want them to be clickable. When I click, I want another picture(plane) to move from its current location to where it is clicked within 1 second and shrink and disappear. Something similar to following GIF.
I have found couple of examples but I couldn't put them together to achieve what I want. I really searched a lot but couldn't solve it on my own. I am an iOS developer and no background on web development.
I will appreciate if you can help me on this.
Give a relative position to the timeline. Then you can get the position of a clicked circle, and assign it to the movable one. Add CSS transitions to have a better visual result.
Example using jQuery:
$(document).on("click", ".point", function () {
var $this = $(this);
var $abs = $(".is-absolute");
$abs.css("top", $this.position().top);
$abs.css("left", $this.position().left);
});
http://jsfiddle.net/dsr4esn3/
I'm working on revamping my website, and the new one can be found on http://beta.namanyayg.com/
There are mainly two things related to scroll on the site:
To check on which 'page' the user is on, by calculating the top offset and scroll position, then adding a class to the page.
To smooth scroll on menu click.
I've written code for both, but there is a lot of lag.
The first one almost always results in lagging. The second one, as a result, lags too. I have included a boolean to check if it's smooth scrolling and disabled the normal scroll events then, but there's not much change.
Do you have any advice on how to improve performance so there is no (or at least, less) lag? Thank you in advance! :)
...Or is it not related to JS at all? I've optimized everything else...
EDIT: Unminified JS at http://beta.namanyayg.com/js/main.js
If you are using underscore, it has an awesome _.debounce function that is excellent for this sort of thing.
To check how much the user has scrolled from the top of the page (i.e. on which 'page' he is at the moment) can be achieved with:
$(window).scroll(function () {
var scrollAmount = $(window).scrollTop(); // in pixels
if(scrollAmount > SOME_AMOUNT)
{
// add required css class
}
});
To scroll smoothly, to some id for example, you could use:
$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);
These are both jQuery solutions, so you should have jquery library included. There is also a nice jQuery plugin called waypoints that performs these calculations. It might prove useful to you and it has some other nice features and examples.
I have the same problem. I have a scrollable div with thousands of smaller divs. Every time I call scrollTop to get the scroll-position or set it, it sometimes waits at least 1 second.
I read these slides: http://www.slideshare.net/nzakas/high-performance-javascript-2011 (especially slides 138-139) and now I realize that every call to scrollTop, even as a getter, makes javascript relayout the page. This is most likely the cause of delay, but unfortunately I have not found a solution yet, as in a way to call scrollTop without causing relayouts.
Note: I've only been testing on Chrome.
Also read 'Browsers are smart' section of this article: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
I've found an easy solution to the lag with getting scrollTop, just call it inside a scroll-handler and save the result in a variable.
for example in jQuery:
var scrollPos = 0,
element = $('.class');
element.scroll(function(){
scrollPos = element.scrollTop();
});
For the second problem, setting the scrollTop, I reduced the amount of DOM elements by only showing the visible elements. In your case make sure only the visible page(s) are added to the DOM. when scrolling to the next page, in the scroll handler remove the top one (use jQuery .detach) and append the next one to the DOM.
I have a website that I am developing and I have multiple Divs on the main page. I have a div on the right side of the page labeled right_bar2 and I want it to change every 5-10 seconds. The entire div will just be an image that is a link. Basically I assumed the easiest way to do this would be to have a div with a bunch of hidden div's in it and then maybe some javascript that unhides one div at a time and then hides it again and unhides another. However I am unsure the best way to do it. I have looked at a bunch of example and can't get it to work 100% correctly.
Thanks for any advice ;)
JsFiddle examples would be great!
I tried something like this http://jsfiddle.net/VENLh/4/ but in my rails environment/setup, it breaks multiple things, so I'd like something cleaner and easier.
I cleaned it up a bit in this fiddle, but if you said the original breaks multiple things in your original environment, this might not fix them. What specifically did it break?
What I cleaned up was to avoid the need to keep a manual count of the DIVs for the JS or to worry about their IDs. The code is pretty simple:
$(function() {
var $divs = $('div', '#container'),
total = $divs.length,
counter = 0,
showDiv = function() {
$divs.stop().hide();
$($divs[counter]).show('fast');
counter = (conter + 1) % total;
setTimeout(showDiv, 3000);
};
$divs.hide();
showDiv();
});
I didn't perform one optimization that should probably be done. You probably should cache the results of the jQuery selectors on each DIV. It would be easy to do with a jQuery map statement, but I didn't want to muddy the waters here.
The only problem I can see in this case is if you are going to use heavy image, it may take some time to load. As the image will start getting loaded when you show it first time. So for this I would say you should keep the opacity 0 and load the image at the time of pageload.
And also to remove the delay you are having where one div is getting hidden and other is getting visible can be removed by using opacity. reduce opacity of one from 100 to 0% and for other increase from 0 to 100%.
I would like to do something like this in HTML5 where I have something like:
I want to be able to make it so that when I click on the Start button, the tickmark gradually moves to the next tick and increments by 1 per second, clicking on stop stops the behavior, and clicking on start again resumes from the current spot. The box at the top just shows the number of seconds corresponding to the red tracker bar. Assuming the user can specify the number of tickmarks (i.e. could be 20 seconds/tickmarks wide ro 10 seconds/tickmarks wide).
I have seen the JQuery UI Slider http://jqueryui.com/demos/slider/ though it has no tickmarks and am unsure if it really is the best way to go about doing what I described or if there is some better way.
What is the best javascript, jquery, html approach of doing this?
Try this - I felt like doing an exercise!
http://jsfiddle.net/zBKJk/
Only quirk is that the ticks along the bottom don't align exactly with different values of TICKS_ON_BAR. Probably a minor CSS/math issue.
You can change these variables
var TICKS_ON_BAR = 10; // Number of seconds to show on the bar
var TICK_RATE_MS = 100; // Interval to tick at (in milliseconds)
Also added a handy callback function
function timerComplete(){
// Do something further when the timer hits the end of the bar
}
Edit: If you want this to run smoothly, you could make the interval lower or (since you specified HTML5) use a linear CSS3 transition to make the changes animate:
http://jsfiddle.net/zBKJk/1/ (a bit glitchy, I just dumped in the example css from w3schools)
Animating this as is with jQuery is glitchy also: http://jsfiddle.net/zBKJk/2/
Greets,
First - this site is incredible. I've learned a ton of great things here!
I'm using a jquery based slider program to display a sequence of pictures (a series of books). Beneath the slider window I've positioned a "PDF" buttons. I'm trying to sort how to have the button download the file associated with whatever image is currently displayed in the slider box. So if "Picture #3" is showing in the slider window I need the PDF button to be associated with the respective #3 file. I believe I need to change each button's attributes dynamically to match what's showing in the slider window.
You can view the beta site at beta
I suspect I'll need some sort of javascript to snag the click event and feed it to the button's attributes. That's as far as my shaky legs can carry me with this one. Can anyone point me in the right direction? I'm a real noob at this and learning slowly so use small words!
Cheers,
TY
You're on the right track. I think this would probably work, but I'm not used to culling from arrays of jQ elements.
Put the filename into an alt tag in your list items, then use this script:
$('#download-button').click( function() {
var left_pos = $('ul').css('left');
var win_width = $('ul').innerWidth();
left_pos = left_pos * (-1) /* Will convert from negative to positive */
var slide_num = left_pos/win_width;
var slides = $('ul').find('li');
$(this).attr('src', 'path/to' + slides[slide_num].attr('alt'));
});
Also, upon checking the living DOM while playing around with the slider, I noticed that it seemed to jump a bit if you changed directions toward the end of/beginning of the slides. You may want to investigate that