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'
});
}
});

Absolute center with jquery return margin-left 0

I have designed a JQuery plug-in for a website, with the purpose of helping center an element with absolute position, using pixels and not percentage.
When the page starts, elements are centered vertically but not horizontally (margin-left=0). When I use the same script in console, I apply to an element and it works.
Code to append the function :
$(document).ready(function() {
$(element).psfCenter();
});
Function :
(function ($){
// center element
$.fn.psfCenter=function(orientation){
return this.each(function() {
var widthParent=$(this).parent().width()/2;
var heightParent=$(this).parent().height()/2;
var widthElement=$(this).width()/2;
var heightElement=$(this).height()/2;
var left=widthParent-widthElement;
var top=heightParent-heightElement;
console.log(orientation)
switch(orientation){
case"x":
$(this).css({
'position':'absolute',
'margin-left':left,
})
break;
case "y":
$(this).css({
'position':'absolute',
'margin-top':top
})
break;
default:
$(this).css({
'position':'absolute',
'margin-left':left,
'margin-top':top
})
break;
}
});
};
})(jQuery);

I would give the element left 50% and than margin-left the half of its width.
This because you probably want to have it working on a smaller device (responsive).
Something like this: http://jsfiddle.net/bsxqmL6f/
$.fn.psfCenter = function(orientation) {
return this.each(function() {
var self = $(this);
var inner_width = self.width();
var inner_height = self.height();
var set_absolute = function() {
self.css('position', 'absolute');
}
var set_left = function() {
self.css({
'left': '50%',
'margin-left': '-' + (inner_width * .5) + 'px'
}); // faster than deviding by 2
};
var set_top = function() {
self.css({
'top': '50%',
'margin-top': '-' + (inner_height * .5) + 'px'
}); // faster than deviding by 2
};
set_absolute();
switch(orientation) {
case 'x':
set_top();
break;
case 'y':
set_left();
break;
default:
set_left();
set_top();
break;
}
});
}
$('.center-me').psfCenter();
.center-me {
width: 50px;
height: 50px;
background-color: red;
}
.huge {
width: 250px;
height: 250px;
background-color: yellow;
}
.smaller {
width: 120px;
height: 120px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center-me huge"></div>
<div class="center-me smaller"></div>
<div class="center-me"></div>

Animate Back To Top Button

I have a back to top button that fades in at certain points on scroll. I am looking to change the script so instead of fading in and out that the button slides left 50px then slides right -50px; (off the screen)
Here is my code for fading in and out:
var offset = 220;
var duration = 500;
$(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
} else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, duration);
return false;
})
I tried this but its not working for me:
var offset = 220;
var duration = 500;
$(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
$('.back-to-top').animate({ "left": "+=50px" }, duration );
} else {
$('.back-to-top').animate({ "right": "+=50px" }, duration );
}
});
Any help would be greatly appreciated.

Try this...
$(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
$('.back-to-top').animate({"left":"-50px"}, "slow").removeClass('visible');
} else {
$('.back-to-top').animate({"left":"50px"}, "slow").addClass('visible');
}
});
or you can use the jquery UI based example..like this
$('.back-to-top').hide('slide', {direction: 'left'}, 1000);

How abt this one :-
var offset = 220;
var duration = 500;
$(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
$('.back-to-top').animate({ "right": "+100px" }, duration );
} else {
$('.back-to-top').animate({ "left": "0px" }, duration );
}
});

How can i scroll the page with img tag [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to scroll the page vertically without using the scrollbar.
instead i want to use 2 image tags for scrolling the page.
this was the code i tried for the scroll but it didnt look good:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
div.mousescroll {
overflow: hidden;
}
div.mousescroll:hover {
overflow-y: scroll;
}
</style>
<script language="javascript" type="text/javascript">
$(function() {
$(".wrapper1").scroll(function left() {
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function right() {
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
});
</script>
<div id="first" class="wrapper1 ">
<div id="first2" class=" div1 ">
</div>
<br />
</div>
<br />
<div id="second" class="wrapper2 mousescroll">
<div id="second2" style=" overflow-x:scroll" class="div2">
<table>
...............
</table>
</div>
</div>
imagine that the width of this table is 2000px and instead of scrollbar i wanna use two image tags that can do the scroll job.
can anyone help me with this?

$(window).load(function () {
(function ($) {
jQuery.fn.extend({
slimScroll: function (o) {
var ops = o;
//do it for every element that matches selector
this.each(function () {
var isOverPanel,
isOverBar,
isDragg,
queueHide,
barHeight,
divS = "<div></div>",
minBarHeight = 30,
wheelStep = 30,
o = ops || {},
cwidth = o.width || "auto",
cheight = o.height || "250px",
size = o.size || "7px",
color = o.color || "#000",
position = o.position || "right",
opacity = o.opacity || 0.4,
alwaysVisible = o.alwaysVisible === true;
//used in event handlers and for better minification
var me = $(this);
//wrap content
var wrapper = $(divS)
.css({
position: "relative",
overflow: "hidden",
width: cwidth,
height: cheight,
})
.attr({ class: "slimScrollDiv" });
//update style for the div
me.css({
overflow: "hidden",
width: cwidth,
height: cheight,
});
//create scrollbar rail
var rail = $(divS).css({
width: "15px",
height: "100%",
position: "absolute",
top: 0,
});
//create scrollbar
var bar = $(divS)
.attr({
class: "slimScrollBar ",
style: "border-radius: " + size,
})
.css({
background: color,
width: size,
position: "absolute",
top: 0,
opacity: opacity,
display: alwaysVisible ? "block" : "none",
BorderRadius: size,
MozBorderRadius: size,
WebkitBorderRadius: size,
zIndex: 99,
});
//set position
var posCss = position == "right" ? { right: "1px" } : { left: "1px" };
rail.css(posCss);
bar.css(posCss);
//wrap it
me.wrap(wrapper);
//append to parent div
me.parent().append(bar);
me.parent().append(rail);
//make it draggable
bar.draggable({
axis: "y",
containment: "parent",
start: function () {
isDragg = true;
},
stop: function () {
isDragg = false;
hideBar();
},
drag: function (e) {
//scroll content
scrollContent(0, $(this).position().top, false);
},
});
//on rail over
rail.hover(
function () {
showBar();
},
function () {
hideBar();
}
);
//on bar over
bar.hover(
function () {
isOverBar = true;
},
function () {
isOverBar = false;
}
);
//show on parent mouseover
me.hover(
function () {
isOverPanel = true;
showBar();
hideBar();
},
function () {
isOverPanel = false;
hideBar();
}
);
var _onWheel = function (e) {
//use mouse wheel only when mouse is over
if (!isOverPanel) {
return;
}
var e = e || window.event;
var delta = 0;
if (e.wheelDelta) {
delta = -e.wheelDelta / 120;
}
if (e.detail) {
delta = e.detail / 3;
}
//scroll content
scrollContent(0, delta, true);
//stop window scroll
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
};
var scrollContent = function (x, y, isWheel) {
var delta = y;
if (isWheel) {
//move bar with mouse wheel
delta = bar.position().top + y * wheelStep;
//move bar, make sure it doesn't go out
delta = Math.max(delta, 0);
var maxTop = me.outerHeight() - bar.outerHeight();
delta = Math.min(delta, maxTop);
//scroll the scrollbar
bar.css({ top: delta + "px" });
}
//calculate actual scroll amount
percentScroll =
parseInt(bar.position().top) /
(me.outerHeight() - bar.outerHeight());
delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
//scroll content
me.scrollTop(delta);
//ensure bar is visible
showBar();
};
var attachWheel = function () {
if (window.addEventListener) {
this.addEventListener("DOMMouseScroll", _onWheel, false);
this.addEventListener("mousewheel", _onWheel, false);
} else {
document.attachEvent("onmousewheel", _onWheel);
}
};
//attach scroll events
attachWheel();
var getBarHeight = function () {
//calculate scrollbar height and make sure it is not too small
barHeight = Math.max(
(me.outerHeight() / me[0].scrollHeight) * me.outerHeight(),
minBarHeight
);
bar.css({ height: barHeight + "px" });
};
//set up initial height
getBarHeight();
var showBar = function () {
//recalculate bar height
getBarHeight();
clearTimeout(queueHide);
//show only when required
if (barHeight >= me.outerHeight()) {
return;
}
bar.fadeIn("fast");
};
var hideBar = function () {
//only hide when options allow it
if (!alwaysVisible) {
queueHide = setTimeout(function () {
if (!isOverBar && !isDragg) {
bar.fadeOut("slow");
}
}, 1000);
}
};
});
//maintain chainability
return this;
},
});
jQuery.fn.extend({
slimscroll: jQuery.fn.slimScroll,
});
})(jQuery);
//invalid name call
$("#Id").slimscroll({
color: "#aaa",
size: "6px",
width: "392px",
height: "525px",
});
});

Expand and collapse a div

I have a list of items & they are holding images, each image is 800w x 600 H. The original div height is 800 W x 300 H. I figured out how to expand the div when it is clicked, but i want to know how to collapse it when you clicked it while it is already expanded. Right now i just expands the div even further
$('.expand').bind('click', function() {
var currHeight = $(this).css('height').replace(/px/,'');
currHeight = currHeight * 1;
var newHeight = currHeight + 500;
$(this).animate({
height: newHeight
},1000);
});
any idea on how to create an if else statement that would say, IF the div is already expanded then collapse on click, or if the div is collapse, then expand to # of px.

You can detect the current height and branch:
$('.expand').bind('click', function() {
var $this = $(this),
height = $this.height();
if (height > 500) {
height -= 500;
}
else {
height += 500;
}
$this.animate({
height: height
},1000);
});
I've done a couple of other things in there. You can use height rather than css('height') to get the value without units, and no need for the * 1 trick. I've also done the $(this) once and reused it, since there are multiple function calls and an allocation involved when you call the $() function. (It doesn't matter here, but it's a good habit to get into provided you're not caching it longer than you mean to [via a closure or such].)
Alternately, you can remember that you've done it another way (using the data feature):
$('.expand').bind('click', function() {
var $this = $(this),
height = $this.height(),
expanded = $this.data('expanded');
if (expanded) {
height -= 500;
}
else {
height += 500;
}
$this.data('expanded', !expanded);
$this.animate({
height: height
},1000);
});
Or combine those to store the original height in case it gets influenced by something else:
$('.expand').bind('click', function() {
var $this = $(this),
height = $this.height(),
prevHeight = $this.data('prevHeight');
if (prevHeight) {
height = prevHeight;
$this.data('prevHeight', undefined);
}
else {
$this.data('prevHeight', height);
height += 500;
}
$this.animate({
height: height
},1000);
});
Take your pick!

I would use CSS to set the height of the div in both original and expanded versions, and then when the div is clicked, toggle a class to change the height:
/* CSS for the height */
.expand {
height: 300px;
}
.expand.expanded {
height: 600px;
}
and then in the click method, just:
$(this).toggleClass("expanded");

A few pointers with jQ:
.click(function(){})
.css({height: "300*1px"}) // Why are you multiplying Anything by ONE?!
And you can use
if($(this).css("height") == "300px") {
Do stuff
} else {
Do other stuff
}
Edit: But other options above are far better.

You can check the .height() at the time of the click event and .animate() the height += or -= accordingly (something .animate() supports), like this:
$('.expand').click(function() {
$(this).animate({
height: $(this).height() > 300 ? "+=500px" : "-=500px"
}, 1000);
});
Or, use .toggle(), like this:
$('.expand').toggle(function() {
$(this).animate({ height: "+=500px" }, 1000);
}, function() {
$(this).animate({ height: "-=500px" }, 1000);
});

Pure Jquery, check the documentation Jquery Animate
$( "#clickme" ).click(function() {
$( "#book" ).animate({
height: "toggle"
}, {
duration: 5000,
specialEasing: {
height: "linear"
},
complete: function() {
//DO YOUR THING AFTER COMPLETE
}
});
});