Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How can I calculate when scroll is near bottom by this function:
$(window).bind( "scroll", function(){
console.log($(window).height());//window heigth
console.log($(window).scrollTop()); //returns scroll position from top of
});
Do I need something else?
Something like this should do, no?
$(window).bind( "scroll", function(){
var windowHt = $(window).height();
var myPos = $(window).scrollTop();
if (myPos > (windowHt - 100)) { // adjust offset to suit
do stuff;
}
});
Here you can see an example when getting to the bottom...
$(window).scroll(function() {
if( ($(window).scrollTop() + $(window).height()) >= $(document).height()-200) {
alert("bottom!");
}
});
http://jsfiddle.net/gWD66/2631/
This will alert you when you have 200px or more to the bottom...
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
How do I align the text in the following script to align right of the page. Screen shot attached.
function init() {
$('.ey-flight-selection-panel>div>h3').after('<div id="covidmsg"><div>ⓘ يتضمن حجزك إجراء فحص كوفيد-19 (بي سي آر) قبل السفر من أبوظبي للسفر حتى 31 ديسمبر 2020. سيتم فرض رسوم بقيمة 150 درهماً إماراتياً إذا قمت بتغيير أو إلغاء حجزك خلال 96 ساعة من موعد الرحلة. <a href=\'https://www.etihad.com/en-ae/travel-updates/flights-from-abu-dhabi/\' target=\'_blank\'>اقرأ المزيد</a></br></br></div></div>');
}
var i = 1;
setTimeout(function run() {
//console.log(i + ":hello number");
if (i < 10) {
setTimeout(run, 500);
if (typeof jQuery != 'undefined') {
if ($('#covidmsg').length < 1) {
init()
}
}
}
if (i >= 10) {
//console.log("Task Done");
}
i++;
}, 100)
enter image description here
Update your css to include:
#covidmsg {direction: rtl;}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I think everybody know the way to refresh a webpage by pulling down from the top on mobile devices.
I want to do the same but I want to pull up from the bottom instead. I also don't need any animation.
I need something like: refresh page when pulling up (e.g.) 10px from bottom.
With Google I only found pull-down-from-top solutions and they all have animations and mostly have to much code.
Does anybody have an idea or hint how to do that?
I made an example by scroll and show extra div for checking continuously scrolling down.
Use setTimeout for not trigger reaching the new showing bottom too fast.
Take a look at this and if there's any question please tell me.
var latestPosition = 0;
$(window).scroll(function() {
var $extra = $('#extra');
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
if ($extra.is(':visible')) {
alert('time to reload');
} else {
setTimeout(function() {
$extra.show();
}, 300)
}
}
// console.log($(window).scrollTop() + " " + latestPosition)
if ($(window).scrollTop() < latestPosition)
$extra.hide();
latestPosition = $(window).scrollTop();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:2000px; background-color:green" id="content">
</div>
<div style="height:10px; display:none; background-color:red" id="extra">
</div>
Update
I did this for you.
var latestPosition = 0;
var flag = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
// touch bottom
flag = true;
}
// go back
else{
if(flag){
alert('time to refresh');
flag = false;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:2000px; background-color:green" id="content">
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am displaying a floating menu bar. It's working fine but I'm getting the below compilation errors:
[ERROR] ...\src\main\webapp\resources\js\util\modules\floating-j-menu.js:line 29:column 15:syntax error
menuPosition=$('#menuJF').position().top + 485;
[ERROR] ...\src\main\webapp\resources\js\util\modules\floating-j-menu.js:line 31:column 1:syntax error
[ERROR] ...\src\main\webapp\resources\js\util\modules\floating-j-menu.js:line 1:column 0:Compilation produced 5 syntax errors.
Please help me see the error here.
$(window).load(function() {
if ($("body").height() > $(window).height() - 41) {
$('#menuJF').removeClass('hide');
}
menuPosition = $('#menuJF').position().top + 485;
FloatMenu();
});
$(window).scroll(function() {
FloatMenu();
if ($(window).scrollTop() + $(window).height() > $(document).height() - 41) {
$('#menuJF').addClass('hide');
} else {
$('#menuJF').removeClass('hide');
}
});
You had syntax errors all over the place.
Some misplaced brackets and so on as you could see in your error floating-j-menu.js:line 26:column 26:missing ) after argument list.
Here is your code:
if ($("body").height() > $(window).height() - 41) {
$('#menuJF').removeClass('hide');
}
menuPosition = $('#menuJF').position().top + 485;
//FloatMenu();
$(window).scroll(function() {
//FloatMenu();
if ($(window).scrollTop() + $(window).height() > $(document).height() - 41) {
$('#menuJF').addClass('hide');
} else {
$('#menuJF').removeClass('hide');
}
});
#menuJF {
border: 1px solid;
height: 1500px;
background: red;
}
.hide {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuJF">
this is my menu
</div>
I also commented out floatMenu() function since you haven't provided its functionality.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Someone can give me a source code on jsfiddle when width jquery can set the css by change the window size?
My englist not so good i tryo to search on the net but not found.
I think this is what you are looking for:
If your element has the class element
$(window).resize(function () {
$(".element").css("width", window.innerWidth;);
});
Then you could do something like window.innerWidth/2 or window.innerWidth - 50.
Javascript example: JSFiddle Demo
Change element CSS on resize:
If the viewport width is less than 800, then it will change the width of the #test div
HTML
<h1 id="width"></h1>
<div id="test"></div>
CSS
#test { width:200px; height:50px; background:red; }
Javascript
// set the initial width
var viewportWidth = document.documentElement.clientWidth;
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";
// on resize
window.addEventListener('resize', function(event){
var viewportWidth = document.documentElement.clientWidth;
var test = document.getElementById("test");
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";
if(viewportWidth < 800){
test.style.width = "500px";
}
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am interested in the way this site has the speakers scrolling at a certain interval.
I am unsure if this is a jQuery plugin but would be keen to know/understand how this functionality is done.
Create a container element that is set to the dimensions you want to display. Then set its overflow property to hidden and give it a child that is much taller. Then use a setInterval to animate the offset from the child to the parent:
HTML --
<div id="container">
<div id="child"></div>
</div>
CSS --
#container {
position : relative;
width : 500px;
height : 300px;
overflow : hidden;
}
#child {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 900px;
}
JS --
$(function () {
var $child = $('#child'),
timer = setInterval(function () {
$child.animate({ top : '-=300' }, 500);
}, 1500);
});
Update
You can then detect if the #child element should be animated back to the beginning once its entire height has been shown:
$(function () {
var $child = $('#child'),
height = $child.height(),
interval = 300,
current = 0,
timer = setInterval(function () {
current++;
if ((current * interval) >= height) {
current = 0;
$child.stop().animate({ top : 0 }, 1000);
} else {
$child.stop().animate({ top : (current * interval * -1) }, 500);
}
}, 1500);
});
Here is a demo: http://jsfiddle.net/BH5gK/2/