Solved

Mobile (menu) navigation with jQuery.

Posted on 2012-08-25
12
1,837 Views
Last Modified: 2012-08-26
I got this mobile navigation from http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-5#comments

I've no bother implement the code on its own. I suspect the problem is CSS3 when I integrate the mobile (menu) navigation with jQuery on my HTML code with other functions e.g. accordion etc. I've tried to position the mobile (menu) navigation on the <header> area but it would not stay in a <header> area not without a lot of CSS3 hacking to have absolute positioning in which I think is not a good idea e.g. margin: -34px 0 -0px 23px;

I've successfully implement accordion loosely on centre of a page with background can be seen e.g. .accordion{width:94%;.

For example as below for accordion:
body{background:url(../images/bg.png) repeat;margin:0; padding:0;}
.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial;}
.footer a{color:#999;text-decoration:none}#wrapper-250,
.accordion{width:94%; margin:0 auto; max-width:500px;}


Would it be possible to emulate as above for Mobile (menu) navigation with jQuery without fixing the CSS3 margin: -34px 0 -0px 23px; for example as below. I think is what causes a lot of problem only when I add in margin: -34px 0 -0px 23px to achieve  menu on <header> area.
#nav-wrap {
            position: relative;
            margin: -34px 0 -0px 23px;
      }


I would appreciate with your expertise and easier solution for Mobile (menu) navigation on <header> please?


---------------------------------------------------------------------------------------
The HTML5 code of the actual mobile (menu) navigation with jQuery:
		[b]<!-- Header start -->
	<div id="header"><h3>Heading</h3>
	
	
	
		<!-- Mobile navigation start -->
	<nav id="nav-wrap">
	<!--<div id="menu-icon">Menu</div>-->

	<ul id="nav">
	
	<table width="90%" border="0" cellspacing="5">
    <tr>
        <td><li><a href="#">1</a></li></td>
        <td><li><a href="#">2</a></li></td>
        <td><li><a href="#">3</a></li></td>
        <td><li><a href="#">4</a></li></td>
        <td><li><a href="#">5</a></li></td>
    </tr>
    <tr>
        <td><li><a href="#">6</a></li></td>
        <td><li><a href="#">7</a></li></td>
        <td><li><a href="#">8</a></li></td>
        <td><li><a href="#">9</a></li></td>
        <td><li><a href="#">10</a></li></td>
    </tr>
</table>
	
	</ul>
	</nav>
	<!-- / Mobile navigation end -->
	
	
	
	</div>
<!-- Header End -->[/b]
	

Open in new window



CSS3
[b]/************************************************************************************
GENERAL
*************************************************************************************/
body {
	font: 10px Arial, Helvetica, sans-serif;
	color: #666;
}
a {
	text-decoration: none;
	color: #39C;
}
h1, h2 {
	line-height: 120%;
	margin: 0 0 10px;
	color: #000;
}
/*header {
	display: table; 
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
/* #pagewrap {
	width: 960px;
	max-width: 94%;
	margin: 0px auto 0;
}*/
/*#content {
	clear: both;
	border-top: solid 1px #ccc;
	padding-top: 20px;
	margin: 20px 0;
} */

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
	margin-top: 20px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #000;
	background: #ecebeb;
}
#nav a:hover {
	background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
	background: #fff;
	padding: 2px;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 100px;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 5000px) {

	/* nav-wrap */
	#nav-wrap {
		position: relative;
		margin: -34px 0 -0px 23px;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 35px;
		height: 20px;
		background: #a5cd4e url(../images/menu-icon.png) no-repeat 5px center;
		padding: 8px 2px 0px 30px;
		cursor: pointer;
		/* border: solid 1px #666;*/
		display: block; /* show menu icon */
		font: 12px Arial, Helvetica, sans-serif;
	}
	#menu-icon:hover {
/************************************************************************************
GENERAL
*************************************************************************************/
/*body {
	font: .9em/150% Arial, Helvetica, sans-serif;
	color: #666;
}
a {
	text-decoration: none;
	color: #39C;
}
h1, h2 {
	line-height: 120%;
	margin: 0 0 10px;
	color: #000;
}
header {
	content: " "; 
	display: table; 
}*/


/************************************************************************************
STRUCTURE
*************************************************************************************/
/* #pagewrap {
	width: 960px;
	max-width: 94%;
	margin: 30px auto 0;
}
#content {
	clear: both;
	border-top: solid 1px #ccc;
	padding-top: 20px;
	margin: 20px 0;
} */

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
	margin-top: 20px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #000;
	background: #ecebeb;
}
#nav a:hover {
	background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
	background: #fff;
	padding: 2px;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 100px;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {

	/* nav-wrap */
	#nav-wrap {
		position: relative;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 42px;
		height: 30px;
		background: #ecebeb url(images/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #666;
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		background-color: #f8f8f8;
	}
	#menu-icon.active {
		background-color: #bbb;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
		width: 160px;
		z-index: 10000;
		padding: 5px;
		background: #f8f8f8;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (min-width: 600px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}

		background-color: #3db8c8;
	}
	#menu-icon.active {
		background-color: #ffcb05;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 28px;
		width: 320px;
		z-index: 10000; /* place overlay on top of other elements */
		padding: 5px;
		background: #ffcb05;  /* f8f8f8 */
		border: solid 1px #ffcb05;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (min-width: 600px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}[/b]

Open in new window




****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************



This is the actual whole HTML5 code just incase you may need it. Including mobile navigation code:
<!DOCTYPE html>

<!-- *********************************************************************************************

How to Create CSS3 + jQuery Accordion Menu [Tutorial]
"How to Create CSS3 + jQuery Accordion Menu" that was specially made for DesignModo by our friend Valeriu Timbuc. 

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com/futurico
http://vladimirkudinov.com
http://rockablethemes.com

********************************************************************************************* -->

<html lang="en">

<head>
	<title>jQuery Accordion Menu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><!-- // Removing the device width and height from the meta tag will give us the fluid layout. http://css3wizardry.com/category/iphone/ -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="robots" content="noindex,follow" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-startup-image" href="images/splash.png" />
	<script src="js/jquery.mobile.js"></script>


	
	<!-- // Performance improve with accordion function improves with Phonegap scripts were added. Smooth ease in and ease out effect. It degrade gracefully with rollover effect of the content heading bars.-->
	<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
	<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript">


	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
	
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/
	
	function onBodyLoad()
	{		
		document.addEventListener("deviceready", onDeviceReady, false);
	}
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	function onDeviceReady()
	{
		// do your thing!
		navigator.notification.alert("PhoneGap is working")
	}
    
    </script>
    
    <!-- Header and footer style start -->
    <link rel="stylesheet" href="css/generic.css" type="text/css" media="screen" />
    <!-- Header and footer style end -->
    
    <!-- Accordian Start. http://designmodo.com/jquery-accordion-menu/ -->
	<link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />
	<!-- <style type="text/css">body{background:url(images/bg.png) repeat;}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}#wrapper-250, .accordion{width:94%; margin:0 auto; max-width:500px;}</style> -->

<!-- Accordian script start -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><!-- Change it to jquery1.7.2 from 1.7.1. It still works. Source: webdesignerwall.com/demo/mobile-nav/-->
<script type="text/javascript">

		$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			// accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideDown('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
			});


		});

	</script>             
<!-- Accordian script end -->




<!-- Coyer start -->
<link rel='stylesheet' href='css/style.css'>
<!-- Coyer end -->

<!-- Mobile navigation start -->
<script type="text/javascript">
jQuery(document).ready(function($){

	/* prepend menu icon */
	$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
	
	/* toggle nav */
	$("#menu-icon").on("click", function(){
		$("#nav").slideToggle();
		$(this).toggleClass("active");
	});

});
</script>
<!-- Mobile navigation start -->

<!-- Mobile navigation start -->
<link href="css/mobile_navigation.css" rel="stylesheet" type="text/css">
<!-- Mobile navigation end -->



</head>

<body>
<!-- Header start -->
	<div id="header"><h3>Heading</h3>
	
	
	
		<!-- Mobile navigation start -->
	<nav id="nav-wrap">
	<!--<div id="menu-icon">Menu</div>-->

	<ul id="nav">
	
	<table width="90%" border="0" cellspacing="5">
    <tr>
        <td><li><a href="#">1</a></li></td>
        <td><li><a href="#">2</a></li></td>
        <td><li><a href="#">3</a></li></td>
        <td><li><a href="#">4</a></li></td>
        <td><li><a href="#">5</a></li></td>
    </tr>
    <tr>
        <td><li><a href="#">6</a></li></td>
        <td><li><a href="#">7</a></li></td>
        <td><li><a href="#">8</a></li></td>
        <td><li><a href="#">9</a></li></td>
        <td><li><a href="#">10</a></li></td>
    </tr>
</table>
	
	</ul>
	</nav>
	<!-- / Mobile navigation end -->
	
	
	
	</div>
<!-- Header End -->

<!-- Body start -->
<!-- Accordion start -->
	<div id="wrapper-250">

		<ul class="accordion">
			
			<li id="one" class="files">

				<a href="#one">My Files<span>495</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
					
					<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

					<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

					<li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
					
					<li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

				</ul>

			</li>
			
			<li id="two" class="mail">

				<a href="#two">Mail<span>26</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>
					
					<li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>

				</ul>

			</li>
			
			<li id="three" class="cloud">

				<a href="#three">Cloud<span>58</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Connect<span>12</span></a></li>
					
					<li><a href="#"><em>02</em>Profiles<span>19</span></a></li>
					
					
					
					
					
					
					
					<!-- coyer start -->
	<div id="page-wrap">
				
			<div class="module blue">
				<h2><em>03</em>Deaf person's attention <a href="#">1</a></h2>
				<ul>
				   <li>Take a step-by-step process.</li>
				   <li>Approaching a Deaf person may be enough and your approach may suggest your intention to communicate.</li>
				   <li>You can also wave to get eye contact or tap the person gently on the shoulder.</li>
				</ul>

				<h2><em>04</em>When is it my turn? <a href="#">2</a></h2>
				<ul>
				   <li>Set up a system in the surgery to that a visual indicator will allow a Deaf person to know when he or she is being called.</li>
				   <li>A monitor in the waiting room is a good idea.</li>
				   <li>If an interpreter is present, make sure you call the patient's name and not the interpreter's name.</li>
				</ul>

				<h2><em>05</em>Scheduling appointments <a href="#">3</a></h2>
				<ul>
				   <li>Ensure that email or text messages can be used to make an appointment.</li>
				   <li>Why not try an online booking system?</li>
				   <li>It is important that Deaf people manage their health and can book their own appointments.</li>
				</ul>
			</div>
	</div>
<!-- coyer end -->

					
					
					
					
					
					
					
					

					<li><a href="#"><em>03</em>Options<span>27</span></a></li>

					<li><a href="#"><em>04</em>Connect<span>12</span></a></li>
					
					<li><a href="#"><em>05</em>Profiles<span>19</span></a></li>

					<li><a href="#"><em>06</em>Options<span>27</span></a></li>

				</ul>

			</li>
			
			<li id="four" class="sign">

				<a href="#four">Sign Out</a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Log Out</a></li>
					
					<li><a href="#"><em>02</em>Delete Account</a></li>

					<li><a href="#"><em>03</em>Freeze Account</a></li>

				</ul>

			</li>
		
		</ul>
		
	</div>
<!-- Accordion end -->
<!-- Body end -->






<!-- Footer Start -->	
<div id="footer"></div>
<!-- Footer End -->	
	
</body>

</html>

Open in new window

Screen-Shot-2012-08-25-at-22.54..png
Screen-Shot-2012-08-25-at-22.54..png
0
Comment
Question by:Redscrapbook
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38334174
Hi,

Please post a zip file with all the css and js files.
0
 

Author Comment

by:Redscrapbook
ID: 38334224
#nav-wrap {
            position: relative;
            margin: -34px 0 -0px 23px;
      }

The margin is causing problems. If i remove a margin and you'll see a problem where a menu and menu icon move below a <header>.

What I'm hoping to achieve is to have menu align with the accordion or loosely position on a header area that I can adjust easily.

Please find a zipped file as attached.
kozaiwaniec.zip
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38334553
Hi Redscrapbook,

I am not able to open your zip file. maybe it got corrupted in the upload. it's 0 bytes.
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

Author Comment

by:Redscrapbook
ID: 38334870
www.kerrydeaf.com/kozaiwaniec.zip
I've problems uploading stuff on this site for whaterver reason.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38334905
that didn't work either. I think you need to re-make your zip file.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38334912
Are you in Kerry? I so wish to return to Ireland... I lived in Dublin for a few years. I'm looking at Galway now - we have a really cute cottage in Connemara - not one you could really live in full time, but awesome to visit. Anyway, if you know of any web development jobs in Ireland, will you let me know?

:))

Cheers.

You can always just email me directly too (include the files)

kyleiwaniec @ gmail com
0
 

Author Comment

by:Redscrapbook
ID: 38334952
www.kerrydeaf.com/kozaiwaniec_2.zip
I don't know why it has to be painful as possible with a corrupted file! And redo the lota again. I've double checked and a file with plenty of bytes zipped.

I'm from Clare and currently resides in Dublin. This is my client site from Kerry that I'm ftp-ping. Ireland are still deep in recession, 'weary sigh' and 'its going on for too long' . There are work but any work sought are hard won. LinkedIn is a good bet and not many want to spend money on advertising or worse still look for free labour through internship for someone with masters degree calibrate. One big blue chip company actually attempted this and it was eventually withdrawn from Creative Ireland.com protest. I'd recommend work in bigger company with less chance of letting go as opposed to smaller companies.

We (Ireland) are hanging on and wish that this 'recession' thing will be over sooner, but no. Some say it is already over but it far from it. It is global and that effects Ireland like a dominio. I'm a graphic designer by profession and able to tell you the current climate as it is. It isn't easy. My advice is to stay put where you are unless you're wealthy enough to relocate to a lovely cottage in Galway and work from home ;-) ;-)
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 500 total points
ID: 38335012
OK, I made some adjustments so that it's a little cleaner. I added an inner wrapper for the header, which is 94% of the window to match the accordion. (I also made a change to the last line of accordion.css, because the 94% was getting read twice.) I'm using absolute positioning for the headerTitle and the nav-wrap, but in a way that you don't have to set weird values.

Anyway, I made a whole bunch of changes to the css files and the html file. I'm having trouble uploading here too, so I'm emailing you the files.
0
 

Author Comment

by:Redscrapbook
ID: 38335021
Ahh, I'm not the only one with difficulties uploading on this site. Thank you for taking your time in cleaning up the codes and I appreciate it. I'll check my email now.
0
 

Author Comment

by:Redscrapbook
ID: 38335072
I've identified all the clean up you've done. Is it possible to match the Yellow drop down to match the accordion width. I've tried few ways but to no avail. I even add in 'tables'. I know it should be thing of a past. Then it is a wrap for this question.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38335091
make the following adjustments:

mobile_navigation.css:92@media screen and (max-width: 5000px)
#nav-wrap {
position: absolute;
padding: 5px 0;
width: 96.7%;
max-width: 500px;

}

mobile_navigation.css:92@media screen and (max-width: 5000px)
#nav {
clear: both;
position: absolute;
width: 100%;
z-index: 10000;
padding: 5px;
background: #FFCB05;
border: solid 1px #FFCB05;
display: none;
}

<table width="" border="0" cellspacing="5" style="
    width: 100%;
   
">
                    <tbody><tr>
                        <td><li><a href="#">1</a></li></td>
                        <td><li><a href="#">2</a></li></td>
                        <td><li><a href="#">3</a></li></td>
                        <td><li><a href="#">4</a></li></td>
                        <td><li><a href="#">5</a></li></td>
                    </tr>
                    <tr>
                        <td><li><a href="#">6</a></li></td>
                        <td><li><a href="#">7</a></li></td>
                        <td><li><a href="#">8</a></li></td>
                        <td><li><a href="#">9</a></li></td>
                        <td><li><a href="#">10</a></li></td>
                    </tr>
                </tbody></table>

If you can, you should try not to use tables though.
Cheers.
0
 

Author Closing Comment

by:Redscrapbook
ID: 38335167
I'm very impressed with kozaiwaniec dedication and expertise on specific requests. It is always spot on. I always look forward to responses to my requests as I know there is always something to learn.
0

Featured Post

Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question