I'm using GWT table which is being generate dynamically with lots of columns but with out horizontal scroll bar and to get the scrollbar, we need wrapper with fixed width around the table, but GWT do create container but not adding any width to it.
To solve the problem, I'm calculating width of screen and adding it to the table wrapper, which is adding scroll bar to the table but working weirdly.
It adds scroll bar when I move mouse near to table
It doesn't work when in resize the table
I'm using Live() as it works for run time objects, also I can't use click event.
Here is the code:
$(function() {
var screenwidth = $(window).width();
$('body').live("mouseover", function() {
$('.scrollbar').css({
'width' : (screenwidth) - 40
});
$("body").unbind("mouseover");
});
});
Use $('body').on("mouseover")
If you are getting scrollbar you can handle that by setting up overflow to none.
If you need to change css dynamically you can add / remove class and keep css separate from your code. Its a good practice.
Related
In salesforce lightning component, we have three different divs which we are hiding and showing as needed using display none css property. Fist div has more contents and we have to scroll the page till the end to submit the form and on submit next page is visible which has few lines of content but we have to scroll up to see those contents. Is there any way that I can avoid scrolling. Second div is taking first div height.
You could try this in your doInit controller method:
window.scroll(0, 0);
Use below code. As Salesforce lightning use 'transform' CSS property to scroll.
Just apply 'scroller' class to the div you want to put on top.
var cssScrolltoTop = $(".scroller"); // css class to find scroll position
if (cssScrolltoTop) {
var cssScrolltoTopTransform = cssScrolltoTop.css("transform");
if (cssScrolltoTopTransform) {
cssScrolltoTop.css("transform", "translate3d(0px, 0px, 0px)"); //set 'transform' since lighntning architecture uses css 'transfrom' property to scroll
}
}
I faced similar issues , then we used this event in the controller to resize the div:
$A.get("e.ui:updateSize").fire();
This was later deprecated by salesforce then we wrapped the div which is expanding / collapsing:
<ui:scrollerWrapper >
// Add your <div>
</ui:scrollerWrapper>
To make the scrollTop = 0 to work the container div has to have an internal scroll. Which we can get by either giving a height via px or via vh.
Try that out it should work. I was facing a similar issue while adding LWC inside Flexi Page. The Flexi page has its own scroller but for that, the scrollTop doesn't work. But if we create a separate scroller at the top-level div then the scrollTop starts to work.
Check this out. I have created this and it works perfectly fine for me: https://webcomponents.dev/edit/3vpWJ46hxykfPSACfuNN
I am using two jQuery plugins for a responsive and categorized feed. The plugins are like a lot of grid layout plugins where it uses position absolute after finding out the window size to position all the grid elements. My issue is that my grid element have dropdown options which originally has a height of 0px and onclick it's height goes to 300px for example. So sense it loads the gird items in with the dropdown as a height of 0 when the dropdown expands the items below its parent doesnt move down to adjust because it is already set with a position absolute in that area of the screen. When ever there is a window resize it recalculates everything and re organizes the grid. I need to find a way to run that function that resizes everything with a onclick event so that everything will rearrange properly. Right Now I can get it only to work if I click on the element twice rather than one, do you know why this would be happening.
Here Is what I have right now for trying to trigger the resize
function reply_dropdown_clicked() {
$( ".replies_feed" ).animate( {"height" : "300px"} );
window.dispatchEvent(new Event('resize'));
console.log("resize");
}
$( ".meta__price ul li:nth-child(3)" ).click(function() {
reply_dropdown_clicked();
});
Here is The event Listener for the resze
// window resize / recalculate sizes for both flickity and isotope/masonry layouts
window.addEventListener('resize', throttle(function(ev) {
recalcFlickities()
iso.layout();
}, 50));
Would $(window).trigger('resize'); be what you're looking for?
I want to display div boxes in a container and arrange them horizontally. As this can get quite wide I also want to provide a zoom slider which will rescale these divs.
This works but the items are rescaled but not repositioned. I have created an example here: http://jsfiddle.net/mtphLyem/5/.
I would like the container to re-layout the items after the transform has been applied. How can I do this?
I think the problem comes with transform, because transform only "simulates" bigger elements, but doesn't change any width values or sth. like that which means your browser still tries to layout with your raw values.
You could achieve such an effect by just changing the font-size, which changes width, height and position all by itself.
For example:
http://jsfiddle.net/mtphLyem/7/
function zoom(zoomFactor) {
$('.container > .step').css('font-size', zoomFactor + 'px');
}
Update
From comment below:
'Then you might also change margins since changing size would again trigger the scaling. This one looks quite experimenting and I'm sure there's a more efficient way to do that but still it seems to work: jsfiddle.net/mtphLyem/10'
Since you're already using jQuery, just bind to the change event:
$("#zoom").on("input change", function() { zoom($(this).val()) });
I am currently trying to position an element in a way that it always is at the bottom of it's parent. What's special here is that none of the heights or widths are known. I'd like to do this without tables, if at all possible (my superior is against using those. In a very religious way).
I tried the approach of using position:relative on the parent and position:absolute; bottom:0; on the box I want to have at the bottom. This, however, causes the box to overlap with the other content of the parent div since absolute positioning causes the parent to ignore the height of the positioned element. Some JavaScript is used to align the heights of the floating divs to each other. But disabled JavaScript should not completely break the layout (as in: cause content to overlap or break the "flow" of the page).
Here's the fiddle with the exact structure of my markup: http://jsfiddle.net/vbeC2/27/
I did read the "float: bottom" question on SO, but none of the answers really adressed my problem, hence the new question.
It's not the cleanest solution, but since you were already using the maxHeight bit to calculate the sizes, I just added a second each loop to check the max-height of the bottom section, and added it, so that the relative, absolute positioning would work.
http://jsfiddle.net/robsterlini/svcGB/ or http://codepen.io/robsterlini/pen/BcDyt
EDIT When you resize your browser it won't work, but you could just add a resize event that recalculated it, and you'd need to think about creating some javascript-less fallbacks, either using modernizr, or just some simple
Please find the working demo here: JS Enabled
Modified the jquery logic to calculate the height of the maximum height of the container as shown below:
$(document).ready(function(){
//Set the height of the columns to the highest value of all columns
var maxHeight = 0;
$(".same-height").each(function(){
var k = $(this).children('.headline').innerHeight() + $(this).children('.description').innerHeight()+$(this).children('.bottom').innerHeight();
maxHeight = Math.max(maxHeight,k);
});
$(".same-height").css({"height" : maxHeight});
});
If JavaScript is disabled then you should apply different styles as shown in demo here:
JS Disabled
Here is something similar to what you want to atchive but the demo is centering the
http://css-tricks.com/centering-in-the-unknown/
You should use the same trick : using css ::after/::before pseudo classes to set your footer content in your parent div
I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom?
Thanks !!
My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.
If you take Accessibility seriously, two tables is not the way to go since it breaks rules.
There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.
I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825
Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.
With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.
I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.
For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.
I set styles in my CSS file for the scrollTable ID, see below:
#scrollTable {
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:
$(document).ready(function(){
var maxWidth = $('#Header1').width(); // Get max row Width
$('#Header2 th').each(function(i) { // Set col headers widths to to match col widths
var width = $(this).width();
$('#Header1 th').eq(i).width(width);
});
var blankSpace = maxWidth - $('#Header1').width(); // Calculate extra space
$('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace ); // Stretch last header column to fill remaining space
});
I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.
I've done it in the past using CSS by defining a height for the <TBODY> tag on my table, and using overflow:auto. This was a while ago, and I think there were some compatability problems. I don't remember precisely what they were, but this solution may work for your problem.
the best solution (the one that scales with lots of data) is to use 2 tables like aaron said, the top table has the headers, and the bottom table should have the headers as the last row (or the footer), but with opacity of 0, so that you cannot see them.
This the headers at the bottom make the bottom table have the same column widths as the top table, making things line up. make sure you style both header and footer the same.
you will also have to create a seperate scroll bar for vertical scrolling to the right of the table, because otherwise the scroll bar will mess up your widths. add a scroll event listener to set the scrolltop of the table to the scrolltop of the scrollbar, and resize the scroll bar to be the same height as the table.
its pretty easy, actually =)
Create a single table as you normally would to meet accessibility concerns. Dynamically create a new table based on the thead using jQuery (copy the thead) and inject it into the page above the first table and give it the fixed position. It should stay in place while the rest of the table scrolls, but it will still remain accessible and work with JavaScript disabled.
Have you tried this plugin from JQuery ? http://plugins.jquery.com/project/floatobject
I believe this does what you want. Check out the demo # http://amirharel.com/labs/fo/float_demo.html
Cheers!