I have bumped into this quite a few times. Every time I have it has turned out to be a path problem, always check this first.
If you can, stick a breakpoint on the save call and look at the path your are saving, follow the exact path and check it precisely using windows explorer.
Always start a web site with a CSS reset. This sets all the elements CSS properties and avoids the inconsistency of various browsers default CSS properties for elements. Giving you a consistent starting point for building a cross browser compatible web site.
There are many to be found but generally very similar. Here is the one I use and has served its purpose perfectly well.
/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* End CSS Reset */
This plugin turns a container with sub containers into a scrolling window with previous and next buttons, the content can be anything and the heights of these can vary as needed. The plugin is very small (minified version just over 500 bytes).
A demo of this being used on a live site I developed can be found here where it is used to scroll the news content: http://waterwell.co.uk/news.aspx
To use it simply create a container element and a previous and next button (these can be any html elements), then apply this plugin to the container element specifiying the height you want the container to be.
All sub containers will become scrollable elements which can be accessed via the previous and next buttons.
A demo can be found here: http://simon.tpdserver2.co.uk/jquery/vscroll/demo/
How-to:
1) Basic example html markup, 2 buttons and a container with sub containers:
<input type=”button” value=”Prev” id=”prevButton” />
<input type=”button” value=”Next” id=”nextButton” /><div style=”height:400px” id=”demo2″>
<div>some content</div>
<div>some more content</div>
<div>some other content</div>
<div>
2) Include the jQuery files (I use Google CDN for jQuery) and apply the plugin to the container:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>
<script src="js/jquery.vscroll-1.2.0.min.js" type="text/javascript"></script><script type=”text/javascript”>
$().ready(function () {
$(‘#demo2’).vScroll({ speed: 500, height: 300, upID: “#prevButton-demo2”, downID: “#nextButton-demo2”, cycle: true });
});</script>
Plugin can be downloaded from here:
http://plugins.jquery.com/content/vscroll-120
Plugin options:
speed – how fast the scroll animation is (default = 500)
height – height of the container element (you must include this from V1.2.0 onwards otherwise the container will default to 300px)
upID – id of the element used to trigger the up animation (default = #up-arrow)
downID – id of the element used to trigger the down animation (default = #bottom-arrow)
cycle – Whether or not to scroll back to the first item if the next button is clicked on the last item (default = true)
This plugin provides a simple to use popup textarea extension for textboxes.
If you have ever come accross the situation where you have a bunch of text boxes that you want the user to fill in, for example in the back admin system of a site, but it is annoying for the user to try and type in text in a small box and you do not want to launch a full blow text editor, this plugin will automatically popup a textarea for text input.
A perfect addition for backend admin systems. Simple, effective and fast.
This plugin can be applied to a textbox or textarea (see notes on textarea usage). Basically if the user clicks on a textbox which has popBox applied to it, a nice modal popup box will appear with the textarea selected for the user to enter their text, if they click outside of the area or on the ‘done’ button it will dissapear and the text will be inserted into the initiating textbox.
The other cool thing is the user can tab into a textbox, the popup will appear with the cursor set inside it, they can then continue to type, hit tab and be taken back out and continue to tab to the next textbox – similiar to tabbing through a spreadsheet.
All the styling is done in CSS, no images, the button is also CSS. Rounded corners will degrade properly in IE. There is no animation or clever tricks as I wanted it to be fast, I have a page with rows of textboxes that this is applied to and it needs to be quick and responsive. Future additions may include animation, styling options etc. It comes with CSS which can be modified as you like.
Hitting the ‘Escape Key’ will back out any changes you make and cancel the operation.
jQuery plugin page: http://plugins.jquery.com/project/popBox
A demo can be found here: http://simon.tpdserver2.co.uk/jquery/popBox/demo/
Usage is very simple.
1. Include jQuery (I use the Google CDN)
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
2. Inlcude the popBox.js or the minified version popbox.min.js and the popbox.css files
<script src=”js/popBox/popBox1.2.1.min.js” type=”text/javascript”></script>
<link href=”js/popBox/popBox1.2.1.css” rel=”stylesheet” type=”text/css” />
3. Apply to your textbox:
$(document).ready(function () {
$(‘#input-box’).popBox();
});
Thats it! simple.
Optional arguments are:
height: popup textarea height
width: popup textarea width
newlineString: the newline string to use when copying the text back to the original textbox
Note: As the html textbox (input type=”text”) does not support newline chars this plugin will replace newlines with ‹br›. This can be changed using the options, for example if you want to apply this plugin to an existing textarea (which is small) you can set newlineString to be ‘\n’ and it will be preserved.
Options examples:
$(‘#input-box’).popBox({width:500});
$(‘#input-box’).popBox({width:500, newlineString: “\n” });
Please note this is a very first release based on my own basic needs. If it proves popular it can easily be expanded with options and settings.
I had the need for a number of divs on a page that would show a certain amount of content, then grow (animate) with a ‘show more’ button, and shrink back with a ‘show less’ button.
There were solutions out there, but the ones I found were based on the number of characters in the text and had issues with certain content inside them such as images or links etc.
I just wanted to use pixel height values. So I wrote a jQuery plugin to do so, you can find it here. It is tiny, the compressed version just 920 bytes (not even 1K!).
The plugin will crop the container div to the initial height value and add a link to the bottom to expand it. When clicked the container wil expand to the actual height of the container and provide a click link to collapse it. The expand and collapse action are animated.
Cropped DIV
Expanded DIV
Very simple to use. Just call the function on the jQuery selector for a containing div element and pass its initial size, then for each div container set the rel value of the size you want it to expand to.
If you want divs with different starting heights, just give them different class names and apply the divgrow function for each class with different starting heights.
It is used on this live site – http://www.wasdell.co.uk/services.aspx
and here http://www.itzyogi.com/therapies.aspx
Download the latest release from the jQuery Plugin Page
Usage:
1) Inlcude the JS file into your page (after jQuery – requires 1.4.2+):
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>
<script src=”JS/jquery.divgrow.min.js” type=”text/javascript”></script>
2) Apply the divgrow function to any div element(s) you want to grow using the usual jQuery selector syntax. initialHeight sets the height of the containers before they are expanded. Here any div of class “more-block” will have this feature applied and the starting height is 147. Use different classes and apply seperatly if you need different starting heights.
$().ready(function() {
$(‘div.more-block’).divgrow({ initialHeight: 147 });
});
3) Create your container with a class or id reference that the plugin was bound to (i.e. “more-block” in this example)
<div class=”more-block”>
<h2>Corns and Callus (Hyperkeratosis)</h2>
<p>
These occur in areas of the foot that are experiencing excess pressure and/or friction. The body seeks to defend itself by producing extra layers of skin as a form of protection. However as the process continues the accumulation of extra skin exceeds that which is lost naturally so the skin in these vulnerable areas builds up and becomes compacted as the original cause of the process continues. The protective mechanism becomes the problem if left untreated and the cause not addressed.<br />
Callus denotes a general area of hard dead skin and a corn is a much more concentrated collection which often goes deep rather than wide. Corns can produce pain completely out of proportion to their size often because of impingement upon nerves or sometimes infection.<br />
Treatment of the symptoms is the first step to stopping the pain and discomfort and this is usually addressed without much discomfort by a foot health professional. Treating the cause can be as simple as discarding an ill fitting pair of shoes or may entail a more detailed assessment of individual foot function.<br />
Callus is not always caused by mechanical factors but can be a symptom of a systemic disease such as Psoriasis.<br />
There are some useful devices to assist in protecting vulnerable areas from corns and callus – see our recommended <a href=”Products.aspx”>products page</a>.
</p>
</div>
—————————————————–
Thats it.
Optional arguments:
initialHeight: 100 – (default)
moreText: “+ Show More” – (default)
lessText: “- Show Less” – (default)
showBrackets: true – (default)
e.g.
$(‘div.more-block’).divgrow({ initialHeight: 147, moreText: “give me more”, lessText: “thats enough”, showBrackets: false });
The zip file includes a how to instruction on use.
I had a bizzare problem. From a completely unrelated aspx page I was finding myself jumping into the page_load of my default.aspx page.
Turns out this was because I had an ‘<asp:image’ tag with the image url not set (rendered as src=””).
Tricky problem to identify.
I had a page which uses codebehind Page_Load and (!IsPostBack) to setup all the controls on the page depending on what was being loaded. This worked fine, apart from when I refreshed the page (F5) in Firefox 3.5 – IE was okay.
Firefox seems to retain all the input selections – eventhough from the code behind I was ressetting them.
The only way I found to resolve this was to call a reset on the form (actually in my Master page) in the document ready function of JQuery which solves the problem.
$(document).ready(function() {
$(“#<%= (form1.ClientID) %>”)[0].reset();
});
After using ASP.Net Ajax components such as an updatepanel on your page you may see that some of your Javascript/JQuery functions do not seem to work once a partial page update has been done. This is because thanks to the partial page update those items contained within it have been reloaded but no functions have been rebound to them.
I have used 2 solutions for this, one is JQuery Live Query. You can use this to simply rebind to any item reloaded for example I used this to rebind the elements I had previously set for Slimbox and set the rel=lightbox attribute for them:
$(“a[rel^=’lightbox’]”).livequery(function() {
$(this).slimbox();
});
This finds any anchor element with the rel=”lightbox” tag and binds the slimbox function.
Alternativly to this you can replace the
‘$(document).ready(function() {
// do stuff
});
with
function pageLoad(sender, args)
{
// do stuffif (args.get_isPartialLoad())
{
//Specific code for partial postbacks can go in here.
}
}
But be aware this can only be used once on the document, if you need to do this in multiple places use:
Sys.Application.add_load(function() {
// do stuff
});
HibboBlog 
Recent Comments