I have a navbar with poisition: fixed. Sometimes my logo isn't visible anymore because it has the same color as the div behind it. I was wondering if in JavaScript I could change the CSS (add a filter or whatever) whenever the logo is over that certain div.
You could use javascripts intersection observer api.
It enables you to check if an element is in the viewport and where.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Related
The property I want to implement is like the one Facebook's user posts have. When they are clicked they get bigger and the screen gets darker a bit.
I am open to any critic and help. Thank you!
You can add a jquery listener to the box for .on('click'...) and inside the function add a $(this).css(width: x px; height: x px)
This would allow you to fire the event to change the css.
Link to jquery site for CSS changes.
http://api.jquery.com/css/
For the background you will just need to change the dom css using jquery selectors.
If you want it more like facebook you'll also need to change the div to float to allow it to show up on top of everything.
I am creating a lightbox style plugin that opens an image in fullscreen and adds text about it next to it. I need a zoom animation, that just zooms the small image up to fill the screen. Since the small image is in a column layout, i need to move it out of the current dom structure. However i am unable to do so while doing the zoom animation.
So my question is:
Is there any way to move an element in the dom, or just change its position to fixed and keep its position on screen? I have jQuery avaliable
If all you want to do is get it done, this plugin could do the job.
magnific-popup
Otherwise, I'd put the image in a container of the same size so that you can change the image display property without having your layout get screwed up.
You don't need to move the element in your DOM. Just change the css.
Also this stackoverflow question could possibly help you.
Here is the website I've been working on: Comotional - test site
I am using flipping cards within "Who we are" section and have problems with z-index. Whichever z-index and css combination I tried (even added additional divs on the back side), I can't fix the flipped content appearing below other cards. If you hover over these, you will see what happens and will see where the problems happens. Is there anyway to get this working via js?
It's limited by your container height, not the z-index. Set the height auto and find another way to set up the grid - perhaps making something like a row container along with a clear div while setting height to the front side of the card.
i think the problem is that you have lots of nested elements so changing the z-index of a nested element does not make them appear above on the stack unless until you make the z-index of the parent container greater than other parent containers that are blocking the view.
you can use hover event to change/increase the z-index of parent container on mouse-in and default on mouse-out
link to justify what I am saying
I want to make the screen pretty dark via CSS beside one DOM element and it's children
How do I do that?
EDIT: I want to do something similar to chrome's dev tools 'inspect element' UI
Create a div layer on top of the whole viewport. Give it some transparency or simply a solid background colour. Raise the element you want to be on top of that layer using CSS z-index.
As #jfriend00 pointed out, you first need to change position of your element to absolute or relative. Then, you have to position the element again using left and top (for example).
I want to write a jQuery plugin with some visual effect for selected divs.
Integrating a plugin would look like so:
$('.myclass').mypluginfunction();
Visually it would be a transparent div over the whole element, with moving background.
Is it possible to dynamically add divs without destroying e.g floated divs?
I know that the solution would be adding an absolute position to div with bigger z-index.
You don't even need to tinker with the z-index. An element lower in the source will overlay content before it. Set your elements to position: relative and append an absolutely positioned div with width and height set to 100% - this will effectively overlay it.
Get yourself Chrome (or Firebug) and play with $.append() in the console:
$('*').css('position', 'relative').append('<div style="position:absolute; width:100%; height:100%; background: #F00; opacity:0.5;"></div>');
This will position every element on your site relatively, then append an absolutely positioned div with a red background. You should see every single element on your site being overlayed by it.
Of course this is going to explode, a little, but it gives you an idea of how easy to use this technique is.