Animate({right: 0}) not working properly in Chrome and Opera - html

I try to have an image slide from left to right using only jQuery and it works perfectly with .animate({right: 0}, 1500) on Firefox but not on Chrome and Opera (haven't tried other browsers though).
Here is a code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Slide this squirrel</title>
</head>
<body>
<div style="position:relative;margin:1%;padding:1%;border:1px solid black">
<img id="squirrel" src="squirrel.jpg" alt="What a squirrel..." style="position:absolute;" />
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
$("#squirrel").animate({right: 0}, 5000);
});
</script>
</body>
</html>

You need to assign 100% to the right property for #squirrel in the CSS file.
HTML:
<div style="position:relative;margin:1%;padding:1%;border:1px solid black">
<img id="squirrel" src="http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/squirrel_2_line_art.png" height="80" width="100" style="position:absolute;" />
</div>
JS:
$(document).ready(function() {
$("#squirrel").animate({right: 0}, 5000);
});
CSS:
#squirrel{
right:100%;
}
I created an JSFiddle for you.
URL: http://jsfiddle.net/m99bybnp/
EDIT:
I made a small change in the JS file.
$(document).ready(function() {
// We calculate the width which we need for the wanted displacement
var width_Animate = $('#container_Squirrel').width() - $('#squirrel').width() ;
$("#squirrel").animate({left: width_Animate}, 5000);
});
New JSFiddle URL: http://jsfiddle.net/m99bybnp/2/

Related

AR A-frame Hide div when marker active

There is a "scanning" graphic here that hides when you find the marker.
https://webxr.io/webar-playground/app/
How is that done? I have tried a bunch of different things with no luck. Maybe I am just not putting it in the correct place? Or need to call the action? Here is the last thing I tried:
'''
var m = document.querySelector("a-marker")
AFRAME.registerComponent('hide-on-scan', {
init: function () {
m.addEventListener("markerFound", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: none;");
})
m.addEventListener("markerLost", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: block;");
})
});
'''
I figured it out for those looking to do the same thing here's my HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style type="text/css">
#HeadText {
position: absolute;
top:0px;
left:50%;
z-index: 10000;
}
</style>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js">
</script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs='sourceType: webcam;'>
<div id="HeadText" style="visibility:visible;">
<h1>test</h1>
</div>
<a-marker preset='hiro'>
<a-box id="MyBox" position='0 0.5 0' material='opacity: 0.5;' color="red" ></a-box>
</a-marker>
<a-camera-static />
</a-scene>
</body>
<script src="assets/script.js"></script>
</html>
</head>
<body>
And here is the script.js:
var m = document.querySelector("a-marker")
m.addEventListener("markerFound", (e)=>{
console.log("found")
document.getElementById("HeadText").style.visibility = "hidden";
})
m.addEventListener("markerLost", (e)=>{
console.log("lost");
document.getElementById("HeadText").style.visibility = "visible";
})

Animate scrollTop laggy on Chrome only

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

HTML To Fit an image only in specific resolution

I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.
Now I'm using an <img> element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.
So the html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>
And the javascript:
$('document').ready(function(){
var session = new QiSession();
session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});
I don't use any CSS at the moment.
window is an actual javascript entity and should not be quoted, which then makes it a string. Removing the quotes from 'window' will solve your problem.
See Below Snippet :
$(document).ready(function(){
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
imgMap.width($(window).width());
imgMap.height($(window).height());
}
toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="mapa" alt="mapa" src="">
</body>

About DIVs (Hiding and Showing not Java)

<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.
In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>
Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>
This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>
That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}

After Upgrading JQuery Mobile to 1.0.1, Code Isn't Working

This works just fine, with JQM 1.0a1:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Main Page</h1></div>
<div data-role="content"><p>Map</p></div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$('#map').live("pagecreate", function() {
initialize(1.359,103.818);
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
<div id="map" data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>
But the same using JQM 1.0.1 (http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js) doesn't show the map at all. I tried using $('#map').on and "pageinit" to no avail.
What am I missing?
UPDATE: same behavior with JQuery 1.6.3
UPDATE2: by giving an absolute size (eg height: 200px; width: 200px;) to the #map-canvas div, it works fine.
As stated in the question's update, by giving an absolute size (eg height: 200px; width: 200px;) to the #map-canvas div, the problem is solved.