I really don't know why this doesn't work: fiddle
When I click on the red box, I want it to move down 50px and change the height to 200px.
Any Idea?
Well this is how CSS work sadly, IDs take higher priority as a selector than a class would read this article for more info.
On click i added a class with the size/marign changes you wanted.
.box {
background-color: red;
height: 100px;
margin-top: 0px;
width: 100px;
display: block;
transition: all .5s ease-in-out;
}
.box-active {
height: 200px;
margin-top: 50px;
}
The JS
$('.box').click(function(){
$(this).addClass("box-active");
});
Here's a fiddle with the working solution.
Fiddle
You could use this instead:
jsFiddle example
$('#box').click(function(){
$(this).css('margin-top','50px');
$(this).css('height','200px');
});
I also added in the -webkit-/-moz- vendors/prefixes.
function changeprop(id)
{
$(id).css({'margin-top', '50px'});
$(id).css({'height', '200px'});
}
SyntaxError: missing : after property id
$(id).css({'margin-top', '50px'});
use : between property name and value not ,
function changeprop(id)
{
$(id).css({'margin-top': '50px'});
$(id).css({'height': '200px'});
}
this will work fine
maybe you can write your code in local html file and watch the console message throw firebug or other develop tool
thus can suffer less from error
Related
I want to change the value of one of the attributes of css class dynamically
Here's my scenario:
I've many elements using one class, instead of getting them all and looping them over and applying style, I want to change the value of one of the attributes of class, which is alredy applied on them. for example
.prodName {
max-width: 270px;
display: block;
}
above class is being used by many elements, and I want to alter one of the attributes of that class like
.prodName {
max-width: 350px <---
display: block;
}
is there any simple method for this in javascript.
Before I post this question, I already searched but didn't find anything easy and useful.
thanks in advance to helping hands.
You can use CSS variables for this case.
const root = document.querySelector(':root');
function play() {
root.style.setProperty('--size', '300px');
}
:root {
--size: 100px;
}
.container {
background-color: red;
width: var(--size);
height: var(--size);
cursor: pointer;
}
<div class="container" onclick="play()"></div>
The only problem with the above approach is support in older browsers. If you have to support IE, and older browsers where CSS variable support is not present, you can handle this problem by adding a class to the body/parent container.
function play() {
document.body.classList.add('large')
}
.container {
background-color: red;
width: 100px;
height: 100px;
cursor: pointer;
}
.large .container {
width: 300px;
height: 300px;
}
<div class="container" onclick="play()"></div>
Add new class to CSS:
.mw350 {
max-width: 350px;
}
Then add new class to the element in JS:
document.querySelector('.prodName').className += ' mw350'; // <-- better to select using unique IDs, like '#prodNameElement'
If you are going to control the css class/attribute change from ts, maybe with a function or var change, you might want to use ngClass: https://www.freecodecamp.org/news/angular-ngclass-example/ and have all the logic where you want it, easily accessible.
I would like to be able to update a CSS variable via JS, but when I make the variable update the CSS pseudo element get's destroyed (i.e. just disappears).
Here's the SCSS code:
:root {
--test-thing: "";
}
.folder-1-open span::after {
width: 90%;
height: 85%;
bottom: 0;
left: 5%;
background-color: #fff;
z-index: 3;
content: var(--test-thing);
}
I'm trying to manipulate the variable thusly:
const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")
The CSS above works perfectly fine on the element (a label) that it's applied to, basically just a white square, but as soon as I try and update the CSS variable --test-thing to add a string via the content prop, the whole thing just disappears.
Is it not possible to do this with a pseudo element or class?
From researching related posts on SO, my understanding was that this was possible using CSS variables.
For context, I’m working off this example of a pure CSS interactive folder (when it’s open is when I’d like to update content proper dynamically).
Ok, I figured out why this is happening, sort of. Still not 100% sure why, but it has something to do with the fact that the new value isn't in quotes. Just put the value in quotes and it works fine.
const root = document.documentElement
root.style.setProperty('--test', "'Hello World'") // <-- this needs to be in quotes
:root {
--test: "";
}
#test {
height: 100px;
width: 100px;
background: #ccc;
}
#test:after {
content: var(--test);
min-width: 100px;
background: #000;
min-height: 30px;
color: #fff;
}
<div id="test">
</div>
When clicking on a link I need to load a huge pdf on FancyBox overlay. Until the pdf is loaded I'm displaying a FancyBox loader. The problem is I need to add a text like "Please Wait...etc" in the FancyBox loader. Can any one help?
This is My Code:
<p>
<a class="fancypdf" href="hugepdf.pdf">Click
Here To View The PDF</a>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".fancypdf").click(function(event) {
$.fancybox.open(this.href, {
type : "iframe"
});
$.fancybox.showLoading();
$("iframe.fancybox-iframe").load(function() {
$.fancybox.hideLoading();
content: {
text: 'Loading...',}
});
event.preventDefault();
});
});
</script>
P.S.
You can modify following fiddle.
DEMO
Please have a look at below modifications:
Updated Fiddle Link: http://jsfiddle.net/PudLq/619/
1) added CSS class as:
#fancybox-loading{
background-repeat: no-repeat;
background-position: center -108px;
text-align: center;
}
#fancybox-loading div{
margin: auto;
}
.overrideLoading{
background: none !important;
color: white;
width: 92px !important;
}
2) after showing loading animation; altering the loading div HTML as per our need as follows:
$.fancybox.showLoading();
$('#fancybox-loading').append("<div class='overrideLoading'>Please Wait...</div>");
3) On hiding the animation; As suggested by "rockmandew" there is absolutely no need of reverting our HTML/CSS changes. On calling $.fancybox.showLoading() again directly; default loading animation will be shown to user. I have tested it and added one more link in fiddle to show default loading animation. Please click on "Show Default loading" to see that effect.
I hope this will help you.
I didn't have a chance to tweak the resulting positioning being a little off-center, but this may be a more simple solution:
http://jsfiddle.net/PudLq/621/
Simply add your text to an :after pseudo element with a content: rule and modify the styles of the loading wrapper to accomodate.
here's the CSS I added:
#fancybox-loading {
background: #000;
padding: 5px;
border-radius: 6px;}
#fancybox-loading:after {
content:"Please wait...";
display:inline-block;
color:#fff;}
#fancybox-loading div {margin:auto;}
Here is a forked version of your Fiddle.
I've basically span with the text "Please Wait". Then I've applied some CSS to that to position it as you did with #fancybox-loading .
Here is the new javascript code -
$(".on").click(function () {
var target = $('#target');
var overlay = $('#overlay');
overlay.width(target.width()).height(target.height()).css({
'left': target.position().left,
'top': target.position().top
}).fadeIn(200);
$.fancybox.showLoading();
$('#fancybox-loading').css({
'left': (target.width() - $('#fancybox-loading').width()) / 2,
'top': (target.height() - $('#fancybox-loading').height()) / 2,
'margin': 0
});
var labelWidth = 80;
$('body').append($('<span>', {
'class': 'waitText'
}).text("Please Wait").css({
'width': labelWidth,
'left': (target.width() - labelWidth) / 2,
'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
}));
});
$(".off").click(function () {
$('#overlay').fadeOut(200);
$.fancybox.hideLoading();
$('.waitText').remove();
});
And my new CSS -
.waitText {
position: fixed;
margin: auto;
color: white;
text-align: center;
}
Following vijayP's answers:
JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
I modified his CSS class of "overrideLoading":
.overrideLoading{
background: none !important;
color: white;
position: absolute;
top: 42px;
}
As you can see I added a "position:absolute" and a "top" position - you can modify this to however you need it to appear.
Next I altered his jQuery, which I modified to actually append a new element:
$('#fancybox-loading div').append("<div class='overrideLoading'>Please Wait...</div>");
As you can see, that reduced your required jQuery to one line.
Finally, I removed the last part of the function, which was removing the class. Since this is no longer required, you can just keep the FancyBox "hideLoading" call.
For learning purposes, I removed the following from the last function:
$('#fancybox-loading div').removeClass("overrideLoading");
$('#fancybox-loading div').text("");
Again, here is the JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
First Update:
I saw that the first user to answer, updated his answer and while works, I would suggest shying away from "!important" tags as much as possible. I too refined my answer and developed a solution that didn't use any !important tags.
What was originally: $('#fancybox-loading div').append("Please Wait..."); was now changed to:
$('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
I noticed an earlier comment from you, which specified that you wanted to target specific loading overlays - what this function does is it: Selects every '#overlay' element that is preceded by a '#target' element - you can insert whatever target you want.
I removed all instances of the "!important" tag - this is just best/standard practice.
.overrideLoading{
color: white;
position: absolute;
top: 86px;
left: 16px;
}
Updated JsFiddle: https://jsfiddle.net/rockmandew/kmfeppec/7/
jQuery(".my_container").hover(function(){
//do code
}, function(){
//do code
});
.my_container { width: 100px; height: 100px; margin: 50px; }
The code above doesn't react to mouse over of margin (margin isn't a part of element?) - how can I change that?
You could use a 50px transparent border instead - the margin isn't really supposed to be mouseable...
Include a pseudo element, e.g.
.my_container:before {
content:'';
position:absolute;
top:-50px;
bottom:-50px;
left:-50px;
right:-50px;
}
This adds an extra 50px to the existing element's clickable area.
If you only want to add this on touch screen devices, you could do this:
.touchevents .my_container:before {
...
}
This requires something like Modernizer to insert the appropriate feature-based CSS class.
Update
As per #Jaladh's comments, you may also need to apply position:relative to the container element, since position:absolute above will be relative to the first ancestor with a position attribute:
.my_container {
position:relative;
}
Perhaps use a 2nd wrapper element with padding on the outer element and existing background and padding styles on the inner element:
<div class="my_container">
<div class="my_container_inner">
<!-- etc. -->
</div>
</div>
jQuery(".my_container").hover(function(){
//do code
}, function(){
//do code
});
.my_container { padding: 50px; }
.my_container_inner { width: 100px; height: 100px; /* etc. */ }
Building upon #Dunc's solution, you can alternatively use pseudo element to mimic your container and let actual container behave like margins. This will look like:
.my_container {
width: calc(100px + (2 * 50px));
height: calc(100px + (2* 50px));
position: relative;
}
.my_container::before {
content: '';
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}
Also make sure to move all other properties (like background color, border, etc.) you had in my_container to my_container::before because before is acting like our container here.
This is essentially helpful if your containers are grid items and you want gaps in-between them to be hoverable, because otherwise using psuedo element to add margins won't work appropriately in that case.
Change the margin to padding and it'll be hoverable.
I am using blockUI in multiple places and they all have the same properties so i keep on repeating the same css values in all the place I use. is there a way to put it into a CSS file.
currently i use:
$.blockUI({
message: $('#Something'),
css: {
border: '5px solid #F4712',
backgroundColor: '#6F4712',
width: '300px'
}
});
can i use like:
$.blockUI({
message: $('#Something'),
css: {
class:"alertBox"
}
});
thanks
according to the documentation - you can't.
but you to do that :
the class $(".blockPage").addClass("myClass")
p.s. be sure not to give any styles in the code as you wrote .
and update to something like this :
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
$(".blockPage").addClass("myClass");
}
});
I was half way through modifying my copy of the blockUI plugin to add this functionality and found there was already a config option for blockMsgClass, setting this to your css class adds your class to the block.
$.blockUI(
{
blockMsgClass: 'alertBox',
message: 'Hello styled popup'
});
One thing to note though is that the plugin code uses inline css so you need to mark as !important for fields such as text-align, color, border, background-color and cursor: wait.
.alertBox
{
border:none !important;
background-color: #437DD4 !important;
color: #fff !important;
cursor: default !important;
}
For dynamic class adding the first answer worked, but some flicker occured, because the class was added too late.
So I added my custom class before the blockUI to the body and changed my css a bit and for me it works great:
JS:
$('body').removeClass().addClass('myCustomClass');
$.blockUI();
CSS:
div.blockPage{// default layout
width: 30%;
top: 40%;
left: 35%;
text-align:center;
}
body.myCustomClass > div.blockPage{
width: 90%;
left: 5%;
top: 3%;
text-align:left;
}
this maybe an old question but here is the answer for anyone needs it
http://malsup.com/jquery/block/stylesheet.html
basicly you will disable the default css by this line
$.blockUI.defaults.css = {};
and then add your css style inside a separate file or so .
You can define a style for your message box outside the javascript and omit the css block. In your case it could be:
<style type="text/css">
div.blockMsg {
border: '5px solid #F4712';
backgroundColor: '#6F4712';
width: '300px';
}
</style>
Look at this (v2) for further infos.
I know this is a old question but now days you can use $.blockUI.defaults.css = {}; as stated in the documentation