I am working on a phonegap side project and I have a need to display a list of messages that users will be entering into a system and I couldn’t really find a good example online so I wrote one using pure CSS and Javascript. All you need to do now is hook it into a templating library and you got what you need, enjoy!!
http://jsfiddle.net/eddie_d_2000/WNyPt/embedded/result/
You may already know this, but I thought I would share anyways. When you are writing asp.net webpages and you are loading the data dynamically through the razor syntax, it isn’t enough to just wrap your logic inside a <div> that has a class applied to it, you need to assign the css class within in the razor syntax. The snippet below is an example of how you can assign a css class within the razor syntax:
@Html.CheckBoxFor(x => data.Selected, new { @class = "checkbox" })
The thing to focus on is the end of the snippet, the “, new { @class = “checkbox” }” in that example I am setting the class name of the checkbox to a css class I have that styles the checkbox the way I want it to. I couldn’t really locate an extensive list of these HTMLAttributes, so if you know of anything, please send me a link and I will update this article, thanks!!
If you surf around on the web much, I am sure you have come across a JSFiddle, or basically a code example online, here is an example of one I have been working on, http://jsfiddle.net/eddie_d_2000/Wwjz9/. I have been putting off using it for the longest time but last night I sat down and created an account and I can’t believe I didn’t use this tool long ago. You can pretty much do anything you want if you want to mock up web UI’s. If you need js libraries, just include them on the left using the “Manage Resources” link, you just reference the js library you want and it will include it and start using it with your code. This is a great tool to mock stuff up and send to co-workers or just place on blogs like this one. It has all the popular frameworks already included, all you have to do is check them off and it will start using em. It look like it will even simulate calls to the server, which I have yet to use but I will probably be testing that out in the future. So go ahead and create an account, its free and apparently accounts are limited, so you may want to hurry up, happy coding!!
I have been recently looking at ways to speed up performance on my website and I came across GZip compression, which is a great way to compress your javascript and css files before they come down to your system. A few of the benefits of this method are:
You can control what files are compressed.
Bots / SE spiders will crawl your pages faster than before
Decrease Bandwidth
Of course there is the drawback of the performance hit your server will take by running the compression on your files as they are being served, so you have to weight that into consideration as well. I have put below the code you have to add to your web.config file to get it going with asp.net, it goes in the
<httpCompression directory="%SystemDrive%inetpubtempIIS Temporary Compressed Files">
<scheme name="gzip" dll="%Windir%system32inetsrvgzip.dll"/>
<dynamicTypes>
<add mimeType="text/*" enabled="true"/>
<add mimeType="message/*" enabled="true"/>
<add mimeType="application/javascript" enabled="true"/>
<add mimeType="*/*" enabled="false"/>
</dynamicTypes>
<staticTypes>
<add mimeType="text/*" enabled="true"/>
<add mimeType="message/*" enabled="true"/>
<add mimeType="application/javascript" enabled="true"/>
<add mimeType="*/*" enabled="false"/>
</staticTypes>
</httpCompression>
<urlCompression doStaticCompression="true" doDynamicCompression="true" />
If you are a web developer and you write a lot of CSS, which chances are you do, then you need to be writing it using LESS. The website to download LESS is here: http://lesscss.org/ and using it is really simple, just include it in your site like so:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
And the Less Compiler will do the rest for you. When you have all of that in place, you can starting writing your LESS CSS.
Less Files have a .less extension and you just include them in the same directory that you have your css files in. The beauty of using LESS is that you can mix it with standard CSS, it will recognize both, so you can refactor your CSS alongside the LESS syntax, it doesn’t care!!
You can read all about it over on the link I have provided but basically you can create Variables, Mixins, Nested Rules, and even have operations on things like color and height and widths, basically a simple programming language for CSS, pretty sweet huh?
If you need a starting point to get going with LESS, I recommend going over and downloading the ELEMENTS.less file here: http://lesselements.com/ It is basically a generified LESS file that takes a lot of the standard things you would do in LESS and puts them into a file to save you time. I am also linking here my edited version of my elements file where I added a few more things if you would like something a little more robust: https://github.com/eddie1459/elements
IF you are struggling with getting your html formatted correctly in asp.net like I am here is a little tip I found to set your html based on css classes you have in your css file.
@Html.CheckBoxFor(x => data.Selected, new { @class = "checkbox" })
I tried just wrapping the asp syntax in a div and that didn’t give me the results that I was looking for and besides, this syntax is a lot cleaner. There are other HTML options in the razor syntax but I couldn’t locate a good list anywhere, if you know of one, don’t hesitate to leave me a message and I will get this post updated with that information, thanks.
Welcome to my little repository of information on the web. A little about me, I am a software developer working on the agriculture field particularly on the .Net stack. I created this blog as a way to share my thoughts and ideas with others and to hopefully further my knowledge in my career.
If you have any topics you would like me to write about, I urge you to drop me a message, I love to stay on top of anything and everything I can in this ever-changing field. I welcome any thoughts/comments you may have with any topics I present here, we are all in this together.
Established in 2008, the Rural Technology Fund (RTF) seeks to reduce the digital divide between rural communities and their more urban and suburban counterparts. This is done through targeted scholarship programs, community involvement, and the general promotion and advocacy of technology in rural areas. This is a great cause that I am currently involved in, head over to the site and check it out, we are making great things happen!!
If you like my content, you can donate any amount to help keep this effort going, thanks!!
You are currently browsing the archives for the CSS category.
© 2023 I haz teh codez · Proudly powered by WordPress & Green Park 2 by Cordobo.
Valid XHTML 1.0 Transitional | Valid CSS 3
