I have multiple clickable panels made with Bootstrap class panel, organized in this way:
Image of my website naoh
For example, when I click on the first panel, some other panels appear and cool stuff happens.
When you click a panel.
But I want that the panel that I clicked to be at the center. And then, when that same panel is clicked, I want to return everything to normal (which right now works with the specific panels per panel), including the main panel, so it should move to the left. The panels at the center doesn't require animation, and the right ones should animate to the left and back to the right.
Here is my jQuery code for the panels, lets say panel 2:
//Panel 2
if ($("#panel_2").data("clicked")) {
$(".navegadores").toggle(function () { });
} else {
$(".navegadores").hide();
}
$("#panel_2").click(function () {
$("#panel_2").data('clicked', true);
$(".navegadores").toggle(function () { });
console.log($("#panel_2").data("clicked"));
});
I feel I would need to use the .toggle method somehow, or the .slideToggle, but I'm quite confused atm.
Something like this should get you started:
$('#panel2').click(function(){
if ( $(this).data('clickstate') == 0 ){
$(this).animate({
marginLeft: '200px'
},1000, function(){
$(this).data('clickstate', '1');
});
}else{
$(this).animate({
marginLeft: '0'
},1000, function(){
$(this).data('clickstate', '0');
});
}
});
#panel2{position:relative;height:100px;width:100px;background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel2" data-clickstate="0"></div>
I have a DIV with 9 images and I would like to change CSS property of 8 images unlike one that user is hovering.
Here is what I have:
HTML:
<div class="gallery">
<img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" />
<img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" />
</div>
JS:
function hoverPics() {
$(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");
$(this).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
Actual page
The best example of what I'm looking for is Gallery at the bottom of the page after age validation. Here
Cheers
I strongly recommend against using inline JS. Since you're already using jQuery, you can simply listen to the .hover() event (which is basically a shorthand for .mouseenter() and .mouseleave()), and use DOM traversal methods:
$(function() {
$('.image-hover').hover(function() {
$(this).css({
'-webkit-filter': 'grayscale(0%)'
}).parent().siblings().find('.image-hover').css({
'-webkit-filter': 'grayscale(100%)'
});
}, function() {
$('.image-hover').css({
'-webkit-filter': 'grayscale(0%)'
});
});
});
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/5kw2hs7f/
There is also a pure CSS method (slightly hackier), although it allows less granularity over control compared to the jQuery solution. The way is to set all .image-hover to grayscale, but only allow colour on the specific .image-hover:hover.
The only problem is that we are setting all images to greyscale as long as the parent container .gallery is hovered upon, and this might not be the desired behavior. See fiddle here: http://jsfiddle.net/teddyrised/88v8ga5z/
.gallery:hover .image-hover {
-webkit-filter: grayscale(100%);
}
.gallery:hover .image-hover:hover {
-webkit-filter: grayscale(0%);
}
Pass this in function to access them
onmouseover="return hoverPics(this)" onmouseout="return changeMeBack()"
in js
function hoverPics(obj) {
$(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");
$(obj).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
try to verify if is hover, like this:
function hoverPics() {
if( ! $('.image-hover').is(':hover') ) {
$(".image-hover").css({ "filter": "gray", "-webkit-filter": "grayscale(100%)" });
}
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
I do not have much experience with jQuery however if attempting this I would pass through the id of the current element when the function is called, on hover. I would then use a loop to run through the images, within this loop I would check the id against the current image and if true would not change the grey scale.
I want the mouseover on the coverImg then show the coverInfo
the coverInfo show the title and the description of the image
then the coverInfo do show
but I want the coverInfo stay and clickable when mouserover on itself
but it disappear immediately.
So what's the point I have missed?
The HTML
<div class="workshop_img">
<div class="coverInfo"></div>
<a href="#">
<span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia "></span>
</a>
The CSS：
.coverInfo {
position:absolute;
width: 200px;
height:200px;
background:rgba(0,0,0,0.5);
top:30%;
left:30%;
display:none;
}
see the jQuery code
$(function() {
$(".coverImg").each(function() {
//make the background image move a little pixels
$(this).css({
'backgroundPosition' : "-40px 0"
}).mouseover(function() {
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
}, {
duration : 90
});
//shwo the info box
var content = $(this).attr("title");
$("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast");
}).mouseout(function() {
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
}, {
duration : 200,
});
$(this).parent().find(".coverInfo").stop().fadeOut("fast");
})
})
});
</div>
EDIT：
I have searched a lot and find something similar, I took them and the answer given below together to solve my problem, here is the code:
$(function() {
$(".coverImg").css({
'backgroundPosition' : "-40px 0"
}).mouseenter(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
},90);
info.show();
}).mouseleave(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
},200);
info.stop().hide();
});
});
It has just been clean, but do not work fine.
What's the problem?
The new box shows immediately because it is not initially marked as hidden. .fadeIn() only fades in something that is initially not showing.
You can make it initially not visible like this:
$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast");
You also can get rid of the .each() iterator you're using. You don't need it. You can just use:
$(".coverImg").css(...).mouseover(...).mouseout(...);
You don't need the .each() at all.
I'd also suggest you use .hover(fn1, fn2) instead of .mouseover(fn1) and .mouseout(fn2).
And, it looks like you are creating a new object and inserting it on every mouseover event such that multiple such objects will pile up in the page. You should either .remove() the object in the mouseout function or you should reuse a previously existing element if it exists in the element rather than creating more and more of them.
Sometimes when you are using the events for mouse hovering and you are also changing the page, the change to the page can cause the element to lose the mouse hover which then hides the change to the page and then it all starts over again. I can't tell for sure if that is happening in your case (I'd need a working example to play with to see), but it seems possible.
I've posted this in the datatables.net forums, but after a week, still no response. Hopefully I can find help here...
I'm using datatables version 1.8.1 and am having nightmares over column header alignment with vertical scrolling enabled.
With the code posted below, the headers line up correctly in Firefox and IE8 and IE9, but Chrome and IE7 are off. I'm using a lot of datatables on this project, and this is a problem with every one. I'm desperate for help!
EDIT: I have figured out that this has something to do with setting the width of the table. The datatable takes the width of its container. If I set no width, everything lines up fine (but the table is too big for where I need it on the page). If I give the table's div (or a parent div somewhere higher up) a width at all, the headers don't line up properly.
Thanks!!
Screenshots:
www.dennissheppard.net/firefox_alignment.png
www.dennissheppard.net/chrome_alignment.png
www.dennissheppard.net/ie7_alignment.png
otable = $('#order_review_grid').dataTable({
'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
return formatRow(nRow, dataIndex);
},
'fnDrawCallback':function()
{
checkIfOrderSubmitted(this);
},
'aoColumnDefs':
[
{ 'bVisible': false, 'aTargets': [COL_PRODUCT] },
{ 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
{ 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
{ 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
{ 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
],
'sDom': 't',
'sScrollY':'405px',
'bScrollCollapse':true,
'aaSorting':[]
});
<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">
<thead class="grid_column_header_row" id="order_review_grid_column_header_row">
<tr>
<td class="" id='sequenceNumber'>SEQ #</td>
<td class="grid_sc_header" id='statusCode'>Sc</td>
<td class="grid_sc_header" id='onOrderGuide'>O.G.</td>
<td class="grid_image_header" id='image'>Image</td>
<td class="grid_description_header" id='description'>Description</td>
<td class="grid_brand_header" id='label'>Brand</td>
<td class="grid_pack_header" id='packSize'>Pack</td>
<td class="grid_price_header" id='price'>Price</td>
<td class="grid_qtrfull_header" id='caseQuantity'>Full</td>
<td class="grid_qtrypart_header" id='eachQuantity'>Partial</td>
<td class="grid_refnum_header" id='referenceNumber'>Ref #</td>
<td class="grid_refnum_header"> </td>
</tr>
</thead>
<tbody class="">
<!-- loaded data will go here -->
</tbody>
</table>
I'm having the same problem here. It works fine (pixel-perfect column aligned) in Mozilla Firefox, Opera but not in Chrome 21.
Solution:
Like mentioned in this post http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
Basically what is happening, is that DataTables is trying to read the
width of the table, that the browser has drawn, so it can make the
header match. The problem is that when DataTables does this
calculation on your page, the browser hasn't shown the scrollbar - and
hence the calculation is slightly wrong! The reason I suggest that
it's a Webkit bug, is that, even after DataTables has run through all
of it's logic, the scrollbar still hasn't been displayed. If you add
the following code you can see the effect of this:
console.log( $(oTable.fnSettings().nTable).outerWidth() );
setTimeout( function () {
console.log( $(oTable.fnSettings().nTable).outerWidth() ); }, 1 );
The interesting part is that after I added setTimeout and after it executed there was still one column not aligned. After adding "sScrollX": "100%",
"sScrollXInner": "100%" all columns were aligned (pixel-perfect).
Solution for Chrome/Chromium, works ofcource in FF, Opera, IE9:
$(document).ready(function()
{
var oTable = $('#mytable').dataTable(
{
"sScrollY": ( 0.6 * $(window).height() ),
"bPaginate": false,
"bJQueryUI": true,
"bScrollCollapse": true,
"bAutoWidth": true,
"sScrollX": "100%",
"sScrollXInner": "100%"
});
setTimeout(function ()
{
oTable.fnAdjustColumnSizing();
}, 10 );
});
I solved this problem by wrapping the "dataTable" Table with a div with overflow:auto
.dataTables_scroll
{
overflow:auto;
}
and add this JS after your dataTable initialization
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
Dont use sScrollX or sScrollY, remove then and add a div wrapper yourself which does the same thing.
I had the problem and it turned out to be a side effect with my CSS. Try to disable all external css and see if the problem persists.
var table = $("#myTable").DataTable({
"sScrollY": "150px",
//"bAutoWidth": false // Disable the auto width calculation
});
$(window).resize( function () {
table.columns.adjust();
} );
if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
Worked perfect for me!
I had a similar issue, but mine resizes to fit after searching or sorting or interacting with the table in a way to cause a redraw, tried the redraw...function but no luck had to improvise in the end. The funny fix I that worked for me was calling oTable.fnFilter( "x",0 ) and oTable.fnFilter( "",0 ) in this same order (search and clear search)... this works...lol.. :)
this might help you (not sure but i guess that its worth trying)
add this code to the page
if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
taken from here
width columns problem in Chrome & Safari
Also, i guess it worth trying to define the columns in the constructor only instead of defining them in the (leave tag empty)
I also had this problem. After many different tries I tried the below and succeeded.
I tried adding label tag with the float property in the style attribute. Then it worked find.
For example:
<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>
I had a problem where the data in the columns was too large to fit and there was no place in the data for a line break. My solution was to add a div with an overflow and a title attribute like this:
<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="#item.NewValue" >#item.NewValue</div></td>
This caused the table to settle down almost completely.
if you are using bootstrap:
.table {
width: 100%;
max-width: none; // >= this is very important
}
This is how I have got rid of this problem:
I use this generally to execute functions after a Ajax call has been completed
WaAjaxHelper = {
arr_execute_after_ajax: null,
add_function_to_execute_after_ajax: function (fun) {
if (typeof fun == 'function') {
if (!this.arr_execute_after_ajax) {
this.arr_execute_after_ajax = [];
}
this.arr_execute_after_ajax.push(fun)
return true;
} else {
alert('ERROR: WaAjaxHelper.add_function_to_execute_after_ajax only functions possible');
return false;
}
},
execute_after_ajax: function () {
if (this.arr_execute_after_ajax) {
$.each(this.arr_execute_after_ajax, function (index, value) {
try {
value();
} catch (e) {
console.log(e);
}
})
}
this.arr_execute_after_ajax = null;
}
}
$(document).ready(function () {
$.ajaxSetup({
async: true,
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "text/javascript");
$('.blockUI').css('cursor', 'progress');
},
complete: function (jqXHR, textStatus) {
$('body').removeClass('waiting');
},
error: function (jqXHR, textStatus, errThrown) {
alert("Ajax request failed with error: " + errThrown);
ajax_stop();
}
});
$(document).ajaxStart(ajax_start).ajaxStop(ajax_stop);
});
ajax_start = function () {
// do something here
}
ajax_stop = function () {
WaAjaxHelper.execute_after_ajax();
}
in the view:
var tbl;
WaAjaxHelper.add_function_to_execute_after_ajax(function (){tbl.fnDraw()})
where tbl stores the datatable object.
Having the same problem in firefox,
I changed a little the script jquery like this (in jquery.dataTables.js version 1.9.4) :
line 3466 (v1.9.4) : nScrollHeadInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";
line 3472 (v1.9.4) : nScrollFootInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";
It works even after sorting and filtering.
I use bootstrap and I managed with this
<table id="datatable_patients" class="table table-striped table-bordered table-hover table-responsive" width="100%">
<thead></thead>
<tbody></tbody>
</table>
I had this problem with bootstrap 3 and the problem was related to left and right padding on my th and td elements that I added after the bootstrap styling was applied. Removing my left and right padding fixed the problem in my case.
We can handle this using css and minor changes in sDom.
Add following class in your css file
.scrollDiv {
max-width:860px; //set width as per your requirement
overflow-x:scroll;
}
replace your 't' in sDom attribute of table with <"scrollDiv"t> and remove scrollX attribute of table
Save and Enjoy ! :)
I found that the width would misalign in the first window scroll, so the solution is to, on the first scroll only request a new table draw.
const $table = $('#table').DataTable({ ... });
$(window).on('scroll', () => {
$(window).off('scroll');
$table.tables().draw();
});
Edit: Also works with a setTimeout function. This depends when the misaligning happens.
$table.tables().draw() is the key here.
I too faced the same issue. I solved it by removing 'sScrollY':'405px' from the datatable property and used fixed header.
JS
$('#<%=gridname.ClientID%>').dataTable( {
"paging": false
});
});
Then above your gridview add a div element as below.
<div style ="height:600px; overflow:auto;">
<asp:GridView ID="id" runat="server" DataKeyNames="key" ClientIDMode="Static" HeaderStyle-BackColor="#99ccff"
BorderStyle="Inset" BorderWidth="1px" CellPadding="4" HorizontalAlign="Center" AutoGenerateColumns="false" Width="98%" >
etc..
</div>
Not sure if I had the exact same problem. I was dealing with a very large table, 40+ columns, and was using horizontal and vertical scrolling. However, if the browser window was set so big that you could see the whole table, the column headings were left aligned and the table content was in the center.
I noticed in firebug that the table had gotten a width of 1352px through DataTables. Setting that to 100% made everything line up!
I know this is quite old thread, but I landed here when searching for the header alignment issue. Turned out I needed a different solution, so posting here so that someone will find it useful.
I just added following in my style block and it solved the issue:
.table {table-layout:auto !important;}
Seems that Datatables adds fixed layout, so adding this line made my headers align correctly with data when scrolling
After a long struggle I managed to tweak it:
add this after initializing the data table. Avoid adding "scrollY/scrollX",
and also avoid enabling "scrollCollapse"
$('#table_id').wrap('<div class="dataTables_scroll" />');
Add these to your CSS Styles.
.dataTables_scroll
{
position: relative;
overflow: auto;
max-height: 200px;/*the maximum height you want to achieve*/
width: 100%;
}
.dataTables_scroll thead{
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #fff;
z-index: 2;
}