I am using the following script to scroll to the top of a scrolling DIV when a link is clicked:
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('#disqus_thread').animate({scrollTop: $("#"+id).position().top},3000,'easeOutQuint');
}
</script>
Here's the html for the link:
<div id="commenttext"><img src="files/comment.png" class="imgHoverable"></div>
I would like the textarea that is underneath the DIV that is scrolled to to have the focus added to it after the scroll. I presume this would mean adding code something like this:
$("textarea.placeholder").focus();
But I am not sure how to include this in the above script. I tried adding it as a line at the end of the script, but it didn't work.
Could someone help me out with this?
Thanks,
Nick
function goToByScroll(id){
$('#disqus_thread')
.animate({scrollTop: $("#"+id).position().top},
3000,
'easeOutQuint',
function() { $("textarea.placeholder").focus(); }
);
}
The last argument when passed this way is the complete callback.
Documentation.
Related
I have a working "go to top" button in my forum. I have chosen to go with the following code because it does not change my forum's URL in any way, which is important. Within the head section:
<script>
function scrollWindow() {
var top = document.getElementById('goHere').scrollTop;
window.scrollTo(0, top);
}
</script>
The div within the body I want to go to:
<div id="goHere"></div>
The input:
<input type="image" onclick="scrollWindow()" value="Scroll" class="goTop" src="http://example.com/images/26.png" alt="" />
It functions well and leaves my URL clean. My questions:
Can my JavaScript be edited to allow smooth scrolling to the div ID (and if so, would you please help me with the edits)?
Must I link to an external jQuery file in order to achieve this?
So making it as simple as possible, here it is using JQuery, see fiddle http://jsfiddle.net/aq9ptz0L/2/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#goHere").offset().top
}, 2000);
});
Note in your <head> section add this if you dont already have JQuery:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Add this script instead of your script and working fiddle here Link
!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"object"==typeof module?module.exports=t():e.smoothScroll=t()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var e=function(e){return"HTML"===e.nodeName?-window.pageYOffset:e.getBoundingClientRect().top+window.pageYOffset},t=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},n=function(e,n,o,i){return o>i?n:e+(n-e)*t(o/i)},o=function(t,o,i,r){o=o||500,r=r||window;var u=window.pageYOffset;if("number"==typeof t)var a=parseInt(t);else var a=e(t);var d=Date.now(),f=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=function(){var e=Date.now()-d;r!==window?r.scrollTop=n(u,a,e,o):window.scroll(0,n(u,a,e,o)),e>o?"function"==typeof i&&i(t):f(s)};s()},i=function(e){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash),o(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};return document.addEventListener("DOMContentLoaded",function(){for(var e,t=document.querySelectorAll('a[href^="#"]:not([href="#"])'),n=t.length;e=t[--n];)e.addEventListener("click",i,!1)}),o}});
function scrollWindow() {
var top = document.getElementById('goHere');
window.smoothScroll(top)
}
</script>
Please refer to this website here. I have used marquee in best seller product. when I will go to over the image in the sense quick view pop will come. if am over on the image means it will stop. but over on the quick view image in the sense it doesn't stop. how I can stop this. please help me it's killing my time.the following code for use this marquee.
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function() {
$(".items").simplyScroll({autoMode: 'bounce'});
});
})(jQuery);
</script>
The Quickshop ID is over the images, including the div items. Just add the same functionality to the quickshop link
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(document).ready(function() {
$(".items, #em_quickshop_handler").simplyScroll({autoMode: 'bounce'});
});
})(jQuery);
</script>
I'm not fluent in javascript and I'm trying to edit this example at w3schools to make a simple headline within a div slide to the right smoothly (from out of view) upon page load. I just KNOW it has something to do with the code that is already here, but I'm having two problems.
When I turn the box they are moving into a text headline and change the "div" selector into '.headline' (or whatever I've named it), clicking the button won't move it.
If I figure that out, I still don't know how to make it work without the button.
Right now that code is invoked with a click handler, just remove the wrapper for that and execute it on page load:
$(document).ready(function() {
$(".header").animate({ //be sure to change the class of your element to "header"
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Demo: http://jsfiddle.net/tymeJV/ZWtQw/1/
if you want to make it when body loads just try these
100% working
The html content and coding are as follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var function1 = function(){
$(document).ready(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
};
</script>
</head>
<body onload="function1();">
<p> in the body tag i have added onload event which tells that when body is fully loaded then do this function which has a name of function1 or you can name something else but remember <b>in script tag the name after var should be same as the name in onload event </b></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Here is my script :
<body>
<div id ="mainCategory" class='fade'>
Category</div>
<div id="divSubCategory">
Category1
<br />
Category2
</div>
<script type="text/javascript">
$("div").hover(
function () {
$(this).append($("#divSubCategory").html());
},
function () {
$("#divSubCategory").remove();
}
);
$("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
</script>
</body>
I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?
$(document).ready(function(){
$('#mainCategory').bind('mouseenter', function() {
$('#divSubCategory').fadeIn();
});
$('#mainCategory').bind('mouseleave', function() {
$('#divSubCategory').fadeOut();
});
});
Ok dude the problem is that you're using .html(). This copies the inner html (not the outer <div id="divSubCategory"></div> bit too... just the bit in the middle.
Because of this, when you do $('#divSubCategory').remove() its removing the actual div in the HTML, not the HTML you've moved into the div above.
Assuming you have display: none on #divSubCategory you will see the text from that div get appended to the first div, then when you mouse-out it will not go away (although the second (hidden) div will get deleted).
Anyway the way around this is to use clone(). I'll do a fiddle for you:
http://jsfiddle.net/fZZu5/1/
I also fixed your fades for you.
EDIT: This moves the div#divSubCategory into the div#mainCategory before showing it and then removes it completely from there when you mouse-out - this is what I assumed you wanted to do from your code. Nicks just shows and hides it where it is. Depending on what you want, both these answers are correct. :)
This is the 100% working with your requirement:
Check this: http://jsfiddle.net/ZWqnk/8/
Wrap your code inside the document.ready() function
$(document).ready(function(){
// Your code here
});
function Scrolldown() {
window.scroll(0,300);
}
How can I use this function (or a similar one) to automatically scroll down when the page loads? (without clicking a link)
Regards,
taylor
Give this a try:
function Scrolldown() {
window.scroll(0,300);
}
window.onload = Scrolldown;
you could include all of your javascript in an event. This will scroll to an element with an id.
<body onload="window.location='#myID';">
You could use window.onload:
window.onload = Scrolldown;
I also want to point out that you could use an HTML anchor to indicate where to scroll to, so you don't have to hard-code the pixel value:
<div id="iWantToScrollHere" name="iWantToScrollHere">
...
</div>
...which would make your Scrolldown function:
function Scrolldown() {
window.location.hash = '#iWantToScrollHere';
}
you could include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
and then wrap your scrolling thing in a document ready function:
$(document).ready(function(){
window.scroll(0,300);
});
then after that you don't need to do anything.
:)
well, another super simple script is here,
<script type="text/javascript">
window.onload = function(e){
window.scrollBy(1,1);
}
it worked best for me.