I have been working on a web-based image viewer. I am using ViewerJs and this problem is not specific to viewerjs, but any CSS based zoom to image element. I have blocked the browser's native zooming, so I can use the keyboard shortcuts on the image element. So far everything works nice and smooth. Except when I switch to a different tab and then when I come back to it, it lags at first then it is smooth again.
Although the browser's native zoom does not have that problem. And it is only when zooming in it lags, zooming out is smooth. Is there any way to avoid this lag? What causes it in the first place?
For those wondering why I am not using html5 canvas. One of the requirements is that the scaled-down version has little to no aliasing and is not blurry, which is still a work in progress with canvas.
Edit: I've added an example here: https://codepen.io/hiratariq/pen/ZEQovza
<link href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.6.1/viewer.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.6.1/viewer.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<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">
<title>Viewer.js</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="../css/viewer.css">
</head>
<body>
<div class="container">
<h1>Show a viewer dynamically on click a button</h1>
<button type="button" class="btn btn-primary" id="button">
Launch the demo
</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.6.1/viewer.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
document.getElementById('button').addEventListener('click', function () {
var image = new Image();
image.src = 'https://upload.wikimedia.org/wikipedia/commons/d/d2/Saturn_-_High_Resolution%2C_2004.jpg';
var viewer = new Viewer(image, {
hidden: function () {
viewer.destroy();
},
});
// image.click();
viewer.show();
});
});
</script>
</body>
</html>
Just try to open and notice it done not smoothly zooms in but it gradually gets smoother, then try changing the browser tab and then come back to the codepen tab and zoom in again and notice it is again not smooth. But zooming out is still smooth.
Related
this is another extremely simple question. Is it just me, or does AOS.js only work with div's?
Because in the following link, I am trying it on an h1, and it doesn't work. I try it on a div, and it works. This is part of a larger question, and that project involves divs. It does not work there either. I can delete the attributes from the page in inspect, and it shows up like it is supposed to when it reaches the scroll point.
Then I hit control z + y and then I see the animation work, just not on the scroll. Please help. Thanks for your time. Here is the link to the mini project
[Edit] this one is solved, please help with the other one if you can thanks!
https://repl.it/#astroboyr/AOSJS-testing
If you find it out, here is the bigger project if you want to help,
https://repl.it/#astroboyr/PianoLife
The code you have doesn't have enough space on the bottom so that reason you are not able to see the animation. if you add more
<br> on the bottom you will see its working.
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div data-aos="fade-up"></div>
<!-- works with div -->
<h1 data-aos="fade-right">Some H1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- doesnt with h1 WHYYYYYYY -->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>
I'm trying to have a photo caption at the bottom of my header image. I found the following code to make that tooltip, but it doesn't work for mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({placement:"bottom",delay:{show:0, hide:100000000}});
});
</script>
</body>
</html>
I would like to put the same caption in the normal title text, but only have that title text show up when on a mobile device, because the above tooltip will provide the caption when there's a mouse.
I found this great code that works ok to display the tooltip on mobile, but I can't get it to be positioned perfectly on the bottom of the header on the desktop, and it didn't always disappear correctly on mobile.
How do I turn off the regular img title-text without turning off the JQuery created tooltip?
This is likely not the most elegant, but it worked for me. I get a data-toggle tooltip, which can be formatted in CSS code with the class selector .tooltip {} and appears with mouse over on large devices, and then when on smaller devices, I can press and hold to get the normal title text.
Solution:
In Joomla I have two different Jumi scripts, one to create the data-toggle tooltips at the top of each module:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({placement:"bottom",delay:{show:0, hide:0}});
});
</script>
</body>
</html>
And one to turn off the regular title text if the screen width is greater than 980 pixels.
<script>
var mediaquery = window.matchMedia("(min-width: 980px)");
if (mediaquery.matches) {
$('img').hover(
function() {
$(this).removeAttr('title');
});
}
</script>
Then in each module, I call that first Jumi code with <p>{jumi [*4]}</p>. (That first segment is my 4th Jumi 'Application'.) I then declare the tooltip, and insert the image with the normal title text. Finally, after the image and title text is created, I call the second Jumi code (number 7 for me) <p>{jumi [*7]}</p> to check if the screen is large, and if so, delete the tooltip.
<p>{jumi [*4]}</p>
<p title="This is where the text of the the data-toggle tooltip goes" href="#" data-toggle="tooltip">
<img title="This text appears as the regular title text on smaller screens" src="Location_of_the/image_I_display.jpg" alt="Image key words" />
</p>
<p>{jumi [*7]}</p>
Enjoy!
Thanks to: Fernando Urban's answer for the screen size checking if statement, Dave Thomas's answer to remove the title attribute and Bootstrap for the data-toggle tooltip.
I am building my site using MaterializeCSS (http://materializecss.com/)
I am wondering how can I trigger the Wave/Ripple effect manually to certain control , for example:
"Trigger the wave/ripple effect of certain button."
The MaterializeCSS team stands that they use a port of the "Waves.js" javascript library (http://fian.my.id/Waves/) , but when I try to use the commands, errors appear in the browser console.
Can someone point me out here?
Code used as example:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<title>My website title</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
Waves.ripple('#but_1');
});
</script>
<a id="but_1" class="waves-effect waves-light btn">button</a>
</body>
</html>
According to the MaterializeCSS TEAM ...
"Waves is an external library that we've included in Materialize to
allow us to create the ink effect outlined in Material Design"
... and according to Waves docs ....
Waves.ripple(elements, options) Create a ripple effect in HTML element
programmaticaly.
(http://fian.my.id/Waves/#api)
So in the Browser Console I get this error:
Uncaught TypeError: Waves.ripple is not a function
I found a Solution !!!
Steps:
Download the latest version of Waves.js , link https://github.com/fians/Waves/releases
Open the file named "materialize.js" from the materializeCSS files
Once opened, try to find the section that starts with something like ...
;/*!
* Waves v0.6.4
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/
;(function(window) {
'use strict';
var Waves = Waves || {};
var $$ = document.querySelectorAll.bind(document);
// Find exact position of element
function isWindow(obj) {
return obj !== null && obj === obj.window;
}
That section belongs to the Waves library embedded inside materializeCSS .... Replace all that section of code with the new code of Waves.js .... how? .... COPY the code of the latest version of Waves.js, and replace (PASTE) inside the Waves SECTION inside materialize.js
Now ... inside your HTML file you should have something like this (check the comments)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--ADD the CSS from materializeCSS -->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- Add the file "materialize.js" ... the one you just modified -->
<script type="text/javascript" src="js/materialize.js"></script>
<!-- Add the CSS from Waves.js -->
<link type="text/css" rel="stylesheet" href="waves/waves.css" media="screen,projection"/>
<!-- DO NOT ADD the Waves.js
<script type="text/javascript" src="wave/waves.js"></script>
-->
<title>Your site</title>
</head>
<body>
<script type="text/javascript">
function clickbut() {
//Now you can use the Waves.ripple function!!!
Waves.ripple('#but_1');
};
$(document).ready(function() {
//Initialize the Waves module
Waves.init()
});
</script>
<h2 class="left-align"><i class="left-align medium material-icons">touch_app</i>My website Header</h2>
<button onclick="clickbut()">click me</button>
<a class="waves-effect waves-light btn ">button</a>
<a id="but_1" class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
</body>
</html>
If you click the "click me" button ... the ripple effec will be played in the #but_1 button
I have always added waves-effect as a class to the button. It triggers on the button click.
<a class="waves-effect waves-light btn">button</a>
This is from the first button example on the materialize css website.
Buttons on MaterializeCSS
If it says the Waves.ripple function does not exist, try bringing in the Waves.js script from a CDN.
None of the above answers worked for me. Played around with this and managed to get it to trigger using the following
Waves.attach('#refresh', ['waves-light']);
Waves.ripple('#refresh');
So I thought it'd be really nice to have all my page elements like navbar, carousel, footer etc externalized and then load them through jQuery into parent page. I'm using Brackets which has live preview that showed all elements and all worked properly there. The problems began when I tested it in real browsers.
I tested in Chrome, Opera and Firefox and only Firefox would show the content loaded through jQuery.
Here's what parent page looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="navLoader"></div>
<div id="carouselLoader"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
And this is jQuery that loads elements:
$(document).ready( function() {
$("#navLoader").load("components/navbar.html");
$("#carouselLoader").load("components/carousel.html");
});
Loading troubles aside, is this a good practice to keep page elements separate? It feels much tidier and easier to work with, but that doesn't mean that it is necessarily good from a technical standpoint.
Thanks in advance.
I am building out a site. I built out the backend, and now I am doing the front-end. On the front end I have bootstrap, various font awesome icons, and angular. It should also be noted this is a rails app.
I want to add 1 page scroll feature using jQuery & jQuery easing, that is powered by a font-awesome arrow. I am obviously not doing something right, because when used it turns blue (thought maybe it was an "active state" because of the href?), and turns all of the font (everything) on my page blue.
When in chrome's console, I get the error;
Uncaught TypeError: undefined is not a function
Which is referring to this line (might be arbitrary) in jQuery;
this.pos = eased = jQuery.easing[ this.easing ](
Here is the rest of my code;
index.html.erb
<div class="page-scroll" id="arrow"><a href="#clients"><i class="fa fa-chevron-down"></i><a></div>
styles.css
#arrow {
font-size: 25px;
color: grey;
}
main.js
$(function() {
$('.page-scroll a').bind('click', function(event){
$('html, body').animate({
scrollTop: $("#clients").offset().top
}, 1500);
event.preventDefault();
});
});
application.html.erb (thanks to another SO question, jQuery & jQuery Easing placed under style sheets)
<!-- Easing for Page Scroll -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
When I comment out the div in index, all font goes back to normal (it's blue when it's active). When I click on the button, it takes me to the element I want, but it drops you there, it doesn't have the easing aspect (which is why I am adding easing).
I have searched a fair amount, and I am baffled about this (especially the changing of the text). Any help would be very appreciated.
I have since figured out what causes this.
When this happens, your page cannot find jQuery even though it is being called. To fix this, make sure your page content looks something like this (for rails, all of this would be in application.html.erb);
head
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Good SEO.">
<meta name="author" content="">
<title>Your Title</title>
<!-- Bootstrap Core CSS for smaller projects/single page I'll use a CDN -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet" type='text/css'>
<!-- CSS or in assets/stylesheets-->
<link href="/assets/styles.css" media="screen" rel="stylesheet">
</head>
after closing body & html tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">
</body>
</html>
I've noticed the order has to be jQuery, bootstrap (if you're using it), then jquery.easing.