| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Anna Rausch

Page history last edited by arausch 8 years, 10 months ago

 

Entry #7

Introduction to Java Script - Changing Elements when clicked on 

 

Making an element change when clicked on is very easy. It requires just a few line of java script.

 

Start by using this code for you original picture:

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> 

(the id, src, width, and height will change according to your needs)

 

Then put this code in:

 

<script>

function changeImage() {

    var image = document.getElementById('myImage');

    if (image.src.match("bulbon")) {

        image.src = "pic_bulboff.gif";

    } else {

        image.src = "pic_bulbon.gif";

    }

}

</script>

 

This is what it could look like

  

 

          No click                                        After clicked on

 

 

Entry #6 

Problem Solving with Bootstrap

 

Bootstrap is a very unique tool that allows someone to make a website using the code and templates. One of bootstraps best features is their responsive navigations bar with links, drop down menus, and search bars. This wiki entry is about how to make sure all the components of the navigation bar are working. 

 

In order to make all components are working, you need to link the necessary documents. You can either link to external documents or download bootstrap to your computer. It is very important to h all the right items linked. 

 

These are the two css documents: 

 <!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

 

<!-- Optional theme -->

<link rel="stylesheet" href="/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

 

This is the needed js:

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

 

    <!-- Include all compiled plugins (below), or include individual files as needed -->

   <!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

 

 

If you have the external linking it is helpful just to copy and past the Basic template in the getting started section.

 

 

First: 

Make sure you have linked all the appropriate 

 

Entry #5 

Search Box

 

Search boxes are usually on the upper right corner of the page, usually in the nav bar, and is used to search the website for specific information. This helps the users navigate the sight more quickly.

 

This is the basic HTML for the search bar. 

	<!-- HTML for SEARCH BAR -->
	<div id="tfheader">
		<form id="tfnewsearch" method="get" action="http://www.google.com">
		        <input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton">
		</form>
	<div class="tfclear"></div>
	</div>

There is also a lot of css that goes into making the search box, the elements you can edit include (this css is based off the classes and ids from the HTML above): 
	#tfheader{
		background-color:#c3dfef;
	}
	#tfnewsearch{
		float:right;
		padding:20px;
	}
	.tftextinput{
		margin: 0;
		padding: 5px 15px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		border:1px solid #0076a3; border-right:0px;
		border-top-left-radius: 5px 5px;
		border-bottom-left-radius: 5px 5px;
	}
	.tfbutton {
		margin: 0;
		padding: 5px 15px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		outline: none;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		border: solid 1px #0076a3; border-right:0px;
		background: #0095cd;
		background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
		background: -moz-linear-gradient(top,  #00adee,  #0078a5);
		border-top-right-radius: 5px 5px;
		border-bottom-right-radius: 5px 5px;
	}
	.tfbutton:hover {
		text-decoration: none;
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	}
	/* Fixes submit button height problem in Firefox */
	.tfbutton::-moz-focus-inner {
	  border: 0;
	}
	.tfclear{
		clear:both;
	}
 
This is a picture of what you search by might look like based on the code above:


For more information:http://www.textfixer.com/tutorials/html-search-box.php     

 

 

 

 

Entry #4

Pop up windows

Making pop up windows is very easy: 

  1. Create the link
  2. select the link and then open the Behaviors panel (Shift+F3).
  3. Click the Add (+) button and select 'Open Browser Window' from the Actions pop-up menu
  4. Select the URL to be opened and set the window properties

          - width, height, attributes, and a name

     5.To edit a pop-up window, select the link and then double-click the 'Open Browser Window' in the Actions column of the Behaviors panel

     6.Save and test your file in a web browser.

 

This is an example of what your pop-up window might look like: 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

For more information : http://adf.ly/3014780/www.pixel2life.com/viewtutorial/86951/how_to_create_pop_up_window/ 

 

 

Entry #3

Content Aware - Photoshop

 

Using content aware fill allows someone to fill a space they want to get rid of by replacing it with parts of the background photoshop thinks will work. Doing this is very simple:

 

1. Select the area you wish to get rid of using either marquee, lasso, or the magic wand tool. 

2. Control Click on the selection a click on Fill and a dialogue box will appear

3. Click fill with content aware and press OK.

 

When you press okay the area you selected will be replaced with what appears to look like what would be behind it if it was never there. In the photo below a pole was removed from the photo. 

 

 

 

For more information: http://www.photoshopessentials.com/photo-editing/content-aware-fill-cs5/ 

Entry #2 

Inserting a favicon 

 

A favicon is a small picture that displays next to the page's title on a browser tab. Favicon are generally 16 x 16 pixels, and are usually the sights logo or or some version of the first letter of the websites name. The format of the icon must be .ico (use online convertors).  Inserting one is fairly simple. 

 

1. Upload your favicon into the images folder. 

2. Insert following code in the head section. 

<link rel="shortcut icon" href="//images/specialicon.ico" type="image/x-icon" />

3. update the bolded section with the proper information for your image. 

 

This is what your favicon will look like. 

 

http://www.dwuser.com/education/content/quick-tip-adding-a-favicon-to-your-website/

Entry #1 

Creating a drop-down list with 4 options adsf

 

<select>
  <optionvalue="volvo">Volvo</option>
  <optionvalue="saab">Saab</option>
  <optionvalue="mercedes">Mercedes</option>
  <optionvalue="audi">Audi</option>
</select>

 

<select> creates the list 

<option> defines an element within the list 

 

Mostly used in forms to gather user input. 

 

List of attributes that go with this code:

1. autofocus - Specifies that the drop down list should automatically come into focus when the page opens

2. disabled - Specifies that the drop down list should be disabled

3. form_id - defines one or more forms that the selected field belongs to

4. multiple - specifies that multiple options can be chosen

5. name - defines name for the drop down menu

6. required - the user must select an answer before submitting the form 

7. number - defines the size or the number of options visible in a drop down list

 

Picture: 

 

link:  http://www.w3schools.com/tags/tag_select.asp 

 

 

Comments (5)

Lori said

at 12:16 pm on Feb 24, 2015

Entry #1, 4/4. All required elements are provided. This is a very interesting topic which I have not seen posted before. I am interested to try out this code. Although, I feel like you are missing a part of the code... (maybe)

Lori said

at 8:24 am on Mar 17, 2015

Entry #2: 4/4. Very useful post. Your directions are very clear and easy to follow. All required elements are provided in the post.

Lori said

at 8:33 am on Mar 31, 2015

Entry #3: 3/4. All required elements are provided in your post. I love this tool! Although, try to post on more advance feature because we learned this tool in Intro. Web Design.

Lori said

at 8:59 am on Apr 9, 2015

Entry #4: 3/4. This seems like a useful tool but the directions are a little unclear. Are they directions for when in Dreamweaver? Also, I do not know if you picture visually display what you are explaining.

Lori said

at 8:09 am on May 20, 2015

Entry #5: 4/4
Entry #6: 4/4

Both of these are very useful and Adv. 1 level entries. I really like the bootstrap post. Make sure the search box code actually works (they can be tricky sometimes)

You don't have permission to comment on this page.