Using Polymer 1.1, in Chrome the elements are centered when the screen is resized smaller. But in Firefox, they shift to the left.
I filed a bug for this, but in the meantime...
Is there a way of making them centered in Firefox without breaking them in Chrome?
<dom-module id="portfolio-display">
<style>
:host[show] {
#apply(--layout-horizontal);
#apply(--layout-center-justified);
height: 100%;
width: 100%;
background-color: var(--paper-grey-50);
}
#main {
width: 100%;
margin-top: 50px;
}
</style>
<template>
<template is="dom-if" if="{{show}}">
<iron-media-query query="(min-width: 900px)" query-matches="{{queryMatches}}"></iron-media-query>
<div id="main">
<div class="layout vertical center center">
<portfolio-first-row class$="{{computeMediaSize(queryMatches)}}"></portfolio-first-row>
<portfolio-second-row class$="{{computeMediaSize(queryMatches)}}"></portfolio-second-row>
<portfolio-third-row class$="{{computeMediaSize(queryMatches)}}"></portfolio-third-row>
</div>
</div>
</template>
</template>
<script>
Polymer({
is: "portfolio-display",
properties: {
show: {
type: Boolean,
reflectToAttribute: true,
value: false
}
},
toggleShow: function() {
this.show = !this.show;
},
computeMediaSize: function (smallScreen) {
if (!smallScreen) {
return "layout vertical center center";
}
}
});
</script>
</dom-module>
Related
I´m rendering my chat using this:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"] {
background-color: black;
}
div[role="log"] {
background: gainsboro;
}
div[role="status"] {
background: darkgray;
}
#webchat {
position: fixed;
height: calc(100% - 135px);
z-index: 9999;
width: 400px;
top: 132px;
overflow: hidden;
border-color: red;
border-style: dotted;
visibility:visible;
}
</style>
</head>
<body>
<div>
<div id="heading">
<div id="heading">
<h1><img src="mylogo.png"> mychat</h1>
</div>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
openchat();
function openchat() {
const styleOptions = {
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
botAvatarInitials: '',
userAvatarInitials: 'You',
bubbleBackground: 'rgba(0, 255, 50, .4)',
bubbleFromUserBackground: 'rgba(125, 125, 125, .3)',
botAvatarImage: 'mylogo.png'
};
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: '*'
}),
styleOptions
},
document.getElementById('webchat')
);
}
</script>
</body>
</html>
It works fine, but now I need to publish this chat in the webpage of the company, as a popup or something like that, so using the previous script is OK but I have not options to add a title to the popup and also I need to add a minimize button. How I can set title and minimize button to my webchat inside a main page?
Tx,
I think your best bet going forward is to use the samples provided by the webchat team.
The minimizable webchat sample is a good example.
I'm trying to get button v-on:click to work in Vue Native but it is not updating the variable as expected. Here is the code in the App.vue file of a basic project:
<template>
<view class="container">
<button v-on:click="count += 1" title="Add 1" />
<text>{{ counter }}</text>
</view>
</template>
<script>
export default {
data: function() {
return {
counter: 0
};
}
};
</script>
<style>
.container {
flex: 1;
align-items: center;
justify-content: center;
}
The value of counter is always showing as 0, even after clicking the "Add 1" button several times. Why isn't button v-on:click working in Vue Native?
EDIT #1:
As #Suoakira pointed out the button code was incorrect so it has been updated follows:
<button v-on:click="counter++" title="Add 1" />
However, the value of counter is still always showing 0, even after clicking the "Add 1" button. Why isn't this working in Vue Native?
EDIT #2:
I have still not found a way to get v-on:click to work in Vue Native in the button tag. However, the following alternative works. It is further developed than the original post. It demonstrates two different ways to work with :on-press in touchable-opacity. If someone knows how to write the equivalent using v-on:click and the button tag in Vue Native, I'd sure like to see that solution. In the meantime -
<template>
<view class="container">
<touchable-opacity class="button" :on-press="() => counter++">
<text class="button-text">Add 1</text>
</touchable-opacity>
<touchable-opacity class="button" :on-press="addTwo">
<text class="button-text">Add 2</text>
</touchable-opacity>
<touchable-opacity class="button" :on-press="resetCounter">
<text class="button-text">Reset</text>
</touchable-opacity>
<text>{{ counter }}</text>
</view>
</template>
<script>
export default {
data: function() {
return {
counter: 0
}
},
methods: {
addTwo: function() {
this.counter += 2;
},
resetCounter: function() {
this.counter = 0;
}
}
};
</script>
<style>
.container {
align-items: center;
padding-bottom: 30px;
}
.button {
width: 100px;
height: 35px;
background-color: #FFCE00;
justify-content: center;
align-items: center;
margin-bottom: 5px;
}
.button-text {
font-size: 18px;
font-weight: 700;
}
</style>
Your data property is counter, but you are updating count on click.
please try with :on-press="test" instead of v-on:click
Can anyone help me with a javascript to make the page scroll down to the searchbox when the searchfield is focused? Like if you click on the searchfield, the position changes, until the red and yellow boxes are out of sight.
#overtop {
width: 500px;
height: 100px;
background: red;
}
#top {
width: 500px;
height: 100px;
background: yellow;
}
#searchbox {
}
#content {
width: 500px;
height: 200px;
background: blue;
}
<div id="overtop">
</div>
<div id="top">
</div>
<div id="searchbox">
<input type="text" id="myInput" placeholder="enter.." title="search">
</div>
<div id="content">
</div>
Just got it, finally.
$("#myInput").click(function () {
$("html, body").animate({ scrollTop: $("#searchbox").offset().top }, 300);
return true;
});
I am doing a jQuery animation of 3 boxes, the effect is like the jsfiddle link below:
Fiddle
Basically when clicked on each color box the corresponding box will enlarge to width 100% taking up all width. And when clicking close (yes, it is not functioning well) the box will shrink back to its original position.
What I encountered now is
When enlarging the pink or the blue box, sometimes the yellow box on RHS will jump to next row (but just a very quick jump, i dunno why). It happens only in Chrome, looks perfect in Firefox.
When clicking the close button, it will trigger the yellow box to
enlarge (supposed it has taken up 0% of width? Why the bind click
still works?
Could someone advise how I should solve these and is there a better way for me to achieve the same results?
HTML
<div class="animateWrap">
<div id="btn_howtojoin" class="btn_group">
<div class="btn_close"></div>
<div class="content">Content</div>
</div>
<div id="btn_judgecriteria" class="btn_group">
<div class="btn_close"></div>
<div class="content">Content</div>
</div>
<div id="btn_prizeinfo" class="btn_group">
<div class="btn_close">Close</div>
<div class="content">Content</div>
</div>
<div class="clear00"></div>
JS
$(function () {
$('#btn_judgecriteria').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$('.btn_close').show();
});
$('#btn_prizeinfo').animate({
width: "0%"
});
$('#btn_howtojoin').animate({
width: "0%"
});
});
$('#btn_howtojoin').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$(this).find('.content').animate({
top: "40px"
});
$('.btn_close').show();
});
$('#btn_prizeinfo').animate({
width: "0%"
});
$('#btn_judgecriteria').animate({
width: "0%"
});
});
$('#btn_prizeinfo').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$('.btn_close').show();
});
$('#btn_howtojoin').animate({
width: "0%"
});
$('#btn_judgecriteria').animate({
width: "0%"
});
});
$('.btn_close').bind('click', function () {
$('.btn_group').animate({
width: "33.333%",
height: "220px"
});
$('.btn_group .content').hide();
$('.btn_close').hide();
});
});
CSS
.btn_group {
width: 33.3%;
height: 220px;
float: left;
cursor: pointer;
position:relative;
}
#btn_howtojoin {
background: #fcb2b2 ;
width: 33.4%;
}
#btn_judgecriteria {
background: #7acccb ;
}
#btn_prizeinfo {
background: #f1c348;
}
.btn_group .content {
position:absolute;
top:-400px;
left:40px;
}
.btn_close {
position:absolute;
top:20px;
right:20px;
color:#FFF;
width: 40px;
height:62px;
display:none;
}
Problem 1 maybe due to rounding up calculation of 33.333% which make the total width of 3 container slightly larger than 100%. Changing them to pixel might help.
Problem 2 is due to event bubbling, it will trigger click event of .btn_group after .btn_close
Add event.stopPropagation(); will help solving this.
$('.btn_close').bind('click', function () {
$('.btn_group').animate({
width: "33.333%",
height: "220px"
});
$('.btn_group .content').hide();
$('.btn_close').hide();
event.stopPropagation();
});
This is a newbie question about Kendo UI draggable. I tried to look at their examples but cant really get it.
I want to make a div draggable to another position. When setting this up I can drag the div, but it disappears when released, I want it to stay in the new place. I have tried this but it doesnt work.
$('.draggable').kendoDraggable({
axis: "x",
hint: Hint,
dragstart: DragStart,
drag: Drag,
dragend: DragEnd
});
function Hint (element) {
console.log("hint");
return element;
}
function DragStart(){
console.log("dragstart");
}
function Drag(){
console.log("draging");
}
function DragEnd(event) {
console.log("dragend");
console.log(event.x.location);
$('.draggable').css({'left': event.x.location});
}
I think this is what you want, and I made a Demo for it.
$('.draggable').kendoDraggable({
hint : function (original) {
return original.clone().addClass("ob-clone");
},
dragstart: function (e) {
$(e.target).addClass("ob-hide");
}
});
$('body').kendoDropTarget({
drop: function (e) {
var pos = $(".ob-clone").offset();
$(e.draggable.currentTarget)
.removeClass("ob-hide")
.offset(pos);
}
})
.draggable {
position: absolute;
background: red;
width: 100px;
height: 100px;
vertical-align: middle;
}
.ob-hide {
display: none;
}
.ob-clone {
background: #cccccc;
}
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="drop" style="position: absolute; width: 100%; height: 100%; border: 2px solid #000000">
<div class="draggable">
Drag 1
</div>
<div class="draggable">
Drag 2
</div>
</div>
jsFiddle: http://jsfiddle.net/Wayou/fjrcw/