Develop Reference

How to Scroll Me with smoothly scroll?

I having problem with my scroll me function to not go smoothly but instead it start slowly and then it moves quickly
$("#scrollme").click(function () {
var ele = $(this).closest("row").find(".row");
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
$('#scrollme').animate({
scrollTop: $("#scrollme").offset().top + 30
}, 'slow');
} else {
$('html, body').animate({
scrollTop: $("#scrollme").offset().top + 30
}, 'slow');
}
});

you can use scrollTo Native method :
window.scrollTo({
top: 0,
behavior: 'smooth'
});
Final code :
$("#scrollme").click(function () {
var ele = $(this).closest("row").find(".row");
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
document.querySelector('#scrollme').scrollTo({
top: $("#scrollme").offset().top + 30,
behavior: 'smooth'
});
} else {
window.scrollTo({
top: $("#scrollme").offset().top + 30,
behavior: 'smooth'
});
}
});

How would I disable JQuery/Javascript once the browser window is shrinked to a certain length?

Right now I am working on a website that is fluid, but I am having some problems with the Jquery/Javascript. As of right now, once the user begins to scroll down the page, js fades the navigation bar in and changes the color of the text within the navigation bar. A dummy site with the link can be found at . However, once the browser is resized to 960px, I want the Jquery to disable because the effects that it provides are no longer needed. One of my professors at school said I should use window.length feature, but after looking it up and trying some things, I can't seem to figure it out. He said its relatively easy, but I think I might just be screwing some things up in my syntax as I am very new to Javascript and Jquery.
Here is the js code:
$(function() {
var navigationIn = false;
if ($(window).width() > 960) {
$('body').animate({scrollTop: 0}, 10, function() {
$(window).scroll(function() {
var pos = $(this).scrollTop();
//console.log("color", color);
if (pos > 5 && navigationIn == false) {
$('#navigation').animate({
opacity: .95,
}, 500);
$('.menu').animate({
color: "000000",
}, 250);
$('#whitelogo').animate({
opacity: 0,
}, 500);
$('#bluelogo').animate({
opacity: 1,
}, 500);
navigationIn = true;
} else if (pos < 5 && navigationIn == true) {
$('#navigation').animate({
opacity: 0,
}, 500);
$('.menu').animate({
color: "FFFFFF",
}, 250);
$('#whitelogo').animate({
opacity: 1,
}, 500);
$('#bluelogo').animate({
opacity: 0,
}, 500);
navigationIn = false;
}
});
});
} else if () {
}
});

Here's your code with the suggested if statement that avoids all your scroll animation if the window width is less than 960 pixels:
$(function () {
var navigationIn = false;
$('body').animate({
scrollTop: 0
}, 10, function () {
$(window).scroll(function () {
if ($(window).width() > 960) {
var pos = $(this).scrollTop();
//console.log("color", color);
if (pos > 5 && navigationIn == false) {
$('#navigation').animate({
opacity: .95,
}, 500);
$('.menu').animate({
color: "000000",
}, 250);
$('#whitelogo').animate({
opacity: 0,
}, 500);
$('#bluelogo').animate({
opacity: 1,
}, 500);
navigationIn = true;
} else if (pos < 5 && navigationIn == true) {
$('#navigation').animate({
opacity: 0,
}, 500);
$('.menu').animate({
color: "FFFFFF",
}, 250);
$('#whitelogo').animate({
opacity: 1,
}, 500);
$('#bluelogo').animate({
opacity: 0,
}, 500);
navigationIn = false;
}
}
});
});
});

How do I Gradual Zoom In while changing color on Mouse Hover and Gradual Zoom Out and fading color on mouse house

What i am trying to achieve is gradually zoom the image while having it color change with the new image. For example the image apple with black color and i have another image apple with red color. When you mouse hover on the black apple, it will gradually change it color turning to red. The problem is when I hover the mouse, it changes to the other image instantly and then zoom out. Any ideas? or is it possible in jquery?
(function ($) {
"use strict";
// Start Documentation
$(document).ready(function () {
// About Us Title Text
$('.about_us_img,.about_us_txt').mouseover(function () {
{
$('.about_us_img').animate({
width: "216px"
}, 400);
$('.about_us_txt').css({
color: '#49968b'
});
$('.about_us_txt').animate({
fontSize: newSizeAU
}, 300);
$('.about_us_img').attr("src", AboutHut);
$(this).fadeTo('300', 0.9);
}
});
$('.about_us_img,.about_us_txt').mouseout(function () {
{
$('.about_us_img').animate({
width: "196px"
}, 400);
$('.about_us_txt').css({
color: '#000'
});
$('.about_us_txt').animate({
fontSize: oldSizeAU
}, 300);
$(this).fadeTo('300', 1);
$('.about_us_img ').attr("src", OrigHut);
}
});
var oldSizeAU = parseFloat($('.about_us_txt').css('font-size'));
var newSizeAU = oldSizeAU * 1.1;
//Our Project
$('.our_project_img,.our_project_txt').mouseover(function () {
{
$('.our_project_img').animate({
width: "216px"
}, 400);
$('.our_project_txt').css({
color: '#b26c64'
});
$('.our_project_txt').animate({
fontSize: newSizePR
}, 300);
$('.our_project_img').attr("src", ProjectHut);
$(this).fadeTo('300', 0.9);
}
});
$('.our_project_img,.our_project_txt').mouseout(function () {
{
$('.our_project_img').animate({
width: "196px"
}, 400);
$('.our_project_txt').css({
color: '#000'
});
$('.our_project_txt').animate({
fontSize: oldSizePR
}, 300);
$(this).fadeTo('300', 1);
$('.our_project_img').attr("src", OrigHut);
}
});
var oldSizePR = parseFloat($('.our_project_txt').css('font-size'));
var newSizePR = oldSizePR * 1.1;
//My Profile
$('.my_profile_img,.my_profile_txt').mouseover(function () {
{
$(this).fadeTo('300', 0.9);
$('.my_profile_img').animate({
width: "216px"
}, 400);
$('.my_profile_txt').css({
color: '#8db262'
});
$('.my_profile_txt').animate({
fontSize: newSize
}, 300);
$('.my_profile_img').attr("src", ProfileHut);
}
});
$('.my_profile_img,.my_profile_txt').mouseout(function () {
{
$('.my_profile_img').animate({
width: "196px"
}, 400);
$('.my_profile_txt').css({
color: '#000'
});
$('.my_profile_txt').animate({
fontSize: oldSize
}, 300);
$(this).fadeTo('300', 1);
$('.my_profile_img').attr("src", OrigHut);
}
});
var oldSize = parseFloat($('.my_profile_txt').css('font-size'));
var newSize = oldSize * 1.1;
/****
$('.my_profile_img,.my_profile_txt').mouseover(function () {
$('.my_profile_img,.my_profile_txt').fadeTo('slow', 0.8, function () {
$('.my_profile_img').animate({
width: newWidthSize
}, 500);
$('.my_profile_txt').animate({
fontSize: NewSize
}, 300);
$(this).fadeTo('200', 1);
$('.my_profile_img').attr('src', ProfileHut);
});
});
$('.my_profile_img,.my_profile_txt').mouseout(function () {
$('.my_profile_img').animate({
width: oldWidthSize
}, 500);
$('.my_profile_txt').animate({
fontSize: oldSize
}, 300);
$(this).fadeTo('300', 0.9, function () {
$('.my_profile_img').attr('src', OrigHut);
$(this).fadeTo('300', 1);
});
});
var oldWidthSize = parseFloat($('.my_profile_img').css('width'));
var newWidthSize = oldWidthSize * 1.1;
**/
// End Ready Documentation
});
})(jQuery);

jQuery does not support color animation. However, jQuery UI has a plugin that handles color animations (see the UI page for color animation here: http://jqueryui.com/animate/). You need to install jQuery UI first and use the plugin, which you find here: https://github.com/jquery/jquery-color/
There is also a great example on the plugin page.
Once you have the plugin installed, it should be easy to animate colors. The snippet below, taken from the plugin documentation, should give you an idea of how it works:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #bada55;
width: 100px;
border: 1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> //jQuery UI
<script src="jquery.color.min.js"></script> //plugin
</head>
<body>
<button id="go">Simple</button>
<button id="sat">Desaturate</button>
<div id="block">Hello!</div>
<script>
jQuery("#go").click(function(){
jQuery("#block").animate({
backgroundColor: "#abcdef"
}, 1500 );
});
jQuery("#sat").click(function(){
jQuery("#block").animate({
backgroundColor: jQuery.Color({ saturation: 0 })
}, 1500 );
});
</script>
</body>
</html>

It seems that you want to transition between two images, and not change the color of a single image, is that right?
This FIDDLE (click on the minion) makes the minion enlarge, then fade away, then is replaced by Mickey Mouse. If this is the general thing you're looking for you could have two images, exactly the same size but different colors, and play with the sizes in the fiddle.
JS
$( ".imagediv" ).click(function(){
$( "#minion" ).animate({
height: 400,
width: 300
}, 3000,
function() {
$( "#minion" ).animate({
opacity: 0
}, 1000,
function() {
$('.imagediv').html( $('.hiddendiv img').clone() );
});
});
});//end click

Maximum height when opening a div

How do I make a max height?
animate( { height: '500px' } to animate( { height: '100%' }
I have some heights with 200px 300px 400px 800px.
$(document).ready(function() {
$("#updo").click(function(){
$("#updo_folder").stop();
$("#updo_folder").show();
if($("#updo_folder").height() < 1){
$("#updo_folder").animate( { height: '500px' }, 1000 , function(){$(this).show();});
}else{
$("#updo_folder").animate( { height: '0px' }, 1000, function(){$(this).hide();});
}
});
});
var jump=function(e)
{
e.preventDefault();
var target = $(this).attr("href");
$('html,body').animate(
{
scrollTop: $(target).offset().top
},500,function()
{
location.hash = target;
});
}
$(document).ready(function()
{
$('a[href*=#]').bind("click", jump);
return false;
});
http://jsfiddle.net/prffrost/TFBeu/4/

You set height: 100%, measure it, then set height: 0px again and animate to that height:
$(document).ready(function () {
$("#updo").click(function () {
// Use a variable rather than endlessly repeating the lookup
var folder = $("#updo_folder");
var targetHeight;
folder.stop().show();
if (folder.height() < 1) {
// Set it to full height
folder.css("height", "100%");
// Measure it
targetHeight = folder.height();
// Set back to zero height, and animate to the measured height
folder.css("height", "0px");
folder.animate({
height: targetHeight
}, 1000, function () {
$(this).show();
});
} else {
folder.animate({
height: '0px'
}, 1000, function () {
$(this).hide();
});
}
});
});
Updated Fiddle

jquery slide in menu animation bug

I have written a script to have a slide in top bar (branding) and a menu that site above and below a slider (or banner). When they scroll back in it's just the branding and the menu.. no slider or banner.
It works but there is a bug I can't seem to fix.
The page has 4 main elements but the SLIDER OR BANNER are option elements (not always present):
<div id="branding">BRANDING</div>
<div id="header">
<div id="slider">SLIDER OR BANNER</div>
<div id="menu">MENU</div>
</div>
<div id="content">CONTENT</div>
And here is my script so far:
var sticky_navigation = function () {
$lH = ($('#branding').length) ? $('#branding').height() : 0,
$sH = ($('#slider').length) ? $('#slider').height() : 0,
$bH = ($('#banner').length) ? $('#banner').height() : 0,
$mH = ($('#menu').length) ? $('#menu').height() : 0;
var $content = $('#content'), // Main content area
$branding = $('#branding'),
$header = $('#header'),
$menu = $('#menu');
// HEADER
if ($(window).scrollTop() > $lH) {
$header.css({
marginTop: $lH + "px"
});
if ($branding.css('position').toString() != "fixed") {
$branding.css({
position: "fixed",
top: "-" + $lH + "px",
left: 0,
zIndex: 500,
}).animate({
top: 0
}, 700);
}
} else {
$branding.css({
position: "relative",
marginTop: "0px",
});
$header.css({
marginTop: "0px"
});
}
// MENU
if ($(window).scrollTop() > ($bH + $sH + $mH)) {
$branding.css({
boxShadow: "none",
});
$header.css({
marginTop: ($lH + $mH) + "px"
});
if ($menu.css('position').toString() != "fixed") {
$menu.css({
position: "fixed",
top: "-" + $lH + "px",
left: 0,
zIndex: 490,
}).animate({
top: $lH
}, 700);
}
} else {
$menu.css({
position: "relative",
marginTop: "0px",
top: 0,
});
if ($('#branding').length || $('#slider').length) {
$branding.css({
boxShadow: "0 0 16px rgba(0, 0, 0, 0.5)",
})
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function () {
sticky_navigation();
});
// and run it again every time you resize
$(window).resize(function () {
sticky_navigation();
});
Here is a jsfiddle for it as I have it now... to see the bug scroll up and down quickly.. you should see the menu sits lower than it should.
http://jsfiddle.net/hC423/1/
Any help with this is very much appreciated. I'm open to suggestions if there's a better way to do this.
C

http://jsfiddle.net/hC423/2/
Added 250ms delay after user scrolls.
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
var sticky_navigation = function () {
setTimeout(function // ###### ADDED ######
$lH = ($('#branding').length) ? $('#branding').height() : 0,
$sH = ($('#slider').length) ? $('#slider').height() : 0,
$bH = ($('#banner').length) ? $('#banner').height() : 0,
$mH = ($('#menu').length) ? $('#menu').height() : 0;
var $content = $('#content'), // Main content area
$branding = $('#branding'),
$header = $('#header'),
$menu = $('#menu');
// HEADER
if ($(window).scrollTop() > $lH) {
$header.css({
marginTop: $lH + "px"
});
if ($branding.css('position').toString() != "fixed") {
$branding.css({
position: "fixed",
top: "-" + $lH + "px",
left: 0,
zIndex: 500,
}).animate({
top: 0
}, 700);
}
} else {
$branding.css({
position: "relative",
marginTop: "0px",
});
$header.css({
marginTop: "0px"
});
}
// MENU
if ($(window).scrollTop() > ($bH + $sH + $mH)) {
$branding.css({
boxShadow: "none",
});
$header.css({
marginTop: ($lH + $mH) + "px"
});
if ($menu.css('position').toString() != "fixed") {
$menu.css({
position: "fixed",
top: "-" + $lH + "px",
left: 0,
zIndex: 490,
}).animate({
top: $lH
}, 700);
}
} else {
$menu.css({
position: "relative",
marginTop: "0px",
top: 0,
});
if ($('#branding').length || $('#slider').length) {
$branding.css({
boxShadow: "0 0 16px rgba(0, 0, 0, 0.5)",
})
}
}
} ,250); // ###### ADDED ######
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function () {
sticky_navigation();
});
// and run it again every time you resize
$(window).resize(function () {
sticky_navigation();
});
};