Creative Web & UI Designer

Saturday, 12 September 2015

Angular JS Manual Bootstrap Example (Multiple Modules)

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular JS Manual Bootstrap Example (Multiple Modules)</title>
<script src="lib/angular.js"></script>
<script>
// JavaScript Document
//module1
var app1 = angular.module("myapp1", []);
app1.contoller ("MssgController1", function ($scope) {
    $scope.message = "Angular Auto Bootstrap Mssg1";
}) ;
//module2
var app2 = angular.module("myapp2", [])
app2.controller ("MssgController2", function($scope) {
    $scope.message = "Angular Auto Bootstrap Mssg2";
})
//initiate manual process
angular.element(docuent).ready(function() {
var mssgdiv1 = document.getElementById('mssgdiv1');

//bootstrap mssgdiv1 for module1 and module2
angular.bootstrap(mssgdiv1, ['myapp1', 'myapp2']);

});

</script>
</head>

<body>

<div id="mssgdiv1">
<h1>Angular JS Manual bootstrap example with Multiple modules </h1>
<div ng-controller="MssgController1"> {{message}} </div>
<div ng-controller="MssgController2"> {{message}} </div>
</div>
</body>
</html>

Angular JS Auto Bootstrap Example with Multiple Modules

<html>
<head>

<title>Angular JS Auto Bootstrap Example</title>
<script src="lib/angular.js"></script>
<script>
// JavaScript Document
//module1
var app1 = angular.module("myapp1", []);
app1.contoller ("MssgController1", function ($scope) {
$scope.message = "Angular Auto Bootstrap Mssg1";
}) ;
//module2
var app2 = angular.module("myapp2", [])
app2.controller ("MssgController2", function($scope) {
$scope.message = "Angular Auto Bootstrap Mssg2";
})
//module3 dependent on module1 & module2
angular.module("myapp", ["myapp1", "myapp2"]);

</script>

</head>

<body>

<div ng-app="myapp">

<h1>
Angular JS Multiple modules auto bootstrap</h1>
<div ng-controller="MssgController1">
{{message}} </div>
<div ng-controller="MssgController2">
{{message}} </div>
</div>
</body>
</html>

Wednesday, 16 July 2014

CSS Media Queries for Standardd Devices (SmartPhones, Ipads, Desktops, Laptops, )

CSS Media Queries for Standardd Devices (SmartPhones, Ipads, Desktops, Laptops, )

Looking for CSS Media queries for Devices ?

Here you can find the CSS Media queries for all standard devices:

/* Smartphones (portrait and landscape) ------ */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Define Styles here*/
}

/* Smartphones (landscape) ------ */
@media only screen 
and (min-width : 321px) {
/* Define Styles here*/
}

/* Smartphones (portrait) ------ */
@media only screen 
and (max-width : 320px) {
/* Define Styles here*/
}

/* iPads (portrait and landscape) ------ */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Define Styles here*/
}

/* iPads (landscape) ------ */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Define Styles here*/
}

/* iPads (portrait) ------ */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Define Styles here*/
}

/* Desktops and laptops ------ */
@media only screen 
and (min-width : 1224px) {
/* Define Styles here*/
}

/* Large screens ------ */
@media only screen 
and (min-width : 1824px) {
/* Define Styles here*/
}

/* iPhone 4 ------ */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Define Styles here*/
}

CSS hacks for IE10 & IE11

How to specify CSS hacks for IE10 & IE11 ?

Selector Hacks:

Internet Explorer ≥ 10
_:-ms-input-placeholder, :root .selector {}

Internet Explorer ≥ 11
_:-ms-fullscreen, :root .selector {}

Media Query Hacks:

Internet Explorer ≥ 10
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
/*define styles here*/
}

Wednesday, 26 December 2012

TOP 10 ONLINE RESOURCES OF WEB DESIGNING TRAINING

I found high-quality web design training, tutorials about HTML, CSS, HTML5, CSS3, JavaScript, Jquery on these sites. I feel these sites are the top 10 online training resources for web design.

1.W3 Schools:

2. Google Code University

03. Treehouse

A better way to learn technology
From zero experience to job-ready

The extensive Treehouse library of step-by-step video courses and training exercises will give you a wide range of competitive, in-demand technology skills that will help you land your next dream job or build your startup idea. No experience? No problem!

04. Lynda.com

Learn software, creative, and business skills

• High-quality, professional video production
• Engaging instructors, carefully chosen for their expertise
• Anywhere learning on Macs, PCs, tablets, and smartphones
• Unlimited access to all 1,574 courses (more added every week)

05. Opera Web Standard Curriculum

The web standards curriculum has been donated to the W3C web education community group, to become part of a much bigger educational resource. It is constantly being updated so that it remains current with modern web design practices and technologies. To find the most up-to-date web standards curriculum, visit the web education community group Wiki. Please make changes to this Wiki yourself, or suggest changes to Chris Mills, who is also the chair of the web education community group.

06. Don't Fear the Internet

Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help. We know that you have little to no desire to do web design professionally, but that doesn’t mean that you want an ugly cookie-cutter site or to settle for one that hasn't been updated since Hackerswas in theaters.

07. netmagazine.com

.net is the world's best-selling magazine for web designers and developers. Each issue boasts a wealth of expert tips and advice, including over 30 pages of advanced step-by-step tutorials on subjects as diverse as CSS, HTML, JavaScript, web graphics and Flash. You'll also find in-depth features, not to mention interviews where major industry players impart their wisdom. If you're serious about web design or development, then .net is the magazine for you.

08. Mozilla School of Webcraft

At P2PU, people work together to learn a particular topic by completing tasks, assessing individual and group work, and providing constructive feedback.

P2PU is a different kind of learning experience–knowledge isn’t transmitted, broadcast, or transferred. Instead, learning evolves by working together on projects, sharing with each other, giving each other feedback, and iterating to improve.

Backed by Mozilla

Mozilla's mission is to keep the web open, and to enable anyone to take part in building it's future. In School of Webcraft you can earn badges backed by Mozilla, that highlight your technical and community skills to your friends, colleagues and potential employers. School of Webcraft Badges are easy to display on your personal website, online profiles, and CV and use the Open Badges framework, a way to record, track, and display your skills and knowledge across the web.

09. Smashing Magazine

Founded in September 2006, Smashing Magazine delivers useful and innovative information to Web designers and developers. Our aim is to inform our readers about the latest trends and techniques in Web development. We try to persuade you not with the quantity, but with the quality of the information we present. Smashing Magazine is, and always has been, independent.

10. Codecademy

Codecademy is a team of hackers working hard to build a better way for anyone to teach, and learn, how to code. We're determined to succeed in realizing our mission to turn a world of tech consumers into one of empowered builders.

Keywords:
Top 10 Online Resources of Web Designing
Web Designing Online Training
Free Web Design Training
Best Resources for Web Design Online Training
Excellent Resources for Web Design Video Tutorials

Monday, 24 December 2012

How to wrap long lines without spaces in HTML? "word-wrap:normal | break-word;"

How to wrap long lines without spaces in HTML?

How to break long urls without spaces in span?

WORD WRAP CSS:

word-wrap: normal | break-word

Syntax

word-wrap: normal|break-word;

Description:

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

Examples

div { word-wrap: break-word }
<div style=”word-wrap: break-word”>Here is some content for the div element</div>

Value	Description
normal	Break words only at allowed break points
break-word	Allows unbreakable words to be broken

Javascript Syntax:

object.style.wordWrap="break-word"

Example

Issue in ie ? Issue with SPAN tag ? Anchor tag?

Add display :block; property to style to fix the ISSUE:: ENJOY..

Reference: http://www.css3.com/css-word-wrap/

http://www.css3.com/css-word-wrap/

Tuesday, 18 December 2012

"viewport" meta tag to control layout on mobile devices

<meta name="viewport" content="width=device-width">

General Use of Viewport Tag
Viewport meta tag is generally used for responsive web design to set the viewport width and initial-scale on mobile devices.

The viewport is the logical window in which a web page is designed. We can set the width, height, and initial scale of the viewport for a web page using the viewport property in an HTML <meta> tag.

We can add viewport meta tag in Head tag like this:

<!doctype html>
<html>
<head>
  <title>Hello world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <p>Responsive Web Design!</p>
</body>
</html>

Know about Viewport Metatag basics:
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

viewport meta tag supports a handful of other properties for the "content" attribute:

**viewport meta tag "content" property attributes**
Property	Description
width	The width of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "`device-width`" to set the viewport to the physical width of the device's screen.
height	The height of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "`device-height`" to set the viewport to the physical height of the device's screen.
initial-scale	The initial zoom of the webpage, where a value of 1.0 means no zoom.
minimum-scale	The minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn't able to at all.
maximum-scale	The maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn't able to at all.
user-scalable	Sets whether the user can zoom in and out of a webpage. Set to yes or no.

When optimizing a webpage for mobile devices, the first step is to add the viewport meta tag to the HEAD section of your page, so that mobile devices refrain from making changes to the zoom level of the webpage unilaterally. In most cases you'll simply want to set the meta tag's content property to "width=device-width", so that no scaling of the page occurs at all, and your CSS media queries will return the actual dimensions of the device, not the "zoomed out" version's. To also prevent the device from zooming in on a webpage when its orientation has been changed from portrait to landscape and visa versa, you can also throw in an initial-scale and maximum-scale property and limit both of them to 1:

Webpage rendering at 100% and Scaling Not working for Your web page in Mobile Device ??

Here is a solution :

Generally we make a Common Mistake in Adding Viewport tag:

A common mistake is that people often apply initial-scale=1 on non-responsive design. It will make the page render at 100% without scaling. If design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. It will disable the scaling and zooming capability of site. With scaling disabled, users have no way to zoom out to see the complete page.

Note: if design is not responsive, do not reset the initial-scale or disable scaling!

Keywords:
viewport meta tag to control layout on mobile devices
viewport meta tag Tutorial
viewport meta tag- the key to preparing a page for mobile devices optimization
Webpage rendering at 100% and Scaling Not working for Your web page in Mobile Device ??
How to fix Webpage Scaling issue in Mobile device?
Zooming capability of webpage disabled??

Reference urls:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml