I was looking all over the place for some javascript code to clip images. The answer was right under my nose. What I needed was already built into HTML.
HTML DOM clip Property
The clip property sets the shape of an element.
What happens if an image is larger than the element it goes inside? - The "clip" property lets you specify the dimensions of an element that should be visible, and the element is clipped into this shape, and displayed.
Object.style.clip=rect(top,right,bottom,left)auto
rect(top,right,bottom,left) - Sets the shape of the element
auto - The browser sets the shape of the element
More... HTML DOM clip Property
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Wednesday, December 3, 2008
Tuesday, October 28, 2008
ASP.NET: How to Integrate Both Google Checkout and PayPal In 3 Steps
Trying to get Google Checkout and PayPal to work with a custom .NET site or solution has been a problem for as long as they’ve been around. If you don’t know what you’re doing, it can be a daunting task, and sometimes even if you do know what you’re doing! Well, I am going to take the guesswork out of this chore once and for all, as I have recently discovered the ultimate way to integrate these payment gateways into your website.
The Solution
In their documentation, PayPal and Google Checkout both mention that you must put their code into your site exactly as they have it, using the HTML forms they way they have structured them. This is not true. There are only a few bits of information that are required, and so long as they are present in an acceptable fashion, your pass-off to these gateways will work smoothly and flawlessly.
1. Get rid of your form tags.
2. Create image buttons for Google Checkout and PayPal
3. Create your hidden inputs to transfer information to PayPal and Google Checkout
4. BONUS: Hook up Google Analytics.
Complete article: ASP.NET: How to Integrate Both Google Checkout and PayPal In 3 Steps
The Solution
In their documentation, PayPal and Google Checkout both mention that you must put their code into your site exactly as they have it, using the HTML forms they way they have structured them. This is not true. There are only a few bits of information that are required, and so long as they are present in an acceptable fashion, your pass-off to these gateways will work smoothly and flawlessly.
1. Get rid of your form tags.
2. Create image buttons for Google Checkout and PayPal
3. Create your hidden inputs to transfer information to PayPal and Google Checkout
4. BONUS: Hook up Google Analytics.
Complete article: ASP.NET: How to Integrate Both Google Checkout and PayPal In 3 Steps
Thursday, September 25, 2008
Creating a Master Site Template in Dreamweaver
by Dian Chapman, MVP, MOS
In this article, I'll provide you with a bunch of cheesy sample images for a pretend web page template. But I'll also provide you with concrete, albeit basic, information regarding how to create a master template for a web site using Dreamweaver 2004 MX.
Creating a template in Dreamweaver is very similar to creating a template in Microsoft Word or other programs. You need to design and/or add all the static elements that will become part of the template...items that you want to appear on every subsequent page that will be created from this template.
The template must also be saved as a template and saved into a Template directory within the project site files. Then, whenever you need to create a new page for your web site, you just create the new page from the master template designated to that site. Furthermore, you'll save lots of time modifying your site, because if you add information to the template, it will be added to all the pages of your site. This makes updating or adding links quite simple. It also helps to ensure consistency...a sure sign of a professional site. And it also helps avoid errors because you won't forget to update one page, since all pages are tied to the template update.
There are many ways to layout a template, but one of the most common ways is to use a Layout Table. You can think of it as adding a main table to the page, and then drawing out cells within that table. These cells become your content areas.
To start laying out your framework, you need to move into the Layout Mode. Click View > Table Mode > Layout Mode, as shown below.
More...
http://pubs.logicalexpressions.com/pub0009/LPMArticle.asp?ID=524
In this article, I'll provide you with a bunch of cheesy sample images for a pretend web page template. But I'll also provide you with concrete, albeit basic, information regarding how to create a master template for a web site using Dreamweaver 2004 MX.
Creating a template in Dreamweaver is very similar to creating a template in Microsoft Word or other programs. You need to design and/or add all the static elements that will become part of the template...items that you want to appear on every subsequent page that will be created from this template.
The template must also be saved as a template and saved into a Template directory within the project site files. Then, whenever you need to create a new page for your web site, you just create the new page from the master template designated to that site. Furthermore, you'll save lots of time modifying your site, because if you add information to the template, it will be added to all the pages of your site. This makes updating or adding links quite simple. It also helps to ensure consistency...a sure sign of a professional site. And it also helps avoid errors because you won't forget to update one page, since all pages are tied to the template update.
There are many ways to layout a template, but one of the most common ways is to use a Layout Table. You can think of it as adding a main table to the page, and then drawing out cells within that table. These cells become your content areas.
To start laying out your framework, you need to move into the Layout Mode. Click View > Table Mode > Layout Mode, as shown below.
More...
http://pubs.logicalexpressions.com/pub0009/LPMArticle.asp?ID=524
Dreamweaver templates
About creating Dreamweaver templates
You can create a template from an existing document (such as an HTML, Macromedia ColdFusion, or Microsoft Active Server Pages document) or you can create a template from a new document.
After you create a template, you can insert template regions, and set template preferences for code color and template region highlight color.
Note: Templates in Adobe Dreamweaver differ from templates in some other Adobe Creative Suite products in that page sections of Dreamweaver templates are fixed (or uneditable) by default.
For a tutorial on creating templates, see www.adobe.com/go/vid0157.
For a tutorial on using templates, see www.adobe.com/go/vid0158.
About editing and updating templates
When you make changes to and save a template, all the documents based on the template are updated. You can also manually update a template-based document or the entire site if necessary.
Note: To edit a template for a Contribute site, you must use Dreamweaver; you cannot edit templates in Contribute.
Use the Templates category of the Assets panel to manage existing templates, including renaming template files and deleting template files.
You can perform the following template management tasks with the Assets panel:
Create a template
Edit and update templates
Apply or remove a template from an existing document
Dreamweaver checks template syntax when you save a template but it’s a good idea to manually check the template syntax while you’re editing a template.
Wednesday, September 10, 2008
Opening New Browser Windows
Like most "annoying Web tricks" (such as frames and auto-refreshing pages), there are a few occasions where there's a reasonable use for opening up additional browser windows, such as in letting users bring up reference information to help them in filling out an online form (without the browser leaving the form and possibly losing the data the user has partially entered). For those occasions, here's how to do a new-window link. First, a simple targetted link that opens a new browser window (usually sized the same as the current one):
A HREF="link.html" TARGET="_blank"
Note that the proper target is _blank, in all lower case. There are many mistaken impressions among Web authors of what the correct target is, aided and abetted by the fact that the popular browsers do in fact open up a new window when given any unrecognized target name, but the proper target according to the formal HTML specs is _blank (with an underscore as its first character).
More...
http://webtips.dan.info/new-window.html
A HREF="link.html" TARGET="_blank"
Note that the proper target is _blank, in all lower case. There are many mistaken impressions among Web authors of what the correct target is, aided and abetted by the fact that the popular browsers do in fact open up a new window when given any unrecognized target name, but the proper target according to the formal HTML specs is _blank (with an underscore as its first character).
More...
http://webtips.dan.info/new-window.html
Tuesday, September 9, 2008
Creating time delays in Javascript
Creating time delays
There are two ways of creating time delays with JavaScript. The first is more simple and will simply wait for a specified amount of time before executing a function. The second does the same but will repeatedly execute the function.
Note, most browsers have a minimum delay length of between 25 and 75 ms. If a shorter delay is specified, the actual delay will be the minimum delay length. Even with higher numbers, the delay is never perfect. Most browsers will take slightly longer than the time you ask for, typically just a few miliseconds error. Some may correct their errors over time with interval timers. Also note, setting many timers with short delays on one page will cause the browser to become slow and somewhat unresponsive. Three or four timers is usually the reliable limit.
setTimeout
The first method uses a window method called setTimeout(). The method waits for a specified number of milliseconds then executes the specified code. The code can either be a direct reference to a function, or it can be a string that will be evaluated as if it contained source code.
window.setTimeout(referenceToFunction,timeInMilliseconds);window.setTimeout('runMoreCode()',timeInMilliseconds);Wherever possible, you should use a direct function reference as it is much more efficient. Using a string requires the browser to create a new script environment so it can process the script.
If you create a timeout, the code after the call to setTimeout will continue to run as normal. After the specified delay, the timeout will start a new thread, and the code specified in the call to setTimeout will be run in the new thread, along side any code that is still running in the initial thread. Unlike with many more complex languages, JavaScript does not offer any way to control when those threads sleep, wake, or yield. The JavaScript engine handles all of that, and you must accept that your new thread could be executing at any time next to another thread. Many JavaScript engines will simply allow one thread to complete before allowing the other thread to start. The same applies to events, which run in their own threads, and can be triggered at any time.
More...
http://www.howtocreate.co.uk/tutorials/javascript/timers
There are two ways of creating time delays with JavaScript. The first is more simple and will simply wait for a specified amount of time before executing a function. The second does the same but will repeatedly execute the function.
Note, most browsers have a minimum delay length of between 25 and 75 ms. If a shorter delay is specified, the actual delay will be the minimum delay length. Even with higher numbers, the delay is never perfect. Most browsers will take slightly longer than the time you ask for, typically just a few miliseconds error. Some may correct their errors over time with interval timers. Also note, setting many timers with short delays on one page will cause the browser to become slow and somewhat unresponsive. Three or four timers is usually the reliable limit.
setTimeout
The first method uses a window method called setTimeout(). The method waits for a specified number of milliseconds then executes the specified code. The code can either be a direct reference to a function, or it can be a string that will be evaluated as if it contained source code.
window.setTimeout(referenceToFunction,timeInMilliseconds);window.setTimeout('runMoreCode()',timeInMilliseconds);Wherever possible, you should use a direct function reference as it is much more efficient. Using a string requires the browser to create a new script environment so it can process the script.
If you create a timeout, the code after the call to setTimeout will continue to run as normal. After the specified delay, the timeout will start a new thread, and the code specified in the call to setTimeout will be run in the new thread, along side any code that is still running in the initial thread. Unlike with many more complex languages, JavaScript does not offer any way to control when those threads sleep, wake, or yield. The JavaScript engine handles all of that, and you must accept that your new thread could be executing at any time next to another thread. Many JavaScript engines will simply allow one thread to complete before allowing the other thread to start. The same applies to events, which run in their own threads, and can be triggered at any time.
More...
http://www.howtocreate.co.uk/tutorials/javascript/timers
Monday, September 8, 2008
W3 Scools, HTML, CSS Javascript, XML, Etc..
Full Web Building Tutorials - All Free
The Largest Web Developer Site on the Net.
At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, SQL, Database, Multimedia and WAP.
More...
http://www.w3schools.com/
The Largest Web Developer Site on the Net.
At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, SQL, Database, Multimedia and WAP.
More...
http://www.w3schools.com/
Learning HTML
Anyone can learn HTML.
Don't let the syntax overwhelm you. Web 2.0 tools eliminate the need to learn, memorize, and type 99% of the HTML tags.
Here is a holistic view of referencing and linking that is the core of HTML.
What is a Link?
A link, like this HTML link to it's definition at Wikipedia, becomes an interactive element that users can click to view references. Stretching the definition, it can also bring images and videos onto a page, like the image at the top right.
Whether writing news, commentary, comments, journals, or academic papers - the core of any non-fiction REQUIRES references. Instead of inconvenient footers at the bottom of a page, HTML embeds the link and allow readers to jump to the referenced material. Thus, the link becomes hyper text that enables the reader to interact with a document.
To the reader, the link most often appears as underlined text. They click to activate. It's so simple and intuitive that elementary students use the web everyday.
Creating Links and References
Creating links and references confuse many writers. Whether a link to embed an image, ad frame, or video, hyper text to another page, or other uses of references - many have learned the mechanics for one service without understanding the basic concepts. Variation of steps, phases, and interfaces confuse. Thus, when faced with a new web 2.0 service, fear reigns.
The holistic view is simple. Master these three issues to better understand any web 2.0 service.
Uploading the source file
Copy the URL or address
Paste into your document
Uploading Files to the Internet Cloud
Before you can link or reference, the image, photo, video, or text file must be uploaded to some server on the Internet.
If you're linking another website, skip this step. It's already uploaded.
If you're linking a previously published page, skip this step.
If you're linking an ad service, skip this step.
If you're linking a photo, upload to a server like Yahoo's FlickR, Google's Picasa, or Facebook Photos, or hundreds of public servers.
If you're linking a video, upload to Google's Youtube, Yahoo's FlickR, or any number of 3rd party services.
If you're linking media from public sources, find the item and skip this step.
Web 2.0 services call the network of public servers available, the cloud. Most public servers are free.
Uploading moves a file from your computer to a server. The uploading steps are different for each service, but very similar.
Each uploader may offer services to upload in batch, convert files to different formats and sizes, and otherwise simplify the task.
Copy the File Address to the Clipboard
Every page, image, video, or file on the Internet has an address. Software uses the term URL, URI, address box, domain name, file directory, or other terminology. They all refer to the address of a file.
Find a file on the Internet and copy the address into the clipboard.
You can use Google, Yahoo, or Microsoft Live to search for pages, images, or video. Click to follow a link and the address is available in the address box for copying.
Using PC browsers, the right-click menu allows you to point to a link copy it's address.
Pointing to a photo, you can right-click to get the address of the photo. Note the confusion between the address of the photo versus the address of the page that contains the photo. Copy the address that match your need.
Youtube has a special feature that provides the HTML tags needed to embed a video on a page. Click and copy to the clipboard.
Ad services also provide HTML tags. Find the tag and copy.
Paste to Your Page
When requested, paste the address on the clipboard into your page. Depending on the service and the element you wish to create, the steps vary greatly. Conceptually, it's the same. The address embeds the referenced element on your page.
Using a graphical interface like a blog, iconic tools allow embedding of links, images, and HTML. Select the item you need and paste the clipboard address into the right box.
If the target is an image or video, the embedded results show immediately. If the target is a link, the hypertext shows with an underline. (Note, that it's possible for the underline to be turned off via CSS and other settings of HTML.)
Copy and paste the file address. It's that simple.
Copy and Paste Shortcut
Many services with graphical text editors allow copying and pasting of text that already includes the link code. This means, you can drag the mouse to lasso words, pictures, and links. When pasted, all those elements become part of your HTML document.
Experiment with your blog or CMS software to see if this shortcut is supported.
Exploring the Link and URL Address
To better understand the process, let's take a look at an address and a link. An address looks like this:
http://www.blogger.com/post-create.g?blogID=8964xxxxx006013Here is a breakdown of the parts.
The http:// is a protocol for hypertext transfer. Other protocols are used on the Internet to transfer mail, voice, and other services.
The www.blogger.com is a domain name. This is the unique name for a server on the Internet.
The /post-create.g part is a path through the server to a file on the server.
The ?blogID=... is a query string used by the program on the server.
Addresses can be ugly. Copy and paste avoids typing errors and having to understand it's parts.
When used as a link, the HTML shows something like the following:
SampleAngle brackets signal HTML code instructions in a page.
The longest, most complex part of a link is the address.
'Sample' is the hypertext'd phrase.
The 'a' tag starts the link. The '/a' tag ends the link.
Here is the HTML for the top-right image:
Note the address of the image and the HTML img tag for embedding the image on this page.
HTML is 100% syntax. Like grammar rules, proper use is required. Unlike grammar rules, failure leads to pages that don't work rather than just a poor grade ;-)
tEarn Intra versus Exit Links
A link can bind two pages of the same website or different sites. tEarn (Tag, Earn) distinguishes links that allow users to explore the pages of a site; versus links that lead users to exit a site. The latter links are called exit links; and tEarn activates exitmericals.
Conclusion
Fortunately, web 2.0 services eliminate the need to deal with HTML and addresses. However, understanding this core lesson allows writers to control and troubleshoot problems.
More...
http://adecon101.blogspot.com/2008/09/learning-core-of-html.html
Don't let the syntax overwhelm you. Web 2.0 tools eliminate the need to learn, memorize, and type 99% of the HTML tags.
Here is a holistic view of referencing and linking that is the core of HTML.
What is a Link?
A link, like this HTML link to it's definition at Wikipedia, becomes an interactive element that users can click to view references. Stretching the definition, it can also bring images and videos onto a page, like the image at the top right.
Whether writing news, commentary, comments, journals, or academic papers - the core of any non-fiction REQUIRES references. Instead of inconvenient footers at the bottom of a page, HTML embeds the link and allow readers to jump to the referenced material. Thus, the link becomes hyper text that enables the reader to interact with a document.
To the reader, the link most often appears as underlined text. They click to activate. It's so simple and intuitive that elementary students use the web everyday.
Creating Links and References
Creating links and references confuse many writers. Whether a link to embed an image, ad frame, or video, hyper text to another page, or other uses of references - many have learned the mechanics for one service without understanding the basic concepts. Variation of steps, phases, and interfaces confuse. Thus, when faced with a new web 2.0 service, fear reigns.
The holistic view is simple. Master these three issues to better understand any web 2.0 service.
Uploading the source file
Copy the URL or address
Paste into your document
Uploading Files to the Internet Cloud
Before you can link or reference, the image, photo, video, or text file must be uploaded to some server on the Internet.
If you're linking another website, skip this step. It's already uploaded.
If you're linking a previously published page, skip this step.
If you're linking an ad service, skip this step.
If you're linking a photo, upload to a server like Yahoo's FlickR, Google's Picasa, or Facebook Photos, or hundreds of public servers.
If you're linking a video, upload to Google's Youtube, Yahoo's FlickR, or any number of 3rd party services.
If you're linking media from public sources, find the item and skip this step.
Web 2.0 services call the network of public servers available, the cloud. Most public servers are free.
Uploading moves a file from your computer to a server. The uploading steps are different for each service, but very similar.
Each uploader may offer services to upload in batch, convert files to different formats and sizes, and otherwise simplify the task.
Copy the File Address to the Clipboard
Every page, image, video, or file on the Internet has an address. Software uses the term URL, URI, address box, domain name, file directory, or other terminology. They all refer to the address of a file.
Find a file on the Internet and copy the address into the clipboard.
You can use Google, Yahoo, or Microsoft Live to search for pages, images, or video. Click to follow a link and the address is available in the address box for copying.
Using PC browsers, the right-click menu allows you to point to a link copy it's address.
Pointing to a photo, you can right-click to get the address of the photo. Note the confusion between the address of the photo versus the address of the page that contains the photo. Copy the address that match your need.
Youtube has a special feature that provides the HTML tags needed to embed a video on a page. Click and copy to the clipboard.
Ad services also provide HTML tags. Find the tag and copy.
Paste to Your Page
When requested, paste the address on the clipboard into your page. Depending on the service and the element you wish to create, the steps vary greatly. Conceptually, it's the same. The address embeds the referenced element on your page.
Using a graphical interface like a blog, iconic tools allow embedding of links, images, and HTML. Select the item you need and paste the clipboard address into the right box.
If the target is an image or video, the embedded results show immediately. If the target is a link, the hypertext shows with an underline. (Note, that it's possible for the underline to be turned off via CSS and other settings of HTML.)
Copy and paste the file address. It's that simple.
Copy and Paste Shortcut
Many services with graphical text editors allow copying and pasting of text that already includes the link code. This means, you can drag the mouse to lasso words, pictures, and links. When pasted, all those elements become part of your HTML document.
Experiment with your blog or CMS software to see if this shortcut is supported.
Exploring the Link and URL Address
To better understand the process, let's take a look at an address and a link. An address looks like this:
http://www.blogger.com/post-create.g?blogID=8964xxxxx006013Here is a breakdown of the parts.
The http:// is a protocol for hypertext transfer. Other protocols are used on the Internet to transfer mail, voice, and other services.
The www.blogger.com is a domain name. This is the unique name for a server on the Internet.
The /post-create.g part is a path through the server to a file on the server.
The ?blogID=... is a query string used by the program on the server.
Addresses can be ugly. Copy and paste avoids typing errors and having to understand it's parts.
When used as a link, the HTML shows something like the following:
SampleAngle brackets signal HTML code instructions in a page.
The longest, most complex part of a link is the address.
'Sample' is the hypertext'd phrase.
The 'a' tag starts the link. The '/a' tag ends the link.
Here is the HTML for the top-right image:
Note the address of the image and the HTML img tag for embedding the image on this page.
HTML is 100% syntax. Like grammar rules, proper use is required. Unlike grammar rules, failure leads to pages that don't work rather than just a poor grade ;-)
tEarn Intra versus Exit Links
A link can bind two pages of the same website or different sites. tEarn (Tag, Earn) distinguishes links that allow users to explore the pages of a site; versus links that lead users to exit a site. The latter links are called exit links; and tEarn activates exitmericals.
Conclusion
Fortunately, web 2.0 services eliminate the need to deal with HTML and addresses. However, understanding this core lesson allows writers to control and troubleshoot problems.
More...
http://adecon101.blogspot.com/2008/09/learning-core-of-html.html
Subscribe to:
Posts (Atom)
Posts
