I'm trying to on page load get my html table to load at a specific column, I wouldn't even know where to start with this.
I've uploaded it here to see a demo: http://jsfiddle.net/3EFqD/
I've tried this in my body tag:
onload=' location.href="#right_column" '
and added id='right_column' to the correct td but that didn't work
Trying to get it to load on the cell that is labeled "this one"
Here's a fiddle incorporating the width of the header: Fiddle
Again, a jquery solution, essentially the same as above but needs to subtract the header width to hit the right position. See the fiddle for where the id's are added
$(document).ready(function(){
var hw = $('#headerWidth').width();
var f = $('#scrollToMe').position().left - hw;
$('.inner').scrollLeft(f);
})
If Im right in thinking you want a specific column to be scrolled to on page load, the easiest way would be to use a library, e.g. jQuery:
$('.inner').stop().animate({
scrollLeft: $('#right_column').offset().left
}, 1000);
Demo Fiddle
You're trying to make it work in a similar way to using anchors- however this isnt possible for horizontally aligned content.
May be if you are trying to load some html code(like table) in the mentioned td(This one), as you mentioned add id=right_column to this td and then use the below jquery logic -
var newtable = '<table class="newtable">New table, this may be from ajax call also</table>'
$('#right_column').html(newtable);
Related
I have a code that is formatted like this:
<div id = "test" class = "invisible">
<!--I want to hide this!-->
%%GLOBAL_ProductDescription%%
</div>
<script type = "text/javascript">
//Takes the info within the div above and manipulates some information
var desc = $('#test').html();
//Put edits to new_desc
$(document).ready(function() {
document.getElementById("info").innerHTML = new_desc;
});
</script>
<div class = "stuff" id = "product">
<a id = "info"><!--receive info from script here--></a>
</div>
The code works properly in terms of the last div displaying the information and formatting that I want to have. The problem now is: the page is displaying the original information plus the edited one in the bottom. Whenever I try to hide the first div, everything else goes away!
I would manipulate the data by just assigning the contents of the global variable into my Javascript variable but that it sort of out of the picture right now. Can anybody tell me what I am doing wrong and why hiding this one div completely gets rid of all the other information in the page?
Note: When I type some gibberish at the beginning of the code, it shows even though there's a display:none. If I put it anywhere below that line, it does not show either.
The content changes per product. There may have been some divs in there that weren't closed properly and that's why it's pushing the latter part of the code somewhere inside %%GLOBAL_ProductDesc%%. I did not know it could behave like that so I overlooked that part in my check.
I can't really go ahead and bulk edit about 4000 products such that the HTML in there is correct so I inserted 4 s before the start of the script and everything looks good. I know this may not be the most robust answer to the question but it works for now. Thanks for all the help!
I don't know what this is called, and I've messed around a lot with the headerTemplate but can't figure out how to produce this look. I need the second row of column names to 'act normally' in terms of sorting and filtering, but everything I try breaks that. I have no idea if headerTemplate is even the right way to do this? Is there a name for this kind of grouping? My research is turning up a whole lot of nothing, so I suspect I'm using the wrong keywords. What is this layout called?
Note: for security reasons I can't post a code dump (super nervous about the image too). If a specific thing is needed, please let me know and I'll try to anonymize it. But, mostly I'm just looking for suggestions to try other than playing with the headerTemplate.
This is now natively supported by the Kendo grid. Here's an example.
You won't be able to achieve multirow Group headers via Kendo grid on MVC, although there were discussion to add the feature in the current version(2014Q2) of Kendo. See below link for more reference:
Pivot Grid StackOverflow Reference
However, you can achieve the multirow header option via jquery on databound event of the grid. But it is a workaround rather than a perfect soultion.
Please see the js function for databound event to add multirow header:
function onDataBound(arg) {
var myElem = document.getElementById('trParentHeader'); //Check if Parent Header Group exist
if (myElem == null){ // if parent Header doesnot exist then add the Parent Header
$("#grid").find("th.k-header").parent().before("<tr id='trParentHeader'> <th colspan='2' class='k-header'><strong>Products + Unit Price</strong></th> <th scope='col' class='k-header'><strong>Single Units in Stock</strong></th></tr>");
}
}
For more understanding and a working example please see below Sample:
MultiRow-Column Header Sample
Please let me know if you if you have any queries.
I've recently created a website with a menu-bar to the left. My next step is to update the right side of the page with content based on what option you choose on the in the menu. I know you can use iframe but I was wondering if there is an alternative to it, like a more dynamic one!
Most of the menu options are input-forms, I've read about ajax-calls to fill a div but couldn't find a good tutorial on how to achieve it.
edit:
Here's a sketch http://imageshack.us/photo/my-images/16/smlithis.png/
Consider using JQuery. Handling Ajax requests is so much easier than using ordinary JS.
Documentation for the ajax function: http://api.jquery.com/jQuery.ajax/
Using the success callback (the function that is executed upon success) you can fill in your div:
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
Instead of .result, point the selector to your main div. The .html() function fills your div with data, which is the data returned from the ajax request.
Edit: It's 2018. Use the Fetch API.
You can use jQuery
This is how your menu button will look like:
<a href='#' onclick='return fillDiv(1)'>GoTo1</a>
<script>
function fillDiv(pageNum){
$("#id_of_div_to_load_to").load("some_page.php",{ 'pahe_num': pageNum } );
return false;
}
</script>
It is just one of many ways to do it.
Ajax can get data from a server but it cannot fill anything. Ajax is just javascript used to communicate with the server. Javascript can take that data and insert data and create elements to fill that div.
You mean something like this:
How to update div when on select change in jquery
If you actually want to get the data dynamically from another source that would be an entire different matter.
The reason I want to use the together is that I want to hide the content like display: none does, without leaving any whitespace as visibility: hidden does.
At the same time I want the hidden content not to be copied when the user copies the entire table from the webpage, not because it is sensitive information but because the user hid the field and therefore doesn't want it copied. visibility: hidden doesn't copy but display: none does, so I have quite a dilemma.
Anyone know a solution?
Edit:
What I ended up doing was just what was suggested, save the information as Javascript (as it is not sensitive information anyways) and create/remove dynamically with Javascript.
I do not think giving the element visibility: hidden prevents the user copying the information in the table, although this may be browser specific behavior. Have a look at the test I've set up: http://jsfiddle.net/a9JhV/
The results from Firefox 3.6.8 on Windows 7 is
Copy ME! Don't copy me :( Copy ME! Copy ME!
Copy ME! Don't copy me :( Copy ME! Copy ME!
Which doesn't work as expected.
I've cooked up some code, it took the quite a bit work of cook up... have a look here: http://jsfiddle.net/a9JhV/7/
It uses jQuery to hide and show the table columns - actually removes them from the DOM, not just play around with their visibility and whatnot. Whee!
Why not remove the node from the page? You could accomplish this by using:
<script type = 'text/javascript' language = 'JavaScript'>
document.getElementById('yourDivId').innerHTML = '';
//OR
document.removeChild(getElementById('yourDivId')); //(I think this is right...document might need to be replaced by the div's parent)
</script>
You should remove the "hidden" DOM object using javascript and then recreate it again if user wants it back. Data from deleted records can be stored in session storage or hidden inputs for example.
If you want elements HIDDEN from the source, place them in a separate text file and load it using an ajax-like call... this will prevent the html from being in the source.
If you place a clear image OVER the content they also will not be able to highlight it easily (and by using javascript you can likely disable their ability to do a ctrl+a)
hope that helps!
It's a good idea to create an object to represent the table:
var myTable = function(tableName){
// If you want to assign columns dynamically you could create this.addColumn();
this.Columns = new Array(
new Array("row1","row2","row3","row4"),
new Array("row1","row2","row3","row4")
);
this.reBuild = function(){
for (col in this.Columns){
for(row in this.Columns[col]){
// put the cell in the table
}
}
};
};
I didn't test this code, it should just illustrate the gist of storing and building a table.
I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );