Actually i am looking for html table having scrolling option and also options for minimizing and maximizing the table(and better table design). I have spend hours trying to play around with this but have got nowhere.can u forward me ready code on net which can solve the problem?
I shall be much oblized to u?
jsfiddle: http://jsfiddle.net/LkCaq/1/
Are you looking for something like this?
Scrolling tables:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Collapsible tables:
http://www.netmagazine.com/tutorials/how-create-collapsible-css-tables
I would recommend that you put your table inside a div.
Try this & let me know...
<span onlcick="ShowHide('tblContainer')">Show/Hide</span>
<div id="tblContainer" style="clear:both;max-height:300px;overflow-y:scroll;">
<table....>
<define your rows and columns...>
</table>
</div>
Put this jquery function on the page: ( assuming you are using jquery)
function ShowHide(id) { $("#" + id).toggle(); }
Related
so I have a long case study, so many images it takes forever to load. So one of the steps I'm taking is hiding all images in a section that are more than 3. I'm doing this in a simple way with show and hide jQuery, and manually adding the target ID to the div I want to show. My question I'm trying to figure out is how I can use this code to target every section, instead of one, since I can only use the target ID once. I don't want to simple copy and paste the code and change the target DIV name, as that is going to be very redundant and certainly the most amateur approach. My pen is located here:
<button class="Show">Show</button>
<button class="Hide">Hide</button>
<button class="toggle">Show & Hide</button>
<div id="target"></div>
body {padding:30px;}
#target { display:none;}
.Hide{ display:none;}
$('.Show').click(function() {
$('#target').show(200);
$('.Show').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('#target').hide(500);
$('.Show').show(0);
$('.Hide').hide(0);
});
$('.toggle').click(function() {
$('#target').toggle('slow');
});
Thank you in advance!
I don't understand what you mean and what you want to do, but you can use it this way instead of a few different functions.
As far as I understand you want to use css classes as well?
.hide{display:none}
$("button").click(function() {
$("button").removeClass("hide");
$(this).addClass("hide")
})
I tried to be helpful in a very simple way for you, I hope it will be useful.
Here is the code:
a:4:{i:2;a:3:{s:5:"title";s:78:"[:lt]naujas numeris[:en]
latest publication";s:4:"text";s:212:"<a
href="http://www.example.com/p/post-post/" target="_blank"><img
src="http://www.example.com/wp-content/uploads/2015/03/200x300.jpg"
height="254" width="165"></a>";s:6:"filter";b:0;}i:3;a:3:{s:5:"title";
s:78:"[:lt]Naujausias numeris[:en]latest
publication";s:4:"text";s:212:"<a href="http://www.example/post/"
target="_blank"><img src="http://www.example.jpg" height="254" width="165"></a>";s:6:"filter";
b:0;}i:4;a:3:{s:5:"title";s:68:"[:lt]ATSARGIAI:
[:en]CAREFUL:";s:4:"text";s:809:"<div id="widgettext">
/div>
<table>
TABLE
</table>
<div id="tarpelis"></div>
<div id="rudalinija"></div>
<div id="tarpelis"></div>
<div id="tarpelis"></div>";s:6:"filter";b:0;}s:12:"_multiwidget";i:1;}
This piece of code is a record in a website wp_options DB table (optopn_name: widget_text). I had to change one element of the code (TABLE), but right after that some problems occured (like previous table dissapeared). I fixed back the code, but looks like whenever i change name of the person in this table it dissapears on the website.
<tr>
<td><!--:lt-->Name Surname<!--:--><!--:ru-->Name Surname<!--:--></td>
</tr>
Do you have an idea why could this happen?
Also that code a:4:{i:2... is a bit troubling me, can you explain me what that does? It may be the case.
This is a compressed, minimized version of the original javascript or markup or other code that had the names of functions and variables changed to make things as small as possible. You can spend time looking through it to find it all but it can take a while.
Somehow missed that, but solution was quite easy. Turns out the only way to change it was to go to appearance(widgets) where i found this table. Eventhrough it is still strange that changing data in the database (where is stored that post with table) resulting to invalid post. Still thank you for your suggestions :)
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 have a page (http://www.gardensandhomesdirect.co.uk/newhomepage)
I want to make the center column (#content-column) 930px for this page only, which will eventually become the homepage.
The CMS used is NetSuite, and is notoriously difficult to work with.
What is the best way to do this? Is it possible with just CSS/HTML commands or JavaScript?
Since it's a CMS you probably cannot add markup easily so I'm thinking some jQuery would be a simple solution here...
$(function () {
var path = location.pathname.substring(1);
if (path) {
var regex = new RegExp('newhomepage$', 'gi');
if (regex.test(path)) $('#content-column').addClass('yourClass');
}
});
This should add "yourClass" to the element just on that page.
Then you can add to your external CSS...
.yourClass {
width: 930px !important;
}
I feel your pain
I have used Netsuite extensively and found )after many hours of hair pulling and expletives) that the best solution (for us) has been to create the home page and any unique landing pages as Hard coded Hosted pages (hosted on Netsuite) and reserve Netsuite's CMS system for item pages where you need the add to cart functionality.
Take it from me in the long run it'll save you hours of frustration :-)
Of course you can use Netsuite tags all over the place as long as you host the pages in your "site" folder
I have no experience with Netsuite so please take this as is..
I would try to add a custom style tag to the document like this:
<style>
#content-column{
width:930px !important;
}
</style>
If you only have access to the HTML of that page, then put an inline style attribute in the center column's HTML. Example:
<div id="content-column" style="width: 930px;">
How can show closeable in the top of the page like stackoverflow new answers.
im using asp.net
It's really pretty simple - there's a div, with a control in it (an anchor I imagine) with a click event bound to it which removes the parent item from the DOM. Something like this
<!-- html -->
<div id="warning"><a href="#" class='close'>[X]</a></div>
And then some event goodness:
$(document).ready(function() {
$('.close').bind('click', function(e) {
$(this).parent.remove();
});
});
and you're pretty much done. Add salt and CSS to taste.
Do you mean the notification bar? If so, there is a nice demo and code snippet here.
http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/
Stackoverflow uses Javascript with the JQuery library to create this.
Here are a few jQuery imlpementations of the effect you looking for:
Slide Toggle
Slide Down
Hide
Queue
You will have to build on these.