I have a PHP script that gets data from a database and displays it in a 2 column table. I have a hide/show for each of the results, which extends down, pushing any options below it down too when clicked.
However the results in the column on the other-side also move down.
How do I make it so only the column with the clicked hide/show opens and moves down?
Below is the code I am using to show the hide/show; I thought by adding a .closest('td') may help, but all it does is open the corresponding left or right hide/show div!
$(document).ready(function(){
$(".reveal-arrow").click(function(){
$(this).parents('.template-container').find('.reveal-container').slideToggle();
$(this).toggleClass('flip');
});
});
Update: I have made a simplified fiddle of whats happening here: https://jsfiddle.net/r1bf4odx/18/
As you can see if you click the down arrow on BOX1 it 1 opens down, however BOX 2 also moves down. How do I stop Box 2 moving and stay where it is! Thanks again!
Please bear in mind that I am getting many results from a database!
The issue is that you are using a table, and the default alignment for a table is baseline / middle (see here (SO) for more info).
You can add
td { vertical-align: top; }
to fix the moving boxes
Updated fiddle: https://jsfiddle.net/r1bf4odx/21/
Related
I am building a table with user selected columns. The user has 2 different view options. 1 with everything contained in the body with a scroll bar and 1 with everything expanded and sticky headers. The user can click a button to expand the table. I am using Jquery to add a class to the user table to expand it.
Normal Table -
Expanded Table -
The issue I am having is that if only a couple of columns are selected and the user is in expanded view it looks really strange.
What I would like to do is if the table's width is smaller that the body(white background) then remove the expanded class and revert to normal view.
I have tried
if (window.getComputedStyle(document.getElementById('userTable')).width <= window.getComputedStyle(document.getElementsByClassName('siteBody')[0]).width) {
$('#userTable').removeClass('isExpanded');
$('.siteBody').removeClass('expandContainer');
}
Any help would be awesome! Thanks in advance and stay safe.
I think your code should work with this small change:
if (window.getComputedStyle(document.getElementById('userTable')).width <= window.getComputedStyle(document.getElementsByClassName('siteBody')[0]).width) {
$("#userTable").removeClass('isExpanded');
$('.siteBody').removeClass('expandContainer');
}
You have to put the jQuery selector #userTable within quotes, otherwise jQuery would not be able to figure out which element to perform the removeClass action for.
im using this DropDownList for searching item and i have a problem my problem is how can i scrolling in this DropDownList with up and down in Keyboard?
JSfiddle
EDIT: Since my first solution wasn't working properly when more items were added i adjusted it a little. Here's the fiddle
What i did:
First of all, i checked the position of the storeTarget and #search_results and logged it into the console to figure out what was causing the problem.
(This is something you could've done by yourself btw...)
What i found out then was, that, after a couple of items, the top position of the storeTargetitem was higher than the visible area of the #search_results.
so i changed the parameter of
$("#search_results").scrollTop(storeTarget.offset().top);
to scroll a little further than the current position and to make it smoother changed the check in the if-clause:
if(storeTarget.offset().top>220){
$("#search_results").scrollTop($("#search_results").scrollTop()+40);
console.log(storeTarget.offset().top);
console.log($("#search_results").scrollTop());
}
I didn't check for the case when the user goes up, that's left up to you to figure out.
here's a working fiddle based on your code
END EDIT
What i did:
when moving up or down with the keys i check if the offset().top value of the storeTarget is greater or lesser than 200 (you may change that depending on the size of your list) and if so, we scroll the top of #search-results to the
top of your storeTarget :
if(storeTarget.offset().top>200){
$("#search_results").scrollTop(storeTarget.offset().top);
}
I've read similar questions on SO about how to do this, but my setup is slightly different and the solutions proposed on those questions, have produced a strange result.
On my page I have a DIV, whose height is fixed which I've given the ID table-container. As the ID suggests, it contains a table (id="myTable"), which has a row appended to the bottom every few seconds using JavaScript. The effect I am trying to achieve is that as the table grows in size, and beyond the size of the table container, the table-container DIV will scroll down so that the last row is always visible.
I've used the following JavaScript to achieve this:
$('#table-container').scrollTop ($('#myTable tr:last').position().top);
This works fine for the first 20 or so row additions, but after that it loses track of the bottom row completely. I can't figure out why it starts off so well, and then messes up.
I've created a JSFiddle which illustrates the problem.
https://jsfiddle.net/crickes/meqzf4g1/16/
Why can't you just do $('#table-container').scrollTop ($('#myTable').height() ); ?
I have a horizontal sub menu with 8 options (can't add more or it drops to a second line), but now it needs more and i want a particular effect. I want the last option to be an arrow and the whole menu slide horizontally to the left when the arrow is clicked to show more options and a left arrow to slide back.
I have researched for a few days and have found a few examples similar, but just haven't worked in my case. Also, alot of answers to this similar thing involved plug-ins or carousel's and I don't think those are going to work for my particular site.
Right now I have it working kind of how I want but it's not the right effect. I'm using .hide() and .show() in my jQuery function and basically used the class: "firstSide" for the first part of the menu you can see after it drops down from the main menu, and class="slideSide" for the 2nd part. I've also tried .slideToggle() and playing with the widths but haven't got it to work right.
This is my codepen that I've started as an example: CodePen
This codepen isn't pretty but it works for this example, this is my function in it:
$('#arrowRight').on('click', function () {
$('.firstSide').hide(function () {
$('.slideSide').show();
$('#blankSub1').show();
});
});
$('#arrowLeft').on('click', function () {
$('.slideSide').hide(function () {
$('.firstSide').show();
});
});
Also I have the class slideSide set so that it doesn't display along with the first part of the menu or else its all on a 2nd line which i don't want as the width of the 8 menu options is about the full width of the whole site.
.slideSide {
display: none;
}
The desired effect I want can be seen on: http://store.apple.com/us/iphone
I've tried to see how this works but have not figured it out, below is a screen shot of the menu I'm talking about on that page.
Any help or advise would be appreciated as I'm kind of stuck.
Check out this fiddle.
Is this what you are looking for?
you nest a ul within a div and make use of overflow:hidden on the div.
Using jquery you can then implement the sliding via margin-leftor positioning like
position:relative; left:-100%
and you hide the arrows as they are clicked and so the other one.
you can play around with the values to match your needs.
Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/
Right now when you move over the box, the hoverbox appears in the same place for all items.
What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.
Any ideas on how to accomplish this?
Thanks
If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/
As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.
Hope this helps!
EDIT
Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/
Also, i just realized you wanted to have these items show up outside of the boxes.