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;}
Related
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 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...
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;
}
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have some text that randomly changes every 3 seconds, it is working like a charm but i want to make whenever it changes there is a fade out, fade in transition. This is my script/
<script type="text/javascript">
var textarray = [
"& prisioner 24601.",
"& occasional timelord.",
"& part-time Pokémon trainer.",
"& guilty for the zombie apocalypse.",
"& potential book worm." // No comma after last entry
];
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('random_text').innerHTML=textarray[rannum];
}
onload = function() { RndText(); }
var inter = setInterval(function() { RndText(); }, 3000);
and this is the html part it is applied to:
<span id="random_text">& occasional time lord</span>
Any idea on how to make this happen?
Thank you
Since you've tagged this post with jquery, you can easily achieve this using jQuery's own fadeIn() and fadeOut() functions.
For example, your code can be updated as follows:
var textarray = [
"& prisioner 24601.",
"& occasional timelord.",
"& part-time Pokémon trainer.",
"& guilty for the zombie apocalypse.",
"& potential book worm."
];
function RndText()
{
var rannum = Math.floor(Math.random() * textarray.length);
$('#random_text').fadeOut('fast', function() {
$(this).text(textarray[rannum]).fadeIn('fast');
});
}
$(function() {
// Call the random function when the DOM is ready:
RndText();
});
var inter = setInterval(function() { RndText(); }, 3000);
I also made some slight changes to your code (such as changing window.onload to $(document).ready()).
jsFiddle Demo
Try
fiddle Demo
var $ryt = $('#random_text');
function RndText() {
var rannum = Math.floor(Math.random() * textarray.length);
$ryt.html(textarray[rannum]).hide().fadeIn('slow');
}