I want is to move my pagination to the left and to the right after clicked on #prev_pag and #next_pag. how is it and solve my problem?
Eg: http://jsfiddle.net/szVKD/5/
$('#next_pag').click(function() {
$('#pagination').animate({
left: '-=100px'
},
500);
});
$('#prev_pag').click(function() {
$('#pagination').animate({
left: '+=100px'
},
500);
});
});
Needed to delete the last line for javascript to compile and added "position: relative;" to #pagination div.
http://jsfiddle.net/szVKD/9/
This is a CSS issue. You need to set #pagination to position:relative; in order to animate the left css property.
Related
So I have a function which is called when input's value changes.
It checks if new value is not '' and then it's supposed to slide an input field a little to the left to make room for "clear" button to appear, but I just don't know how to do it.
Here's what I have.
<div class="searchbox">
<input type="text" ng-model="search" ng-change="filterHeaders()"
ng-focus="changeSearchValue()" ng-blur="changeSearchValue()" />
<button id="clearSearch">x</button>
</div>
Please ignore the ng-stuff, but I left it here, so there are no questions how the function is called. It's called from angular.
$('#clearSearch').hide();
searchButton = function() {
if($('.searchbox input').val() !== '') {
if($('#clearSearch:hidden')) {
$('.searchbox input').stop().animate(
{marginRight: 20},
{queue: false, duration: 500}
);
$('#clearSearch').stop().fadeIn(500);
}
}
};
But, of course, it doesn't work as I want it to. It first jumps to the left, giving room for the button to appear, as it would without any animation, and only after begins to slide 20px more to the left.
I understand, that marginRight is not the way to achieve this, but I have no other idea. What do you think?
tldr: I want to slide input to the left to make room for a button to fade in. Simultaneously.
Here is a fiddle of the problem.
All you need to do is make the clear button absolutly positioned so it doesn't disturb the other elements: (Working jsFiddle)
.searchbox {
float: right;
position:relative;
}
.searchbox button{
position: absolute;
top:0; right:0;
}
Also, I would add an "animating" class or something to tell if the input is currently animating.. What currently happens is that when typing fast the .stop() function is called every time which causes a short "break" on each keypress. Another jsFiddle to illustrate this.
If I understand correctly, what you want to do is run your second animation like so:
http://jsfiddle.net/rktpw89p/3/
$('#clearSearch').hide();
$('.searchbox input').keyup(function() {
if($('.searchbox input').val() !== '') {
if($('#clearSearch:hidden')) {
$('.searchbox input').stop().animate({
marginRight: 20
}, 500, function() {
alert('first animation complete!');
$('#clearSearch').stop().fadeIn(500);
});
}
}
});
it's waiting for the first one to complete.
use absolute positining like so :
.searchbox {
right:0;
position: absolute;
}
#clearSearch {
right:0;
top:0;
position: absolute;
}
That way, the search box does not jump to the left when the button gets rendered because absolute positioning does not affect the positioning of other DOM elements like described here
here is a working jsfiddle:
http://jsfiddle.net/rktpw89p/5/
You don't want to change the position of the input, just decrease its width, so animate the width property instead of any margins.
Here's a running example where the animation starts after two seconds.
$(function() {
$('#clearSearch').hide();
setTimeout(function() {
animate();
}, 2000);
});
function animate() {
var input = $('.searchbox input');
var newWidth = input.width() - 20;
input.stop().animate({
width: newWidth
}, {
queue: false,
duration: 500
});
$('#clearSearch').stop().fadeIn(500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="searchbox">
<input type="text" />
<button id="clearSearch">x</button>
</div>
See this fiddle: http://jsfiddle.net/r0mvyLmx/
I have to write a simple jQuery horizontal carousel from scratch, but I've stumbled into the following issue: when the next button is pressed the current element slides out of view just fine, but the next element does not slide in. It shows up only after the previous element is completely out of view. If you've not understood me, this is the effect I'm after: http://jsfiddle.net/yvD5S/ (next and previous slides sliding at the same time).
Here's my code:
$('#carousel-outer button:last').on('click', function () {
var slide = $('#carousel-inner .item.active');
slide.animate({'margin-left':'-480px'},2000,function() {
slide.css({ 'margin-left': 0 });
slide.parent().find('div:last').after(slide);
slide.removeClass('active');
slide.parent().find('div:first').addClass('active');
});
});
Whoops, the issue turned out to be pretty simple. It was not the jQuery, but actually the CSS, that is faulty. On the inner wrapper of the carousel, I had given it the same width of the outer wrapper and the slides weren't displaying inline, but rather block, so they weren't able to flow after one another. I've updated the fiddle for anyone who is interested in the issue: http://jsfiddle.net/r0mvyLmx/1/. There was also a minor change in the JS, in order to keep the inactive elements with display:none.
CSS:
#carousel-outer {
width: 480px;
margin: 0 auto;
overflow: hidden;
}
#carousel-inner {
width: 1600px;
height: 200px;
overflow: hidden;
}
jQuery change:
$('#carousel-outer button:last').on('click', function () {
var slide = $('#carousel-inner .item.active');
slide.next().addClass('active');
slide.animate({'margin-left':'-480px'},2000,function() {
slide.css({ 'margin-left': 0 });
slide.parent().find('div:last').after(slide);
slide.removeClass('active');
});
I'm trying to add a hidden sidebar on my website. This is what exactly what I want to achieve: http://demo.themebeans.com/pinto/ but I wanted it to show in hover instead of click. just instead of a click... just want my visitors to just hover on it.
Here's what I have so far. I want it to be positioned the same with the sample I've given above. :( Can someone help?
#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}
jQuery:
$(function(){
$('#nav').hover(function(){
$(this).animate({width:'200px'},500);
},function(){
$(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});
HTML:
<div id="nav">
Contents of the sidebar like the one on my sample.
</div>
http://jsfiddle.net/yztJ8/ here's the fiddle.
You need to set the absolute positioning correctly:
#nav { position: absolute; top: 0px; right: 0px; }
Just change left: 0; to right: 0; - here is the updated fiddle: http://jsfiddle.net/yGBkV/
I strongly recommend you use the hoverIntent plugin - the user experience will improve a lot:
http://cherne.net/brian/resources/jquery.hoverIntent.html
Here is a mix of pure JS and jQuery.
(function() {
var oNav = document.getElementById('nav');
oNav.addEventListener('hover', function() {
$('#nav').fadeIn();
}, false);
})();
This probably should work.
simply try
$('#nav1').bind("mouseenter", function() {
$('#nav').animate({width:'200px'},500);
});
$('#nav1').bind("mouseleave", function() {
$('#nav').animate({width:'0px'},500);
});
jsfiddle: http://jsfiddle.net/yztJ8/5/
I am trying to place an element, "inner", flush against the upper right hand corner of another div, "outer", using absolute positioning. The "inner" element is not a child of "outer". I therefore need to look up the positioning of "outer" using js and use that.
However, it's not coming out quite right:
EDIT: it's not possible for me to reset the margin/padding/relative of the body div. There are other elements inside body.
http://jsfiddle.net/BZBSF/1/
#wrapper{background:red;
width:100px;
height:100px;}
#inner{
position:absolute;
background:green;
width:50px;
height:100px;
margin:0;padding:0;
}
#body{position:relative;}
<div id = "body">
<div id = "wrapper"></div>
<div id = "inner"></div>
</div>
var rect = document.getElementById("wrapper").getBoundingClientRect();
$("#inner").css({ 'top': String($(window).scrollTop()+rect.top)+"px" });
width_inner = $("#inner").width();
$("#inner").css({ 'left': String($(window).scrollLeft()+rect.right-width_inner)+"px" });
Set margin and padding on the body element.
body{
margin: 0;
padding: 0;
}
FIDDLE
Or if there is no specific reason for body: relative; remove that.
FIDDLE
The second one is recommended.
Is this what you want?
var rect = $('#wrapper');
$("#inner").css({ 'top': rect.position().top+"px" });
$("#inner").css({ 'left': (rect.position().left + rect.width() - $('#inner').width())+"px" });
http://jsfiddle.net/araSp/2/
And if you need to worry about padding/borders, you can use:
.innerWidth()
.outerWidth()
Just do a quick reset on the top:
* {
margin:0;
padding:0;
}
Fiddle
Note: This is a quick reset. You might want to use other reset stylesheets out there.
You should remove the position relative at the body tag.
$(document).ready(function() {
$('#inner').css({
'position': 'absolute',
'top': $('#wrapper').offset().top,
'left': $('#wrapper').offset().left + $('#wrapper').width() - $('#inner').width()
});
});
DEMO:
http://jsfiddle.net/4uSeV/
I have 3 divs. When I click one of them, the div will disappear and a greeting div will appear. Got this all working, please see my fiddle:
http://jsfiddle.net/mauricederegt/pknpb/1/
At the moment this greetings div appears at a fixed position. How to make it so that it will appear above the div that was just clicked?
Is this even possible at all?
Hope someone can help me out
Thank you for your time
(ps also why are the divs forced down when clicked?)
The 3 divs drop down because .greetings has relative positioning. If you make it absolute and get the offset of the clicked element, you can position it exactly above that element and without it changing the layout of the other divs:
var offset = $(this).hide(500).offset();
var score = 'Hello';
$('.greet').text(score);
$('.greet')
.show()
.css({
top: offset.top - $('.greet').height(),
left: offset.length,
opacity: 1,
})
.stop()
.delay(200)
.animate({top: 20, opacity: 0},1000);
See fiddle
I would recommend putting each 'Hint' in a container with it's message:
<div class="hint-container">
<div class="hint"> HINT! </div>
<div class="greet"> Greetings </div>
</div>
the give the container a fixed size and relative position:
.hint-container {
position: relative;
width: 100px;
height: 20px;
}
The you can give an absolute position to the containers, make them occupy all the container and hide one of them:
.hint-container > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hint-container .greet {
display: none;
}
From here you can go on as you where doing ^.^
I hope it's clear.
Sorry, I am not versed enough to give the code in jquery for this. But, I believe you would have to send in the click event to the method handling the div with class greet. And then with position absolute set the left and top of the class greet div to the top and left stored in the event.
You can get the element's position relative to it's container using the .position(), or it's offset relative to the document using .offset().
in this case, it might look something like this:
$('.ht').click(function hint() {
var x = $(this).offset().left;//get offset relative to document
$(this).hide(500);
score = 'Hello';
$('.greet').text(score);
$('.greet')
.hide()
.css({
bottom: 20,
left: x, //add x variable here
opacity: 1,
})
.show()
.stop()
.delay(200)
.animate({'bottom':75, opacity: 0},1000);
});
however you'd probably want to make the .greet class position:absolute, and you might have to do something with the height.