I am working on Ionic2 app. I want to zoom an image inside ion-scroll. How can I do that.
<ion-scroll scrollX="true" scrollY="true" zoom=true>
<img src="https://aa.com/app/package_content/s78c_e4vt6/main_images/pg_114.jpg" />
</ion-scroll>
I can zoom an image inside an ion-scroll by writing a small code for the tap event. This code is tested and working in android/ios ionic 2. Tap one time to zoom in and tap again to zoom out . For ios, just add overflow scroll in the ion-content for smooth scrolling.
.ts page:
export class PageName {
constructor() {
}
public tap: number = 600;
tapEvent(e) {
if (this.tap != 700) {
this.tap = 700;
}
else
this.tap = 600;
}}
html:
<ion-content style="background-image:url(assets/img/image1.PNG); white-space: nowrap; overflow: scroll; overflow-x:scroll; height: 100%">
<ion-scroll scrollX="true" scrollY="true" (tap)="tapEvent($event)" zoom="true" style="width:100%;height:100%;text-align:center;">
<div class="scroll-item" style=" width:100%; white-space: nowrap; overflow: scroll;">
<img [ngStyle]="{'width' : tap + 'px', 'min-width' : tap + 'px'}" alt="logo" src="assets/img/image2.PNG">
</div>
</ion-scroll> </ion-content>
Related
I'm working on my portfolio and need to switch between to stylings states of an element. Currently, I'm trying to make it work on the following example. In this particular case, my goal is to click the button and switch between green and red background with every click. But something won't work. I can switch from green to red, but not from red to green. What am I missing?
<button id="button">Toggle</button>
<div class="test" id="test"></div>
.test {
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
var btn = document.getElementById("button");
var test = document.getElementById("test");
btn.onclick = function() {
if (test.style.background = "green") {test.style.background = "red";} else {test.style.background = "green";}};
Codepen Demo https://codepen.io/yanniksturm/pen/rNVmqJe
Thanks a lot!
In if condition there should be double (==) equal sign and also check by backgroundColor instead of background because of some browsers has more properties with background like background: green none repeat scroll 0% 0%; so condition will not execute.
I recommend use backgroundColor instead of background.
var btn = document.getElementById("button");
var test = document.getElementById("test");
btn.onclick = function() {
if (test.style.backgroundColor == "red") {
test.style.backgroundColor = "green";}
else {
test.style.backgroundColor = "red";
}
}
.test {
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
<button id="button">Toggle</button>
<div class="test" id="test"></div>
This question already has answers here:
How can I use content.scrollTo() for ion-scroll in ionic2?
(5 answers)
Closed 5 years ago.
I am working on a web/mobile application with mobile and we have this horizontal scroll tab at the above that represents Categories. On mobile it is fine, but on web I am required to add 2 flashes one on the right side and one on the left side. When the user clicks on them the scroll should move to that direction.
<ion-scroll scrollX="true">
<ion-segment [(ngModel)]="SelectedSubCategory">
<ion-segment-button value="" (ionSelect)="SelectSubCategory('')">
<h6>
All Groups
</h6>
</ion-segment-button>
<ion-segment-button value="{{item.CategoryId}}" (ionSelect)="SelectSubCategory(item.CategoryId)" *ngFor="let item of SubCategories">
<h6 class="subcategorytext">
{{item.CategoryName}}
</h6>
</ion-segment-button>
</ion-segment>
</ion-scroll>
Is it possible to achieve that?
Event though this questions may be considered as a duplicate of another question, I'll still add this answer because I think there's a better way to handle the categories (at least, from the UI/UX point of view).
The end result would look like this:
Basically, we're using the Ionic slider component to show the categories, but showing up to 3 categories per slide.
View:
In the view we just need to add a toolbar with a row, that will include 3 columns inside: one for the left arrow, another one for the slider, and the last one for the right arrow. Please also notice that we're setting the slidesPerView="3" property in the ion-slides element.
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>App Name</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-row class="filters">
<ion-col class="col-with-arrow" (click)="slidePrev()" no-padding col-1>
<ion-icon *ngIf="showLeftButton" name="arrow-back"></ion-icon>
</ion-col>
<ion-col no-padding col-10>
<ion-slides (ionSlideDidChange)="slideChanged()" slidesPerView="3">
<ion-slide (click)="filterData(category.id)" *ngFor="let category of categories">
<p [class.selected]="selectedCategory?.id === category.id">{{ category.name }}</p>
</ion-slide>
</ion-slides>
</ion-col>
<ion-col class="col-with-arrow" (click)="slideNext()" no-padding col-1>
<ion-icon *ngIf="showRightButton" name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>
Component code:
Then we just need to handle what to do when any category is selected, or when the current slide changes:
// Angular
import { Component, Injector, ViewChild } from '#angular/core';
// Ionic
import { IonicPage, Slides } from 'ionic-angular';
// Models
import { CategoryModel } from './../../models/category.model';
#Component({ ... })
export class HomePage {
#ViewChild(Slides) slides: Slides;
public selectedCategory: CategoryModel;
public categories: Array<CategoryModel>;
public showLeftButton: boolean;
public showRightButton: boolean;
constructor(public injector: Injector) { ... }
// ...
private initializeCategories(): void {
// Select it by defaut
this.selectedCategory = this.categories[0];
// Check which arrows should be shown
this.showLeftButton = false;
this.showRightButton = this.categories.length > 3;
}
public filterData(categoryId: number): void {
// Handle what to do when a category is selected
}
// Method executed when the slides are changed
public slideChanged(): void {
let currentIndex = this.slides.getActiveIndex();
this.showLeftButton = currentIndex !== 0;
this.showRightButton = currentIndex !== Math.ceil(this.slides.length() / 3);
}
// Method that shows the next slide
public slideNext(): void {
this.slides.slideNext();
}
// Method that shows the previous slide
public slidePrev(): void {
this.slides.slidePrev();
}
}
Styles:
.filters {
ion-col {
text-align: center;
font-size: 1.6rem;
line-height: 1.6rem;
ion-icon {
color: #ccc;
}
&.col-with-arrow {
display: flex;
justify-content: center;
align-items: center;
}
}
p {
color: #fff;
margin: 0;
font-size: 1.6rem;
line-height: 1.6rem;
}
.selected {
font-weight: 700;
}
}
Hi I have the following foundation codepen:
https://codepen.io/ianims/pen/PmoqBZ
code:
$(document).ready(function () {
$(document).foundation();
});
body {
background-color: #a3d5d3;
}
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
/* width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
color:#ffffff;
margin-left: 70%;
position: absolute;
width:250px;
height:60%;
top: 0;
bottom: 0;
background: black;
opacity:0.5;
padding :20px;
}
<div class="row fullWidth">
<div class="large-12 columns">
<div id="wrap">
<div id="text">
<br /><br /><br /><br />
<h3>MCA Coding and MLC Compliance</h3>
<p>
This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side.
</p>
</div>
<img src="https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" />
</div>
</div>
</div>
On a large screen it works ok -- I want the text overplayed on the image over to the right - but if you shrink the screen down the text starts to disappear off to the right -- anyone any ideas how to keep it consistent on all screens???
thanks
It's better to position using the left: position as opposed to margin. You might also want to delete the height property so it accomodates more content.
#text {
padding-top: 2em; /*replaces the <br>s in your html*/
color: #ffffff;
position: absolute;
width: 250px;
/*height: 60%;*/
top: 0;
right:7.5%; /* instead of margin*/
background: black;
opacity: 0.5;
padding: 20px;
}
I made a codepen demo:
https://codepen.io/kemie/pen/pPoqOv
I have a fairly simple flex layout built on Angular Material. It has a side panel that can be slid offscreen. I'm currently using negative margins to handle that so that the main content box follows its movement with a width adjustment, which works well. However, this results in animation that's not smooth. Apparently it's more of a chore for the graphics rendering mechanism than translation.
How can I accomplish the same using translateX? Here's my demo layout:
<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
<div flex="60" class="main md-padding">
<h1>Main Content</h1>
<button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
</div>
<div flex="40" class="sidebar md-padding">
<h2>Sidebar</h2>
</div>
</div>
The sidebar movement is handled with simple Angular directives and CSS:
.sidebar-out .sidebar {
transform: translateX(40vw)
}
Fiddle demo
The problem is that the main content box doesn't adjust size as the sidebar translates off screen. How can I make that happen? Thanks heaps.
Does this help in anyway? - Fiddle
I think there may be a better way to do this bit though...
.sidebar-out .main {
transform: scaleX(1.7)
}
Markup
<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
<div id="newMain" flex="60">
<div id="mainContent">
<h1>Main Content</h1>
<button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
</div>
<div class="main md-padding">
</div>
</div>
<div flex="40" class="sidebar md-padding">
<h2>Sidebar</h2>
</div>
</div>
CSS
.wrapper {
background: pink;
overflow: hidden;
}
#newMain {
position: relative;
width: 100vw;
height: 100vh;
}
#mainContent {
position: absolute;
z-index: 1;
}
.sidebar,
.main {
height: 100vh;
}
.main {
background: #fff;
transition: all .5s;
transform-origin: 0 0;
}
.sidebar-out .main {
transform: scaleX(1.7)
}
.sidebar {
background: #ddd;
transition: all .5s;
}
.sidebar-out .sidebar {
transform: translateX(40vw)
}
Hi I want to have a dropdown list in my django form with a checkbox in front of every option in the drop down. I have tried using multiple choice field with selectmultiple widget but this displays every option with checkboxes on the page. They are not contained inside the drop down. is there a way to contain them inside the dropdown?
I see that you asked this four years ago so I doubt you are still looking for an answer, but I might as well provide in case someone else finds it!
Basically you want to make a div with an unordered list inside of it, where each item in that list contains a checkbox input.
Then, you use jQuery so that when you click on the div, it gets assigned the 'selected' class in its html.
Then you make your CSS so that the dropdown menu itself only shows up when it has the 'selected' class.
The JSFiddle is here (minus the django templating, obviously):
https://jsfiddle.net/lymanjohnson/2L71nhko/15/
And code is below:
HTML (django template):
<fieldset class="item toggle-item">
<div class="legend-container">
<legend>Choices</legend>
</div>
<ul class="scrollable-dropdown-list">
{% for choice in choices %}
<li>
<input type="checkbox" class="custom-control-input filter" id="choice_{{forloop.counter}}" name="choice" value="{{choice}}">
<label for="choice_{{forloop.counter}}"class="custom-control-label">{{choice}}</label>
</li>
{% endfor %}
</ul>
</fieldset>
JQUERY:
<script>
$(document).ready(function() {
// Listener for when you click on the dropdown menu
$('fieldset.toggle-item > .legend-container').on('click', (event) => {
// Adds or removes the 'selected' attribute on the dropdown menu you clicked
$(event.currentTarget).parent().toggleClass('selected')
// If you have multiple dropdown menus you may want it so that when you open Menu B, Menu A
// automatically closes.
// This line does that by removing 'selected' from every dropdown menu other than the one you clicked on.
// It's 'optional' but it definitely feels better if you have it
$('fieldset.toggle-item').not($(event.currentTarget).parent()).removeClass('selected')
})
// The user is probably going to expect that any and all dropdown menus will close if they click outside of them. Here's how to make that happen:
//This listens for whenever you let go of the mouse
$(document).mouseup(function(e)
{
// make this a variable just to make the next line a little easier to read
// a 'container' is now any
var dropdown_menus = $("fieldset.toggle-item");
// if the target of the click isn't a dropdown menu OR any of the elements inside one of them
if (!dropdown_menus.is(e.target) && dropdown_menus.has(e.target).length === 0)
{
// then it will de-select (thereby closing) all the dropdown menus on the page
$('fieldset.toggle-item').removeClass('selected')
}
});
})
</script>
CSS:
<style>
.item {
width: 33%;
margin: 2px 1% 2px 1%;
border: 0;
}
.item li {
list-style: none;
}
.scrollable-dropdown-list{
position: absolute;
max-height:200px;
width:33%;
overflow-y:scroll;
overflow-x:auto;
margin: 0;
padding-left: 1em;
border-style: solid;
border-width: thin;
border-color: grey;
background-color: white;
}
legend {
margin-bottom: 0;
font-size: 18px;
}
label {
font-weight: normal;
margin-left:20px;
}
.legend-container {
cursor: pointer;
width: 100%;
display: flex;
padding: 0;
margin-bottom: 0px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: none;
}
fieldset {
border-width: thin;
border-color: gray;
border-style: solid;
width:50px;
}
/* Note that all the browser-specific animation stuff is totally optional, but provides a nice subtle animation for the dropdown effect */
fieldset ul.scrollable-dropdown-list {
display: none;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
fieldset.selected ul.scrollable-dropdown-list {
display: block;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
#-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(-10%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
</style>
Dropdowns and checkboxes are HTML elements that are rendered by the browser using its built-in components. Those components don't have any support for combining them: in pure HTML, you simply can't combine a select with a check box.
The only way to do this would be to use components rendered purely in Javascript. Google's Closure UI tools is one set of controls I've used, but only because I used to work at Google: something like jQuery UI might have a version that's easier to use.