Use Slick.js custom pseudo-classes in regular CSS - javascript

I want to create some custom pseudo classes using Slick like this
Slick.definePseudo('in-fold', function(){
var isInFold = false;
// code to determine if the element is visible in the viewport
return isInFold;
});
and then use those pseudo-classes in regular CSS like so
nav:in-fold {
display: static;
width: 100%;
font-size: 1.2em
}
If this is possible at all, I couldn't get it to work. Am I missing anything?
If this is not possible using Slick.js, is there another way of doing the same thing?

Slick pseudos can only be used when querying elements with Slick (and Mootools), you cannot use them in CSS. You could try to add some JS code to apply and remove regular CSS classes when the in-fold pseudo can change (scroll and resize), but be aware of performances:
var updateInFoldStyle = function() {
$$('nav.in-fold-class').removeClass('in-fold-class');
$$('nav:in-fold').addClass('in-fold-class');
};
window.addEvent('scroll', updateInFoldStyle);
window.addEvent('resize', updateInFoldStyle);
Some ideas if performance is poor:
avoid removing and re-adding class when not needed;
use the :pause pseudo event to avoid firing scroll and resize events too frequently.

Related

Iframe style being overrridden by website's css

I work for an adtech. We show ads using iframe but for one particular website where we are showing ads my iframe height is being overriden.
The style that overrides my css style is as follows:-
#story-sec .led-content .cont-bot .right-side .news-detail-landing iframe:not(.instagram-media) {
width: 100% !important;
height: 200px!important;
margin: 5px 0px;
}
I create iframe dynamically using javascript. The site is overriding my css.
var iframe = createHtmlElement("iframe");
setAttributesForElement(iframe, { 'vspace':'0', 'hspace':'0', 'scrolling':'no', 'id':'myIframeId', 'frameborder':'0', 'marginwidth': '0', 'marginheight': '0', 'allowtransparency':'true', } );
setStyle(iframe, {'margin':'0px', 'width':'100%', 'height':'100%', 'padding':'0px'} );
So in above code setAttributes and setStyle are function that I have which take input and set style adn attributes for html elements.
Is there a way to avoid my css being overridden ? I tried searching for answers but got not much clarity.
I can set class named instagram-media for my iframe which solves the issue but the ads are placed on different sites so I might encounter same problem again. so looking for a permanent solution.
I had experience of work like that, so in those cases I would usually do this:
- Target the iframe you created with > css pointer.
- Is there any possibility to set !important flags on your styles?
- Try to create a very long distinctive class name for your iframe.
You mentioned adding a class resolves the issue but that you're worried about, another website using that same class and again over writing your css.
Your best bet may be to simply use some really obscure class?
Like...
class="YourCompany_iframeCSS_InsertADateHere_AnAlphaNumericStringHere"

How to use ng-class with CSS transitions?

I have an element set to display: none; height: 0px and I want to add classes to it that makes display: block; height: 200px; with a CSS transition on the height. The problem is the transition - for it to work, the element has to be display: block first before changing the height.
So $el.addClass("display-block full-height") doesn't show the transition, as it adds both classes at the same time.
This jQuery does work though:
$el.addClass("display-block");
$el.width(); // <-- Forces a browser redraw of the element before proceeding
$el.addClass("full-height");
What I'd like to know is how I get this working with AngularJS's ng-class ? It seems like the only way is to add both classes at the same time, which doesn't work as above. Is there a good solution, either a way that forces a redraw in the same way or something else?
I could do a custom directive if that's the only answer, but I'd prefer a better way if possible.
What you need is "Class and ngClass animation hooks" from https://docs.angularjs.org/guide/animations
I edited the given plunker to meet your need (you still need to implement the height though)
BUT animation with display:none and display:block is working here
http://plnkr.co/edit/oH0hh8I1BAPuPz81AqHZ?p=preview

jQuery show element with display:none !important

I have assigned an element a class which has following CSS:
.cls {
display:none !important;
}
When I try to show this element with jQuery
$(".cls").show();
It does not work.
How can I show this element?
$('.cls').attr('style','display:block !important');
DEMO
Although question has been asked long back but its still relevant for new coders/beginners. Generally this situation comes when you have already applied some class which overriding the display behavior using !important property.
Other answers are also relevant to the question and its a matter of achieving the same goal with different approach. I would recommend to achieve it using already available classes in the same library (bootstrap here), instead of writing custom class as these days when most of us are using Bootstrap classes to build the layout.
<div id='container' class="d-flex flex-row align-items-center">
.....
</div>
If you see in the above code, we are using d-flex class for setting display property of this container. Now if I am trying to show/hide this container using
$('#container').show()
or
$('#container').hide()
It will not work as per expectation because of
As d-flex is already using !important property
Jquery's show() method will add display:block not display:flex to the css property of container.
So I will recommend to use hidden class here.
To show container
$('#container').removeClass('hidden')
To hide container
$('#container').addClass('hidden')
2 ways of doing this,
1) Remove the !important from your .cls class,
.cls{
display: none;
}
But I assume, you'd have used this elsewhere so it might cause regression.
2) What you could alternatively do is, have a another class and toggle that,
.cls-show{
display: block !important;
}
And then in your javascript,
$('.cls').addClass(".cls-show");
Then when you need to hide it again, you can,
$('.cls').removeClass('.cls-show');
This will help you keep your markup clean and readable
!important; remove all rules and apply the css desfined as !important;. So in your case it is ignoring all rules and applying display:none.
So do this:
.cls {
display:none
}
See this also
If the only property in the CLS class selector is the display one, you can do this and don't need to add any extra classes or modify the inline style.
To show them:
$('.cls').removeClass("cls").addClass("_cls");
To hide them:
$('._cls').removeClass("_cls").addClass("cls");
Just had this exact issue, here's what I did
first, I added another class to the element, such as:
<div class="ui-cls cls">...</div>
Then in the javascript:
$('.ui-cls').removeClass('cls').show();
The nice thing is that you can also have this code to hide it again:
$('.ui-cls').hide();
and it doesn't matter how many times you hide/show, it'll still work

Javascript animation of CSS classes?

Is it possible to animate the replacement of a class in javascript?
Let's consider I have this:
.class1 {background-color:blue;}
.class2 {background-color:red;}
Is there any Javascript library that can ease the change between the two classes? That wouldn't make the user's computer explode?
If not, what would be a good way of achieving that? A server-generated Javascript file?
Yes, jQuery can do this when you have jQueryUI loaded as well.
See the demo here: http://jqueryui.com/demos/addClass/
Here's an example specific to your CSS. http://jsfiddle.net/hhEpT/
div { width: 100px; height: 100px; }
.class1 {background-color:blue;}
.class2 {background-color:red;}​
<div class='class1'></div>
$('div').addClass('class2', 1000);
If you can use jQuery it is having animate function which will allow you to animate from class1 to class2.
here is a link
http://api.jquery.com/animate/ for normal animations. Use jQuery UI for animation between classes as suggested in another answers.
You can use a combination of jQuery and jQueryUI.
Let's say for example you have a paragraph like this:
<p id="notice" class="class1">This is something to highlight</p>
So basically you want to animate the replace of class1 with class2. Since CSS allows you to override styles, you can simply add a new class and it will override the initial effect.
$("#notice").addClass("class2", 50);
Where 50 is obviously how long the animation takes. For this to work you need to reference both the jQuery and jQueryUI libraries.
The alternative is to use the jQuery animate method. Basically you specify the css that drives the animation, the duration, and a callback.
$('#clickme').click(function() {
$('#notice').animate(
{background-color: yellow},
5000,
function() {
$("#notice").removeClass("class1");
});
});

Show and Hide a DIV with CSS or Javascript?

I just saw a demo that had this jquery code to show and hide a dive on hover, can't this be done with just regualr css though? And if you can do it with css is there any advantage of doing it with javascript?
$('.comment').hover(function() {
$(this).children('.delete').show();
}, function() {
$(this).children('.delete').hide();
});
CSS hover works fine with anchor tags, but IE6 does not recognize hover events on things like li tags.
If you were using an anchor tag, however, you could achieve the same effect in CSS:
a.comment .delete { display: none; }
a.comment:hover .delete { display: block; }
You can do this with CSS but IE6 only supports the :hover pseudo-class on anchor tags (A), so it's not as common.
Jody is correct. Check out the docs for the CSS Display property.
There is more functionality that the .hover will do. If you provide it more than 2 functions it will cycle through all the functions.
Example
$('.comment').hover(
function(){$(this).children('.delete.first').show()},
function(){$(this).children('.delete.first').hide()},
function(){$(this).children('.delete.second').show()},
function(){$(this).children('.delete.second').hide()}
);
That would show one set of children the first time they hover, then hide, and the next time show a different set of children.
The hover function also works over multiple elements, and only fires if the mouse has left all the elements (not just when it leaves one and moves to another)
I dynamically create something like this on the server side. I'm sure there is a more efficient/prettier way but this usually serves my needs. Basically hides all the divs and un-hides the one that needs to be shown (passed as arg in function from onClick event).
function toggleTab(id)
{
document.getElementById('divEnrollment').style.display='none';
document.getElementById('divSearch').style.display='none';
document.getElementById('divMeeting').style.display='none';
document.getElementById('divBenefit').style.display='none';
document.getElementById('div' + id).style.display='block';
document.getElementById('spnEnrollment').style.color='blue';
document.getElementById('spnSearch').style.color='blue';
document.getElementById('spnMeeting').style.color='blue';
document.getElementById('spnBenefit').style.color='blue';
document.getElementById('spn'+id).style.color = 'red';
}

Categories