Develop Reference

The script will not align to the right of the page [closed]

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

How to pull up from bottom to refresh webpage without animation [closed]

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>

addClass and removeClass methods aren't working properly [duplicate]

This question already has answers here:
jQuery.addClass not working
(9 answers)
Closed 8 years ago.
I am planning to add and remove background-image to a specific DIV but it seems that it's not working well
jQuery code :
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 340) {
$("#navcontainer").addClass("bg2");
} else {
$("#navcontainer").addClass("bg1");
}
});
});
here is the css code :
#navcontainer{
height: 70px;
width: 100%;
position: fixed;
z-index: 9999;
}
.bg2{
background-image: url(bg2.png);
}
.bg1{
background-image:url(bg1.png);
}

addClass and removeClass accepts one or more classNames without the period
$("#navcontainer").addClass("bg2");
It should be noted that jQuery has a toggleClass as well
$(window).scroll(function(){
$("#navcontainer").toggleClass('bg2', $(this).scrollTop() > 340);
});

You only need to write the classe name, like this :
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 340) {
$("#navcontainer").addClass("bg2");
} else {
$("#navcontainer").removeClass("bg1");
}
});
});

How to calculate when scroll is near bottom [closed]

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...

How is the scrolling functionality done in this website? [closed]

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/