Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am currently going over the 'Modifying HTML Elements' jQuery course on Codecademy and it is walking you through modifying CSS using jQuery. I was just wondering if there is a benefit of modifying the CSS via this method rather than just editing the actual CSS file?
There is a huge benefit, you can modify the CSS on your code dynamically within the page, for example, in response to some actions by the user. E.g. the user presses a button and you change the color of the button to red.
You should use CSS files to set the basic styles for the page, and then use jQuery in you code to add dynamism to the page and change styles in response to some events, like user interactions or web requests.
Tip One of the best approaches is to only use CSS classes defined in you CSS files. If you need to change the color of the button to red, make a class in your CSS file
button.pressed {
color: red;
}
And use jQuery to add/remove that class, instead of directly modifiyng the CSS. This way you can have all your styles in your CSS file and in the code just use classes, this keeps the code cleaner.
This is probably kinda advanced, but keep it in mind!
Modifying CSS via jQuery allows you to change the style of elements based on user interactions or other events/states. For example, changing the styling of invalid form inputs.
One of the best use cases of modifying CSS via jQuery is animating the position of an element. This is thanks in part's to jQuery's ability to change the CSS properties based on the element's current properties. See the example below.
That said, in many cases it's better to apply a class to an element and use CSS to style that specific class. The class can be toggled on/off as needed, preventing the need to reset CSS styles in jQuery.
$( "#right" ).click(function() {
$( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
div {
position: absolute;
background-color: #abc;
left: 50px;
width: 90px;
height: 90px;
margin: 5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">«</button>
<button id="right">»</button>
<div class="block"></div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm currently working on a chrome extension and want to dim the display/add a black transparent background over the existing website such as facebook, youtube, etc. How would this be done in CSS and implemented in JavaScript?
You would do this in CSS, more so than in javascript.
The big picture is that you would create a div that you would style like this:
<div id="overlay"></div>
<style>
#overlay{z-index:9999999;pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);}
</style>
That would create an div that sits on top of your page content and makes the entire page more dim. (Note that the z-index value of your overlay must be set higher than the z-index values of every other element on the page. Every page is different. By default, the z-index of every element is zero - but most websites place some items above others, so the highest-used z-index could be almost anything.)
Note that the "a" at the end of rgba() is the opacity value - a value of 0.3 will allow most of what lies beneath to be visible, but colored by the first three values 0,0,0, which is black.
How would you do that just with javascript? Here is a short video that explains how create html and add it onto a page with javascript:
https://www.youtube.com/watch?v=VsXCK_2DJzA
There is just one problem: (SOLVED BELOW)
Because your overlay div is sitting on top of the page content, the user cannot interact with the page content anymore (cannot click in fields, cannot press buttons, etc). Due to the z-index (which is necessary to place your overlay on top of the other page content), the overlay now sits between the mouse cursor and the page content. Anywhere the user clicks, they are clicking on the overlay.
The solution, pointed out to me by David Bailey in the comments, is to use the css attribute pointer-events: none; on the overlay div. This tells CSS to ignore any clicks on that element (the overlay) and pass them through to the underlying components.
/* Note: this is NOT jQuery - look carefully. */
const $ = document.querySelector.bind(document);
$('#mybutt').addEventListener("click", function() {
alert("You clicked me");
});
$('#mybutt2').addEventListener("click", function() {
$('#mybutt2').innerText = 'Try clicking buttons NOW';
$('#olay').classList.add("noPtrEvts");
});
#olay{
pointer-events: none;
z-index:9999999;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.3);
}
.noPtrEvts{
pointer-events: auto !important;
}
<div id="olay"></div>
<h1>An Example Webpage</h1>
<div><img src="http://placekitten.com/300/150" /></div>
<button id="mybutt">Click me First</button>
<button id="mybutt2">Remove pointer-events CSS</button>
There is no way to do this in JavaScript alone, unless you bring in a CSS script as this is still, I have edited your post's tags to bring in the correct experts to help.
You would do something like this:
body{
background-color: #302E2E;
}
In CSS, but you may need to look at the element classes and Id's to make it work universally on all platforms
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I realized that internally material data-table is being used. When I am using table mat-table. I can use CSS to do the below change, but somehow it is not working, how I could do that?
.mat-column-[columnname] {
width: 50% !important;
}
Link with the code on stackblitz:
https://stackblitz.com/edit/angular-xpcm2l?file=src/app/app.component.css
If you'd check your browsers output you would see that your column width is defined inside the following selector (see example):
Example:
td[class*=' mat-column'][_ngcontent-c9] {
width: 10vw;
min-width: 10vw;
max-width: 10vw;
}
You should be able to add and modify this selector to your needs inside your scss file.
td[class*=' mat-column'][_ngcontent-c9]
This selector affects every 'td' element in your table that contains a class that starts with ' mat-column' and is combined with another attribute that is a target and starts with '_ngcontent-c9'.
Have you tried the recursive approach like this?
td[class*=' mat-column'] *
{
...
}
This way you can avoid the target attribute entirely that is probably dynamically generated by Angular.
EDIT:
I'd also suggest that you avoid using !important in your css. I don't find it as a good practice.
Styles that you define in a component's stylesheet are limited to the scope of that component, meaning that class selectors defined in app.component.css won't affect the style of other components. That's by design to avoid one component conflicting with another component by accidentally changing it's appearance due to same class names being used.
See https://angular.io/guide/component-styles#style-scope
Angular does this by magically adding some prefixes to the class names.
For your code to work you should either move the block
.mat-column-owner{
width:50% !important;
min-width: 50% !important;
max-width: 50% !important;
}
to the styles.css file or change the selector to ::ng-deep .mat-column-owner.
::ng-deep is depracted though and will be removed in some future version of angular.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
Code:
$(document).ready(function () {
$('.button').click(function () {
$('.button').toggleClass('active');
});
});
CSS:
.button {
background-color: red;
}
.active {
background-color: green;
}
The JQuery works but the CSS of .button overwrites the css of .active. What can I do so that .active is taking precedence when it's active? I don't want to apply !important. Any other way?
You could take a look at the .removeClass class, you can therefor remove an active class when your click event is triggerer. You can then use the .addClass function to add a selected css class.
You could check the currently selected class and change depending on the situation. Maybe not the best approach but it should work.
You should also take a look at .on, .on can prevent troubles when it comes to constructing and working with the DOM, recommended notes.
$('.button').on("click", function () {
//...
});
Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out