A little something about everything

internet marketing and website development made simple..

How to disable popup tips in Visual Studio Code

Visual Studio Code is a great stand alone code editor that is free from Microsoft. However, it does have a few annoying functions out of the box. The worst of them is the constant tool tips which can get in the way of code and in some cases open browser windows as you accidently click on these tool tips.

Here is how you can remove these tool tips

In all methods you will need to open the User Settings editor. To do this:

  • Click File > Preferences > Settings
  • Now expand "Text Editor"
  • Click on "Suggestions"
  • Click "Edit in Settings.json"

Now you will have the "{} User Settings" tab open. The pane on the left is the defaults and the pane on the right is where you can edit these settings. You will need to place the updates inside of the "{ code here, }" then click save. 

Method 1, update the suggestion delay so you can still have tips but they don't appear unless you hover over the element for some time.

  "editor.quickSuggestionsDelay": 1000,

Method 2, disable the hover function. You will still be able to use CtrlR + K and CtrlR + I as needed.

"editor.hover.enabled": false,

Method 3, disable completely. You don't want or need these tips and you want them to go away forever.

"editor.parameterHints": false,

 

That's it, your done!

lightweight Javascript toggle function without jquery to display block/none for an element

Here is a quick lightweight javascript toggle function for sites where you dont want to use jquery.

The JavaScript:

<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
var list = document.getElementsByClassName("tmc");
for (var i = 0; i < list.length; i++) {
list[i].style.display="none";
e.style.display = 'block';
}
}
</script>

Some example CSS:

<style>
.dbn {
display:block;
float:right;
width:40vw;
border:.05em solid #000;
padding:.8em;
margin:1em;
box-shadow:0 0 .3em #000;
}
#aa {background-color:#f00;}
#bb {background-color:#0f0;}
#cc {background-color:#00f;}
</style>

Some excmple HTML:

<ul>
<li><a onclick="toggle('aa');" style="cursor:pointer ">one</a></li>
<li><a onclick="toggle('bb');" style="cursor:pointer ">two</a></li>
<li><a onclick="toggle('cc');" style="cursor:pointer ">three</a></li>
</ul>
<div id="aa" class="dbn">
Content of Div aa
</div>
<div id="bb" class="dbn">
Content of Div bb
</div>
<div id="cc" class="dbn">
Content of Div cc
</div>

Example:

Content of Div aa
Content of Div bb
Content of Div cc

How to center an element (div, span, etc) using css3

In order to target a div you can do so by id or by class, for example

<div id="centerme" class="centerit">some content</div>

here is the css:

#centerme {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* in some cases you may want to give it a width and height first */
height:100%;
max-height: 10rem;
width: 100%;
max-height: 20rem;
}
/* another option only vertical via class rather than id */
.centerit {
top: 50%;
transform: translateY(-50%);
}
/* or only horizontal  */
.centerit {
left: 50%;
transform: translateX(-50%);
}

That's it!

simple Show/Hide content or multiple Div's using only javascript and CSS

Simple script to show and hide multiple div's

Example:

Spotlight 1, Spotlight 2, Spotlight 3

Spotlight 1 content

Spotlight 2 content

Spotlight 3 content

The code:
<script language="javascript">
function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}
function ShowHide(bioname) {
	var bios = getElementsByClass('bio');
	for(i=0; i<bios.length; i++)
		bios[i].style.display = 'none';
	document.getElementById(bioname).style.display='block';
}
</script>
<style>
#bio2,#bio3 {
	display: none;
}
</style>
<p>Simple script to show and hide multiple div's</p><p>Example:</p>
<p>
<a href="#" onclick="ShowHide('bio1');">Spotlight 1</a>,
<a href="#" onclick="ShowHide('bio2');">Spotlight 2</a>,
<a href="#" onclick="ShowHide('bio3');">Spotlight 3</a></p>
<div id="bio1" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #000;box-shadow: 0 0 5px #000;"><h4 style="color:#000;">Spotlight 1 content</h4> </div> <div id="bio2" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #f00;box-shadow: 0 0 5px #f00;"><h4 style="color:#f00;">Spotlight 2 content</h4> </div> <div id="bio3" class="bio" style="width:400px;margin:10px;padding:10px;border:1px solid #0f0;box-shadow: 0 0 5px #0f0;"><h4 style="color:#0f0;">Spotlight 3 content</h4> </div>

Mobile is the future

With the launch of googles new mobile friendly test tool you can expect to see google pushing mobile friendly code for search placements. 

The results are basic with no in major code diagnostics, with the following two main results:

  • Awesome! This page is mobile-friendly.
  • Not mobile-friendly
    • generic fail reason
If your website is not already mobile now is the time to bring it up to date before google and other major search engines implement penalties for non mobile friendly websites.

A well designed mobile site also helps keep clients on the site long enough to turn them into prospective clients.