me-learning.se

29 okt. 2012

Facebook API - ofärdig!

Jag har lyckats få till en sida med actions. Nästa steg är att använda fb för att skapa gamification på sidan.

Google Map API

Hämta en karta från google maps, centrera den vid önskad position, skapa egna pins och skapa ett fält där man kan lägga till pins.

I head-taggen lägg till jquery och google maps js-api:

För fler funktioner läggs fler & och parametrar till, jag använde:

För att lägga in kartan (document on load):

var latlng = new google.maps.LatLng(62.63377,15.38086);

 // Creating an object literal containing the properties we want to pass to the map
 var options = {zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
 // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
 
 // Calling the constructor, thereby initializing the map
 map = new google.maps.Map(document.getElementById('map_div'), options);

 // Define Marker properties
 image = new google.maps.MarkerImage('marker.png',
  // This marker is 129 pixels wide by 42 pixels tall.
  new google.maps.Size(129, 41),
  // The origin for this image is 0,0.
  new google.maps.Point(0,0),
  // The anchor for this image is the base of the flagpole at 18,42.
  new google.maps.Point(14, 42)
  
  
 );

För att lägga in en autocomplete som lägger till ställen på kartan (document on load):

var acOptions = {
 types: ['establishment']
 };
 var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
 autocomplete.bindTo('bounds',map);
 var infoWindow = new google.maps.InfoWindow();
 var marker = new google.maps.Marker({
  map: map, icon: image
 });

 google.maps.event.addListener(autocomplete, 'place_changed', function() {
  infoWindow.close();
  var place = autocomplete.getPlace();
  /*if (place.geometry.viewport) {
   map.fitBounds(place.geometry.viewport);
  } else {
   map.setCenter(place.geometry.location);
   map.setZoom(7);
  }
  marker.setPosition(place.geometry.location);
  infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
  infoWindow.open(map, marker);
  google.maps.event.addListener(marker,'click',function(e){

   infoWindow.open(map, marker);

  });*/
  lat=place.geometry.location.lat();
  lng=place.geometry.location.lng();
  school=place.name
  
 });
 
 
});

För att lägga till en marker på kartan utan att använda formuläret anropa funktionen:

function addMarker(latitude,longitude,place,infotext) {
// Add Marker
 
 var marker = new google.maps.Marker({position: new google.maps.LatLng(latitude,longitude),map: map,icon: image });

 // Add listener for a click on the pin
 google.maps.event.addListener(marker, 'click', function() {
  infowindow1.open(map, marker);
 });

 // Add information window
 var infowindow1 = new google.maps.InfoWindow({
  content:  createInfo(schoolName, ' - '+teacherName)
 });

 // Create information window
 function createInfo(title, content) {
  return '<div class="infowindow"><strong>'+ title +'</strong>'+content+'</div>';
 }
 

}

2 okt. 2012

Detect IE

Javascript
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {

}

HTML

26 aug. 2012

Javascript bibliotek

Den här ska jag titta närmare på!

http://coding.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/

CSS grid

När jag bygger upp en generell css ska det ske med hjälp av grid!

http://www.blueprintcss.org/

http://cssgrid.net/

http://960.gs/

25 aug. 2012

CSS clear

Jag är trött på att en div med innehåll som har float beter sig som om den inte har något innehåll alls. Här är lösningen. Lägg till klassen "clearfix" på det sista elementet och använd följande kod.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Tack http://www.positioniseverything.net/easyclearing.html

CSS Best practice - sammanställning

Jag söker tips om css. Mycket vet jag redan och har läst förut, men här följer några saker som jag tycker är viktigt att komma ihåg/inte glömma bort.

Organize the Stylesheet with a Top-down Structure

Generic classes (body, a, p, h1, etc.)

#header

#nav-menu

#main-content

Combine Elements

Use Multiple Classes
<div class="box right"></div>

Use Shorthand

margin: 8px 7px 0px 5px;

Alphabetize your Properties

Say no more...

Avoid Extra Selectors

body #container .someclass ul li {....} -> .someclass li {...}

Tipsen ovan är hämtade från Beginners 30 CSS Best Practices for

Validate

Använd W3C’s free CSS validator.

Keep a Template Library

Use Useful Naming Conventions

Better Web Typography with @font-face

Lägg önskad font på servern, deklarera sedan mha font-family.

@font-face { font-family: CurlzMTRegular; src: url(fonts/CurlzMTRegular.eot);}

Sprites

CSS Hacks för ie
Läs mer på http://www.webdevout.net/css-hacks.

Reset CSS

För att slippa att element som inte stilsatts beter sig olika i olika webbläsare.

html,body,iv,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }:focus { outline:0; }body { line-height:1; color:#000; background:#fff; }ol,ul { list-style:none; } table { border-collapse:separate; border-spacing:0; }caption,th,td { text-align:left; font-weight:normal; }

Tipsen ovan är hämtade från 10 Best CSS Practices to Improve Your Code

Använd fler css-filer

Use Prefixr

One of the easiest ways to deal with all the cross-browser vendor weirdness is to use a handy little tool called Prefixr. With Prefixr, you just develop your code as always, and you could just use a single vendor prefix (for example, only “-moz-”) for all your CSS3. Then, when you’re done testing in that one browser and have everything working the way you want, just throw your code into Prefixr and it will generate all the extra vendor code for you.

Fler tips om line-height, margin mm för ett bra flow finns på CSS Typography.

Sprites

Combining all background images into one single image and displaying them using background positions is all we call CSS Sprites.

Hämtat från 15 Best CSS Practices to Make Your Life Easier

Multipla CSS-filer

En för grund-stil och fler för sid eller webbplats-specifika inställningar.