Appending a 'Blade' into a Container without 'popping-down' existing ones - javascript

I am implementing a 'blades' experience in a page. When I append an additional Blade into the Container...the previous blades 'pop' down.
Q: How do I append a new element into view without effecting previous elements?
MY FIDDLE:
I created a JSFiddle...but the service is not currently available...I will append it shortly.
https://jsfiddle.net/PrisonerZ3RO/oynae1hd/4/#
MY CSS:
<style>
/** DASHBOARD CONTAINER **/
.dashboard-container { border-right: solid 1px #000; margin-top: 5px; margin-bottom: 5px; overflow-x: scroll; white-space: nowrap; width: 100%; }
.dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }
/** FORM CONTAINER **/
.form-container { border: 1px solid #ccc; border-radius: 3px; height: 500px; margin-bottom: 5px; padding: 5px; width: 500px; }
/** BLADE CONTAINER **/
.blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 506px; margin-right: 2px; padding: 2px; width: 200px; }
</style>
MY HTML:
<script id="tmplBlade" type="text/template">
<div class="blade">
Blade
</div>
</script>
<div class="dashboard-container">
<div class="widget">
<div class="form-container">
Form Controls go here
<input id="btnAppend" type="button" value="Append Blade" />
</div>
</div>
<div class="widget">
<div class="blade-container">
</div>
</div>
</div>
MY JAVASCRIPT:
<script type="text/javascript">
$(document).ready(function () {
function PageController()
{
var that = this,
dictionary = {
elements: { btnAppend: null, bladeContainer: null },
selectors: { btnAppend: '#btnAppend', bladeContainer: '.blade-container', tmplBlade: '#tmplBlade' }
};
var initialize = function () {
// Elements
dictionary.elements.btnAppend = $(dictionary.selectors.btnAppend);
dictionary.elements.bladeContainer = $(dictionary.selectors.bladeContainer);
// Events
dictionary.elements.btnAppend.on('click', that.on.click.btnAppend);
};
this.on = {
click: {
btnAppend: function (e) {
var html = $(dictionary.selectors.tmplBlade).html().trim();
var $element = $(html);
$element.hide();
dictionary.elements.bladeContainer.prepend($element);
// Slide-in
$element.show('slide', { direction: 'left' });
}
}
};
initialize();
}
var pageController = new PageController();
});
</script>

I've come across this problem before. The only way I've found to get around it is to do the following:
1) Create a .hidden class width margin-left: -200px
2) Add a CSS transition on margin-left to the .blade class
3) Apply the .hidden class to a new blade
4) Show the new blade
5) Remove the .hidden class from the new blade
Please see the following fork of your fiddle for a working solution: https://jsfiddle.net/yxL4embt/

How do I append a new element into view without effecting previous elements?
I'm not sure if I entirely get what you're asking since you'll always be affecting the other elements by moving them over when you append a new element. You can, however, prevent the pop-down effect you're seeing. The .ui-effects-wrapperadded by jQuery UI is display: block, so add the following to your CSS:
.blade-container .ui-effects-wrapper {
display: inline-block !important;
}
Then make sure your other blades are always aligned to the top of your container:
.blade-container .blade {
...
...
vertical-align: top;
}
This will bump all the blades over (right) and allow a new blade to slide in from the left.

Related

href link not working with innerHTML script with "onmouseover change text" and onmouseout

My goal is to have text change onmouseover from "hello" (without a link) to "Google" and provide an 'href' on the resulting "Google" text, and then revert to "hello" onmouseout without a link.
The code below works in changing the text from "hello" to "Google" but,
the link on "Google" does not work (even though I can right-click on "Google" and open the link on another tab)
the text does not change back to "hello" onmouseout.
Thanks for your help in advance!
Here is my code:
<style>
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
</style>
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="changeText(this,'Hello.')">Hello.</div>
</h1>
</div>
<script>
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
</script>
try this way onmouseout="this.innerHTML='Hello.';"
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="this.innerHTML='Hello.';">Hello.</div>
</h1>
</div>
By changing a class of a parent tag, any and all child tags can be affected via CSS. Having the HTML ready when the page loads and then hiding it is better than constantly creating and destroying HTML for trivial effects.
The events "mouseenter" and "mouselrave" are handled by a property event handler and an event listener. Either one is sufficient, but avoid using attribute event handlers:
<div onmouselame="lameAttributeEventHandler()">...</div>
Details are commented in the example below
// Reference the <header>
const hdr = document.querySelector('.title');
/* This is a property event handler
// Whenever the mouse enters within the borders of
// the <header>:
// '.google' class is added
// '.hello' class is removed
*/
hdr.onmouseenter = function(event) {
this.classList.add('google');
this.classList.remove('hello');
};
/* This is an even listener
// Whenever the mouse exits the <header> the
// opposite behavior of the previous handler
// happens
*/
hdr.addEventListener("mouseleave", function(event) {
this.classList.add('hello');
this.classList.remove('google');
});
.title {
height: 50px;
margin-top: 3vh;
border: 3px solid black;
text-align: center;
}
h1 {
margin: auto 0;
}
.hello span {
display: inline-block;
}
.hello a {
display: none;
}
.google a {
display: inline-block;
}
.google span {
display: none;
}
<header class="title hello">
<h1>
<span>Hello</span>
Google
</h1>
</header>
You can try this, May it help u to solve the problem
<!DOCTYPE html>
<head>
<title>change text on mouse over and change back on mouse out
</title>
<style>
#box {
float: left;
width: 150px;
height: 150px;
margin-left: 20px;
margin-top: 20px;
padding: 15px;
border: 5px solid black;
}
</style>
</head>
<html>
<body>
<div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" >
<div id="text-display" >
any thing
</div>
</div>
<script type="text/javascript">
function changeText(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
function changeback(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
</script>
</body>
</html>

Measuring overflow is incorrect in Vue

I'm trying to make a overflow with tagging, which fades out in the beginning to give the user a hint that there's more. This is what it looks like:
I put the fading gradient as a :after inside the CSS and "activate" it by Vue's style binding, when scrollWidth > offsetWidth (overflow bigger than the box itself).
But the problem is that it sometimes (lags?) behind and does not calculate the scrollWidth right, especially when I enter a long word and then delete it. It doesn't "like" that and it says that the overflow is false, but there's no tag in the box. Basically this happens:
I tried to put the calculation inside this $nextTick(), but it didn't solve the issue. I also tried using Vue's keyDown, keyUp and keyPress listeners, but nothing solved this also.
This (also on CodePen) demonstrates the issue:
new Vue({
el: '#tagsinput',
data: {
input_value: "",
tags: []
},
methods: {
addTag: function() {
if (this.input_value > "") {
this.tags.push(this.input_value)
this.input_value = "";
// Refocus the text input, so it stays at the end
this.$refs.input.blur();
this.$nextTick(function() {
this.$refs.input.focus();
})
}
},
deleteTag: function() {
if (this.input_value == "") {
this.tags.pop()
}
}
}
})
.outter {
border: 1px solid red;
width: 250px;
overflow: hidden;
display: flex;
}
.inner {
border: 1px solid blue;
margin: 2px;
display: flex;
}
.tag {
border: 1px solid black;
margin: 2px;
}
input {
min-width: 80px;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.2/vue.min.js"></script>
<div id="tagsinput">
<div class="outter" ref="outter">
<div class="inner" ref="inner">
<div class="tag" v-for="tag in tags">{{tag}}</div><input type="text" v-model="input_value" #keydown.enter="addTag" #keydown.delete="deleteTag">
</div>
</div>
Outter div scrollwidth: {{ $refs.outter ? $refs.outter.scrollWidth : null }}<br> Outter div offsetWidth: {{ $refs.outter ? $refs.outter.offsetWidth : null }}<br>
<br> Is overflowing: {{ ($refs.outter ? $refs.outter.scrollWidth : null) > ($refs.outter ?$refs.outter.offsetWidth : null) }}
</div>
<br><br> Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace <b>again</b>.
Any help is greatly appreciated.
You should call the check for overflow after the moment you've added or deleted the tag, so you check the overflow at the right moment. Vue isn't databinding an inline condition like that. The following code should work for you. It calls a checkOverflow function within $nextTick, setting a data-binded variable isOverflowed that you then can use to bind some styles.
new Vue({
el: '#tagsinput',
data: {
input_value: null,
tags: [],
isOverflowed: false
},
methods: {
addTag: function() {
if(this.input_value) {
this.tags.push(this.input_value)
this.input_value = null;
// Refocus the text input, so it stays at the end
this.$refs.input.blur();
this.$nextTick(function() {
this.$refs.input.focus();
this.checkOverflow()
})
}
},
deleteTag: function() {
if(!this.input_value) {
this.tags.pop()
this.$nextTick(function() {
this.checkOverflow()
})
}
},
checkOverflow: function() {
this.isOverflowed = (this.$refs.outter ? this.$refs.outter.scrollWidth : null) >
(this.$refs.outter ? this.$refs.outter.offsetWidth : null)
}
}
})
.outter {
border: 1px solid red;
width: 250px;
overflow: hidden;
display: flex;
}
.inner {
border: 1px solid blue;
margin: 2px;
display: flex;
}
.tag {
border: 1px solid black;
margin: 2px;
}
input {
min-width: 80px;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="tagsinput">
<div class="outter" ref="outter">
<div class="inner" ref="inner">
<div class="tag" v-for="tag in tags">{{tag}}</div>
<input type="text" v-model="input_value" #keydown.enter="addTag" #keydown.delete="deleteTag" ref="input">
</div>
</div>
<br>
Is overflowing:
{{ isOverflowed }}
</div>
<br><br>
Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace <b>again</b>.
More of a CSS/HTML hack ...
Add <div id="spaceFade"></div> after <div id="tagsinput">, then add the following CSS :
#spaceFade {
background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,0,0,0));
position : absolute;
height : 2em;
width : 3em;
}
#tagsinput {
position : relative;
}
.outter {
justify-content: flex-end;
}

Focus on custom element when user clicks and create an overlay behind it

I have a custom element which takes input whenever user clicks on it I want to focus on it and create an overlay on other elements and when the user clicks outside the div I want to remove the overlay.
I am trying to do it using iron-overlay-behavior but not able to achieve the expected behavior.
<custom-element
with-backdrop
scroll-action="lock"
clicked="{{isClicked}}"
></decision-view>
All the examples shown are mostly for paper-dialog but how can I use iron-overlay-behavior for a custom element of my own?
The iron-overlay-behavior seems to be meant more for modal dialogs, what you are trying to accomplish is something different (for instance, modal dialogs are only shown one at a time, and require user input before going back to normal application/website behavior). So I think a natural thing for that behavior would be to disable anything else to focus!
When you say:
create an overlay on other elements
what does that mean? Just paint white over them like they were not visible?
I had a similar issue last week. See Showing a gray backdrop with a mixin
.
For a demo, see this pen from Makha:
<dom-module id="parent-component">
<template>
<style>
:host {
display: block;
margin: 10px auto auto auto;
border: 2px solid gray;
border-radius: 8px;
background-color: white;
padding: 5px;
width: 100px;
}
[hidden] {
display: none;
}
paper-button {
background-color: lightblue;
}
#placeholder {
width: 120px;
height: 150px;
}
</style>
<div>Try me.</div>
<paper-button on-tap="_doTap">Push</paper-button>
<div id="placeholder" hidden></div>
</template>
<script>
class ParentComponent extends Polymer.Element {
static get is() { return 'parent-component'; }
static get properties() {
return {
mychild: {
type: Object
}
}
}
_doTap(e) {
let x = (e.detail.x - 50) + 'px';
let y = (e.detail.y - 50) + 'px';
this.mychild = new MyChild();
this.mychild.addEventListener('return-event', e => this._closeChild(e));
this.$.placeholder.style.position = 'absolute';
this.$.placeholder.appendChild(this.mychild);
this.$.placeholder.style.left = x;
this.$.placeholder.style.top = y;
this.$.placeholder.removeAttribute('hidden');
this.mychild.open();
}
_closeChild(e) {
console.log('Child says '+e.detail);
this.mychild.remove();
this.mychild = null;
this.$.placeholder.setAttribute('hidden', '');
}
}
customElements.define(ParentComponent.is, ParentComponent);
</script>
</dom-module>
<parent-component></parent-component>
<dom-module id="my-child">
<template>
<style>
:host {
display: block;
margin: 10px auto auto auto;
border: 2px solid gray;
border-radius: 8px;
background-color: white;
padding: 15px;
}
paper-button {
background-color: lightgray;
}
</style>
<div>I'm a child.</div>
<paper-button on-tap="_doTap">Close</paper-button>
</template>
<script>
class MyChild extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element) {
static get is() { return 'my-child'; }
static get properties() {
return {
withBackdrop: {
type: Boolean,
value: true
}
}
}
ready() {
super.ready();
console.log("Daddy?");
}
_doTap(e) {
this.dispatchEvent(new CustomEvent('return-event',
{ detail: 'Bye!', bubbles: true, composed: true }));
}
}
customElements.define(MyChild.is, MyChild);
</script>
</dom-module>

Manipulate connections between elements dropped on canvas

Here I have been able to drop elements onto a canvas and create connections between them. But every time I drag a dropped element within the canvas, the anchors do not move along with the dragged element. Instead when I try to create a connection from the isolated anchor to another element it immediately re-positions itself with its parent element. This is one issue and I would also like to delete the anchors/ connections whenever its parent element is deleted.
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<style>
.chevron-toolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: powderblue;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
.chevron {
position:absolute;
cursor:pointer;
width: 72px;
height: 80px;
background-color: powderblue;
background-image: url("../dist/img/bigdot.png");
}
</style>
</head>
<body>
<div class="chevron-toolbox" id="cId">
</div>
<div id="dropArea">
</div>
<button id="go">Double Click Me</button>
<script>
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".chevron-toolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.chevron-toolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("chevron");
$(droppedElement).draggable({containment: "dropArea"});
$(droppedElement).appendTo('#dropArea');
setId(droppedElement);
var droppedId = $(droppedElement).attr('id');
var common = {
isSource:true,
isTarget:true,
connector: ["Flowchart"],
};
jsPlumb.addEndpoint(droppedId, {
anchors:["Right"]
}, common);
jsPlumb.addEndpoint(droppedId, {
anchors:["Left"]
}, common);
alert(droppedId);
//Delete an element on double click
var dataToPass = {msg: "Confirm deletion of Item"};
$(droppedElement).dblclick(dataToPass, function(event) {
alert(event.data.msg);
$(this).remove();
});
}
});
//Set a unique ID for each dropped Element
var indexer = 0;
function setId(element){
indexer++;
element.attr("id",indexer);
}
});
</script>
</body>
</html>
In order to properly manipulate the connections, you can use the connect method in jsPlumb placing anchors at desired points.
jsPlumb.connect({
source:'window2',
target:'window3',
paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11 )'},
anchors:["Bottom", "Top"],
endpoint:"Rectangle"
});
This is merely an example. Following this pattern in your implementation will be useful when it comes to accessing details regarding those connections and deleting the connections alongside the elements

How can I check if an element has any children elements using jquery?

I have a div that is floating left and the other floating right. I want to check if the div that is floating right has children element; if the it don't have any visible element, I want applied and new class to the left div. See below:
<div id="leftContent" class="left ">
<table></table>
</div>
<div id="rightContent" class="content">
//the dom has no visible element
//”#ctl00_ContentPlaceHolder1_ somegridView” is not visible
</div>
And I’m using the following script:
$(document).ready(function() {
if ($(“#ctl00_ContentPlaceHolder1_ somegridView”).lenght = 0) {
$("# leftContent ").removeClass("left");
$("# leftContent ").addClass("center");
}
});
div.left
{
float: left;
width: 365px;
margin-left: 5px;
padding-left: 2px;
}
div.center
{
padding: 2px;
margin: 5px;
float: none;
width: 95%;
clear: both;
}
If div id="rightContent" empty?
if ( $("#rightContent").children().length > 0)
{
// do style changes
}
You can use is along with :empty.
if($('#rightContent').is(':empty')) {
}
Try this:
if ($('#rightContent').children().length === 0) {
//Whatever
}
EDIT: Correct ID

Categories