?
Solved

Mobile (menu) navigation with jQuery.

Posted on 2012-08-25
12
Medium Priority
?
1,865 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 

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 2000 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 2000 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

764 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