i have added a new unbound field to display image of Inventory Item in Transaction Details tab, then to set the fixed height of the image I have added some javascript, but after adding javascript the screen is not populating any default values into like RefNbr and Date, Below is the javascript code am using. The same javascript code is working on my custom screen.
<px:PXJavaScript runat="server" ID="CstJavaScript1" Script="var css = '.GridRow > img { width: 100%; height: 40px; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);" />
Earlier I have added Javascript inside the tab item, but now I moved out of the Tab when it was working without issues.
</px:PXTab>
<px:PXJavaScript runat="server" ID="CstJavaScript1" Script="var css = '.GridRow > img { width: 100%; height: 40px; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);" />
Related
I am writing a dropdown component in svelte with tailwind css and i cannot get the dropdown menu to be under the button/anchored to it meaning it always appears under it.
I have tried using relative and other positional tailwind properties but i haven't had any succes.
I am also new to tailwind and mainly have backend experience so this is a bit hard for me if anyone can help or point me towards an example then please do so!
Dropdown example in Svelte
https://svelte.dev/repl/05d770c4baa748b2b0973afec4d59051?version=3.55.1
<script>
// Button binding
let button;
// State
let open = false;
let top = 0, left = 0;
// React to opening
$: if (open) {
setDropdownPosition();
}
function setDropdownPosition() {
const rect = button.getBoundingClientRect();
top = rect.bottom;
left = rect.left;
}
</script>
<button bind:this={button} on:click={() => open = !open}>{!open ? 'Open' : 'Close'} Dropdown!</button>
{#if open}
<ul class="dropdown" style:top={top} style:left={left}>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
{/if}
<style>
/* List Reset */
ul li {
padding: 0;
text-indent: 0;
list-style-type: none;
}
.dropdown {
position: absolute;
display: grid;
gap: 0.25rem;
margin: 0.5rem 0 0 0.5rem;
padding: 0;
}
</style>
i have a website that shows my Instagram feed. previously i was using
Instagram following API.
users/self/media/recent
This API was using access token that i generated once and kept in as a variable in my code without changing it for long time (for 2-3 years).
Now when this API is deprecated Instagram is recommending to use 'Basic Display API' for which we need to create a access token which will expire in 1 hour or 60 days. It also says that it can be used only once. And i am interested in showing my Instagram feed I'm not interested in showing feed of the user who is logged-in in my website.
Is there a API which will not have to constantly authenticated for token and can be used to retrieve Instagram feed
Unfortunately, Instagram has make it harder to get user media. All public method are not working every time anymore.
My suggestion is when someone visited your website, you can use the old token to generate a new token and store it somewhere for next visit.
source: https://developers.facebook.com/docs/instagram-basic-display-api/reference/refresh_access_token
you can parse your Instagram page through regular expression and get photos. Using this library, you can take up to 12 photos; Unfortunately, you won't be able to load more.
// Initialize library
var lib = new Nanogram();
function buildPorfolio() {
// Get content from https://www.instagram.com/instagram/
return lib.getMediaByUsername('instagram').then(function(response) {
if (console.table) {
console.table(response.profile);
}
// Get photos
var photos = response.profile.edge_owner_to_timeline_media.edges;
var items = [];
// Create new elements
// <div class="portfolio__item">
// <a href="..." target="_blank" class="portfolio__link">
// <img src="..." alt="..." width="..." height="..." class="portfolio__img">
// </a>
// </div>
for (var i = 0; i <= photos.length - 1; i++) {
var current = photos[i].node;
var div = document.createElement('div');
var link = document.createElement('a');
var img = document.createElement('img');
var thumbnail = current.thumbnail_resources[4];
var imgSrc = thumbnail.src;
var imgWidth = thumbnail.config_width;
var imgHeight = thumbnail.config_height;
var imgAlt = current.accessibility_caption;
var shortcode = current.shortcode;
var linkHref = 'https://www.instagram.com/p/' + shortcode;
div.classList.add('portfolio__item');
img.classList.add('portfolio__img');
img.src = imgSrc;
img.width = imgWidth;
img.height = imgHeight;
img.alt = imgAlt;
link.classList.add('portfolio__link');
link.href = linkHref;
link.target = '_blank';
link.appendChild(img);
div.appendChild(link);
items.push(div);
}
// Create container for our portfolio
var container = document.createElement('div');
container.id = 'portfolio';
container.classList.add('portfolio');
// Append all photos to our container
for (var j = 0; j <= items.length - 1; j++) {
container.appendChild(items[j]);
}
// Append our container to body
document.body.appendChild(container);
}).catch(function(error) {
console.log(error);
})
}
buildPorfolio()
body {
margin: 0;
padding: 20px;
background-color: rgb(212, 201, 201);
}
.portfolio {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3,200px);
}
.portfolio__link {
display: block;
width: 100%;
height: 100%;
}
.portfolio__img {
display: block;
width: inherit;
height: inherit;
object-fit: cover;
}
.portfolio__item {
width: 200px;
height: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/nanogram.js#2.0.2/dist/nanogram.iife.js"></script>
I have the following problem: when toggling custom full-screen mode from the Web application, the surrounding background is black and I want to change it (as the actual background).
Details come below.
1) Javascript code to toggle fullscreen and focus an inner element
function toggleFullScreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
$(function () {
$("#fullscreenButton").click(function () {
var actualBody = document.getElementById("#FullScreenElementId");
if (actualBody) {
toggleFullScreen(actualBody);
}
});
$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenChange MSFullscreenChange", function (/*data*/) {
var actualBodyJq = $("##FullScreenElementId");
if (actualBodyJq) {
actualBodyJq.toggleClass("fullscreen-style");
}
$("body").toggleClass("fullscreen-body-style");
});
});
2) Css styles
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
}
.fullscreen-body-style {
background-color: rgb(255, 255, 255) !important;
}
Switching to full-screen mode for the div works, but applying the style for the body seems to be ignored. For the shown image, I can see this computed style for background:
Question: is it possible to control how the browser (Chrome, Internet Explorer 11+) displays the "missing area"?
I have found a way to trick the browser (Internet Explorer) not to display the black area anymore. I have changed div style to use the whole viewport with the following style:
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
/* this is remove black area in IE */
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
}
My app has a checkBoxGroup inside of a Form Layout Row and that is inside of a Form table.
I want to control the font weight and spacing and so on, it seems I can't. If the checkbox group is outside the form table, my css works, but not inside the form table. I believe this is because the table that is generated by the form layout table is not getting changed. I want to change ONLY the spacing inside of this on form row.
Here is the code for the checkbox inside the form layout row:
<xe:formRow id="formRow4"
labelPosition="inherit" label="Area">
<xp:checkBoxGroup id="checkBoxGroup2"
layout="pageDirection" styleClass="threeColumnCheckBoxGroup"
style="font-size:8pt;font-style:normal">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var tmp:String = viewScope.application;
var tmpLst = [];
if (tmp == "OTM")
{
tmpLst.push("User Interface");
tmpLst.push("Rating/Planning");
tmpLst.push("Tendering/Booking");
tmpLst.push("Documentton");
tmpLst.push("Finance");
}
if (tmp = "GTM")
{
tmpLst.push("Parting Screening");
tmpLst.push("AES Filing");
tmpLst.push("AMS Filing");
tmpLst.push("Product Classification");
}
return tmpLst}]]></xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup>
</xe:formRow>
And for the checkbox outside:
<xp:checkBoxGroup id="checkBoxGroup4" layout="pageDirection" styleClass="threeColumnCheckBoxGroup" style="font-size:8pt;font-style:normal">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var tmp:String = viewScope.application;
var tmpLst = [];
if (tmp == "OTM")
{
tmpLst.push("User Interface");
tmpLst.push("Rating/Planning");
tmpLst.push("Tendering/Booking");
tmpLst.push("Documentton");
tmpLst.push("Finance");
}
if (tmp = "GTM")
{
tmpLst.push("Parting Screening");
tmpLst.push("AES Filing");
tmpLst.push("AMS Filing");
tmpLst.push("Product Classification");
}
return tmpLst}]]></xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup
and the css
.xspCheckBox { width: 500px; /* change to your preferred width */ }
.xspCheckBox td { white-space: nowrap; padding-bottom:3px; }
.threeColumnCheckboxGroup { display: inline; }
.threeColumnCheckboxGroup td { float: left; width: 24%; padding-bottom:3px; }
i am working for a face detection mechanism in winJs starting from the basic. What is the mechanism to open a Camera in winJs and in which tag to show the video.
This is the code i know till now
var Capture = Windows.Media.Capture;
var mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync();
How to show in a Div the same.
here's the html for the same.
function init() {
livePreview = document.getElementById("live-preview");
startCamera();
}
function startCamera() {
try {
mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync().then(function () {
livePreview.src = URL.createObjectURL(mediaCapture);
livePreview.play();
});
} catch(exception) {
Windows.UI.Popups.MessageDialog(exception.message, "Error").showAsync();
}
}
HTML
<div id="application" style="width:100%; height: 180px; overflow: hidden; background: #222;">
<video id="live-preview" style="display : none; width:100%; height: 180px; overflow: hidden;"></video>
</div>
these were some of the variables Select appropriate ones
var Capture = Windows.Media.Capture;
// Globals
var mediaCapture;
var recording = false;
var livePreview;
var activation = Windows.ApplicationModel.Activation;