I have a ionic checkbox, which I want to combine with a image, so when the user clicks on either the image or checkbox, it gets checked or unchecked.
Image is attached, the grey area would represent the image. Example image
the markup i have so far is:
<div class="col" style="padding-right:0px;">
<div class="list card">
<div class="item item-image">
<img src="img/xxx.png" style="width:100%; height:150px;">
</div>
<li class="item item-checkbox">
Lorem ipsum
<label class="checkbox">
<input type="checkbox" ng-model="xxxx['xxxx']">
</label>
</li>
</div>
</div>
Any ideas?
You could add an ng-click directive to images "switching" the variable used as model for <input> as shown below:
var app = angular.module('myApp', ['ionic'])
.controller('myController', function($scope) {
});
<html lang="en" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<link rel="stylesheet" href="http://code.ionicframework.com/1.1.0/css/ionic.css">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="myController">
<ion-view title="view">
<ion-content>
<div class="row">
<div class="col-50" style="padding-right:0px;">
<div class="card">
<div class="item item-image" ng-click="value1 = !value1">
<img src="img/xxx.png" style="width:100%; height:150px;">
</div>
<li class="item item-checkbox">
Lorem ipsum 1
<label class="checkbox">
<input type="checkbox" ng-model="value1">
</label>
</li>
</div>
</div>
<div class="col-50" style="padding-right:0px;">
<div class="card">
<div class="item item-image" ng-click="value2 = !value2">
<img src="img/xxx.png" style="width:100%; height:150px;">
</div>
<li class="item item-checkbox">
Lorem ipsum 2
<label class="checkbox">
<input type="checkbox" ng-model="value2">
</label>
</li>
</div>
</div>
</div>
<hr/>
<pre>value1 = {{value1|json}}</pre>
<pre>value2 = {{value2|json}}</pre>
</ion-content>
</ion-view>
</body>
</html>
Related
In VueJS I am using textarea to get input from the user and also use another textarea to show output.
Here, everything is working except I am getting multiple outputs with textarea like this.
I am using v-for in textarea as the code is perfectly working if I use inside ordered/unordered list.
Image: Multiple Textarea box while output
Code
var app = new Vue({
el: '#app',
data: {
address: '',
},
methods: {
},
computed: {
domainlist() {
return this.address.split('\n')
}
}
})
<!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.0">
<title>.com.np Cover Letter Generator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="app">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<div class="box">
<form>
<div class="field ">
<label class="label is-size-5 ">Domain Name</label>
<div class="control">
<textarea class="textarea is-medium " placeholder="Ex: www.abc.com.np " v-model="address " required="required"></textarea>
</div>
</div>
</form>
</div>
</div>
<div class="column is-half">
<div class="box">
<div class="field">
<label class="label is-size-5">Output</label>
<div class="control">
<textarea class="textarea" placeholder="Result" v-for="address in domainlist" readonly>domain:{{address}}
</textarea>
</div>
</div>
<div class="field">
<div class="control buttons is-centered ">
<button class="button is-primary is-medium ">Copy</button>
<button class="button is-danger is-medium ">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
</body>
</html>
with the v-for Vue will duplicate the element for any array item.
I suggest to generate the textarea content directly in the computed property.
Here below a working example.
var app = new Vue({
el: '#app',
data: {
address: '',
},
methods: {
},
computed: {
domainlist() {
var addreses = this.address.split('\n');
var ret = "";
for(var addr in addreses) {
ret += addreses[addr] ? 'domain: '+addreses[addr]+"\n":"";
}
return ret;
}
}
})
<!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.0">
<title>.com.np Cover Letter Generator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="app">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<div class="box">
<form>
<div class="field ">
<label class="label is-size-5 ">Domain Name</label>
<div class="control">
<textarea class="textarea is-medium " placeholder="Ex: www.abc.com.np " v-model="address " required="required"></textarea>
</div>
</div>
</form>
</div>
</div>
<div class="column is-half">
<div class="box">
<div class="field">
<label class="label is-size-5">Output</label>
<div class="control">
<textarea class="textarea" placeholder="Result" readonly>{{domainlist}}
</textarea>
</div>
</div>
<div class="field">
<div class="control buttons is-centered ">
<button class="button is-primary is-medium ">Copy</button>
<button class="button is-danger is-medium ">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
</body>
</html>
Replace
return this.address.split('\n')
With
return this.address.split('.') // so that a.b.c becomes ['a','b','c']
You can also move the v-for out of the textarea to the <div class="control"></div>
<div class="control" v-for="address in domainlist">
<textarea class="textarea" placeholder="Result" readonly>domain:{{address}}
</textarea>
</div>
var app = new Vue({
el: '#app',
data: {
address: '',
},
methods: {
},
computed: {
domainlist() {
return this.address.split('.')
}
}
})
<!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.0">
<title>.com.np Cover Letter Generator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="app">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<div class="box">
<form>
<div class="field ">
<label class="label is-size-5 ">Domain Name</label>
<div class="control">
<textarea class="textarea is-medium " placeholder="Ex: www.abc.com.np " v-model="address " required="required"></textarea>
</div>
</div>
</form>
</div>
</div>
<div class="column is-half">
<div class="box">
<div class="field">
<label class="label is-size-5">Output</label>
<div class="control" v-for="address in domainlist">
<textarea class="textarea" placeholder="Result" readonly>domain:{{address}}
</textarea>
</div>
</div>
<div class="field">
<div class="control buttons is-centered ">
<button class="button is-primary is-medium ">Copy</button>
<button class="button is-danger is-medium ">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
</body>
</html>
I am building a static e-commerce website using bootstrap. I want 2 product in a row while it opens in the phone and 4 product in a row while open in desktop or i-pad.
<div class="container">
<div class="row product">
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
<div class="col-md-3">
<div class="image">
<img id="10030" src="#">
</div>
</div>
</div>
There is more than 1 row on this page.
please help me to solve this.
the issue that you are having is because of your bootstrap grid.
I made an example below. Pay attention to: class="col-xs-6 col-md-3"
Here are the docs. https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
<!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.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3" style="background-color:green;">1</div>
<div class="col-xs-6 col-md-3" style="background-color:blue;">2</div>
<div class="col-xs-6 col-md-3" style="background-color:red;">3</div>
<div class="col-xs-6 col-md-3" style="background-color:yellow;">4</div>
</div>
</div>
</body>
</html>
I need serious help with my code. I am pretty new to JavaScript so it could be something really simple.
I want to use a Jquery plugin called ElevateZoom.
I downloaded the plugin, linked the jquery and elevatezoom files (jquery is working fine) and copied the demo's code. The demo works fine, so what I do not get is on the exact same browser but on my page it does not work. I have been scratching my head for at least 3 hours over this and tried multiple things such as implementing the scripts internally, trying different versions of jquery, using different images etc. My HTML and JavaScript code is below (note my first block of javascript works):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Jeff/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Jeff/script.js"></script>
<script src="Jeff/jquery.elevatezoom.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="test"></div>
<div class="logo"></div>
<nav>
<div class="container">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>Deals</li>
<li>Store</li>
<li>Basket</li>
<li>Coming soon</li>
<li>Support</li>
</ul>
</div>
</nav>
<div class="main-container">
<div class="content">
<br>
<div class="ws_shadow"></div>
<hr>
<div class="contentbox-big2" style="margin-left: 0px;">
<div class="titlebox">
ADS
<div class="titleinfo"></div>
</div>
<div class="newscontent">
<img src="img/brit.png" alt="image" style="width:167px;height:258px;">
<br> <br> <hr> <br> <br>
<img src="img/coke.jpg" alt="image" style="width:167px;height:258px;">
<hr>
</div>
</div>
<div class="contentbox-big3" style="margin-left: 0px;">
<div class="titlebox">
Deals
<div class="titleinfo"></div>
</div>
<div class="newscontent2">
<img id="zoom_01" src="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png" data-zoom-image="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png"/>
Pokemon Sun 3DS - £14.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20171029_pubg_logo.jpg" alt="image" style="width:300px;height:350px;">
Player Unknown's Battlegrounds - £19.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="http://sm.ign.com/t/ign_in/cover/b/battlefiel/battlefield-1_9ufa.250.jpg" alt="image" style="width:300px;height:350px;">
Battlefield 1 - £24.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</div>
<div class="soundcloud">
<iframe width="100%" height="80" scrolling="no"
frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/184695140&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</html>
JavaScript code:
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
I searched here in stackoverflow but didnt find a solution for my case..
i want to do a group div who will appear or will hide if the down button is clicked...have this HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Relatorio</title>
<script src="/Scripts/jquery-1.8.2.js"></script>
</head>
<body style="border-top: solid 10px #ffffff" class="container">
<div>
<div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<input type="text" id="" name="" />
</div>
<div class="col-lg-4">
<div>
<div>
<div style="border:1px solid black;font-size:20px;overflow:auto;">
<div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-12">
Relatorio 01
</div>
</div>
</div>
<div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;color: white">
<div class="row" style="text-align:right;">
<div class="col-sm-8">
field1
</div>
<div class="col-sm-4" style="text-align:right;">
<div id='botabrefecha'>
<i class='fa fa-angle-down'></i>
</div>
</div>
</div>
</div>
<div class="abrefecha" style="border:0px solid black;display:none">
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
field2 Group
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
field3 Group
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
</div>
<div class="container" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-4">
txtCampo3
</div>
<div class="col-sm-8" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and this jquery:
$(document).ready(function () {
$('#botabrefecha').on('click', function () {
var visivel = $(this).closest('div').find(".abrefecha").is(":visible");
if (visivel)
{
$(this).closest('div').find(".abrefecha").hide();
}
else
{
$(this).closest('div').find(".abrefecha").show();
}
});
});
but i dont know why he cant show or hide my div. i have tested and he returns if is visible or not...but when i try to show or hide, nothing happens...
any ideas?
Thanks!
Rafael
in your code there is only one div containing the class abrefecha so you can access that element directly. For show/hide of elements you can use jQuery's toggle function.
toggle
You can access that div directly in your click handler.
$(document).ready(function () {
$('#botabrefecha').on('click', function () {
$('.abrefecha').toggle();
});
});
Problem
I'm using foundation for Apps to create an Angular app. I'm having trouble with using ng-repeat to get the data I want to be presented from the object into the template home.html. Instead of getting the data, I see an error message in the console, which gives me {{business.name}} as opposed to the actually data.
Error message
Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
I've included my Github repo below:
Link:: https://github.com/onlyandrewn/angular
app.js
(function() {
'use strict';
angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', function($scope) {
$scope.businesses = [{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}];
});
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}
})();
index.html (ng-app="application") lives here
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brandon Sun Business Directory</title>
<link href="/assets/css/app.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="grid-frame vertical">
<div class="grid-content shrink" style="padding: 0;">
<div class="primary condense menu-bar">
<div class="logo">
<img src="http://placehold.it/80x45" class="bdnsun" alt="">
<div class="social">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
</div><!-- /.social -->
</div><!-- /.logo -->
</div>
</div>
<div ui-view class="grid-content">
</div>
</div>
<script src="/assets/js/foundation.js"></script>
<script src="/assets/js/templates.js"></script>
<script src="/assets/js/routes.js"></script>
<script src="/assets/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
</body>
</html>
home.html (ng-controller="MainCtrl) lives here
---
name: home
url: /
---
<div class="grid-container">
<div class="hero">
<p class="sponsor">Sponsored by </p>
<img src="http://placehold.it/200x30" class="sponsors" alt="">
<h1>Business Directory</h1>
<div class="find">
<label for="looking">
<i class="fa fa-search"></i>
</label>
<input type="search" id="looking" placeholder="What are you looking for?">
<input type="submit">
</div><!-- /.find -->
<ul>
<li class="popular">Popular searches:</li>
<li>tk-category <span>|</li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category </li>
</ul>
</div><!-- /.hero -->
<div class="businesses">
<p class="number">tk-number of businesses</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
<div class="options">
<div class="cat">
<div class="categories">
<div class="group">
<p class="name">Grade Level</p>
<div class="check">
<input type="radio" name=""><p>Auto</p>
<input type="checkbox" name=""><p>Restaurant</p>
<input type="checkbox" name=""><p>Other</p>
</div><!-- /.check -->
</div><!-- /.group -->
<div class="group">
<p class="name">School Type</p>
<div class="check">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div><!-- /.check -->
</div><!-- /.group -->
</div><!-- /.categories -->
</div><!-- /.cat -->
</div><!-- /.options -->
</div><!-- /.businesses -->
<div class="buttons">
<button class="alp">Alphabetically</button>
<button class="exp">Expanded</button>
<button class="con">Condensed</button>
</div><!-- /.buttons -->
<div class="grid-block small-up-3" ng-controller="MainCtrl">
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
</div>
</div>
There is no "MainCtrl" in the Angular app called "application".
You have defined MainCtrl to be a part of MyApp. Was this a copy/paste error?
// Markup
ng-app="application">
...
ng-controller="MainCtrl">
// JavaScript
var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', function($scope) {