NewSourceMedia Blog » CSS

Submitting Forms using JQuery and AJAX

admin — Wed, 14 Mar 2012 01:03:37 +0000

Submit A Form Without Page Refresh using jQuery

In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). Let’s get started. View Tutorial

Call SOAP-XML Web Services With jQuery Ajax

In order to call the web service, we need to supply an XML message that match the operation definition specified by the web service’s WSDL. With the operation’s schema already in hand, all that is required is to exchange the type names for the operation’s paramaters, with their actual values. The variable soapMessage contains the complete XML message that we’re going to send to the web service. View Tutorial

Using JQuery, AJAX and JSONP to do cross-domain calls with PHP

The easy part is setting up a PHP page to listen for incoming data and send back a result. Not only will we send back data but we will also send back the function name we want to call on the client’s browser. Here is the PHP code: View Tutorial

CSS Center Web Page Using Styles Sheets

admin — Thu, 19 Nov 2009 14:43:08 +0000

How to center a fixed box container using CSS? The sample below dose a few things. First it centers all body content using the body tag text-align center attribute. This is done to fix a bug in IE and other browsers that do not support margin auto styles. Next thing it will do is take your div with an id of "container" and auto center the margin with a width of 900 pixels. You can change the width to match your content as needed. Lastly it will reset the text to align left. You can align the text as you see fit but here we just wanted to make sure it set back to the default Firefox & Safari text alignment. Place the following code in your styles tag.

body
{
text-align: center;
}

div#container { margin-left: auto; margin-right: auto; width: 900px; text-align: left; }

Flash and SEO. Why not?

admin — Wed, 22 Apr 2009 16:43:12 +0000

Google learns to crawl Flash Google has been developing a new algorithm for indexing textual content in Flash files... Source: http://googleblog.blogspot.com/2008/06/google-learns-to-crawl-flash.html How to SEO Flash • Search Engines and Flash • Requirements for Successful Use of Flash • SEO Flash Programming • Example: Making Flash Home Page Spiderable • Scalable Inman Flash Replacement Source: http://www.hochmanconsultants.com/articles/seo-friendly-flash.shtml Here are a few comments on this topic from SearchEngineGuide.com: “Stoney, You hit the nail on the head and pounded it down with one stroke. I completely agree, I have turned down clients in my own business due to flash sites. Now that I am with an agency I find Flash more common, as many of the businesses are big enough and niched enough where they feel that they don't need SEO for their website. Oddly enough they are often right. Unfortunately SEO can have a big effect on PPC marketing, and most of these accounts suffer from bad keyword quality scores and thus higher click costs in AdWords.” “Susan: I disagree slightly. Mostly because it all comes down to the intent. Building a flash only website for Ozzy Osbourne is fine, but e-commerce is not. I think you know what I mean” “ Working on seo for hotel sites, I've come across some stunning creative sites designed with Flash. If the designers had thoughtfully used the Flash applications to "wow" site visitors, ie embedding in otherwise SE-friendly pages, it could be a win-win situation. Perhaps all of you have seen the June info about making Flash SE-friendly. ( http://googleblog.blogspot.com/2008/06/google-learns-to-crawl-flash.html )” Source: http://www.searchengineguide.com/stoney-degeyter/why-i-still-wont-seo-flash-websites.php And from SearchEngineJournal.com: “Disney does it. And so does Oprah. Even my favorite pizza place does it... Granted these are extreme cases of sites which use flash extensively, but there are other cases where even a little flash can be improperly used. There are also cases where flash is not only appropriate, it is recommended. The question then becomes how to best use flash without affecting search engine rankings” “Yeah this article doesn’t help a bit. I thought after reading I would be able to find a solution for my all flash website for seo purposes. Thefwa.com is an all flash website, they rank no.1, they didn’t follow your mumbo jumbo about not using too much flash” (Note from Alex: TheFWA.com does not rank no.1. They rank 31,905. Still not bad for an all flash site.) Source: http://www.searchenginejournal.com/flash-and-seo-using-flash-on-websites/2247/ Cool online tool that will probe a flash file: http://www.flashprobe.com/

CSS Layout, Menu and JQuery Resources

admin — Tue, 10 Feb 2009 15:26:32 +0000

Free CSS Layout Templates: http://www.alistapart.com/articles/holygrail http://www.dynamicdrive.com/style/layouts/category/C10/ Free CSS Menu Templates: http://www.dynamicdrive.com/style/csslibrary/category/C1/ http://www.dynamicdrive.com/style/csslibrary/category/C2/ Free JQuery Resources: http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery http://www.digital-web.com/articles/jquery_crash_course/ http://webcloud.se/article/Building_modal_panels_with_jQuery

CSS IE Hack Fix

admin — Mon, 09 Feb 2009 04:18:21 +0000

/******** HACK TO CLEAR STYLES **********/ 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;} /**************************************/ /*********** HACKS!: FIX BOX PADDING AND STUFF **************/ /*********** HACKS!: FIX CENTERING BOX ON IE **************/ /* Self-clearing Containers */ #container:after, #menu:after {content:".";display:block;height:0;clear:both;visibility:hidden;} #container, #menu {display:inline-block;} /* Force IE7 to respect generated content */ /* Hide the next declaration from IE Mac */ * html #container, * html #menu {height:1%;display:block;} /* IE box model hacks */ * html #left, * html #right {width:178px;width:159px;} * html #center {width:400px;width:380px;} * html #menu {height:2em;} /***********************************/ /*****************************************/ /***********************************************/

Change CSS A HREF Link Styles

admin — Sun, 23 Dec 2007 00:22:11 +0000

How to change hyperlink color styles Question: How do I change hyperlink color style of my html links? Answer: You can do this by adding CSS to your web page. Try the following to change the a href tages:

a:link is the links color a:visited is the color for all links clicked a:hover is the link style when your mouse hovers over the link. A:active is the color when the link is active. If you just want to make a simple color change to all your web links, just do:

In other words, all links should be #0099ff or what ever color you chose regardless if you’ve visited or are hovering over a link or not.

CSS Center Background Image

admin — Sun, 23 Dec 2007 00:22:11 +0000

How to center background images on web page. Question: How do I center the backgournd image on my web page so then when I change the window size, the image stays center under the content? Answer: Try using CSS (Cascading Style Sheets) to manage your background images. The key is the “background-position:top center;”. This will do the trick. See below for an example.

Note: Make sure to change the above "bg.jpg" to your background image path.

CSS Shadow Text Effects

admin — Fri, 29 Dec 2006 00:22:11 +0000

Add cool shadows effects to your text using css codes Add cool shadows effects to your text using css codes to make the text more readable. Here is an example of light blue text with dark soft shadow. <style type="text/css"> … Continue reading →