We Keep Coding

How to make an element disappear after scrolling?

I have a custom icon element that is only displayed when its specific row in the table is hovered over, but when I scroll down without moving my mouse it doesn't update the hover and maintains the button on the screen and over my table's header. How can I make sure this doesn't happen?
export const StyleTr = styled.tr`
z-index: ${({ theme }) => theme.zIndex.userMenu};
&:hover {
background-color: ${({ theme, isData }) =>
isData ? theme.colors.primary.lighter : theme.colors.white};
div {
visibility: visible;
}
svg[icon] {
display: initial;
}
}
`;

I was just working on something similar to this for a web scraper recently.
Something like this should work:
function checkIfIconInViewport() {
// define current viewport (maximum browser compatability use both calls)
const viewportHeight =
window.innerHeight || document.documentElement.clientHeight;
//Get our Icon
let icon = document.getElementById('icon');
let iPos = icon.getBoundingClientRect();
//Show if any part of icon is visible:
if (viewportHeight - iPos.top > 0 && iPos.bottom > 0) {
icon.style.visibility = visibile;
}
else { icon.style.visibility = hidden; }
//Show only if all of icon is visible:
if (iPos.bottom > 0 && iPos.top >= 0) {
{
icon.style.visibility = visibile;
}
else { icon.style.visibility = hidden; }
//Add && iPos.bottom <= viewportHeight to the if check above for very large elements.
{
//Run function everytime that the window is scrolled.
document.addEventListener('scroll', checkIfIconInViewport);
Basically, every time a scroll event happens, we just check to see if the top & bottom of our element (the icon in your case) are within the bounds of the viewport.
Negative values, or values greater than the viewport's height mean that the respective portion of the element is outside the viewport's boundary.
Hopefully this helps! If you are dealing with a large quantity of objects, it may make sense to bundle the objects you are tracking together into an array and check each of them in a single function call to avoid saving function definitions for each individual object.
Edit: I just realized that I misunderstood your issue a bit. I think you can get by with just the bottom part of the code, and when a scroll event happens, set the icon's visibility to hidden. Assuming you want to hide it whenever the user scrolls?

Have you tried getting the scroll position of the DOM, then disabling (removing) the element once a certain scroll position is reached?

two column equal height layout using bootstrap

I have two column layout, left side only one image column and right side content etc. right now both are same height if rotate screen then it is not equal height but i refresh page(rotate screen) then both column do have equal height. i am trying to equal height without refresh page at rotate screen.
$(function(){
$balancer = function() {
$('.main-box').each(function(){
if($('.cola',this).height()>$('.colb',this).height()){
$('.colb',this).height($('.cola',this).height())
} else {
$('.cola',this).height($('.colb',this).height())
}
});
}
$balancer();
$(window).load($balancer());
$(window).resize($balancer());
});
html
<div class="main-box">
<div class="cola"></div>
<div class="colb"></div>
</div>

You can hook into the DeviceOrientation change event.
window.addEventListener("deviceorientation", function (e) {
//DO stuff here.
}, false);
Which should trigger when you go from horizontal to vertical and back again.

your jquery selector seems wrong.
$('.main-box').each....
You need to select the inner divs not the wrapper.
$('.main-box > div').each....
if( $(this).height() > $(this).siblings().height() ) {
$(this).siblings().height( $(this).height() );
} else {
$(this).height( $(this).siblings().height() )
}

Possible duplicate of : How can I make Bootstrap columns all the same height?
And there is another link which can help you: http://getbootstrap.com.vn/examples/equal-height-columns/

Use fadeIn when attribute has changed

When I click on the toggle button, it changes the style attribute of the element from display none to block. Now, when this happens, I want to animate the left position of the menu. I have code like this, but works buggy and also, when it should go back to the right, it appears on the left..
var toggled = false;
$(toggleBtn).click(function() {
toggled = !toggled;
$(collapse).attr("style", toggled ? 'display:block !important' : 'display:none !important');
if (collapse.attr('style', 'display:block !important')) {
$(collapse).animate({left:'10%'});
} else {
$(collapse).animate({left:'100%'});
}
});
Any help would be appreciated, thank you.

You can simplify this more as:
var toggled = false;
$(toggleBtn).click(function() {
toggled = !toggled;
$(collapse).toggle(toggled)
.animate({ left: $(collapse).is(':visible') ? '10%' : '100%' });
});

change the condition
if (collapse.attr('style', 'display:block !important'))
with the following
if (collapse.attr('style')=='display:block !important')

Slide left and hide effect using jquery or CSS

I am working on a slide menu,
Please have a look at the demo site:
kotechweb.com/new_focus/
At left side there is a main menu , when toggle , the words right now is squeeze and hide, here is how I implement:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("width", "75%");
} else {
$(".nav_bar ul").css("width", "0");
}
is_closed = !is_closed;
});
CSS:
transition: all 1s;
So the logic is using transition to implement the slide animation, however, this approach the text is squeeze when the width is smaller.
How to make the text slide left as well?

You can create a "mask" using
#menu_right{
overflow:hidden;
...
}
and move your menu in this way:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("margin-left", "-100%");
} else {
$(".nav_bar ul").css("margin-left", "-0%");
}
is_closed = !is_closed;
});
I think this works like espected

First of all, instead of using CSS transitions use animate in JQuery as it allows for more functionality.
What I actually do for my slide menus is adding overflow-x: hidden to my body tag. I then position the menu outside of the page, so I give it the CSS value of right: 0 to position it just outside the left hand side of the page.
What this allows me to do is that when the user clicks the menu button you can animate the menu to slide out by simply changing the right value, so your final code would look something like this
$("#menu_btn").on("click", function () {
if (is_closed) {
$("#slideoutMenu").animate({right:"[insert width of nav menu]"}, 1000);
} else {
$("#slideoutMenu").animate({right:"0"}, 1000);
}
is_closed = !is_closed;
});

Use just jquery and jquery ui : Here
At the top reference the bellowed code.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
And at script only add this :
$(".nav_bar ul").toggle( "slide");
Or also can use with customized time delay ms unit.
$( ".nav_bar ul" ).toggle( "slide",2000 );

Maybe you should .hide() the text when the sidebar collapses. Hope this helps.

Avoid TAB on a Div in browsers

I have JQuery slide in-out div, which slides in-out on click of a button
The Problem#
when i open it in broswer, and start pressing TAB, when the selection reaches the options of that div(which slides), the slide div comes out(become visible without clicking on button).
is there any way by which that slide div can avoid TAB selection..
CHECK HERE http://global.redhatsalesteam.com/slide_test/

Start off with the display of the animated div at display: none; - this will mean the links inside it can't get focus from "tabbing" - then on click (in the function) change it to display: block just before starting the slide animation
var $marginLefty = $('#slidemarginleft div.inner');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'none'
});
$('#slidemarginleft .button').click(function() {
$marginLefty.css('display', 'block').animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});

set the tabindex on your links to -1. that should take them out of the tab order. if you want them to be tab-able to when you open the menu, you can set them back to something reasonable in the complete call back.
something like this should do it:
$('#slidemarginleft .button').click(function() {
$marginLefty.animate({
marginLefty: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
},
function(){
var counter = 1;
if($marginLeft.is(':visible'){
$marginLefty.find('a').each(function(){
$(this).attr('tabindex', counter);
counter++;
});
}
else{
$marginLefty.find('a').attr('tabindex', '-1');
}
});
});