Develop Reference

CSS huge grid problems

I'm using CSS grid for a timeline. The grid is yielding about 1300 divs, which is really bad for performance.
I need to have each of these cells to be clickable and show a different color on hover. I cannot find any way to style "empty" nodes or interact with them without rendering all of those 1300 divs.
What can I do?

as Mike 'Pomax' Kamermans
suggested, the best way would be detect mouse click and add item dynamically. You can customize the width and height of items by assigning values to item_width and item_height.
var item_width=40;
var item_height=40;
var added_items=[];
$(function(){
$('.grid').on('click', function(e){
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;
var item=$('<div class="item"></div>');
var left=Math.floor(x/item_width)*item_width;
var top=Math.floor(y/item_height)*item_height;
var position={ 'left':left, 'top':top };
var index=added_items.findIndex(p => p.left == position.left && p.top == position.top);
if(index<0){
added_items.push(position);
item.css('left', left);
item.css('top', top);
item.css('background', "#"+((1<<24)*Math.random()|0).toString(16))
item.appendTo($('.grid'));
}
});
});
.grid {
width:400px;
height:400px;
border:1px solid red;
position:relative;
margin:10px;
}
.item {
width:40px;
height:40px;
position:absolute;
background:red;
}
.item:hover {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"> </div>

You can add your columns classes a eventHandler and same classes act same hover or click..
Also 1300 divs are really decreace your page's performance. For that you can research for infinite scroll or like that methods.
https://demos.telerik.com/kendo-ui/grid/endless-scrolling-local

Run Jquery only when an element is in the viewport

I'm trying to perform the Jquery function below when the element becomes visible in the viewport rather than on the page load. What would I need to change to allow that to happen? I'm using an external JS file to perform the Jquery, so keep that in mind.
Here's a piece of the HTML that is associated with the Jquery function -
<div class="skillbar clearfix " data-percent="70%">
<div class="skillbar-title" style="background: #FF704D;">
<span>Illustrator</span></div>
<div class="skillbar-bar" style="background: #FF704D;"></div>
<div class="skill-bar-percent">70%</div>
</div>
jQuery(document).ready(function(){
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},4000);
});
});

I once came across such problem and what I used is waypoints small library.
all you need is to include this library and do:
var waypoint = new Waypoint({
element: document.getElementById('waypoint'),
handler: function(direction) {
console.log('Element is in viewport');
}
})

Using CSS3 transitions instead of jQuery animations might be more performant and simpler. a cheap and nasty way of pushing it out of screen to demonstarate the effect.
There's a couple of things you'll need to do - firstly if you only want the animation to trigger when it's in the viewport then you'll need to check if anything is in the viewport on scroll. Then only update the bars width when it comes into view. If you want the effect to repeat every time it comes into viewport you'll need to set .skillbar-bar's width back to 0 if it's out of the viewport (just add an else statement to the viewport checking if)
I've added a 1000px margin-top and 400px margin-bottom in my example to .skillbar as a cheap and nasty way of demonstrating the effect
(function($){
$(document).ready(function(){
var $els = $('.skillbar'); // Note this must be moved to within event handler if dynamically adding elements - I've placed it for performance reasons
var $window = $(window);
$window.on('scroll', function(){
$els.each(function(){ // Iterate over all skillbars
var $this = $(this);
if($window.scrollTop() > $this.offset().top - $window.height()){ // Check if it's in viewport
$this.find('.skillbar-bar').css({'width' : $this.attr('data-percent')}); // Update the view with percentage
}
});
});
});
}(jQuery));
.skillbar{
margin-top: 1000px;
margin-bottom: 400px;
position: relative
}
.skillbar-bar{
transition: width 4s;
position: absolute;
height: 20px;
}
.skill-bar-percent{
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Scroll down 1000px :)
<div class="skillbar clearfix " data-percent="70%">
<div class="skillbar-title">
<span>Illustrator</span></div>
<div class="skillbar-bar" style="background: #FF704D; width: 20%"></div>
<div class="skill-bar-percent">70%</div>
</div>

This might work for you.
var el = $('.yourElement'),
offset = el.offset(),
scrollTop = $(window).scrollTop();
//Check for scroll position
if ((scrollTop > offset.top)) {
// Code..
}

Javascript - How to change Div alignment when secondary div's visiablity is set to 'none'

I have 2 Divs, side by side. By default, only the left one shows, and it centered in the page content horizontally. But when the user click's a button on the first div, it would slide to the left, and show the other div.
I already have the visibilty setup. But The problem is, I need my js to detect that the div's display:none attribute, and adjust the first div accordingly (float:left or float:right)
If possible, a fiddle would be nice also.

This should work for you if I got your problem completely:-
HTML
<div id="left">
<button onclick="showDiv()">Show</button>
</div>
<div id="right">
</div>
JS
function showDiv(){
var leftDiv = document.getElementById('left');
var rightDiv = document.getElementById('right');
leftDiv.style.float = 'left';
rightDiv.style.float = 'right';
rightDiv.style.display = 'block';
}
CSS
div{
width:200px;
height:200px;
background:gray;
margin:10px;
}
#left{
float:right;
}
#right{
display:none;
}
Fiddle

Set limit to div in scrollable table

Ok lets see if I can describe my problem in an understandable way.
Im building a schedule with an user column to the left and a timeline to the right.
The timeline holds schedule events. Each event holds a title. The timeline is scrollable in both directions.
When I scroll horizontally the events is slided underneath the user column, which they are supposed to do.
But, I would like to have the event title floating and still shown until the whole event is completely slided under. In other words, I want the user to always be able to se the event title regardless of how long the event is (as long as the event is visible).
I cant fix the title div on an specific position due to the both X and Y scroll feature?
I just want it to slide inside the event div with a margin left that is as long as the user column. Don't know how though. Maybe not a good solution?
I would attached some code but I have no idea how to approach this problem yet.
I did a "illustration" of the problem, hopefully that brings some clarity.
The first two rows is describing what it looks like now, the last two rows is describing what I want to achieve.
Using in this project:
jQuery,
JQuery DataTables,
AngularJS

I think this is what you need http://jsfiddle.net/fDyE2/3/
HTML
<div class="user">
<p>User</p>
</div>
<div class="timeline">
<div class="event">
<p class="title">Event 1</p>
</div>
</div>
CSS
div {
display:block;
position:relative;
}
.user, .timeline {
border:#000 dashed 1px;
float:left;
}
.user {
padding:17px 25px;
margin-right:10px;
}
.timeline {
padding:5px;
width:400px;
overflow:auto;
height:76px;
}
.event {
padding:5px;
background:orange;
width:800px;
height:51px;
}
Jquery
$(ducument).ready(function(){
var title = $(".title"),
target = $(".event").offset().left;
setInterval(function () {
if ($(".timeline").scrollLeft() > target) {
title.css({
"position": "fixed",
"top": (title.closest(".event").offset().top + 5) +"px",
"left": title.closest(".event").offset().right + "px"
});
} else {
title.css({
"position": "static",
"top": "auto",
"left": "auto"
});
}
}, 100);
});

Slide gallery with image tooltips, images breaking out of unlimited width block

I'm trying to develop a slide gallery with image tooltips according to this design:
What I need to develop is a slider controlled by two buttons, each time a button is pressed the slider's content must move a width of the slider or the width of the content left on that side, whichever is smaller. Upon mouse entering an image inside the slider the full-size version must be displayed as a tooltip.
Here's a fiddle of my solution so far, the problem I'm having is that images that don't fully fit into view plus the hidden area to the left get moved to a new line. You can see the problem by clicking the
"Show content size" button, the width of the content element will be equal to the width of the container element + content element's margin-left.
Bonus points if you can suggest an algorithm for moving the content to the right, I've got left figured out to a T (or so I think, anyway), but right is going to take a little more work (it doesn't check whether the end of the content has been reached). Update: It seems I can't implement proper movement to the right until the other issue is resolved, here's the algorithm I came up with, I can't measure "left to display" if I can't measure the actual width of the content element.

I created something you might like:
gallery demo
The gallery does not scroll the full gallery width by default (you can change that) cause some initially cut-off images at the right side, after a 'full' slide would result cut-off again, just on the other side of our gallery. You have for that cause the beKind variable. Adjust it as you like.
It hides the buttons if there's not enough content to make the gallery usable.
The gallery calculates the remaining space to scroll.
Once the slider end reached - the left/right buttons make the gallery jump to the beginning/end, so that are always usable. (Seems kinda weird to have a button... but that does nothing right? ;) )
The Tooltip has a hover-intent built in, to not piss off our users if they unintentionally hovered our gallery: (the tooltip fades in if the hover is registered for more that 120ms. Fair timing. I like it.)
As pointed out in your comment now the tooltip will not go off the screen.
jQ:
// Slide Kind Gallery - by roXon // non plugin v. // CC 2012.
$(window).load(function(){
var galW = $('#gallery').outerWidth(true),
beKind = 120, // px substracted to the full animation to allow some images to be fully visible - if initially partly visible.
sumW = 0;
$('#slider img').each(function(){
sumW += $(this).outerWidth(true);
});
$('#slider').width(sumW);
if(sumW <= galW){ $('.gal_btn').remove(); }
function anim(dir){
var sliderPos = Math.abs($('#slider').position().left),
rem = dir ==='-=' ? rem = sumW-(sliderPos+galW) : rem = sliderPos,
movePx = rem<=galW ? movePx = rem : movePx = galW-beKind;
if( movePx <= 10){
movePx = dir==='-=' ? movePx=rem : movePx = galW-sumW;
dir = '';
}
$('#slider').stop(1).animate({left: dir+''+movePx },1000);
}
$('.gal_btn').on('click', function(){
var doit = $(this).hasClass('gal_left') ? anim('+=') : anim('-=');
});
});
And the tooltip script:
// Addon // Tooltip script
var $tt = $('#tooltip');
var ttW2 = $tt.outerWidth(true)/2;
var winW = 0;
function getWW(){ winW = $(window).width(); }
getWW();
$(window).on('resize', getWW);
$('#slider img').on('mousemove',function(e){
var m = {x: e.pageX, y: e.pageY};
if( m.x <= ttW2 ){
m.x = ttW2;
}else if( m.x >= (winW-ttW2) ){
m.x = winW-ttW2;
}
$tt.css({left: m.x-ttW2, top: m.y+10});
}).hover(function(){
$clon = $(this).clone();
var t = setTimeout(function() {
$tt.empty().append( $clon ).stop().fadeTo(300,1);
},120);
$(this).data('timeout', t);
},function(){
$tt.stop().fadeTo(300,0,function(){
$(this).hide();
});
clearTimeout($(this).data('timeout'));
});
HTML
(Place the #tooltip div after the body tag)
<div id="tooltip"></div>
<div id="gallery_container">
<div id="gallery">
<div id="slider">
<img src="" alt="" />
<img src="" alt="" />
</div>
</div>
<div class="gal_left gal_btn">◀</div>
<div class="gal_right gal_btn">▶</div>
</div>
CSS:
/*GALLERY*/
#gallery_container{
position:relative;
margin:0 auto;
width:600px;
padding:0 30px; /*for the buttons */
background:#eee;
border-radius:5px;
box-shadow: 0 2px 3px #888;
}
#gallery{
position:relative;
height:100px;
width:600px;
overflow:hidden;
}
#slider{
position:absolute;
left:0px;
height:100px;
}
#slider img{
height:100.999%; /* fixes some MOZ image resize inconsistencies */
float:left;
cursor:pointer;
border-right:3px solid transparent; /* instead of margin that could leat to some wrong widths calculations. */
}
.gal_btn{
position:absolute;
top:0px;
width:30px; /*the container padding */
height:40px;
padding:30px 0;
text-align:center;
font-size:30px;
cursor:pointer;
}
.gal_left{left:0px;}
.gal_right{right:0px;}
/* end GALLERY */
/* TOOLTIP ADDON */
#tooltip{
position:absolute;
z-index:100;
width:300px;
padding:10px;
background:#fff;
background: rgba(255,255,255,0.3);
box-shadow:0px 3px 6px -2px #111;
display:none;
}
#tooltip *{
width:100%;
vertical-align:middle;
}
/* end TOOLTIP ADDON */
Hope you'll like it, and you learned some useful UI design tricks.
By the way, if you want to populate your ALT attributes (Search engines like it!) you can also grab that text and make it appear inside the tooltip like here!:
demo with text inside the tooltip
Happy coding.

I don't know if I understand correctly your problem. If you set a width wide enough to .scroll-content div, images wouldn't go to the "next line". So a solution would be to set a width with css. If not, you could use jquery to determine the total width of all the images and give it to the .scroll-content div. Calculate total width of Children with jQuery