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>
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.
How can I create a to do list with just javascript? I have a html file with only 1 div and have to do this with just javascript?
example
This is my html file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do App</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
The rule is that I can't add more html tags
Please help!!!
Well, you have to add more tags.
You don't have to write those tags into your HTML file, you can create elements using JS.
Components that you can create in JS
Search Bar
Todo Item
Button
After writing these components you can plug and play your logic.
I have written a html and javascript files.
Here is my code
HTML:
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>New value: <span class="my-new"></span></li>
</ul>
</div>
</body>
<script src="event.js"></script>
</html>
and here is my javascript code
window.addEventListener('storage', function(e) {
document.querySelector('.my-new').textContent = e.newValue;
});
I write something on another page and want to display it on another page(the code of this page is shown here). Everything is fine, the code is working on Chrome. However, when I open it on safari, it does not display.
Javascript is enabled. I have no idea what is the problem. Please, help
Wich safari are you on? could be that your safari is old and you need to use:
document.getElementsByClassName('.my-new')
or better give it a id and use:
document.getElementById()
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://developer.mozilla.org/nl/docs/Web/API/Document/querySelector
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 have followed the following example from Nokia Here HTML5. It's not working as expected. This is my current code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- You should also add the following meta tags to support Blackberry 7.0+ devices -->
<meta name="HandheldFriendly" content="True">
<meta name="touch-event-mode" value="native">
<meta name="cursor-event-mode" value="native">
<!-- To disable address sniffing and prevent native maps from starting, use the following meta tags -->
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>
<!-- <link rel="stylesheet" href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">-->
<link rel="stylesheet" href="http://api.maps.nokia.com/mobile/latest/lib/colors.css">
<!-- <script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js"></script>-->
<script src="http://api.maps.nokia.com/mobile/latest/lib/mh5.js"></script>
</head>
<body class="mh5_hwacc_body">
<div id="app_location" style="width:320px; height:480px; position:relative;"></div>
<script>
nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/1.0.2/lib/";
nokia.mh5.app.embed({
domNode: "#app_location",
appId: "_peU-uCkp-j8ovkzFGNU",
appCode: "gBoUkAMoxoqIWfxWA5DuMQ"
});
</script>
</body>
</html>
I don't know why only shows a white screen. Do you have any idea?
Optionally, I have another question. Does anyone know if this mobile version allows adding markers and clustering?
You need to make sure that the <script> initializing the mh5 container is called after the <body class="mh5_hwacc_body"> has been initialized. It would also help to include the doctype element as well. If you run your example in Chrome and check the error statements you can see that is attempting to append items into the body of the DOM when it is still null. The quick start example (appended below) works fine.
You'll need to substitute in your own app id and token
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet"
href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.css">
<link rel="stylesheet"
href="http://api.maps.nokia.com/mobile/1.0.2/lib/colors.css">
</head>
<body class="mh5_hwacc_body">
<script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">
</script>
<div id="app_location"
style="width: 320px; height: 480px; position: relative;">
</div>
<script>
nokia.mh5.assetsPath =
"http://api.maps.nokia.com/mobile/1.0.2/lib/";
nokia.mh5.app.embed ({
domNode: "#app_location",
appId: "YOUR APP ID",
appCode: "YOUR TOKEN"
});
</script>
</body>
</html>
Use the addPOI() method described here to add markers to the map.
Clustering is not a standard feature of MH5 - it is a framework, not an API - works best within its own use case - i.e. rapid cross-platform mobile development for "search for X, route for X, add markers for X" and drill down to give an infobubble or new page. Where X is supplied by your data.