I am implement mobile website. I am using mobileangularui framework for mobile website. I want to set image in home.html, But i could not set image from image folder.If i put URL of image which is exist in server then it is works. I will show screen shot of code snippet.
Existing output:
home.html
<style>
.bgImage
{
background-image: url('http://www.electricshop.com/editordocs/image/OurTopGiftIdeas231215_978x400.png');
height:330px;
background-position: center center;
}
</style>
<div class="jumbtron scrollable-content">
<div class="bgImage">
</div>
<img src="../images/clocks.jpg">
<img src="http://1.bp.blogspot.com/-NFIfiFmg8SA/Ti0xrNqB4OI/AAAAAAAADno/fB_2wYQBiv4/s1600/silence-between-two-people.jpg">
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>y</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<script src="http://localhost:8001/target/target-script-min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.min.js"></script>
</head>
<style>
.color-winni-text
{
color:#c62222;
}
</style>
<body ng-app="Y" ng-controller="MainController">
<!-- Sidebars -->
<div ng-include="'sidebar.html'"
ui-track-as-search-param='true'
class="sidebar sidebar-left"></div>
<div class="app">
<!-- Navbars -->
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center color-winni-text" ui-yield-to="title">
<strong>Winni Celebration</strong>
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
<i class="fa fa-bars color-winni-text fa-2x"></i>
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn">
<i class="fa fa-comment color-winni-text"></i>
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<i class="fa fa-home fa-navbar"></i> Docs
<i class="fa fa-github fa-navbar"></i> Sources
<i class="fa fa-exclamation-circle fa-navbar"></i> Issues
</div>
</div>
<!-- App Body -->
<div class="app-body background-color-body">
<div class="app-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<div ui-yield-to="modals"></div>
</body>
</html>
When i give
<img src="../images.clocks.jpg">
then it is not works, But i give image url which is exist in server then it is works.
Directory Screen Shot:
Please give me some idea.
Related
I am creating a navbar for mobile using Bulma. The HTML snippet I used from Bulma for the Navbar is misbehaving by aligning the buttons to the left instead of aligning them to the right. Moreover, I want those buttons to appear on small screens to the right without the Hamburger. Here is what it looks like on small and large screens. I have even tried using columns to align the buttons to the right and make their appearance possible on small screens.
Small Screen
Large Screen
Here's my code for Navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary navbar-end">
<strong>Sign up</strong>
</a>
<a class="button is-light navbar-end">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
You have an extra <div> with a class of "navbar-start" that is not needed and you also need to get rid of class="navbar-menu" as Bulma automatically hides the right side on small devices with this class.
<div id="navbarBasicExample">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary navbar-end">
<strong>Sign up</strong>
</a>
<a class="button is-light navbar-end">
Log in
</a>
</div>
</div>
</div>
I'm learning Framework7 now, but I'm stuck in this problem. I have created two pages, this is the file
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#673ab7">
<title>Ciptaloka Editor</title>
<link rel="icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/framework7.material.min.css">
<link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="theme-teal">
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<!-- off canvas -->
<div class="panel-overlay"></div>
<div class="panel panel-left panel-cover">
a
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel" data-panel-left>
<i class="icon material-icons">menu</i>
</a>
</div>
<div class="center">
Custom T-Shirt
</div>
<div class="right">
<a class="link">
Done
</a>
</div>
</div>
</div>
<!-- Toolbar -->
<div class="toolbar toolbar-bottom tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#produk" class="link tab-link active">
<i class="icon material-icons">dashboard</i>
<span class="tabbar-label">Produk</span>
</a>
<a href="#image" class="link tab-link">
<i class="icon material-icons">add_a_photo</i>
<span class="tabbar-label">Image</span>
</a>
<a href="#text" class="link tab-link">
<i class="icon material-icons">text_fields</i>
<span class="tabbar-label">Text</span>
</a>
<a href="#clipart" class="link tab-link">
<i class="icon material-icons">photo_filter</i>
<span class="tabbar-label">Clipart</span>
</a>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
<div class="tabs">
<div class="tab active" id="produk">
Go home 2
</div>
<div class="tab" id="image">
Image
</div>
<div class="tab" id="text">
Text
</div>
<div class="tab" id="clipart">
Clipart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/framework7.min.js"></script>
<script type="text/javascript" src="assets/js/my-app.js"></script>
</body>
</html>
index2.html
<div data-page="index2" class="page">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel">
<a href="index.html">
<i class="icon material-icons">back</i>
</a>
</a>
</div>
<div class="center">
Custom Case
</div>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
Success direct page
</div>
</div>
</div>
When I'm click 'go home 2' at index.html, its succesfully direct to index2.html, content is shown, but not with the navbar, its only shown a background, but the text is hidden. This my screenshoot :
Why this is happen? Is I miss something?
your navbar is inside your data-page
you switch to index2 and all page change.
let navbar outside -> view-main -> navbar and then the data-page
sorry my bad english.
I am using mobile angular ui. I want to hide side for particular page.
http://mobileangularui.com/
This side bar by default put in every page. But i don't want this side bar in home page. Mobile angular ui have one index.html file. One sidebar.html import in index file. And every page import in index file. But when come home.html file will come then sidebar should be hide.
Index.html
<html>
<head>
<meta charset="utf-8" />
<title>y</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<!-- inject:js -->
<script src="js/app.min.js"></script>
</head>
<style>
.color-winni-text
{
color:#c62222;
}
</style>
<body ng-app="Y" ng-controller="MainController">
<!-- Sidebars -->
<div ng-include="'sidebar.html'"
ui-track-as-search-param='true'
class="sidebar sidebar-left">
</div>
<div class="app">
<!-- Navbars -->
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center " ui-yield-to="title">
<a class="color-winni-text" href="#/"> <strong>Winni Celebration</strong></a>
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
<i class="fa fa-bars color-winni-text fa-2x"></i>
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn">
<i class="fa fa-sign-in color-winni-text"></i>
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a style="color:#c62222" href="#/" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Home</a>
<a style="color:#c62222" href="#/my-winni" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> My Winni</a>
<a style="color:#c62222" href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
</div>
</div>
<!-- App Body -->
<div class="app-body background-color-body" style="background-color:white" ui-prevent-touchmove-defaults>
<div class="app-content scrollable-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<div ui-yield-to="modals"></div>
</body>
</html>
Screen Shot of index file
App.js File.
angular.module('Y', [
'ngRoute',
'mobile-angular-ui',
'Y.controllers.Main'
])
.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl:'home.html', reloadOnSearch: null})
.when('/cityPage', {templateUrl:'cityPage.html', reloadOnSearch: false})
.when('/category-prduct', {templateUrl:'category-prduct.html', reloadOnSearch: false})
.when('/product-description', {templateUrl:'product-description.html', reloadOnSearch: false})
.when('/my-winni', {templateUrl:'my-winni.html', reloadOnSearch: false})
.when('/gift-box', {templateUrl:'gift-box.html', reloadOnSearch: false});
});
I want to hide sidebar only on home.html page.
Try wrapping your <div ng-include="'sidebar.html'"> element in an ngIf directive that examines the location path.
You can inject the $location service into your MainController and expose the value of $location.path() to the template.
Example: $scope.currentPath = $location.path()
Then use:
<div ng-if="currentPath !== ''">
<div ng-include="'sidebar.html'">`
Also, use the controllerAs syntax instead of $scope.
Trying to use a custom build example to generate and load code pages only when the user clicks on check boxes and submits. However the textarea does not seem to update at all.
I am attempting to get my code working like this example
http://gregfranko.com/jquery.selectBoxIt.js/customDownload.html
Here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<link href="css/docs.css" type="text/css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Enter Project Name Here</a>
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Custom Download</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Customize and download</h1>
<p class="lead">Download the full repository or customize your entire <em>Enter Project Name Here</em> build by selecting only the components that you need.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li>1. Choose and Generate CSS components</li>
<li>2. Choose and Generate JavaScript components</li>
<li>3. Be Happy</li>
</ul>
</div>
</header>
<hr>
<p class="well note">
<strong>Note:</strong> This example page uses the jQuery plugin, SelectBoxIt, to demonstrate how to create custom builds with Downloadbuilder.js.
</p>
<section class="custom-downloads" id="css-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Choose and Download CSS components
<small>Get just the CSS you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.css"> SelectBoxIt CSS</label>
</div>
</div>
<br />
<a class="btn" data-bind="css-downloads" id="css-generate">Generate CSS</a>
<a class="btn btn-primary download-button" id="css-download" download="jquery.selectboxit.css">Download CSS</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-css-source">// Minified source</textarea>
</section>
<section class="custom-downloads" id="javascript-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
2. Choose and Download JavaScript components
<small>Get just the JavaScript you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.core.min.js" disabled> SelectBoxIt Core</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.ariaAccessibility.min.js"> Aria Accessibility</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.destroy.min.js"> Destroy method</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.disable.min.js"> Disable method</label>
</div>
</div><!-- /row -->
<br />
<a class="btn" href="#" data-bind="javascript-downloads" id="javascript-generate">Generate JavaScript</a>
<a class="btn btn-primary download-button" id="javascript-download" download="jquery.selectboxit.js">Download JavaScript</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-javascript-source">// Minified source</textarea>
</section>
</div>
</div><!--/.fluid-container-->
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Downloads</h3>
</div>
<div class="modal-body">
<a class="btn btn-large" href="#" target="_blank" data-lang="css" download="jquery.selectboxit.css">Download CSS</a>
<a class="btn btn-large" href="#" target="_blank" data-lang="javascript">Download JavaScript</a>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tocify.min.js"></script>
<script src ="js/base64.js"></script>
<script src="js/javascripts/DownloadBuilder.js"></script>
<script>
$(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
$(".toggle-all").on("click", function() {
$(this).parent().parent().find('input[type="checkbox"]').not(":disabled").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
});
var builder = new DownloadBuilder();
$("#css-generate").on("click", function() {
builder.buildURL($("#css-downloads input[type='checkbox']:checked"), "jquery.selectboxit.css", "css", function(data) {
$("#generated-css-source").text(data.content);
if(!data.content) {
$("#css-download").fadeOut("slow");
}
if(data.url) {
$("#css-download").attr("href", data.url).fadeIn("slow");
}
});
});
$("#javascript-generate").on("click", function() {
builder.buildURL($("#javascript-downloads input[type='checkbox']:checked"), "jquery.selectboxit.js", "javascript", function(data) {
$("#generated-javascript-source").text(data.content);
if(!data.content) {
$("#javascript-download").fadeOut("slow");
}
if(data.url) {
$("#javascript-download").attr("href", data.url).fadeIn("slow");
}
});
});
});
</script>
</body>
</html>
Use $("#generated-javascript-source").val(data.content);
instead of
$("#generated-javascript-source").text(data.content);
replace all .text(data.content); with .val(data.content);;
I use Bootstrap 3.0.3 and JQuery 2.0.3
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Encoding" content="gzip" />
<meta http-equiv="Accept-Encoding" content="gzip, deflate" />
<title>#L("CONTROL_PANEL") | #ViewBag.Title</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta content="L" />
#Styles.Render("~/content/admin/css")
<link type="text/css" href="/Content/jquery.mCustomScrollbar.css" rel="stylesheet" media="all" />
#RenderSection("css", false)
</head>
<body>
<section id="container">
<header class="navbar navbar-fixed-top">
<div class="title">
<span>#L("CONTROL_PANEL")</span>
</div>
</header>
<aside class="sidebar">
<menu class="fisrt">
<li class="active">
<a href="#">
<i class="fa fa-2x fa-tachometer"></i>
#L("PANEL")
</a>
<span class="separator"></span>
</li>
</menu>
<menu class="second">
#RenderSection("second_menu", false)
</menu>
</aside>
<menu class="breadcrumb">
<li><span>Панель</span></li>
<li><span>Новости</span></li>
</menu>
<section class="main-content">
<div class="panel panel-dark">
<div class="panel-heading">
<h3 class="panel-title">#ViewBag.PanelTitle</h3>
</div>
<div class="panel-body">
<div class="content">
#{
if (this.TempData["Success"] != null)
{
<div class="alert alert-success fade in">
<a href="#" class="close close-sm" data-dismiss="alert" aria-hidden="true">
<i class="fa fa-times"></i>
</a>
<h4>
<i class="fa fa-check-circle"></i> #L("SUCCESS")
</h4>
<p>#this.TempData["Success"]</p>
</div>
}
if (this.TempData["Error"] != null)
{
<div class="alert alert-danger fade in">
<button type="button" class="close close-sm" data-dismiss="alert">
<i class="fa fa-times"></i>
</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
}
}
<div>
#RenderBody()
</div>
</div>
</div>
</div>
</section>
<footer>
Время генерации страницы #TempData["Time"]
</footer>
</section>
<!-- Scripts -->
#Scripts.Render("~/js")
<!-- the jScrollPane script -->
<script type="text/javascript" src="/scripts/jquery.mCustomScrollbar.concat.min.js"></script>
#RenderSection("js", false)
<script type="text/javascript">
(function ($) {
$(window).load(function () {
$(".content > div").mCustomScrollbar({
theme: "dark-thick",
advanced: {
autoScrollOnFocus: false,
updateOnContentResize: true
}
});
});
})(jQuery);
</script>
</body>
</html>
When I try close message, I get error
TypeError: elem.getAttribute is not a function.
elem.getAttribute( name ) : jquery-2.0.3.js (строка 1707)
Update
I don't know Why but if change Jquery from NuGet to google start work.
I don't know Why but if change Jquery from NuGet to google start work.
Google offers you the latest jQuery 1.x maybe. Before you used 2.0.3. Bootstrap only supports the 1.x release. (jQuery 2.x drops support for IE8 and Bootstrap still support this).
See also: http://getbootstrap.com/getting-started. The basic example template includes https://code.jquery.com/jquery.js which offers version 1.10.2.
https://github.com/twbs/bootstrap/blob/v3.0.3/bower.json shows you Bootstrap 3.0.3 requires >= 1.9.0