ADVANCED JAVASCRIPT. #7
|
|
- Rodney Boone
- 6 years ago
- Views:
Transcription
1 ADVANCED JAVASCRIPT. #7
2 7.1 Review JS
3 3 A simple javascript functions is alert(). It's a good way to test a script is working. It brings up a browser default popup alert window. alert(5);
4 4 There are 2 types of values in JS, numbers and strings. A number is a can be used mathematically. A string is text. Strings must be enclosed in quotes (single or double). A number enclosed in quotes is considered a string. alert( ' luft ballons'); //outputs: 18 luft ballons alert('9' + '9' + ' luft ballons'); //outputs: 99 luft ballons
5 5 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15; var saucers = 4; // check if cups is greater than (>) saucers if (cups > saucers) { alert("we need to order more saucers"); }
6 When an if statement returns false you can offer an alternative block of code to execute. You do this by using an else after the if statement. 6 var cups = 3; var saucers = 4; // this condition will return false so the else block of code will execute. if (cups == saucers) { alert("we have a perfect set!"); } else { alert("something's not right"); }
7 You can also set more conditional statement using else if. This condition will only be tested if the previous conditions returns false. 7 var cups = 3; var saucers = 4; // this condition will return false so the else block of code will execute. if (cups == saucers) { alert("we have a perfect set!"); } else if (cups < saucers) { alert("we need cups"); } else if (cups > saucers) { alert("we need saucers"); }
8 8 You can save code as a function and execute it repeatedly // specify a variable in the brackets. You can use it inside your function. function welcome(message) { alert("welcome to the website " + message); } // execute your function and place a value/variable in the round brackets. welcome("mary"); var name = "Peter"; welcome(name);
9 7.2 jquery
10 10 jquery is a JavaScript library. You can load it from Google's CDN service or download and include in your site folder. <script src=" js"></script> Before executing jquery code, you should tell the browser to wait until the page has finished loading. $(document).ready(function(){ }); $('p').slideup(5000);
11 11 The basic syntax of jquery is $(selector).action(); Like CSS the selector is the HTML element you want to target. You can then perform an action to that element/those elements. The $ symbol is used at the start of all jquery lines of code. It is telling the browser to parse the following code using jquery. The selector is based on the CSS model. You can use general HTML names, classes and ids: $("h1") selects all h1s. $(".bigger") selects all HTML elements with class="bigger". $("#intro") selects the HTML element with id="intro".
12 12 jquery can react to things that happen on your page. These things are called events. Mouse events: The most commonly used event is click(). This can call a function when a user clicks or taps on an element. The next most common event is hover(). It can fire 2 functions, one for when a user hovers over an item and another for when they leave. It generally does not work on touch screens devices.
13 13 jquery can also react to form events. One is submit(). This can call a function when a user submits a form. Another is focus(). This can call a function when a user moves into a field on a form. e.g. click into a text field The opposite event to focus() is blur(). This calls a function when a user moves out of a field on a form. e.g. tab to another text field to leave the first field.
14 14 The syntax for events is similar to actions: $(selector).click(); $('p').click(); Inside the round brackets after your event, you can write a function that will get executed as that event happens. $(".trigger").click( function () { $(".nav").slidetoggle(); });
15 15 hover() has one big difference to click, you should define 2 functions. One for hovering on, one for when the hover ends. $("p").hover( function () { alert("i hovered on a paragraph"); }, function () { alert("i hovered off a paragraph"); });
16 16 submit() is the same syntax as click(). You can declare one function to be called when a user submits a form. <form> <input type="text"> <input type="submit" value="order Now"> </form> $("form").submit( function () { confirm("do you definitely agree to the Terms and Conditions?"); });
17 17 blur() is the same syntax as click(). You declare a function for when a user moves focus away from a form field. <input type="password"> <p id="error"></p> $("input:password").blur( function () {//input:password is input with type="password" var password = $(this).val();//$(this).val() is the contents of the current item, the field. if(password.length < 8){//password.length is the number of characters in the string $("#error").html("you must use at least 8 characters"); } else { $("#error").html(""); } });
18 7.3 jquery Plugins
19 19 jquery as a library has many benefits that save you time and code. It has also spawned thousands of plugins that extend jquery's functionality even further. First we will look at some independent jquery plugins. Then we will looks at Bootstrap JS possibilities.
20 20 All jquery plugins will have extra JavaScript code you need to use. Generally you keep each plugin JavaScript code in its own.js file. e.g. pluginname.js A lot of plugins will also have CSS code with them. Again it's a good idea to keep the plugins CSS code in its own file. e.g. pluginname.css Some plugins will also include images, you will need to save these in your website folder and ensure the paths are correct. Generally the paths are relative to the CSS file. It's a good idea to maintain the folder structure the plugin downloads as.
21 21 In order for your plugin to work, you will usually need to call a function in your own.js code. You may also need to add classes or HTML to your page for the plugin to work with your content. $(document).ready(function () { }); $(".slider").bxslider(); This is calling a function called bxslider and applying it to a HTML element with class="slider"
22 7.4 bxslider
23 23 As a first example go to This is a slider plugin. Hit the download link to save a zip Then unzip it. You should see:
24 24 This plugin needs JS code, CSS and images. They give you 2 versions of the JS code, they are in the dist folder: jquery.bxslider.js and jquery.bxslider.min.js. These are the same thing but one is a minimised version of the other. If you don't plan on editing the JS of the plugin, use the.min version. You need to copy the plugin files to your web folder. Keep the plugin files in your js subfolder. Then you need to include it in any HTML file you want to use the plugin. You must include the plugin after you include jquery. <script src=" script> <script src="js/jquery.bxslider.min.js"></script>
25 25 You need to include the CSS file in your HTML as well. <link href="css/jquery.bxslider.min.css" rel="stylesheet" />
26 26 The CSS file references background images e.g. images/bx_loader.gif You also need to move the images folder from the plugin zip. As the css file references a path 'images/' the quickest option is to place the plugin images folder inside your 'css' folder. The more organised option would be to place all the images into an images folder. Then update the paths in the CSS file using../ to step back a level.
27 27 Your plugin is setup and ready to be used. bxslider changes a <ul> list and all of its <li> elements into slides. You add a class or id to the <ul> so bxslider can target it. <ul class="slider"> <li><img src="images/cat.jpg" alt="cute Cat"/></li> <li><img src="images/dog.jpg" alt="cute Dog"/></li> </ul> Then in your JS code: $(document).ready(function () { }); $(".slider").bxslider();
28 28 You can customise this plugin's behaviour. Like a function we wrote last class you can pass values into your plugin's function. We used the example: function welcome(message){ alert("welcome to the website "+message); } welcome("mary"); This is passing in one variable or value into the function. With plugins, you generally need to pass in more than one value, to do this we use an object. Objects can have many values.
29 29 Objects allow you to group values together and identify each one. objects are wrapped with curly brackets { }. objects contain pairs with a key and a value, key : value { speed : 3000 } The key does not need quotes. The value only needs quotes if it is a string. If you have more than one pair, you separate them with a comma { speed : 3000, pause: }
30 30 One slider option you may want to change is speed. This controls the length of time transitioning between slides. To pass in an object with one value we change: $('.slider').bxslider(); to $('.slider').bxslider({ speed : 3000 });
31 31 Another option you may want to change is pause. This controls the length of time between transitions. $(".bxslider").bxslider({ }); speed: 3000, pause: 10000
32 7.5 FancyBox
33 Another useful plugin is fancybox, it creates a popup lightbox in the foreground of your site. 33
34 34 The download links is at Download and unzip the folder. Inside there's a subfolder called 'dist' that we need 2 files from.
35 35 You need to move a fancybox.js and.css file to your website folder and load them in your HTML page. <script src="js/jquery.fancybox.min.js"></script> <link href="css/jquery.fancybox.min.css" rel="stylesheet" />
36 36 Your plugin is setup and ready to be used. fancybox changes a hyperlink or <a>. Instead of bringing the user to the new page/file it loads it in the foreground. The load an image just use href="path/to/image,jpg" <a href=" images/dog.jpg" class="fancy">see a nice dog</a> Then in your JS code: $(document).ready(function(){ }); $(".fancy").fancybox();
37 37 You can also pass in options into fancybox using an object. $(document).ready(function(){ $('.fancy').fancybox({ animationeffect : "zoom" }); });
38 7.6 jquery Validation
39 39 A very useful plugin is for validating forms. It can be downloaded at Download and unzip the plugin folder. The only file required to use the plugin is dist/ jquery.validate.min.js, move this to your js/ folder. Include it in your HTML file using: <script src="js/jquery.validate.min.js"></script>
40 40 The validation plugin is setup and ready to be used. The validation plugin is built around HTML 5 form attributes and uses existing input types e.g. type=" ". <form id="signup"> <p><label for="username">username</label> <input type="text" id="username" minlength="6" required></p> <p><label for=" "> Address</label> <input type=" " id=" " required></p> <p><label for="password">password</label> <input type="password" id="password" required minlength="8"></p> <input type="submit" value="signup" > </form> Then in your JS code: $(document).ready( function () { $("form").validate(); });
41 7.7 Bootstrap JS
42 42 The Bootstrap is also packaged with a set of JS plugins. You can see the list at Bootstrap JS is designed to be used without writing any JavaScript code. Instead it relies on data HTML attributes. To use Bootstrap JS functions you will need to include the 2 bootstrap js files in your HTML file. You can download them to your machine and place in your js/ folder or use cdn: <script src=" min.js" ></script> <script src=" bootstrap.min.js" ></script>
43 Bootstrap comes with a slider function called carousel. It involves a lot more code than the bxslider plugin: <div id="carouselexampleindicators" class="carousel slide" dataride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselexampleindicators" data-slide-to="0" class="active"></li> <li data-target="#carouselexampleindicators" data-slide-to="1"></li> <li data-target="#carouselexampleindicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="first slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="third slide"> </div> </div> </div> 43
44 44 A more usable Bootstrap JS function is dropdown. Add class "dropdown" to the parent <ul>. Add datatoggle="dropdown" to the trigger button or link. Lastly include your submenu as a nested <ul> with class="dropdown-menu" <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenubutton" data-toggle="dropdown" aria-haspopup="true" ariaexpanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenubutton"> <a class="dropdown-item" href="#">action</a> <a class="dropdown-item" href="#">another action</a> <a class="dropdown-item" href="#">something else here</a> </div> </div>
45 45 Bootstrap has a JS function to toggle the visibility of an element. You need to set 2 attributes in your button or link: data-toggle="collapse" data-target="#nav" and 2 in your hidden element: class="collapse" id="nav" where the id is the same as data-target <button data-toggle="collapse" data-target="#nav">open nav</button> <div class="collapse" id="nav">nav goes here</div>
46 46 In Class 1. Browse the web for another jquery plugin. ( coding/25-essential-jquery-plugins-2017) 2. Install and test a plugin of your choice.
ADVANCED JAVASCRIPT #8
ADVANCED JAVASCRIPT #8 8.1 Review JS 3 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15;
More informationA conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes.
ANGULARJS #7 7.1 Review JS 3 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15; var saucers
More information"a computer programming language commonly used to create interactive effects within web browsers." If actors and lines are the content/html......
JAVASCRIPT. #5 5.1 Intro 3 "a computer programming language commonly used to create interactive effects within web browsers." If actors and lines are the content/html...... and the director and set are
More informationBootstrap Carousel Tutorial
Bootstrap Carousel Tutorial The Bootstrap carousel is a flexible, responsive way to add a slider to your site. Bootstrap carousel can be used in to show case images, display testimonials, display videos,
More informationBootstrap Carousel. jquery Image Sliders
Bootstrap Carousel jquery Image Sliders Bootstrap Carousel Carousel bootstarp css js jquery js bootstrap.js http://getbootstrap.com/javascript/#carousel item ol.carousel-indicators li
More informationJQuery and Javascript
JQuery and Javascript Javascript - a programming language to perform calculations/ manipulate HTML and CSS/ make a web page interactive JQuery - a javascript framework to help manipulate HTML and CSS JQuery
More informationThe Structure of the Web. Jim and Matthew
The Structure of the Web Jim and Matthew Workshop Structure 1. 2. 3. 4. 5. 6. 7. What is a browser? HTML CSS Javascript LUNCH Clients and Servers (creating a live website) Build your Own Website Workshop
More informationCS7026. Introduction to jquery
CS7026 Introduction to jquery What is jquery? jquery is a cross-browser JavaScript Library. A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based
More informationjquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
More informationChapter 9 Introducing JQuery
Chapter 9 Introducing JQuery JQuery is a JavaScript library, designed to make writing JavaScript simpler and so it is useful for managing inputs and interactions with a page visitor, changing the way a
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 14 A BRIEF LOOK AT JAVASCRIPT Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to: Describe common uses of
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationClient Side JavaScript and AJAX
Client Side JavaScript and AJAX Client side javascript is JavaScript that runs in the browsers of people using your site. So far all the JavaScript code we've written runs on our node.js server. This is
More informationManual Html A Href Onclick Submit Button
Manual Html A Href Onclick Submit Button When you submit the form via clicking the radio button, it inserts properly into Doing a manual refresh (F5 or refresh button) will then display the new updated
More informationCSC 337. jquery Rick Mercer
CSC 337 jquery Rick Mercer What is jquery? jquery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
More informationChapter6: Bootstrap 3. Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL
Chapter6: Bootstrap 3 Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL Objective To apply Bootstrap to a web site To know how to build various bootstrap commands to be a content Topics Bootstrap
More informationAR0051 JQuery. Michelle Bettman Henry Kiksen. Challenge the future
AR0051 JQuery Michelle Bettman Henry Kiksen 1 Topics When to use javascript/jquery Why JQuery Loading JQuery One JQuery program explained Effects/Events Selector Demos 2 When to use Javascript/Jquery Do
More informationSEEM4570 System Design and Implementation Lecture 04 jquery
SEEM4570 System Design and Implementation Lecture 04 jquery jquery! jquery is a JavaScript Framework.! It is lightweight.! jquery takes a lot of common tasks that requires many lines of JavaScript code
More informationWhy Use A JavaScript Library?
Using JQuery 4 Why Use A JavaScript Library? Okay, first things first. Writing JavaScript applications from scratch can be difficult, time-consuming, frustrating, and a real pain in the, ahem, britches.
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationTizen Web UI Technologies (Tizen Ver. 2.3)
Tizen Web UI Technologies (Tizen Ver. 2.3) Spring 2015 Soo Dong Kim, Ph.D. Professor, Department of Computer Science Software Engineering Laboratory Soongsil University Office 02-820-0909 Mobile 010-7392-2220
More informationThis project will use an API from to retrieve a list of movie posters to display on screen.
Getting Started 1. Go to http://quickdojo.com 2. Click this: Project Part 1 (of 2) - Movie Poster Lookup Time to put what you ve learned to action. This is a NEW piece of HTML, so start quickdojo with
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
More informationWhere s My Cat? <title>where's My Cat?</title> </head> <body> <h1 class="where">where's MY CAT?</h1>
Where s My Cat? HTML
More information~Arwa Theme~ HTML5 & CSS3 Theme. By ActiveAxon
~Arwa Theme~ HTML5 & CSS3 Theme By ActiveAxon Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact
More informationCSS BASICS. selector { property: value; }
GETTING STARTED 1. Download the Juice-o-Rama 11-01 zip file from our course dropbox. 2. Move the file to the desktop. You have learned two ways to do this. 3. Unzip the file by double clicking it. You
More informationCUSTOMER PORTAL. Custom HTML splashpage Guide
CUSTOMER PORTAL Custom HTML splashpage Guide 1 CUSTOM HTML Custom HTML splash page templates are intended for users who have a good knowledge of HTML, CSS and JavaScript and want to create a splash page
More informationManual Html A Href Onclick Submit Form
Manual Html A Href Onclick Submit Form JS HTML DOM. DOM Intro DOM Methods HTML form validation can be done by a JavaScript. If a form field _input type="submit" value="submit" /form_. As shown in a previous
More informationHTML5 and CSS3 The jquery Library Page 1
HTML5 and CSS3 The jquery Library Page 1 1 HTML5 and CSS3 THE JQUERY LIBRARY 8 4 5 7 10 11 12 jquery1.htm Browser Compatibility jquery should work on all browsers The solution to cross-browser issues is
More informationForms So start a new web site
Tutorial Forms So start a new web site Rename to index.html Create the following layout Skeleton first Style it up, one style at a time and test Produces Create a nav link pointing back to the index.html
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 5
Introduction to HTML & CSS Instructor: Beck Johnson Week 5 SESSION OVERVIEW Review float, flex, media queries CSS positioning Fun CSS tricks Introduction to JavaScript Evaluations REVIEW! CSS Floats The
More informationCISC 1600 Lecture 2.4 Introduction to JavaScript
CISC 1600 Lecture 2.4 Introduction to JavaScript Topics: Javascript overview The DOM Variables and objects Selection and Repetition Functions A simple animation What is JavaScript? JavaScript is not Java
More informationBOOTSTRAP TOOLTIP PLUGIN
BOOTSTRAP TOOLTIP PLUGIN http://www.tutorialspoint.com/bootstrap/bootstrap_tooltip_plugin.htm Copyright tutorialspoint.com Tooltips are useful when you need to describe a link. The plugin was inspired
More informationAR0051: Digital Presentation Portfolio. AR0051 JQuery. Nord-Jan Vermeer Henry Kiksen. Challenge the future
AR0051 JQuery Nord-Jan Vermeer Henry Kiksen 1 Topics When to use javascript/jquery Why JQuery Loading JQuery One JQuery program explained Effects/Events Selector Demos 2 When to use Javascript/Jquery Do
More informationCST272 Getting Started Page 1
CST272 Getting Started Page 1 1 2 3 4 5 6 8 Introduction to ASP.NET, Visual Studio and C# CST272 ASP.NET Static and Dynamic Web Applications Static Web pages Created with HTML controls renders exactly
More informationWEB DESIGNING COURSE SYLLABUS
F.A. Computer Point #111 First Floor, Mujaddadi Estate/Prince Hotel Building, Opp: Okaz Complex, Mehdipatnam, Hyderabad, INDIA. Ph: +91 801 920 3411, +91 92900 93944 040 6662 6601 Website: www.facomputerpoint.com,
More informationCSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that define how
More informationWELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL
WELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL 1 The above website template represents the HTML/CSS previous studio project we have been working on. Today s lesson will focus on JQUERY programming
More informationjquery Element & Attribute Selectors, Events, HTML Manipulation, & CSS Manipulation
jquery Element & Attribute Selectors, Events, HTML Manipulation, & CSS Manipulation Element Selectors Use CSS selectors to select HTML elements Identify them just as you would in style sheet Examples:
More informationLast class we looked at HTML5.
ADVANCED HTML5. #2 2.1 Recap 2 3 Last class we looked at HTML5. headings There are 6 levels available, ranging from h1 to h6. paragraphs links
More informationIslamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.
Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM 5049 Advanced Internet Technology Lab Lab # 1 Eng. Haneen El-masry February, 2015 Objective To be familiar with
More informationClient Side Scripting. The Bookshop
Client Side Scripting The Bookshop Introduction This assignment is a part of three assignments related to the bookshop website. Currently design part (using HTML and CSS) and server side script (using
More informationLesson 5: Introduction to Events
JavaScript 101 5-1 Lesson 5: Introduction to Events OBJECTIVES: In this lesson you will learn about Event driven programming Events and event handlers The onclick event handler for hyperlinks The onclick
More informationjquery - Other Selectors In jquery the selectors are defined inside the $(" ") jquery wrapper also you have to use single quotes jquery wrapper.
jquery - Other Selectors In jquery the selectors are defined inside the $(" ") jquery wrapper also you have to use single quotes jquery wrapper. There are different types of jquery selectors available
More informationBonus Lesson: Working with Code
15 Bonus Lesson: Working with Code In this lesson, you ll learn how to work with code and do the following: Select code elements in new ways Collapse and expand code entries Write code using code hinting
More informationThingLink User Guide. Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon
ThingLink User Guide Yon Corp Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon Index Preface.. 2 Overview... 3 Installation. 4 Functionality. 5 Troubleshooting... 6 FAQ... 7 Contact Information. 8 Appendix...
More informationCE212 Web Application Programming Part 2
CE212 Web Application Programming Part 2 22/01/2018 CE212 Part 2 1 JavaScript Event-Handlers 1 JavaScript may be invoked to handle input events on HTML pages, e.g.
More informationWebsite Development with HTML5, CSS and Bootstrap
Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on
More informationProfessional Course in Web Designing & Development 5-6 Months
Professional Course in Web Designing & Development 5-6 Months BASIC HTML Basic HTML Tags Hyperlink Images Form Table CSS 2 Basic use of css Formatting the page with CSS Understanding DIV Make a simple
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript?
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 14 A Brief Look at JavaScript and jquery Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of
More informationWeb Designing HTML5 NOTES
Web Designing HTML5 NOTES HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages
More informationFront-End UI: Bootstrap
Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com
More informationSiteforce Pilot: Best Practices
Siteforce Pilot: Best Practices Getting Started with Siteforce Setup your users as Publishers and Contributors. Siteforce has two distinct types of users First, is your Web Publishers. These are the front
More informationCSS is applied to an existing HTML web document--both working in tandem to display web pages.
CSS Intro Introduction to Cascading Style Sheets What is CSS? CSS (Cascading Style Sheets) is a supplementary extension to allowing web designers to style specific elements on their pages and throughout
More informationStudent, Perfect Final Exam May 25, 2006 ID: Exam No CS-081/Vickery Page 1 of 6
Student, Perfect Final Exam May 25, 2006 ID: 9999. Exam No. 3193 CS-081/Vickery Page 1 of 6 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives aid on
More informationEnhancing Responsive Layouts With
CSS Layouts Enhancing Responsive Layouts With JQuery Enhancing Responsive Layouts With JQuery You can do a lot with just HTML and CSS (particularly HTML5 and CSS3), and we can design beautiful and beautifully
More informationWhat s New in WCAG 2.1. An overview
What s New in WCAG 2.1 An overview WCAG Introduction Web Content Accessibility Guidelines Guidelines to help make web content more accessible to people with disabilities. Developed by the Website Accessibility
More informationJSN Sun Framework User's Guide
JSN Sun Framework User's Guide Getting Started Layout Overview & Key concepts To start with layout configuration, Go to Extension Template JSN_template_default The first tab you see will be the Layout
More informationBEFORE CLASS. If you haven t already installed the Firebug extension for Firefox, download it now from
BEFORE CLASS If you haven t already installed the Firebug extension for Firefox, download it now from http://getfirebug.com. If you don t already have the Firebug extension for Firefox, Safari, or Google
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationSession 17. jquery. jquery Reading & References
Session 17 jquery 1 Tutorials jquery Reading & References http://learn.jquery.com/about-jquery/how-jquery-works/ http://www.tutorialspoint.com/jquery/ http://www.referencedesigner.com/tutorials/jquery/jq_1.php
More informationMateen Eslamy 10/31/13
Mateen Eslamy 10/31/13 Tutorial In this tutorial, you ll learn how to create a webpage using Twitter Bootstrap 3. The goal of this tutorial is to create a responsive webpage, meaning that if the webpage
More informationCreate First Web Page With Bootstrap
Bootstrap : Responsive Design Create First Web Page With Bootstrap 1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. 2. Bootstrap 3 is mobile-first
More informationUsing Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles
Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format
More informationWorking Bootstrap Contact form with PHP and AJAX
Working Bootstrap Contact form with PHP and AJAX Tutorial by Ondrej Svestka Bootstrapious.com Today I would like to show you how to easily build a working contact form using Boostrap framework and AJAX
More informationjquery Lecture 34 Robb T. Koether Wed, Apr 10, 2013 Hampden-Sydney College Robb T. Koether (Hampden-Sydney College) jquery Wed, Apr 10, / 29
jquery Lecture 34 Robb T. Koether Hampden-Sydney College Wed, Apr 10, 2013 Robb T. Koether (Hampden-Sydney College) jquery Wed, Apr 10, 2013 1 / 29 1 jquery 2 jquery Selectors 3 jquery Effects 4 jquery
More informationGetting started with jquery MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University
Getting started with jquery MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University Exam 2 Date: 11/06/18 four weeks from now! JavaScript, jquery 1 hour 20 minutes Use class
More informationUSER GUIDE AND THEME SETUP
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free ask any questions on the online Support Forum, located at: http://themewich.com/forum.
More informationBy Ryan Stevenson. Guidebook #2 HTML
By Ryan Stevenson Guidebook #2 HTML Table of Contents 1. HTML Terminology & Links 2. HTML Image Tags 3. HTML Lists 4. Text Styling 5. Inline & Block Elements 6. HTML Tables 7. HTML Forms HTML Terminology
More informationQuick XPath Guide. Introduction. What is XPath? Nodes
Quick XPath Guide Introduction What is XPath? Nodes Expressions How Does XPath Traverse the Tree? Different ways of choosing XPaths Tools for finding XPath Firefox Portable Google Chrome Fire IE Selenium
More informationWEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310
WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 Project #4 Updating your class project to be more mobile friendly To gain a fuller appreciate for Responsive Design, please review Chapter 8. Another great
More informationUI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationIndex. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148
Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,
More informationSEEM4570 System Design and Implementation. Lecture 3 Cordova and jquery
SEEM4570 System Design and Implementation Lecture 3 Cordova and jquery Prepare a Cordova Project Assume you have installed all components successfully and initialized a project. E.g. follow Lecture Note
More informationJQuery WHY DIDN T WE LEARN THIS EARLIER??!
JQuery WHY DIDN T WE LEARN THIS EARLIER??! Next couple of weeks This week: Lecture: Security, jquery, Ajax Next Week: No lab (Easter) I may post a bonus (jquery) lab No quiz (yay!) Maybe a bonus one? Snuneymuxw
More informationCSC 121 Computers and Scientific Thinking
CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language
More informationDeveloping Apps for the BlackBerry PlayBook
Developing Apps for the BlackBerry PlayBook Lab # 2: Getting Started with JavaScript The objective of this lab is to review some of the concepts in JavaScript for creating WebWorks application for the
More informationIntroduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
More informationof numbers, converting into strings, of objects creating, sorting, scrolling images using, sorting, elements of object
Index Symbols * symbol, in regular expressions, 305 ^ symbol, in regular expressions, 305 $ symbol, in regular expressions, 305 $() function, 3 icon for collapsible items, 275 > selector, 282, 375 + icon
More informationWritten by Administrator Sunday, 05 October :58 - Last Updated Thursday, 30 October :36
YJ NS1 is Joomla 1.0 and Joomla 1.5 native module that will allow you to scroll, scrollfade or fade in your existing Joomla news items. Yes existing ones. This means that you do not need any additional
More informationc122jan2714.notebook January 27, 2014
Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the
More informationUNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? editor editor Q.2: What do you understand by a web browser?
UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? A 1: A text editor is a program that helps you write plain text (without any formatting) and save it to a file. A good example is
More informationWebsite Development Lecture 18: Working with JQuery ================================================================================== JQuery
JQuery What You Will Learn in This Lecture: What jquery is? How to use jquery to enhance your pages, including adding rich? Visual effects and animations. JavaScript is the de facto language for client-side
More informationCode Editor. The Code Editor is made up of the following areas: Toolbar. Editable Area Output Panel Status Bar Outline. Toolbar
Code Editor Wakanda s Code Editor is a powerful editor where you can write your JavaScript code for events and functions in datastore classes, attributes, Pages, widgets, and much more. Besides JavaScript,
More informationCss Manually Highlight Current Link Nav Link
Css Manually Highlight Current Link Nav Link way to automatically highlight the "current" link. And I can manually add the following CSS to each page to get them highlighted, but I want to avoid added.
More informationCSS Layout Part I. Web Development
CSS Layout Part I Web Development CSS Selector Examples Choosing and applying Class and ID names requires careful attention Strive to use clear meaningful names as far as possible. CSS Selectors Summary
More informationClient-side Techniques. Client-side Techniques HTML/XHTML. Static web pages, Interactive web page: without depending on interaction with a server
Client-side Techniques Client-side Techniques Static web pages, Interactive web page: without depending on interaction with a server HTML/XHTML: content Cascading Style Sheet (CSS): style and layout Script
More informationMobile Design for the Future That is Here Already. Rick Ells UW Information Technology University of Washington
Mobile Design for the Future That is Here Already Rick Ells UW Information Technology University of Washington Why Mobile? Why Accessible? Are UW Web sites a public accomodation under the Americans with
More informationTable of Contents. 1. Installation 3 2. Configuration 4 3. How to create a custom links 9 4. More Information 11
Table of Contents 1. Installation 3 2. Configuration 4 3. How to create a custom links 9 4. More Information 11 2 1- Installation Would you like to display your content in a nice and scrolling way and
More informationDesign Document V2 ThingLink Startup
Design Document V2 ThingLink Startup Yon Corp Andy Chen Ashton Yon Eric Ouyang Giovanni Tenorio Table of Contents 1. Technology Background.. 2 2. Design Goal...3 3. Architectural Choices and Corresponding
More informationTable of contents. HTML5 Image Enhancer Manual DMXzone.com
Table of contents About HTML5 Image Enhancer... 2 Features in Detail... 3 Before you begin... 11 Installing the extension... 11 Reference: HTML5 Image Enhancer Filters... 12 The Basics: Adding Real-time
More informationthis is a cat CS50 Quiz 1 Review
CS50 Quiz 1 Review this is a cat CS50 Quiz 1 Review JavaScript CS50 Quiz 1 Review first, recall from zamyla Remember, PHP is run server-side. The HTML output of this PHP code is sent to the user. Server
More informationWeek 8 Google Maps. This week you ll learn how to embed a Google Map into a web page and add custom markers with custom labels.
Introduction Hopefully by now you ll have seen the possibilities that jquery provides for rich content on web sites in the form of interaction and media playback. This week we ll be extending this into
More informationCST272 Getting Started Page 1
CST272 Getting Started Page 1 1 2 3 5 6 8 10 Introduction to ASP.NET and C# CST272 ASP.NET ASP.NET Server Controls (Page 1) Server controls can be Buttons, TextBoxes, etc. In the source code, ASP.NET controls
More informationAlert. In [ ]: %%javascript alert("hello");
JavaScript V Alerts and Dialogs For many years, alerts and dialogs, which pop up over the browser, were popular forms of user interaction These days there are nicer ways to handle these interactions, collectively
More informationT his article is downloaded from
Fading Elements with JQuery The fade effect is when an element fades out by becoming increasingly transparent over time until it disappears or fades in by becoming decreasingly opaque over time until it
More informationrecall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)
HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its
More informationUsing Dreamweaver CS6
6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just
More information