Answer's Engineering Blog: June 2014

Jun 27, 2014

What is this???

google maps javascript api v3 using j-query

This post similar my post GEOLOCATION for Google Maps JavaScript V3

But this map using j-query.

First, prepare.

You will download library.

And unzip and copy ui folder to you project.

Second, coding.

This is javascript for library.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>

This is body

<body>
<div data-role="page" id="page" data-fullscreen="true" class="map_style">
<div data-role="header" data-position="fixed">
<h1>map page</h1>
</div>
<div data-role="content" class="map_style">
<div id="map_canvas" class="map_style" >
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="search" id="currentpos">current location</a></li>
</ul>
</div>
</div>
</div>
</body>

Add map_style class to page(line 2), content(line 6), map(line 7)

'Line 7' is map and 'line 13' is search button.

This is very important code.

This code Implement google map.

<script type="text/javascript">
$(document).ready(function(e) {
var startpos=new google.maps.LatLng(37.309,126.875);
$("#map_canvas").gmap({
"center":startpos,
"zoom":16
});
$("#currentpos").click(function() {
$("#map_canvas").gmap("getCurrentPosition",function(position,status){
if(status=="OK"){
var latlng=new google.maps.LatLng(
position.coords.latitude,position.coords.longitude);
var marker="http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png";
$("#map_canvas").gmap("get","map").panTo(latlng);
$("#map_canvas").gmap("addMarker",{
"position":latlng,
"icon":marker
}).click(function(){
$("#map_canvas").gmap("openInfoWindow",{
"content":"<b>current location</b> <img src='http://images.forbes.com/media/lists/companies/google_200x200.jpg' alt=''/>"},this);
});
}else{
alert("can't found location");
}
});
});
});//ready
</script>

Look so complex but simple.

'Line 3' is init position for display map.

'Line 4~7' is display(position and zoom level)

'Line 8~26' is searching code.

'Line 8' is button click listener.

'Line 9' is check current position using sensor(gps or network)

I recommend using mobile.

'Line 10~21' is success searching your position and 'line 22~24' is can't searching.

'Line 11~12' is getting current position.

'Line 13' is marker option.

'Line 14~17' display current position and marker.

'Line 18' is click listener for marker.

'Line 19~21' is info window.

I ran my mobile device.

This is result.

This is init status.

I click to search button.

I click to marker.

Jun 25, 2014

Image size changing in HTML

한글 블로그로 보기

1. Using Style.

This is Style code

<style>
img{
width:30%;
}
img:hover{
transition-property:width;
transition-duration:1s;
width:50%;
}
</style>

" img{} "means img's init status.

" img:hover{} " means mouse pointer's on the img.

"transition-property" means event property. so width is change.

"transition-duration" means event time.

This is initial status.

This is mouse hover status.

2. Using JavaScrpit & class

You need a JavaScript code

<script type="text/javascript">
$(document).ready(function() {
$("#pic").click(function(){
if($(this).hasClass("small")){
$("#pic").addClass("large") ;
$("#pic").removeClass("small") ;
}
else{
$("#pic").addClass("small") ;
$("#pic").removeClass("large") ;
}
});
});
</script>

"$("id").click " similar click listener.

"$(this).hasClass("class")" check class. If it has a class that return true. else false.

So. If #pic has a small class, add large class and remove small class.

This is style code

<style>
#pic{
-webkit-transition-property:width;
-webkit-transition-duration:1s;
}
.small{
width: 30%;
}
.large{
width:50%;
}
</style>

small class size is 30% and large class size is 50%

This is image code

<img class="small" id="pic"src="http://images.forbes.com/media/lists/companies/google_200x200.jpg"/>

image infomation.

This is before click

This is after click.

Gallery page using photoswipe

한글 블로그로 보기

photoswipe

PhotoSwipe is very easy & powerful library for gallery.

First step - prepare file.

You get library phothswipe site & unzip. and copy to your project folder.

My case, I copy to C:/Program Files (x86)/Apache Group/Apache2/htdocs/photoswipe/

Second step - add library.

Change to photswipe's jquery library.

Add this code.

<link rel="stylesheet" href="photoswipe/lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
div.gallery-row:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
div.gallery-item { float: left; width: 33.333333%; }
div.gallery-item a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
div.gallery-item img { display: block; width: 100%; height: auto; }
#Gallery1 .ui-content, #Gallery2 .ui-content { overflow: hidden; }
</style>
<script type="text/javascript" src="photoswipe/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="photoswipe/lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script src="photoswipe/lib/simple-inheritance.min.js" type="text/javascript"></script>
<script src="photoswipe/lib/jquery.animate-enhanced.min.js" type="text/javascript"></script>
<script src="photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('div.gallery-page').live('pageshow',function(e){
$("div.gallery a", e.target).photoSwipe();
return true;
})
});
</script>

Third step - Implement gallery.

<div data-role="page" id="equip-image" class="gallery-page">
<div data-role="header" data-position="fixed" >
<h1>Equipment Image</h1>
<a href="#page" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right" data-iconshadow="false">
</a>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item">
<a href="http://jme21.co.kr/004/images/eqip_01_01.jpg" rel="external">
<img src="http://jme21.co.kr/004/images/eqip_01_01.jpg" alt="TSA-J"/>
</a>
</div>
<div class="gallery-item">
.....
</div>
</div>
</div>
<div data-role="footer" align="center" data-position="fixed">
<img width="100%" src="http://jme21.co.kr/images/copyright_05.jpg" />
</div>
</div>

You add class "gallery-page" page tag.

In content tag you consist

<div class="gallery">
<div class="gallery-row">
<div class="gallery-item>
<a href="img src"><img src=thumb nail img alt=image name/>
</div>
</div>
</div>

You can see this...

If you click image..

You can see gallery.

J-query Tip

한글 블로그로 보기

test code

1. Change the style by browser size.

We use this code.

<link href="size_1.css" rel="stylesheet" type="text/css" media="screen and(max-width:Apx)">

example

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:599px)">
<link href="desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width:600px)">

line 1 means screen size(width) smaller than 599px is mobile page.

line 2 means screen size(width) larger than 600px is pc page.

If my body code is this

<div id="pc_view">
<p >
<span>T</span>
his is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.
</p>
</div>
<div id="mobile_view">
<p>
<span><img src="http://www.w3.org/Icons/WWW/w3c_home_nb"></span>
This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.</p>
</div>

You can see this

This is mobile page!!

This is PC page!!

2. Apply to common style.

We will using 'style tag' in head tag.

<style>
your style code.
</style>

example

<style type="text/css">
h2{
color:#F00;
}
</style>

This example means 'h2' tag's color is red .

If my body code is

<h3> You can see change view.</h3>
<h2> You can see change view.</h2>

You can see this

3. Using special font

Using this style tag.

font-family:your font...;

example

h2{
color:#F00;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
}
h4{
color:#0F0;
font-family:"Comic Sans MS", cursive;
font-size:15px;
}

You can see this

Jun 23, 2014

do it mission 9

한글 블로그로 보기

MISSION 9

This mission is using page link and auto back button.

I consist one file(html)

This is first page(main)

<div data-role="page" id="page" data-theme="b" >
<div data-role="header" >
<h1>Page One</h1>
</div>
<div data-role="content">
<a href="#page2" data-transition="slide" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-carat-r" data-transition="slide">Page Two</a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

This is second page.

<div data-role="page" id="page2" data-theme="b" >
<div data-role="header" data-add-back-btn=”true” >
<h1>Page Two</h1>
</div>
<div data-role="content">
<a href="#page3" data-transition="slide" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-carat-r" >Page Three</a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

compare pages.

Can you finding what is different?

line 2 is different.

second page added "data-add-back-btn="true"".

This code making automatically add "back" button.

So we use second page.

Maybe don't need for first page.

And line 7 is page link.

<a href="#page name" > linked tag that is name is "page name".

So if you click this button, open this page.

This is first page.

If you click page Two.

You can see second page.

And see back button.

Answer's Engineering Blog

Labels

Jun 27, 2014

What is this???

google maps javascript api v3 using j-query

Jun 25, 2014

Image size changing in HTML

Gallery page using photoswipe

J-query Tip

Jun 23, 2014

do it mission 9

google groups

Page View

한글 블로그