Is there any work around for the pre-loaded/instantiated to prevent the lack of styling being present before the api loads the table?
Right now for example. The headers of my table are bunched up with no spacing looking like a funky sentence.
HeadHead1Head2Something
for example.
I've tried a number of ways to get around this, from how/when I load my table data.. to using the oLanguage setting for processing to have an image loader, figuring it was maybe lack of content. But no, the style just doesn't appear until after the $(' selector ').dataTable(); call is made.
you can hide the table before it is initialized and show it after initializing is complete.
Use CSS to hide the table.
.grid { display: none; }
add fnInitComplete to your datatable settings to show the table once it is intililized.
enter code here
$(".grid").dataTable({
// Your settings
"fnInitComplete": function(oSettings, json) {
$(".grid").show()
}
});
Related
I work on my portfolio website, it's based on a fullpage.js and WordPress.
I would like to have fixed background with changing custom "background-color".
I add different "background-color" to every post with a custom field.
I change class name for visible section (post) inside a full page
script, visible post gets class "active".
I know that fullpage.js doesn't allow fixed elements, so I have to put some "background" div outside of full page wrapper (and WordPress loop too).
I don't know how to copy that "background-color" from a visible (class "active") section to a fixed background in a separate div.
There are some possibilities:
use js/jQuery to copy CSS "background-color" value from one ( class "active") div to another(fixed background div), but it has to be done dynamically. How? All scripts I found and tested works only once for first "active" background-color, and when section change (another div is "active") fixed background still has the first active section background-color.
or use php with custom query outside a loop - but I don't know how to filter with a specific class name "active". I have only basic script:
style="background-color:<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'background', true);
wp_reset_query();
how to add a filter for "active" class?
Any other ideas? Help!
EDIT2: I found two scripts which do what I need:
1 https://codepen.io/Funsella/pen/yLfAG
2 https://codepen.io/Funsella/pen/dpRPYZ
both change the background-color copying it from "source" div to second "target" div. I can keep "source" div inside a wordpress loop (fullpage wrapper too) and transfer the background-color value to my fixed background div outside of WP's loop and fullpage.
First script works with scroll events - so it probably won't work with fullpage.js plugin which doesn't scroll content.
But the second script does his job exactly how I needed. I tested it.
So the question is: can it be done in more simple way? Without additional jQuery plugin (in-view.js)? Just plain JS or jQuery?
So, you'll be showing various blog posts on a single page and want each one to have its own background color, correct? If so, try fullpage.js' sectionsColor option.
You can read about it here
https://github.com/alvarotrigo/fullPage.js#options
Here's an example from that page:
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
The documentation doesn't explain precisely what's happening here, but it looks like you're simply sending in an array of section colors in order of their appearance.
EDIT BASED ON COMMENTS:
From your picture I think I better understand what you're trying to do. Basically you want a slide layer (transparent) and a fixed background layer (color of active slide). First, is this parallex example what you're trying to achieve? https://alvarotrigo.com/fullPage/extensions/parallax.html#firstPage
If so, there is a basic example in the repo. If this won't accomplish exactly what you're trying to do, follow these directions:
Use the onLeave or afterLoad callback to make an ajax request to your site.
Query your posts using your post Id to retrieve the post attribute background.
Retrieve the background color and set/fade-in your background-color property.
Here's a very simple ajax request example using jQuery:
//set the function to perform for onLeave in the options
onLeave: goGetThatColor(index)
//not in your options
function goGetThatColor(index){
$.ajax({
method: "POST",
url: "get_post_color.php",
data: { id: index }
})
.done(function( color ) {
$(#background-element).css('background-color', color);
});
}
I'm just going based off of the documentation, the index that's passed in might be an arbitrary ordering or the post id from Wordpress. I'm not sure about that so you might have to grab the post id from an attribute in your dom.
I would like to keep a table hidden at the time of loading. Later I would like to slideDown that table to show when a link is clicked.I write this code to hide that table.
$('.table_div').hide();
I placed that table in a div. Then I hide that div.
My problem is at time of loading first the table display for a moment then the table hide. I would like to prevent this display. Thanks
To prevent that Add Css Property to .table_div
.table_div {
display: none;
}
You can add css to hide it
.table_div {
display: none;
}
after load page just show it
$(document).ready(function(){
$(".table_div").slideDown();
});
Put all jquery statements in between these curly braces:
$(document).ready(function(){}
So that all scripts execute only after document is loaded.
For the starting display, use
.table_div{display:none;}
in the css page. Does it work now?
I need to take a webpage and, when the user either clicks file > print or [cmd + p], duplicate an article (HTML) and place the new article adjacent to the original article. The idea is to show a list online, and then print from the webpage a 2-up paper version that can be cut in half: 2 identical lists, one sheet of paper. I'm using print style sheets for the custom paper layout, and I'm using jquery to duplicate the HTML.
The part that I'm stuck on is how to duplicate right before the user sees the print dialog box. I don't want there to be two identical articles on the webpage by default. I'd also want to remove the duplicate article after printing is done, but that's maybe not as important.
<script>
/* instead of window.onclick, is there an "on print" function? */
window.onclick = function() {
var $newArticle = $('article').clone();
$($newArticle).css({'margin-left':'1.3cm'});
$($newArticle).insertAfter("article");
}
</script>
thanks for any suggestions.
I don't want there to be two identical articles on the webpage by default.
No need for JavaScript! Have the article twice in the page and initially hide one with CSS:
article.copy {
display: none;
}
Then, with another CSS rule, show the article on the print page:
#media print {
article.copy {
display: block;
}
}
DEMO
Mode information on#media and a tutorial. Unfortunately #media doesn't seem to work in IE8 and below.
I've integrated data Tables in my project and its work is fantastic but now since I don't need the number of entries [filter] and so I have removed it by using
display:none
in my style sheet and now what I need is that I don't know how to move the "Add New" button to the place of the entry filter [in the below image]. Any help would be appreciated. Thanks in advance.....
I'm assuming you're using the JQuery DataTables Plugin.
1 - Removing the Length Selector
To remove the number of entries selector, you should configure the DOM elements/positioning accordingly, which avoids adding instead of just hiding some elements. The plugin has an example:
http://www.datatables.net/release-datatables/examples/basic_init/dom.html
The sDom docs:
http://datatables.net/ref#sDom
The first thing you need to do is to remove the "l" from sDom: "lfrtip" (if bJQueryUI is false) or sDom: '<"H"lfr>t<"F"ip>' (if bJQueryUI is true), which means you'd remove the length select widget.
2 - Placing another widget where the Length Selector would be placed
That's about the CSS. I'm assuming your new widget is placed just before the data table. This would allow floats from before:
div.dataTables_wrapper { clear: none; }
The search edit input is a float: right; and the table has a clear: both; by default. So you can make your add button a float: left;, and that should solve your problem.
See the jsfiddle I've done with that.
Now it looks like this after adding
float:left
How do I hide the "html upload" part when flash is enabled in the browser with SWFUpload? I looked the Wordpress source code to see how they're doing. They have a settings parameter to the SWFUpload object that looks like this:
custom_settings : {
degraded_element_id : "html-upload-ui", // id of the element displayed when swfupload is unavailable
swfupload_element_id : "flash-upload-ui" // id of the element displayed when swfupload is available
},
I've put these ID numbers to the div elements. But I have not figured out what I should do more to make it work.
Please help me to just get it working, in any way.
<style type="text/css">#divname { display: none; } </style>
Display hidden makes the element hide, but it still takes up space. Display none makes the element take up no space, but it's still in the HTML code, just that it does nothing, like it's commented out.