I’m learning to use jQuery, I’m not an expert programmer. I’m using animate effect to build a horizontal navigation for the loop of WP installation (no scrolls). I animate 960px in x axis the loop with a “Next Page” button and go to start going (to 0px x position) with a “start” button. The container of this has an overflow:hidden CSS property in order to hide the posts outside the container.
Please see a live example.
I don’t know how to stop the slide effect when reaching the end of the loop div. Maybe with a conditional statement, but I don’t know to approach this.
This is the script:
<script type="text/javascript">
$(document).ready(function(){
$(".left-slide").click(function(){
$("#slide-container").animate({
left:"-=960"
}, 1500 );
});
$(".right-slide").click(function(){
$("#slide-container").animate({
left:"0"
}, 1500 );
});
});
</script>
Would something like this work?
if($("#slide-container").css('left') > -($("#slide-container").width()))
{
}
Related
I'm trying to create some sort of info "Scroll Down" button (not clickable) which has to be visible while scroll bar is up on top, fade out when scroll down a few pixels and fade back in when up again.
So far I was able to create the arrow and the message so far as well as the fading part.
Here is a fiddle: https://jsfiddle.net/8b3jL7r0/1/
var btn = $("#button");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn.addClass("show");
} else {
btn.removeClass("show");
}
});
var btn2 = $("#scrolltxt");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn2.addClass("showx");
} else {
btn2.removeClass("showx");
}
});
The problem with is that the arrow and the info text 'Scroll Down' does not appear right from the beginning, you have to scroll down a bit so they appear on top and then everything works smooth. Any clue how to make them visible right from the first load of the code?
Any idea how could I transfer all this code into one single code module in WordPress and have it work exactly like in the fiddle ? Because I've tried to insert it but it seems to not work at all, nothing appears on the page, not the arrow nor the info text.
I just added the inital classes to both elements:
https://jsfiddle.net/4e2cafju/
<div id="button" class="show"></div>
<div id="scrolltxt" class="showx">scroll down</div>
for 2:
You should be able to put these elements directly into a template. You should be able to add the css to the style sheet. And you could lnk to an external JS file. That would probably be best practice. You could also put all the code into a single page. I'm not sure how your wordpress install / theme is set up.
js fiddle: https://jsfiddle.net/zxa4h7au/
What I am trying to achieve:
Using jQuery, I would like the dot along the line to move up and down to the point of the paragraph that the user has scrolled on. so for example, the starting point would be "PARAGRAPH" then if I move down to "ANOTHER PARAGRAPH" the dot would then move down to that page.
I have tried to use scroll and animate but this does not work:
$(document).scrollDown(function(e) {
$("#badge").animate({
'marginTop' : "+=4000"
});
});
Could anyone please tell me where I am going wrong here? Or if there is another way to achieve what I am trying to do.
Maybe I've don't understand. You just need that you blue dot scroll down and scroll up with you page flow, right?
You can achieve this thing in two ways:
1 - CSS solution: just give to the badge this property "position: fixed" and than position it in the right place(centered on the line and with a top value like 0 or 10px;
2 - jQuery solution: check this fiddle https://jsfiddle.net/zxa4h7au/1/
$(window).scroll(function(e) {
var scrollTop = $(window).scrollTop();
$("#badge").css({
'marginTop' : scrollTop
});
});
Is this what you need or something different?
This is certainly going to be an easy one but I can't get my head around what I am doing wrong...
I am trying to do a hover effect on a UL that affects a link within one of the UL LI's.
My current code looks like this:
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
});
$("ul.punchlines").mouseleave(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
This technically works as it gives the effect that the base of the element to be scaled remains in place and scales up from the bottom however it does it in two stages, I am trying to get this effect to happen all in one motion so it is a seamless scale and move.
I can do this easily with basic CSS3 transitions but as it is not supported in IE9 I am trying to use jQuery to allow for maximum browser support.
Can anyone offer a little support firstly about how I get the animation to happen in one motion (not staggered) and secondly if this is the right approach? I am new to jquery and only just getting my hands dirty with it :-)
Please see JQuery hover api:
http://api.jquery.com/hover/
also make sure that your "li" have absolute position.
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
}, function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
I have the element .menu on my page, and one of my JS libraries has xslide attribute, which gives many options like draggable, overlay, radius etc.
$(document).ready(function(){
$('.menu').xslide({
draggable: true,
overlay: 'rgba(255,30,100,1)',
radius:0
});
});
The code above sets the properties in a fixed way, but I like to give them some smooth transition, so how do I use .animate thing by jQuery here? e.g I want radius to grow gradually into 20 in a few seconds when .menu clicked. So I believe my code should start like:
$('.menu').click(function(){
Now what? When I try something like:
$(this).animate.xslide({radius:'20'},1000)
It does not work, can you help me? :) I'm sorry if I'm being annoying by asking these trivial things but I'm so new to it and I'm trying very hard. ^^
jQuery animate uses CSS styles to animate. If the plugin has an extension to animate radius, it is possible, otherwise animate will not work. Is the radius a CSS property?
If it would be a border-radius it will be something like:
$("#selector").animate({
"border-radius" : "10px"
}, 500); // 500 MS
So I previously asked a question about how to create a banner like the one shown here and I got a really good answer to start me off. I have been working on it since and I'm having a lot of problems getting the animation to slide back to it's original position.
Here is my animation: http://jsfiddle.net/43nCF/ (don't click the green block first)
Issue: After the first time you toggle a block, clicking another block will not move it to the left.
I also have some other minor issues which I would be grateful if someone helped me with.
How do I get the width and the moving of the blocks to animate simultaneously like in the banner animation I am trying to replicate?
How do I get the block to slide back to the original position instead of just kind of 'transporting' there?
I am only beginner at jQuery so any help would be amazing.Thanks.
As for the positioning problem: you need to drop the left declaration in your second function.
Regarding making the animation act simultanous: animate both the right and the width property for each element, in one call:
function() {
var position = $.data(this, 'position');
var ind = $(this).index();
//moves image back to original position
$('#container div').each(
function() {
$(this).animate({
right: "",
width: 100
});
});
});
Working example here.
I see you have a response.
In case this version is of any help to you:
http://jsfiddle.net/vCbcz/
Instead of altering the divs other than the one being affected, I wrapped them all in a #slider div and adjusted that one's left margin to push it to the left.
$('#slider').animate({
marginLeft: '-' + ind * 105 + 'px'
});
and back
$('#slider').animate({
marginLeft: 0 + 'px'
});
There is a much easier way altogether of doing this. By using jQuery's scrollTo plugin, this can be done in a mere few lines of code, without using indices, calculations, or anything of that nature.
Live Demo http://jsfiddle.net/Jaybles/WEzny/