We Keep Coding

DataTables: how to put variable in table initialization code

I found that DataTables plug-in is very handsome and practical until you know at code start all necessary parameters. But, in my case I wish to change parameter scrollX according to detected document' height (60% of available height). I understand that here we talk about some kind of object but push and other tricks doesn't help. Here is problematic code:
$(document).ready(function() {
table = $('#example').DataTable( {
language: {
info: "Show _START_ til _END_ of _TOTAL_ recs" },
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
rowReorder: false,
ordering: false,
fixedColumns: {
leftColumns: 2,
rightColumns:0}
});
});
and instead "300px" I planned to put some kind of Javascript variable that contain document height, but classic object manipulation doesn't show result. So, I tried to check:
console.log(Table.scrollX);
but got error. Then tried to make table as public var but then got undefined value. Also:
table.push({'scrollX': '300px'});
and some weird combination, but nop. Any suggestion, please? Thanks.

Something like
$(document).ready(function() {
var myScrollY = '300px';
var table = $("#example").DataTable({
scrollY: myScrollY
});
);

Here the solution I'm using in my project:
You need to handle resize event. In the handler calculate the available area for scrollable part of the table:
$( window ).resize(function() {
var scrollWidth = "300px";
// scrollWidth should be calculated based on your needs
table.find( '.dataTables_scrollBody' ).width( scrollWidth );
})
I've done the same for height
Update:
Setting scrollY: "300px" works only for initialization.
When you change height of the document, the event domready is triggered and you have to recalculate new height of your scrollable area of datatables:
$( window ).resize(function() {
var newScrollHeight = Number($(window).height() - $('#IdOfAnElement').height() - other heights) + "px"; //
table.find( '.dataTables_scrollBody' ).height( newScrollHeight );
})
.dataTables_scrollBody is the element of datatables containing scrollable area.

How to send a click event to a div or button with PhantomJS (1.9.8)?

I don't understand how to close a modal or an element with PhanthomJS using sendEvent().
For example I tried to do it using the code below or using CaperJS click and clickLabel and many others things but it's not working.
var webpage = require('webpage').create();
var url = 'http://sourceforge.net/';
webpage.viewportSize = { width: 1280, height: 800 };
webpage.render("test1.png");
webpage.onLoadFinished = function(status) {
var coords = webpage.evaluate(function() {
var firstLink = document.querySelector('a.btn');
return {
x: firstLink.offsetLeft,
y: firstLink.offsetTop
};
});
console.log(coords.x);
console.log(coords.y);
webpage.sendEvent('mousedown', coords.x, coords.y ,'left');
};
webpage.open(url,function(){
webpage.render("test2.png");
phantom.exit()
});
Here is the element I would like to skip.

The offsetLeft and offsetTop only give the offset based on a parent element. You would have to sum all the element offsets up to the root node. That's at least what CasperJS does.
If this notice is static, you can determine the coordinates once and use them every time. Based on the screenshot (444,330) seems good as a replacement for coords.x, coords.y.
You can also simply use a synthentic mouse click as described here which is what CasperJS does, but in combination with a specific position. This is a plain synthetic click:
function click(el){
var ev = document.createEvent("MouseEvent");
ev.initMouseEvent(
"click",
true /* bubble */, true /* cancelable */,
window, null,
0, 0, 0, 0, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/, null
);
el.dispatchEvent(ev);
}
Also, you have two callbacks (onLoadFinished and function in webpage.open) for when the page is loaded. You should have only one, so you don't run into problems when when one of them is called. After you click, it's best to wait a little with setTimeout and let the page change before taking the screenshot.

Reset "style" attribute on jquery.resizable element without breaking resizing?

Full jsbin here
Basically, I have a "panel" that is anchored on the right side of the viewport. I want it to be resizable horizontally. The catch is, I want the negative space to be limited between 200px and 400px. If that doesn't make sense, please see the JSBin and it should be easier to understand.
Here's what I have so far:
$( document ).ready(function() {
var maxContentWidth;
var minContentWidth;
$(window).resize(function() {
var ww = $(window).width();
maxContentWidth = ww - 200;
minContentWidth = ww - 400;
$('#content').resizable("option","maxWidth",maxContentWidth);
$('#content').resizable("option","minWidth",minContentWidth);
//if I could even "reinitialize" the pane upon resize, but this doesn't work:
/*$('#content')
.css('right','10px')
.css('top','10px')
.css('left','200px')
.css('bottom','10px');
*/
//I discovered that doesn't work because jquery resizable applies a local "style" attribute, so then I tried this:
//$('#content').attr('style',''); //this makes it completely not resizable at all
});
$('#content').resizable({
handles: "w",
maxWidth: maxContentWidth,
minWidth: minContentWidth
});
});
update: As you can see in the jsbin comments, I decided just reinitializing the panel on window resize was fine and should be simple to do, right? Well, jquery resizable uses a local "style" attribute instead of modifying css. So, I tried just clearing out the style attribute on window.resize, but if I do that I can't resize the panel at all, which doesn't make sense to me.
So. Any ideas how I can "clear" all the styling and reset the CSS without breaking the resizable functionality?

I don't know if i understand, but let's give a try!
http://jsfiddle.net/2eor05dt/
$( document ).ready(function() {
// First Value
var maxContentWidth;
var minContentWidth;
maxContentWidth = $(window).width() - 200;
minContentWidth = $(window).width() - 400;
$(window).resize(function() {
var ww = $(window).width();
maxContentWidth = ww - 200;
minContentWidth = ww - 400;
$('#content').resizable("option","maxWidth",maxContentWidth);
$('#content').resizable("option","minWidth",minContentWidth);
var gap = ww - $('#content').width() - parseInt($('#content').css('left')) - 10;
$('#content').width($('#content').width() + gap);
});
$('#content').resizable({
handles: "w",
maxWidth: maxContentWidth,
minWidth: minContentWidth
});
});

Can I execute javascript based on window size?

I have a responsive site where I'm using a javascript to create a sticky sidebar.
I'm also using media queries to change from a multi-column layout to a single-column layout when the browser size is less than 768px.
I need to figure out how to disable the sticky menu script in the single-column layout. Essentially, I need something like a media query for the script statement.
This is the code I'm using to enable the script:
<script>
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
</script>
Is there something I can add to it to only have it trigger if the window is 768px wide or wider?
EDIT: I'm looking for a solution that will work if the user resizes the window on the fly.

Try this.
$(function(){
$(window).resize(function(){
if($(this).width() >= 768){
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
})
.resize();//trigger resize on page load
});

Try this code:
var height = $(window).height(); //I'm assuming you mean height, you can try .width() if yo u need it
if (height < 768) {
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
Hope that helps.

Check this out:
var targetWidth = 768;
if ( $(window).width() >= targetWidth) {
//Add your javascript for screens wider than or equal to 768 here
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
else {
//Add your javascript for screens smaller than 768 here
console.log(`am less than ${targetWidth}`)
}

(jQuery plugin: backstretch) Margin on the sides

I am using this great jQuery plugin to have the fullscreen backgound for my website.
This plugin currently fills the entire background on the screen, I was wondering if it is possible to give it a margin.
For instance I want to have a gap in the right side of the screen for 150px (so I can see the body background) and the rest of the page will be filled with backstretch.
I have played with _adjustBG function but I can't get this working.
Any helps will be appreciated.

Since the author of this plugin didn't make an option for margin, I'll tweak it for you.
Below is the modified _adjustBG() function that you may need.
Just open the file "jquery.backstretch.js" (the normal version, not the minimized) then replace the original _adjustBG() function (at the end of file) with this function.
function _adjustBG(fn) {
var rightMargin = 150; //--- edit the margin value here
try {
bgCSS = {left: 0, top: 0}
bgWidth = rootElement.width()-rightMargin;
bgHeight = bgWidth / imgRatio;
// Make adjustments based on image ratio
// Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
if(bgHeight >= rootElement.height()) {
bgOffset = (bgHeight - rootElement.height()) /2;
if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
} else {
bgHeight = rootElement.height();
bgWidth = bgHeight * imgRatio-rightMargin;
bgOffset = (bgWidth - rootElement.width()) / 2;
if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
}
$("#backstretch, #backstretch img:last").width( bgWidth ).height( bgHeight )
.filter("img").css(bgCSS);
} catch(err) {
// IE7 seems to trigger _adjustBG before the image is loaded.
// This try/catch block is a hack to let it fail gracefully.
}
// Executed the passed in function, if necessary
if (typeof fn == "function") fn();
}

Update:
By poking around w/ console, I found that if you subtract 150 from the width of the background-image, it will, by default, give you a margin on the right. You may want to adjust the height so your image scales, but, maybe something like this to run in $(document).ready():
var $bg = $('#backstretch');
var newImgWidth = $bg.width() - 150;
$bg.css('width', newImgWidth);

If IE6 is no issue, you can try to put the following in your stylesheet:
#backstretch{
width: auto !important;
right: 150px;
}
I tried this on the backstretch homepage and it worked as I would expect. As I am not totally familiar with this plugin please feel free to correct me.