I am currently migrating my swf 10 OL 5.0 code to DHTML runtime and i am facing this problem.
I am not able to set a custom cursor for a view that i am dragging. Then i found that the code that is given in the documentation is also not working. The following code is running fine in swf 10 runtime but its not working in DHTML runtime.
I have attached the sample code
<canvas height="30">
<resource name="waitcursor" src="wait.png"/>
<view bgcolor="yellow" cursor="waitcursor">
<text>Roll over to change the cursor</text>
<handler name="onmouseover">
lz.Cursor.showHandCursor(false);
</handler>
</view>
</canvas>
I am able to see only a normal cursor.
I tried changing the cursor through javascript but also didn't work. I figured out that the sprite event class is managing this and its not possible to work it out with javascript.
I am currently testing this in 5.0 version and using Firefox 16.0 Windows.
You are using the wrong name for the resource. When manipulating the mouse cursor in DHTML, the name of the resource is directly used as a value for the CSS property cursor.
This code works as expected:
<canvas height="500">
<!-- The name attribute used here is directly set as a CSS property
cursor: {value of name property}. -->
<resource name="wait" src="cursor_wait.png"/>
<view bgcolor="yellow" cursor="wait">
<text>Roll over to change the cursor</text>
<handler name="onmouseover">
lz.Cursor.showHandCursor(false);
</handler>
</view>
</canvas>
Have a look at the W3C Wiki documenting the CSS property cursor and the allowed values. The allowed values are:
[ [ ,]* [ auto | crosshair | default | pointer | move | e-resize
| ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize
| w-resize | text | wait | help | progress ] ] | inherit
Your code sets the cursor value to cursor: waitcursor, and the browser cannot recognize that value. This limitation is mentioned in the developer guide as well, Chapter 31: Input devices and gestures:
With OpenLaszlo 4, you can set custom cursors in DHTML and SWF. If you
plan to use custom cursors across DHTML and SWF, be sure you're using
appropriate cursor IDs for DHTML (see
http://www.quirksmode.org/css/cursor.html for more info), and make
sure you've included resources named after those IDs for SWF.
Related
I have an app that can be styled for different customers. I use the styles.xml to style the app for each customer. However, I need to compile the app, every time I need to change the styles. I want to avoid this by getting these style definition from an outside file configuration, and then apply them at run time. I´m already doing this for other resources like images and texts/labels.
Is this possible? How?
Regards
I'll give an example for a color.
If a style has <Setter Property="BackgroundColor" Value="{StaticResource Color1}" />, then that refers to a Resource with key Color1.
In App.xaml.cs, read the config, use it to construct a Color instance. then set that Resource:
Color color1 = ...;
Application.Current.Resources["Color1"] = color1;
My issue is for example for resources like "android:colorPressedHighlight" that are specified in the styles.xml in the Android project.
The ColorPressedHighlight field is const. It is Compile time constant and could not assign value at runtime.
MS official docs: https://learn.microsoft.com/en-us/dotnet/api/android.resource.attribute.colorpressedhighlight?view=xamarin-android-sdk-12
I'm trying to use a next/image instead of a regular img tag in the code below. With the regular <img> tag, the following achieves exactly what I'm looking for:
<div>
<picture>
<source
srcSet="https://via.placeholder.com/100/333333/ffffff.png"
media="(prefers-color-scheme: dark)"
/>
<img
src='https://via.placeholder.com/100/dddddd/000000.png'
width='100px'
height='100px'
alt='Placeholder image'
/>
</picture>
<p>Change your OS or browser's preferred color scheme to see a different image.</p>
</div>
Indeed, when I set my OS (or browser) to the dark theme, I get a dark image, and vice-versa for the light theme.
However, if I try the same thing with a next/image, I just get the light-themed image every time… I can't put this into a snippet because next/image requires a Next.js server, but here is the code that I'm using, which, in my tests, is backed by a Next.js development server with the appropriate image-related settings configured in next.config.js:
// pages/test.js
import Image from 'next/image'
export default function MyWebPage () {
return (
<div>
<picture>
<source
srcSet="https://via.placeholder.com/100/333333/ffffff.png"
media="(prefers-color-scheme: dark)"
/>
<Image src='https://via.placeholder.com/100/dddddd/000000.png' width='100px' height='100px' alt='Placeholder image' />
</picture>
<p>You can change your OS or browser's preferred color scheme, but you'll always see the light-theme image.</p>
</div>
)
}
Here I never get the dark-themed image, unfortunately.
Theories:
Perhaps next/image doesn't interact with the <picture> tag exactly the same way as <img>? But I'm not finding anything online about using next/image with the <picture> tag…
Perhaps I should be providing this media-query-dependant source set in a different way when using next/image? But, I'm not finding any media attribute in the next/image docs…
Question:
How can I change the src of my next/image based on the user's preferred color scheme?
Non-solutions:
I could put 2 images on the page and use display: none on one of the two as a function of the user's preferred color scheme, but I'm hoping to find a solution that doesn't require so many duplicate images all over the place, which incurs a (small) performance penalty and makes the code that much harder to maintain, or that much more complex if a helper component is created.
I could change the src using Javascript when the page loads, but this would result in a flash of incorrectly styled content and generally does against my objective of having my page fully server-rendered and compatible with browsers where Javascript is turned off.
I could use cookies to let the server know about a user's color scheme preference and render the page consequently, but this would not work for the very first visit and comes with the requirement to include a cookie bar to inform the user of the reasons behind the use of cookies, as well as a way to opt-out.
I added the <Planet/> (from react-planet) to my App and the placement of some <Grid/> (from the Material UI) components changed.
While looking inside "Elements" in DevTool I noticed that divs inside the <Planet/> component have two classes jss3 and jss{i} where i is the next integral number. Each has different properties inside which overwrites every component in App that is using one of the jss{i} classes.
I also noticed that at first render i iteration, which applies to jss{i} used in newly created divs, starts from 1 and ends at 9 - because I have 6 planets so 1 for the main div, 2 for the central planet, 3 for divs' first class, and 4-9 for the six divs' second class. After the second render number goes from 10 to 18.
Screenshots of Elements at first render and second.
The class ={jss3 jss4} example
The class ={jss3 jss5} example
I assume that after creating planets by <Planet/>, whose children have two classes, the newly created class jss{i}, based on makeStyles-root-{i}, is overwriting properties of jss{i}, which is used somewhere else on page by <Grid/> components thus changing placement for the whole page.
Code where <Planet/> component is used:
return (
<Grid
item
container
justifyContent = "center"
style = {{ margin: 30 }}
>
<Planet
centerContent={
<Fab size="small" color="primary" aria-label="add" onClick={handleOpen}>
<AddIcon />
</Fab>
}
open={isOpen}
autoClose
orbitRadius= {50}
rotation = {90}
hideOrbit
friction = {20}
>
<div/>
<div/>
<div/>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddLineChart}>
<ShowChartIcon />
</Fab>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddBarChart}>
<BarChartIcon />
</Fab>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddPieChart}>
<PieChartIcon />
</Fab>
</Planet>
</Grid>
);
I tried putting only <div/> components inside <Planet/> but nothing changed. Changing from <Grid/> to normal <div/>, also didn't change anything.
Also, I tried to find a similar problem on StackOverflow or somewhere else but I am not sure how to describe the problem using proper keywords.
I am not sure if it is some bug in the react-planet library that makes react-planet and material-ui impossible to use together or if there is a problem inside my code.
I am not sure what was exactly the cause of the "multiply class in one component" bug, but I copied Planet.tsx and Orbit.tsx from the react-planet repository and changed some code, get rid of makeStyles and problem solved. It was probably of nested makeStyles in all of those components in react-planet which conflicted with each other at different component rendering levels causing it to render multiple times in one object.
Additionally, it was overriding Material UI components styles due to simplified class naming from MUI makeStyle to css class while building production (makeStyles-root-{i} -> jss{i}, makeStyles -> jss).
Overriding styles were probably caused by the react-planets dependency of the old/different MUI version than I have for the rest of the code which created two styles generators for each of those versions as mentioned in MUI FAQ. The first generator created class from makeStyle for all of my page naming every class jss{i++} for i starting at i=1 and ending when all classes are renamed, then the react-planet generator created styles for its objects naming every class jss{i++} starting from i=1 leading to overriding every previous class=jss{i} with new properties.
I'm a graphic designer who has to customize a project done with strapi - and I am sooo lost. I managed to change backgroundcolors, backgroundimages so far - no problem. BUT: I am totally unable to customize the elements like the primary buttons.
I found lots of class definitions ".primary", changed them - without a result ... in the end I removed them all ... but the primary buttons stills look the same. How? Why?
The only why to get rid of the visual appearance of the primary button, was by removing (e.g. of the login page -> within the index.js under admin/src/containers/AuthPage) "primary" of the buttons declaration.
<Button primary label="users-permissions.Auth.form.button.login" type="submit" />
But that's not what I wanted. I want to customize e.g. the primary buttons. Not getting rid of it.
I searched stackoverflow for strapi customization or ui issues but couldn't find a solution. I found a lot of strategies of overriding bootstrap CSS, e.g.:
How can I override Bootstrap CSS styles?
But strapis SCSS seems to something different I obviously don't understand yet.
If anyone has an idea or did already overrides to e.g. primary button - please let me know.
Thanks in advance, Stef.
You have two ways to override the default style of a button
You can pass a style prop to the component
<Button label="Label" type="button" style={{ background: 'red' }} />
You can pass a custom className prop:
In order to do so, you need to add the class in your 'plugins/users-permissions/admin/src/containers/Auth/styles.scss` file (where the component is going to be used)
.customButton {
background: red;
}
Then in your index.js file
import Button from 'components/Button';
import styles from './styles.scss';
render() {
return (
<Button label="label" className={styles.customButton} />
);
}
I am trying to reanimate project made ten years ago. SMIL2 was successfully used in IE6.
I have found that IE8 still supports SMIL, however nor t:media, nor t:audio elements do not play audio/media content any more.
Here is simple example that works OK in IE6 (under VirtualPC) but has issues in IE8
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
</head>
<body>
<t:audio src="LoopyMusic.wav" repeatCount="indefinite" type="wav" />
</body>
</html>
Another notice - in case if t:audio is included into sequence (t:seq) - element after t:audio never starts it's effects.
Are there any known issues/workarounds with SMIL support under internet explorer 8?
Use a closing tag instead of an empty tag and add the timecontainer attribute, since IE8 enforces stricter syntax:
<t:audio src="LoopyMusic.wav" repeatCount="indefinite" type="wav" timecontainer="par"></t:audio>
References
Stu Nicholls | CSS PLAY | Internet Explorer Time Action Galleries
HTML+TIME: Time Containers
Using the TIMEACTION Attribute
Using HTML+TIME Transitions
Using the HTML+TIME Document Object Model (DOM)