i am new to jQuery and not sure how this happening,
but i am already mentioned width in data options still getting width=10000px
<script type="text/javascript">
$('#tt').treegrid({ url:'treegrid3_getdata.php',
animate: true,
idField:'id',
treeField:'name',
columns:[[ {title:'Folder Name',field:'name',width:180},
{field:'description',title:'description',width:100},
{field:'level',title:'Level',width:80},
{field:'created',title:'Created',width:80}
]]
});
</script>
Have you set the option fitColumns for the grid to true somewhere in your code? This would override the width specified for the columns and expand the table to the width of the container.
Disclaimer: I don't seem to have enough reputation to post this as a comment to the original question, or I can't figure how to do so. Apologies.
Related
I'd like to have a div (with class="top") come slide in from top:-300px; to top:40px; with some nice easing. I can't find any examples. Does anyone knows how to do this on load page?
Here's some JavaScript and CSS3:
The JavaScript:
<script>
document.getElementById("slide").style.top="40px";
</script>
And the CSS:
-webkit-transition:all 1s;-ms-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;-webkit-transition:all 1s;
The element that would slide would have to have the id "slide". It would also need top have "position:absolute;top:-300px" in the CSS to make it -300px. You could also add "left:20%;" or something of the sort to the CSS to make it look better. Whatever works with your design.
You should look up about the CSS transition property. It's very nice for special effects. In this case, I made it take 1 second to slide. You could always change it.
This could also be implemented using jQuery, a JavaScript library, (which would take even less code), but I usually prefer regular JavaScript and CSS if I can help it.
Here's a demo of the code I wrote above: jsFiddle.
Oh, and PLEASE mark this question as the answer if it helped you. It will give me privileges and earn me more reputation.
Hope this helped!
My web's important content is at 300 pixels from the top so I want it to open directly at that height giving the user the option to scroll up if they want.
Which is the easier way to achieve this?
I found one alternative. I create an anchor and then make it load directly to it. I didn't want to use anchors but as no one answered me...
<body onload="location.href ='#home'">
<a id="home"></a>
EDIT: Here's what i was looking for!!
<script type="text/javascript">
function Scrolldown() {
window.scroll(0,100);
}
window.onload = Scrolldown;
</script>
I created a script to publish the following html page using Html Service:
<html>
<div id="fixeddiv"></div>
<script>
var div=document.getElementById("fixeddiv");
div.style.position="fixed";
alert(div.style.position);
</script>
</html>
The alert window shows an empty string.
Isn't possible to set a fixed position for a div element?
I just ran into the same thing and the answer appears to be NO. Apparently they're worried fixed divs are a security exposure.
Next thing they'll be wanting to remove the keys from our keyboards too ;-)
I used this to get a 'fixed' effect for a global navbar at the top. It might be of use to you or others.
$(document).ready(function() {
$( window ).scroll(function() {
$( '.fixed' ).css('top', $( this ).scrollTop());
});
});
Note: in GAS the $( window ).scroll() wasn't working for me so I instead created a div block the size of the view port with a scroll bar overflow and used that instead.
I've found another 'solution' for this:
I created 2 divs, fixedHeader and content
<div id="fixedHeader"></div>
<div id="content"></div>
The css code, where we set #fixedHeader to be always on top and for #content we set a padding-top matching the height of #fixedHeader so the elements won't get under #fixedHeader:
#fixedHeader {position:absolute; top:0;}
#content {padding-top:50px; overflow:auto;}
And finally javascript to make #contet match the height of the viewport when document loads:
$(function(){ $("#content").css('height',window.innerHeight); }
Hope it helps
It appears that position:fixed is not allowed due to security concerns: http://code.google.com/p/google-apps-script-issues/issues/detail?id=1840
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
I have a sharepoint list and the phone number field is in the format ###-###-#### and it ends up going to 2 lines. How can I set a width on that particular column? Do I need to do it from sharepoint designer?
there is no way to do this out of the box. Have to use sharepoint designer or jquery. Check out this msdn post
http://social.msdn.microsoft.com/Forums/en-US/sharepointcustomization/thread/f99303bb-6a95-4c05-951c-ff0185c4e864
This can be done via the xsltlistform webpart. drop it into the page in sharepoint and connect it to your list and move the columns around as needed.
Note: this is not the same as modifying the view, which as titan said is not available out of the box without opening the view page in sharepoint designer and modifying the xslt directly.
Best way is to use Alt+0160 Hard Space. Just type it once and copy this "Space" and paste as many you want!! Bingo!!
In SharePoint Designer 2010 I was able to modify column widths by opening the view I wanted to adjust, then lengthening the with of the column Title Field simply by dragging the field's box bigger.
This worked for what I was doing, but I noticed with some columns it affected others, I guess because they shared the same styling? I don't know enough to be certain.
<style>
/* new class created */
.ms-longg
{
width:500px
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//removed existing class
$('input[title^="State"]').removeClass('ms-long');
//add New class for that textbox
$('input[title^="State"]').addClass('ms-longg');
});
</script>
Click here see more details
you can also use the below script to expand the width of specific column. Just edit the page then add script editor web part and add below code.
note: the column name is the internal name.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">/script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
var el = document.getElementsByName("<internal column name>");
el[0].style.width ="<size>";
});
</script>