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.
Related
I downloaded code mirror from official website and tried to test it on mobile device. At first I linked all the core files as described in the docs.
Inside the index.html I added the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- link codemirror -->
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<link rel="stylesheet" href="theme/duotone-dark.css" type="text/css" media="all" />
<script src="mode/javascript/javascript.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var myCodeMirror = CodeMirror(document.body,
{
mode: "javascript",
value: "var a = 'DS code is cool thanks to codemirror';",
lineNumbers: true,
lineWrapping: true
}
);
</script>
</body>
</html>
When I tried to preview it, It looks it's working properly but it's not.
When I add a new line and try to backpress,
i. it hide soft keyboard and Backpress doesn't work when removing new line(see figure 1).
When I type var and press enter,
ii. it misbehave(see figure 2. It is not working sometimes when I click the editor to edit).
iii. It is also not taking the full height of screen.
Figure 1
Figure 2
How to solve them? Thanks in advance.
My main purpose is to add it inside android webview.
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.
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 practicing the basics from scratch on a new machine and I can't change the text within the header. For some reason it seems the app.js isn't linked up with my index.html file.
This is what i have in the app.js file:
document.getElementsByClassName("title1").innerHTML = 'Testing 123';
Did I link app.js correctly? Is it because I have also linked other js files (bootstrap, jquery and popper)?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website 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/4.3.1/css/bootstrap.min.css">
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1 class = "title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
I expected the text within the header to change.
Thanks!
getElementsByClassName returns an array with all specified elements within the document. You can access elements by their index. You can read more about that method from W3Schools.
In your case, you are accessing the first element with that attribute, so that element would be found with an index of 0. You can learn more about indexes and arrays from W3Schools.
document.getElementsByClassName('title1')[0]
I noticed you are using jQuery in your project which enables another method. You can learn more about this from learn.jQuery
$(".title1")[0].innerHTML = 'Testing 123';
I would also suggest you append your javascript to the bottom of the body of your page to minimize above the fold content to have your site load faster. You can learn more about that from Google's Developer Docs.
//app.js
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Website Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.fakeimg {
height: 200px;
background: #aaaaaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom: 0">
<h1 class="title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
getElementsByClassName("title1") returns an array-like object,
use getElementById("testing11") or getElementsByClassName("title1")[0] instead
getElementsByClassName function return an array.
So you need do approach the first element in that array and then you can access to the innerHTML property.
Try this...
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
Or..
Var header = document.getElementsByClassName("title1")[0];
header.innerHTML = 'Testing 123';
Although.. the best solution in this example is to approach to the h1 element by it's I'd that you gave him, and document.getElementById function return single element.
Like so...
document.getElementById('testing11').innerHTML = 'Testing 123';
1st solution: You have to be sure that index.html and app.js are saved in the same folder.
2nd solution: click on F12 and than go to console tab and verify if your html is calling your app.js or if there is any other problem.
The html looks good
You can move the script into end of the body
And check that you use document on ready in your js file
I am using a template with existing javascript. The mobile menu "icon" is actually a dropdown that has the word "MENU" in it. This is old style in my opinion and I'd like to change that to the standard 3 bars for a mobile menu.
The section of the javascript that brings this up is:
if ($nav.is('ul,ol')) {
if (settings.header) {
$select.append(
$('<option/>').text('MENU')
);
}
Is it possible to add .src("img/mobilemenubars.png") or something to this effect to replace the .text('MENU') section? I can provide the entire javascript but I am not sure that is necessary. Or is it?
You can do it using unicode characters and the Font Awesome font-family. Here is a DEMO
Here is the Font Awesome cheat sheet for unicode icons
select {
font-family: FontAwesome;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>JS Bin</title>
</head>
<body>
<select>
<option> Menu</option>
<option> Pencil</option>
<option> Vacation</option>
</select>
</body>
</html>