Animate scrollTop laggy on Chrome only - html

Bootstrap 5.1.3 and jQuery 3.6.0
Animation not start immediately after click on Chrome, but works normally on other browser.
Sometimes the animation start after a while (maybe 500 ms) after click, sometimes it start with slow speed then as normal.
I tried this minimal code below and the problem still appears.
$(document).ready(function() {
$("#scroll-top").click(function() {
$("body,html").animate({
scrollTop: 0
}, 500);
});
});
<head>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="bg-secondary" style="height:2500px;"></div>
<p class="mb-0 text-center">Back to Top</p>
</body>
jsfiddle
I tried this code below (older version of Bootstrap 4.6.1), animation works normally.
So this problem may only appears on Bootstrap 5 and Chrome, I have no idea what caused it and how to fix it.
$(document).ready(function() {
$("#scroll-top").click(function() {
$("body,html").animate({
scrollTop: 0
}, 500);
});
});
<head>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="bg-secondary" style="height:2500px;"></div>
<p class="mb-0 text-center">Back to Top</p>
</body>
jsfiddle

I submitted an issue on github and found the solution. issue
jQuery scroll script has conflict with scroll-behavior: smooth in _reboot.scss line 33. Just override it with css. solution
html {
scroll-behavior: auto !important;
}

Related

JQueryUI dialog moving outside browser window

I am using JQueryUI with dialogextend on a boostrap template (Shards UI).
I have the issue that the dialog can move outside the window and makes scrollbars to the webpage:
Does anyone know what can cause this? I've tried to include the CSS and JS in different orders, but that doesn't help.
Here is the minimal code on which the issue still appears:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">s
</head>
<body class="h-100">
<div id="testdialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div class="container-fluid">
<div class="row">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#testdialog" ).dialog({
resizable: true,
closeText: "",
height: "auto",
width: 400
});
$('.ui-dialog').css('z-index',9999);
} );
</script>
</body>
</html>
Thanks for the replies.
Solved it.
I was using a different version of the JS file and CSS file. Using the same version works.

Google Apps Script not loading jquery mobile css

I'm trying to learn to use jquery mobile with Google Apps Script, and my hosted page isn't loading the CSS for it, it seems like. This code should have a gray header and footer bar, and if I copy and paste the dev data-page section, it should still only show up once. Neither of those things happen.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Testing</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Hello, World!</h1>
<p>Welcome to my page</p>
</div>
<div data-role="footer">
<h2>Testing More</h2>
</div>
</div>
</body>
</html>
What am I missing to make this work?
Note: I also tried with jquery 2.2.4 instead of 3.4.1.. no difference...
Figured it out... it's two part:
First, the hosted version of jquery mobile is 1.4.5, which is still incompatible with jquery 3.
Second, jquery has to be loaded BEFORE jquery mobile, so it had to go above it on the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
I think you should be using .ui-header or .ui-footer there are only two instances in the css that use data-role and they are here .ui-mobile [data-role=page],.ui-mobile [data-role=dialog],.ui-page {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display: none;
border: 0
}
if you add .ui-header {background-color:gray } to the css then the background of the header is gray.
You can see all of this very clear if you view sources and prettify the code in Chrome Developer Tools

my animation is not working after I build it on phonegap and install its apk on bluestack

my flip animation is not working after I build it on phonegap and install its .apk on bluestack, can anyone tell me what's the problem?
index.html:
<!doctype html>
<head>
<title>The page flip effect in HTML5</title>
<script type="text/javascript" src="js/turn.min.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>
</head>
<body>
<center>
<div id="flipbook">
<div style="background:#ff0000;" class="hard"> Turn.js </div>
<div style="background:#0000FF;" class="hard"></div>
<div style="background:#ff0000;"> Page 1 </div>
<div style="background:#0000FF;"> Page 2 </div>
<div style="background:#ff0000;"> Page 3 </div>
<div style="background:#0000FF;"> Page 4 </div>
<div style="background:#ff0000;" class="hard"></div>
<div style="background:#0000FF;" class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 600,
height: '100%',
autoCenter: true
});
</script>
</body>
</html>
You might need to register the $("#flipbook") event after the document ready event. ie)
$(function(){
$("#flipbook").turn({
width: 600,
height: '100%',
autoCenter: true
});
});
It's worth a shot as I'm realizing the compiled .apk files do not work the same as what happens in the browser. For example, I do jQuery animations and then the javascript code I call after an animation does not execute (only happens after I build the app).
So if my above suggestion does not work, I'd try adding your code inside of the "deviceready" event( only fires when using phonegap's compiled code). http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

HTML/CSS - Using Custom Fonts

I am trying to use a custom font from: https://www.google.com/fonts/#QuickUsePlace:quickUse/Family:Underdog
I find the font is displaying correctly when I use a Nexus One Emulator in Eclipse but on my Samsung Galaxy S2 it doesn't work...
My code is as follows:
CSS:
#font-face
{
font-family: 'Underdog', cursive;
}
#categories
{
font-family: 'Underdog';
}
#subCategories
{
font-family: 'Underdog';
}
body
{
background-color:#272714;
}
HTML:
The drop down boxes are created dynamically with JQuery. The "loadingDiv" are shown and then hidden after an AJAX call is completed.
<!DOCTYPE html>
<head>
<title>Coupon Finder</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Underdog' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/storecategories.js"></script>
<script>
function categorySubmit(){
var selectedCategory = document.getElementById("category");
var selectedText = $('#category option:selected').text();
//Get Sub-Categories
getSubCategories(selectedText);
}
</script>
</head>
<body >
<div id='categories'>
<h3>Coupon Categories</h3>
<div id='loadingDiv'>
Please wait... <img src="http://i.stack.imgur.com/FhHRx.gif" />
</div>
</div>
<!--Add Category Search Button-->
<button class = "buttons" onclick="categorySubmit()">Search!</button>
<div id='subCategories'>
<div id='loadingDiv1'>
Please wait... <img src="http://i.stack.imgur.com/FhHRx.gif" />
</div>
</div>
</body>
Here is a screenshot of the output on the emulator (Sorry for the dark background... need to change that):
Any ideas why it isn't working on my Galaxy S2?
Thanks for your help!
A good start would be to do some remote debugging.
Check this out:
How to do remote debugging on android
From there, you can use the console to see what happens in your code.
You might even find that your S2 throws an error to the console.

How do I use tooltip plugin in twitter bootstrap's modal dialog?

all.
i am using bootstrap v2.1.1 (the newest version currently).
i need a tooltip in my modal dialog.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap v2.1.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel='tooltip']").tooltip({'placement': 'right', 'z-index': '3000'});
});
</script>
</head>
<body>
<div class="modal modal-open">
<form class="modal-form form-horizontal">
<div class="modal-header">
<h3>Login</h3>
</div>
<div class="modal-body">
A link <!-- check it out -->
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
<button type="reset" class="btn">Reset</button>
</div>
</form>
</div>
</body>
but the code does NOT work.
The lastest version of bootstrap shows the modal has a z-index of 1050.
and in bootstrap.min.css
.modal-open .modal .tooltip{z-index:2080;}
This is could not be z-index issue, i think.
anyone can help ? thx a lot.
Try add this into your CSS file:
.tooltip {
z-index: 2000 !important;
}
The behavior you are seeing is due to a bug introduced in Twitter Bootstrap 2.1.1 (see Issue #4980). The bug fix for it has already been committed to the 2.1.2-wip branch, and 2.1.2 should be coming out this coming week.
The problem stems from the fact that the tooltip is not being appended to the .modal element, but rather to the <body>. Rather than hacking on the CSS, I'd recommend the following workaround as a temporary hold over until the 2.1.2 is available.
$('.modal a[rel="tooltip"]')
.tooltip({placement: 'right'})
.data('tooltip')
.tip()
.css('z-index', 2080);
JSFiddle
Make sure you have done these:
<script type="text/javascript">
$(document).ready(function() {
$("a[rel='tooltip']").tooltip({'placement': 'right', 'z-index': '3000'});
});
</script>
The above is done. But what about the data-original-title attribute? You should give this:
A link
Found the issue: CSS Fix
.tooltip {z-index: 50000;}​
Demo: http://jsfiddle.net/zk7dF/1/
Works for me:
{
html: true,
placement: 'right',
container: '.modal-body',
title: ''
};
Now you can do that with Bootstrap3, finally!
Checkout http://getbootstrap.com/javascript/#modals