jQuery .scroll .animate for multiple elements - javascript

I have two divs that I'm trying to keep on the page. I don't want them to move. Both have a unique id: search_box and menuButton. I tried implementing the following code and it worked for the part with the search_box id:
$(document).scroll(function() {
$("#search_box")
.stop()
.animate({
"marginTop": ($(window).scrollTop() + 5) + "px"
}, 0);
However when I tried to do it for the second div, it didn't work. I tried to create a class called test and to add the class to both divs and it didn't work. I tried $("#search_box" "#menuButton"). Since I'm very knew to js, at this point I'm not sure how to proceed.

You can do this with css
#search_box, #menuButton {
position: fixed;
top: 5px;
}
Another thing, this is way to use multiple jquery selector
$("#search_box, #menuButton")

Try this
$("#search_box", "#menuButton")
use comma as a separator.

Related

Preventing the div element from moving when it toggles some other elements?

As you see in here: http://jsfiddle.net/agonl/4o79p3ww/ ,
in the beginning, the on/off button is above its normal position. I know it's because of hiding the other div elements when document is loaded, but how can I fix this moving problem?
Thanks.
$(document).ready(function() {
$(".tog").css({"display":"none"});
$(".onoff").click(function(){
$(".button1").fadeToggle();
$(".button2").fadeToggle();
$(".button3").fadeToggle();
$(".button4").fadeToggle();
});
});
The problem is, that you toggle between display: none and display: block. If an element has display: none the required space for the element does not get allocated. You could use opacity:0 to make the element invisible but still requiring it's space and then toggle it's visibility like this:
$(".tog").animate({"opacity": !($(".tog").css("opacity") > 0)}, 500);
and if you want the objects with class .tog to be invisible from the beginning set this in css:
.tog{
opacity: 0;
}
fiddle
you can add this:
.row {
min-height:170px;
}
You can use the opacity to make a toggle:
I also simplified your code a little bit.
$(".tog").animate({ 'opacity': 0});
http://jsfiddle.net/agonl/4o79p3ww/

changing element.style on the finishing position of a jQuery animated div

I am using a photo album jQuery plugin (Supersized). It includes a thumbnail tray which slides up from the bottom of the screen at the touch of a button, resulting in the following HTML being created onto the div properties and in firebug css 'element.style. property:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 0px;"
I am trying to place a footer div at the bottom of the page though, so want to move the finishing position to 'bottom:0px'. I have seen that an extra element.style can be added to local CSS but without a 'before' and 'after' type of selection I don't understand if that can help me. Furthermore I don't find the function in the JS files and from what I understand it can't be accessed anyway. I need to change these to be:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 42px;"
Any advice would be most welcome. Thanks
$('#clickedElement').on('click', function() {
$('#element').css('bottom', '42px')
});
If i didn't missunderstand you?
Probably the function which you can not find is jquery .css() function you can read how it works here.
Also if you want to animate some dive you can use jquery .animate() function (docs).
In your case it should looks like:
$('#button').click(function() {
$('#element').animate({
$('#element').css('bottom', '42px');
}, 5000, function() {
});
});
Where 5000 it's time of your animation in miliseconds.

Changing CSS using Javascript Function (condensing code)

I am still new to javascript (not to mention a designer, certainly not developer) so bear with me.
I wanted to use some random numbers in my CSS, and the only way I could find that fit the bill was to incorporate some Javascript to generate the random numbers and then modify the CSS. The idea is to get some slides to animate into view, rotate on hover, and animate away when clicking on another category.
I've managed to get it working in my document, both on load and called from buttons on click, but the only way I can get it to work is if I write out the full code for each instance. Each time it is the same, so when I need to change something, say a transition time, I have to do it over and over in multiple locations. It works for now but is certainly not ideal.
I wont put the full code in here (because it's absurdly long), but here's an example. I have this:
$(function() {
$("#printLink").click(function() {
$(".print").each(function() {
$(this).css({
"left":(Math.floor(Math.random()*10)-5),
"bottom":(Math.floor(Math.random()*10)-5),
});
});
$(".web, .motion").each(funtion() {
$(this).css({
"left":(Math.floor(Math.random()*200)-100) + '%',
"bottom":(Math.floor(Math.random()*500)+500),
});
});
});
});
Okay, so there's a button #printLink and separate groups of slides with classes .print, .web, and .motion (in the demo link below there are no slides in the motion section). The idea is that when I click on #printLink that the .print slides will move into view and the .web and .motion slides with move off screen. Like I said, I already have all of this working, but I have to specify all of the CSS again and again.
What I'd like to have is something like:
function moveIn(){
$(this).css({
"left":(Math.floor(Math.random()*10)-5),
"bottom":(Math.floor(Math.random()*10)-5),
});
}
function moveOut(){
$(this).css({
"left":(Math.floor(Math.random()*200)-100) + '%',
"bottom":(Math.floor(Math.random()*500)+500),
});
}
$(function() {
$("#printLink").click(function() {
$(".print").each(function() {
moveIn();
});
$(".web, .motion").each(function() {
moveOut();
});
});
});
This way I can just reference the same string of CSS each time, and minimize the chance for mismatched code.
Here's a reference link to give you a better idea of what I'm talking about.
Also, what's wrong with:
$(function() {
$("#printLink").click(function() {
$(".print").each(moveIn);
$(".web, .motion").each(moveOut);
});
});
the two functions you defined should work perfectly.
If you want to embrace CSS3, and didn't have the need for random numbers, you could handle this with a few classes in your CSS...
.print, .web {
display: absolute;
top: 500px; left: -1000px;
opacity: 0.0;
-webkit-transition: all 0.5s ease-in-out;
}
.printOn, .webOn {
top: 0px; left: 0px;
opacity: 1.0;
}
Then your links can just toggle these classes...
$(function() {
var $print = $('.print'), $web = $('.web');
$("#printLink").click(function(e) {
$print.addClass('printOn');
$web.removeClass('webOn');
e.preventDefault();
});
$("#webLink").click(function(e) {
$web.addClass('webOn');
$print.removeClass('printOn');
e.preventDefault();
});
});
Note: The "transition" property is not very well supported as of this writing. But even in a browser that doesn't support it, the links should be shown and hidden - just without any animation.

Jquery animate error

it's 3 am right now and I'm not the best at jquery, can someone tell me what stupid mistake I'm making?
I have it in a jsfiddle here: http://jsfiddle.net/JamesKyle/7GWRp/
There's a kink in css transitions that don't allow them to be used on :before or :after elements, so I'm trying to do a workaround using jquery which is already being used on the page. Basically these are the three css state normal, hover, and active.
(I'm trying to animate the little shine at the top)
$(document).ready(function() {
$('.button:before').mouseover(function() {
$(this).animate({
left: '0px',
opacity: 1
}, 100);
});
$('.button:before').click(function() {
$(this).animate({
left: '30px',
opacity: 0
}, 100);
});
$('.button:before').mouseout(function() {
$(this).animate({
left : '-30px',
opacity : '1'
}, 100);
});
});
The verdict here is that, since pseudo elements are not part of the DOM, they cannot be directly targeted with jQuery.
Inserting a physical element like <div class="button gray"><span></span>Button</div> seems to me to be the easiest solution but it does clutter the markup...

How can I make a Twitter style alert stick to the top of the window?

There is an excellent code example on how to make nice jQuery Twitter style alerts here:
http://blog.codecrate.com/2009/10/twitter-style-alerts-in-rails.html
$(function () {
var alert = $('.alert');
if (alert.length > 0) {
alert.show().animate({height: alert.outerHeight()}, 200);
window.setTimeout(function() {
alert.slideUp();
}, 3000);
}
});
However, one thing that the code doesn't include is functions to stick the alert div to the top of the window, no matter how far down the page the user has scrolled.
I have found a few examples but nothing seems to play nice with this existing code.
Any ideas?
You can use the CSS style : position: fixed though I think IE has some issues with that (no surprise there..).
Use position: fixed as well as top: 0px. That will keep the div at the top of the page, always. If you want it to the right or left, then add right: 0px or left: 0px to the div.

Categories

Resources