I'm new at Ionic. I'm try to setup a navigation bar with an icon and a text. With this code, I have both:
<style>
.title-image {
height : 30px;
width : 30px;
}
</style>
<ion-view>
<ion-nav-title>
<img class = "title-image" src='./img/soloLogo.png'><span> Aree di competenza</span>
</ion-nav-title>
</ion-view>
My problem is the icon is too up. How can I change the position only of the icon or only of the text? Because I only found how to move both, but not only 1 of them.
I'm new at Ionic, so if there is an easy solution, say it to me! :D
You can add to your CSS a vertical-align:middle;
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('onepage', {
url: '/1',
templateUrl: 'onepage.html'
})
$urlRouterProvider.otherwise("/1");
})
.title-image {
height: 30px;
width: 30px;
vertical-align: middle;
margin-top: -3px;
}
.title-text {
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="onepage.html" type="text/ng-template">
<ion-view title="onepage">
<ion-nav-title>
<img class="title-image" src='./img/soloLogo.png'><span class="title-text"> Aree di competenza</span>
</ion-nav-title>
<ion-content class="padding">
<h3>Bla bla bla</h3>
<p>Bla bla bla</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
Related
im currently digging through the github page, but Im unable to figure out how to set the tabSize property on my prism editor, if anyone has any experience and is willing to share it I would greatly appreciate it!
I will answer here as I placed in code snippet for you to play with.
There is a problem on the umd script where it cannot recognise tabSize as a valid props.
Therefore, you can use tab-size to overcome this.
P.S. move tab size to be part of vue data to avoid complaining the type.
Here is the code snippet for you to test it.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css" />
<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism-tomorrow.css" />
<style>
.height-200 {
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</style>
</head>
<body>
<div id="app">
<prism-editor class="my-editor height-200" v-model="code" :highlight="highlighter" line-numbers :tab-size="tabSize">
</prism-editor>
</div>
<script src="https://unpkg.com/vue#2.6.*"></script>
<script src="https://unpkg.com/vue-prism-editor"></script>
<script src="https://unpkg.com/prismjs/prism.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<!-- <script src="./src/index.js"></script> -->
<script>
new Vue({
el: "#app",
data: () => ({
code: "code",
tabSize: 8
}),
methods: {
highlighter(code) {
// js highlight example
return Prism.highlight(code, Prism.languages.js, "js");
}
}
});
</script>
</body>
</html>
I need your help. The following code is a copy of a code in jsfiddle.(https://jsfiddle.net/atfLe15b)
In jsfiddle it works but the following code in my computer doesn't work.
More details, In jsfiddle show all file list in the folder. but in my computer it show only the folder name.
Anybody knows about this? thank you in advance.
here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ExampleEdit</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style id="compiled-css" type="text/css">
#dropzone {
text-align: center;
width: 300px;
height: 100px;
margin: 10px;
padding: 10px;
border: 4px dashed red;
border-radius: 10px;
}
#boxtitle {
display: table-cell;
vertical-align: middle;
text-align: center;
color: black;
font: bold 2em "Arial", sans-serif;
width: 300px;
height: 100px;
}
body {
font: 14px "Arial", sans-serif;
}
</style>
<script id="insert"></script>
</head>
<body>
<p>Drag files and/or directories to the box below!</p>
<div id="dropzone">
<div id="boxtitle">
Drop Files Here
</div>
</div>
<h2>Directory tree:</h2>
<ul id="listing">
</ul>
<script type="text/javascript">
let dropzone = document.getElementById("dropzone");
let listing = document.getElementById("listing");
function scanFiles(item, container) {
let elem = document.createElement("li");
elem.innerHTML = item.name;
container.appendChild(elem);
if (item.isDirectory) {
let directoryReader = item.createReader();
let directoryContainer = document.createElement("ul");
container.appendChild(directoryContainer);
directoryReader.readEntries(function(entries) {
entries.forEach(function(entry) {
scanFiles(entry, directoryContainer);
});
});
}
}
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
dropzone.addEventListener("drop", function(event) {
let items = event.dataTransfer.items;
event.preventDefault();
listing.innerHTML = "";
for (let i=0; i<items.length; i++) {
let item = items[i].webkitGetAsEntry();
if (item) {
scanFiles(item, listing);
}
}
}, false);
</script>
</body>
</html>
Your code is working for me!
try to change your file name to *.html (index.html)
You need to add /js/lib/dummy.js and /css/result-light.css files.
I installed this code on a single page PHP page and it works the way I want it to. Problem is page I need to install it on is broken up into 4 PHP pages.(Home.php, which also includes, Header, Menu, and Footer PHP pages...) and I can't get the code to work. I've tried installing it different places but no luck... if anyone can help would be much appreciated... Code is below.
page to install on is: http://tonysatthejhouse.com THANKS!!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<link rel="stylesheet" href="http://tonysatthejhouse.com/superadmin/assets/css/Mag3.css" />
</head>
<body>
<h1>THIS IS A TEST</h1>
<script data-require="jquery#1.9.1" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script src="http://tonysatthejhouse.com/superadmin/assets/js/MagJS4.js"></script>
</body>
</html>
$(document).ready(function() {
$.magnificPopup.open({
items: {
src: 'http://tonysatthejhouse.com/superadmin/assets/extraimages/Restaurant_Week AD-01.jpg', // can be a HTML string, jQuery object, or CSS selector
type: 'image'
}
});
})
.white-popup {
width:500px;
height:700px;
overflow:auto;
padding:10px;
background:white;
border:2px solid black;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
i am new to dojo and i am trying to make a button with an image, but the image does not show, besides, when one clicks the button, it correctly shows the "hi" alert.
the "zoom_in.png" image is right in the same directory with the html. And firebug shows no errors or warnings.
Update. thanks to ed, i managed to get it working via the declarative approach
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>require(["dojo/parser", "dijit/form/Button"]);</script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 25px;
width: 25px;
text-align: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
alert( "Thank you! ");
});
</script>
</button>
<div id="result2"></div>
</body>
</html>
However, programatically, the problem persists
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 250px;
width: 250px;
text-align: center;
background-repeat: no-repeat;
}
</style>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"
],
function(Button) {
new Button({
title: 'Zoom in', iconClass:'zoom_in_icon',
onClick: function() { alert("hi"); }}, "zoom_in").startup();
});
</script>
</head>
<body>
<button id="zoom_in" type="button"></button>
</body>
</html>
thanks
If you want to create the button programatically you need to call startup() on the new Button, and you don't need the data-dojo-type="dijit/form/Button" or the parse in the html, if you want to create it declaratively you don't need the new button, but you need to set the icon in the html.
See the Programatic example here:
http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html
Hi I have a simple one as shown below that displays bordercontainer and contentpane.
I do not understand why the bordercontainer's id is registered twice since I only have one
id defined for bordercontainer.
The error stated: Error: Tried to register widget with id==main_bContainer but that id is already registered
Please advise where I got it wrong.
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../dojo1_8/dijit/themes/soria/soria.css"/>
<link rel="stylesheet" href="../common.css"/>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 5px;
padding: 0px;
overflow: hidden;
}
</style>
</head>
<body class="soria">
<div id="main_bContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'">
<div class="cP_Left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
Content Pane A
</div>
<div class="cP_Right" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
Content Pane B
</div>
</div>
</body>
<script>
var dojoConfig =
{
parseOnLoad: true,//replace web controls based on theme soria
isDebug: true,//true for debuggin with aid from FireBug, Always set it to false, to avoid overhead
async: true,//
locale : "en-us"//
};
</script>
<script src='../dojo1_8/dojo/dojo.js'></script>
<script>require(["dojo/parser",
"dojo/ready",
"dojo/request",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(parser, ready, request)
{ready(function()
{parser.parse();
});
});
</script>
</html>
Thanks
Clement
Becuase you have parse() its 2 times.
Here dojoConfig = { parseOnLoad: true };
and here parser.parse();
Just parse only one the problem will solve.