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

Having the same nav bar become fixed after scrolling past a certain element

I currently have a nav bar within my header that I would like to become fixed after the user scrolls past a certain element. I would also like to achieve the same animation effect as seen at http://pixelmatters.com
When I say 'same' I mean using the same nav bar/header element that I'm using at the top, rather than using a duplicate somewhere else in my document.
I've tried to achieve he result with my own code shown below. I've also included a jsFiddle link of my current setup.
jQuery
var bottomElement = $('.dividerWrap').offset().top + $('.dividerWrap').height();
$(window).on('scoll', function() {
var stop = Math.round($(window).scrollTop());
if (stop > bottomElement) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});
https://jsfiddle.net/npfc8wsx/1/

I answered something like that few days ago. please take a look at this code:
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollToVid = $('#test').offset().top
console.log(scrollTop); //see window scroll distance //
console.log(scrollToVid); //see scroll to div offest//
if ($(window).scrollTop() >= scrollToVid) {
alert('You reached to the video!');
}
});
jSFiddle
Main Question
now for you some code must change:
$(window).scroll(function () {
var scrollToElem = $('.dividerWrap').offset().top
if ($(window).scrollTop() >= scrollToElem) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});

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

replace image with another for one second with javascript [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 8 years ago.
Improve this question
I have an image that I want to replace with another (same image, but brighter color) to grab the attention of the user to it when he clicks on a certain button, just so he knows that it's there. So I want to replace the original pic with the other twice, for 1 second each, seperated by 1 second as well.
In other words, the user is on the page, he clicks on the button, the original dark image changes to the bright image for 1 second, then back to the dark image for 1 second, then the bright image for one second, and last comes back to the original dark one.
so: original--> replace it (1 sec) --> original(1 sec) --> replace it (1 sec)--> original
I know I have to use javascript for it, but I am very weak in javascript. can someone give me the code for it? Thanks

The below is a rough idea of one possible implementation, easily improved...the benefit being you only need one image.
Demo Fiddle
HTML
<img src='http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg' />
<button id='button'>Start 1 second!</button>
CSS
img {
height:100px;
width:100px;
}
jQuery
var interval;
function isEven(n) {
return isNumber(n) && (n % 2 == 0);
}
function isNumber(n) {
return n === parseFloat(n);
}
$('#button').on('click', function () {
var src = $('img').attr('src');
var alt = 'http://www.online-image-editor.com/styles/2013/images/example_image.png';
$('img').attr('src', alt);
var count = 0;
interval = setInterval(function () {
count++;
if (count == 4) {
clearInterval(interval);
return false;
}
isEven(count) ? $('img').attr('src', alt) : $('img').attr('src', src);
}, 1000);
});

Dryden is correct but we can at least point you in the right direction.
See http://www.w3schools.com/jsref/met_win_settimeout.asp
Combine that with a onclick function and document.getElementById("imageid").src="../img/imgname.png";
Magic.
If you can't get it working with that, post the code you are using.

In CSS you can use animation and specifities of box-model while you alternate padding and height/width to show background or not of img tag .
DEMO
basic coding :
<img src="http://lorempixel.com/300/200/nature/9" />
img { background:url(http://lorempixel.com/300/200/nature/6);
animation : 2s infinite blink;
}
#keyframes blink {
0%, 24.9%,75.1% ,100% {
heigh:0;
width:0;
padding:100px 150px
}
25%, 75% {
height:200px;
width:300px;
padding:0 0;
}
}

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/