I am testing the tooltip component in the Angular component library below:
https://ngx-ndbx.frameworks.allianz.io/documentation/tooltip/overview
I want to leverage Chrome's Devtool's :hover functionality, which means that I want to use the functionality below
But when I tried it on the tooltip element mentioned in the link above, it doesn't work. Could anybody tell me why?
I found out that the event bound to the element is "mouseenter" instead of "hover", so I did the following to make it work
var evt = document.createEvent("HTMLEvents");
evt.initEvent("mouseenter", false, true);
element.dispatchEvent(evt);
Related
I start with a relatively fresh Vue3 + PrimeVue + Tailwind setup.
My problem is that the PrimeVue button does not display correctly when I add Tailwind.
To test this, please have a look at the following Sandbox.
As soon as the tailwind.css is commented out in the main.ts, the PrimeVue button is displayed correctly again.
And also only "primary" buttons are affected.
Can you please help me to display the PrimeVue buttons correctly together with Tailwind?
The Tailwind CSS seems to be setting the button background to transparent.
I moved its CSS to just before the Prime import in your example (main.ts), which fixed the missing background problem.
However, I don't know if this might have other unintended consequences.
Interesting. Preflight is a set of base styles that Tailwind applies, and it is setting the button background color to transparent.
If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight to false in the corePlugins section of your tailwind.config.js file:
module.exports = {
corePlugins: {
preflight: false,
}
}
Answered in this post
I want to make a responsive website using react, should i use media queries for change layout and set display to 'none' for some components in mobile ( like regular html and css ), or do that in-react and don't render that component rather than don't display it using css ?
for example, for a menu, if user clicked on the menu button, change display property of menu from 'none' to 'block'
<ul id="menu">
<li>one</li>
<li>one</li>
</ul>
toggle the 'open' in the classList of the DOM Node
and in the css
.menu li {
display: none;
}
.menu.open li {
display: block;
}
or like this,
use state and if user clicked on the menu button, change the state and make react to render the menu
[open,setOpen] = useState(false);
open?<Menu />:'';
which one is a better approach ? which one is recommended
and one more question, using 'refs' for accessing the DOM nodes in react is better than use traditional document.getElementById() ?
My initial reaction is that you probably aren't building anything that absolutely requires the most performant solution, so hiding an element via CSS versus eliminating it from the DOM via React is not going to matter much in the long run. My recommendation is do whatever you can to get your project complete and then worry about performance if your use-case warrants it.
With regards to your specific example, it is probably better to just toggle the element's existence with React versus applying a class to toggle the display property. My reasoning for that is because both operations will require a DOM manipulation (React would have to either add the list element or it would have to update the className value). Using a CSS class to toggle the display will also have a secondary task of applying the new display value which causes another reflow of the content.
React solution: Update DOM to insert new node.
CSS solution: Update DOM to add className. Reflow content based on new display property.
Regarding your second question about $refs...
Using $refs will be better than document.getElementById. The $refs object maintains an in-memory reference to HTML nodes that need to be manipulated. document.getElementById will require traversing the DOM tree to find the element, where as using $refs simply looks up the node via a named property.
If it's possible to do in CSS, always use CSS. JS is expensive than CSS in terms of loading and rendering. For your requirement, you need layout change depending on the device it's loaded. So use media queries and CSS Grids to do that without using JS.
Refs is the react way to get DOM element. So please use that instead of using methods like document.getElementById().
C:\Documents and Settings\Omar.Abulawi\Desktop\t3\main.htm
This is a site i'm working on, now i'm trying to change and replace the main image with different ones according to one of the five menus once they are clicked. But with no use!
Your help and advice would be appreciated :)
Well, based on what you've said, this JavaScript should do it:
function changeimage()
{
document.getElementById("picture_id").src = "new_file_path";
}
Call that function in the onclick events of your menus.
You can actually do this with pure css using The :target pseudo class.
FIDDLE
Note: You'll need a modern browser to use this method. (IE9+)
Also, take a look at this article which shows some clever ways to simulate click events with css (one of them being the :target pseudo class.
Might anyone know of a way to style the CSS of a popup used in Openlayers?
Using an OL popup method, returned is a div with an ID of
Would I just add that to my CSS and style, or might there be a better way?
Properties:
There are properties such as backgroundColor, border, opacity you can set directly.
Have you taken a look at the popupMatrix example?
JQuery:
In case you use jquery, you can reference the DOM Elements by doing:
popup.contentDiv
popup.groupDiv
popup.closeDiv
Reference
CSS:
Yes, and nothing is stopping you from using css like I demonstrate in this example:
http://jsfiddle.net/BLLqB/1/
Conclusion:
The better way is the one which works best for what you're doing. If you see that the available styling properties are not enough, use jQuery or CSS.
It works in Firefox, but not in Chrome: changing the css property 'background-image' via jQuery.
I'm trying to stylize themes for my website and I have made a few color options, but the background-image property doesn't seem to be changeable via the handler .css in Chrome
$('#h_background').css('background-image',"url('backgrounds/h_"+currentTheme+".png'");
however, it works fine in FF; any suggestions =)?
edit: loading new stylesheets that have the background-image property defined as something else works fine. I do find it strange that explicitly declaring it does not seem to work =(
You're missing a ) at the end of the url after .png'. It should be
"url('backgrounds/h_"+currentTheme+".png')"
Try wrapping your code in load event:
$(window).load(function(){
// your code for the image
});