GyanCode

Monday 14 May 2018

OnClick Scrolling go to difine div

JS

$(() => {
//Smooth Scrolling Using Navigation Menu
$('a.how-order').on('click', function (e) {
$('html,body').animate({
scrollTop: $($(this).attr('href')).offset().top - 61
}, 1000);
e.preventDefault();
});
});

HTML
<a href='#service-pro-main' class='how-order'>How to Order</a>

<div id="service-pro-main" class="pro_serv"></div>

Tuesday 11 April 2017

Tooltip with bootstrap

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tooltip with bootstrap</title>
</head>
<script type="text/javascript">
$('a').tooltip();
</script>
<body>
<div class="navbar tooltip-demo">
<ul class="nav">
<li><a class="top" title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a></li>
<li><a class="right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</a></li>
<li><a class="bottom" title="" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a class="left" title="" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>
</body>
</html>

Monday 10 April 2017

Text-shadow not showing

I want to apply text-shadow property on a heading text but it is not showing

<style rel="Stylesheet" type="text/css" >
.shadow {
color: black;
font: bold 52px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #fe4902,
2px 2px #fe4902,
3px 3px #fe4902;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
}
.shadow:hover {
position: relative;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
text-shadow: 5px 0px 2px rgba(150, 150, 150, 1);
}
</style>

HTML :

<h1 class='shadow'>Reseller welcome</h1>

Wednesday 5 April 2017

CSS !important not working

I have the following code and for some reason the !important qualifier isn't working.

<div style="font-family : calibri; font-size: 20pt !important;">
<ul>
<li>
<span style="font-size: 11px;">
<span style="font-size: 11px;">
Honey Glazed Applewood Smoked Spiral Ham
</span>
<span style="font-size: 11px;">
Served with Dijon Honey Mustard and Turkey Roulade
</span>
</span>
</li>
</ul>
</div>

Give the <div> an id and then add this rule to your CSS stylesheet (or in a <style> tag if you don't want to change the style sheet):

#your_div_id span {font-family : calibri; font-size: 24px !important;}

!important in CSS allows the author to override inline styles (since they have a higher precedence than style sheet styles normally). It doesn't automatically make the style marked !important override everything else.

Tuesday 4 April 2017

Some Reason CSS not working

This problem is making me feel like an absolute noob.

Here is the head of my .html file:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="http://fakedomain.com/smilemachine/html.css" rel="stylesheet"/>
<title>Some Reason CSS not working</title>

</head>

And my html.css file is indeed where it should be. But I'm getting absolutely no styling whatsoever. Help!

And please don't down vote just because the answer is obvious and I can't see it.

1. Maybe CSS not available in folder
2. Maybe Path issue
3. Maybe you can't attach the CSS
4. Maybe css name

You can check all issue your design as working fine.

Okay, so now I'm just trying to fix the problem locally on my machine. Here is the head:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>(Note: Use like this)
<title></title>

</head>

Thanks...

Friday 31 March 2017

CSS Font Sizes

In this tip, you will learn how to specify a font’s size with CSS.

Being a practical nerd, I will not waste time talking about all the various methods for declaring font sizes with CSS … instead I will concentrate on the two widely used ways and then briefly explain the differences. First, the two main methods:

By pixel

By em

What is the difference between and EM and a pixel?

Pixels are an absolute measure of a font’s size and an EM is a relative measure – that means the actual pixel size of the font (as they appear on screen) set with EM’s, can fluctuate. This makes using EM’s trickier. So the nerd answer is NOT to use EMs!

Let’s look at a quick EM example anyway:

<div style="font-size:1.2em">
So the above would cause the fonts to be about 20% larger than the baseline font size – thus 1.2em. I am not going to go into all the nerd details about EM’s because I think pixels are the way to go.

Thursday 30 March 2017

Height:100vh doesn't work correctly with content in the div

<!DOCTYPE html>

<head>

<title>Height:100vh doesn't work correctly with content in the div</title>

</head>

.intro { color: #fff;height: 100vh; background: url('yourimage.jpg') no-repeat center center; background-size: cover; position: absolute;bottom: 2em; }

p.hello {margin: 30px; }

.page1 {color: #fff; height: 100vh; background: beige; }

.page2 {color: #fff; height: 100vh; background: black; }

</style>

<body>

Intro text is coming soon!

</p>

<p>

Buttons coming here.

</p>

</div>

<p>Tekst test</p>

</div>

<p>Tekst test.</p>

</div>

</body>

</html>

Wednesday 29 March 2017

Height for Full Screen Div?

I have a DIV element that needs to fill the entire screen until the user scrolls and reveals the content. So essentially remain at the viewports height.

Here is what I did and it works, but it’s only compatible with newer browsers.

.section-full {
height:100vh;
min-height:100vh;

}

Tuesday 28 March 2017

Changing the Font to All Caps with CSS

While text in general is hard to read when written in all caps – and considered the electronic version of yelling – using CAPS for emphasize is a handy tool.

Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:

h1 {
text-transform: uppercase;
}

With this, everything that has the h1 tag applied, WILL APPEAR IN ALL CAPS.

Another interesting text-transformation property is "capitalize"

h1 {text-transform: capitalize;}

With This, All Your Words Will Begin With A Capital Letter!

The 3 ways to insert CSS into your web pages

1. With an external file that you link to in your web page:

2. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:

<head>
   <style type="text/css">
      p { padding-bottom: 12px; }
   </style>
</head>

3. By inserting the CSS code right on the tag itself:

<p style="padding-bottom:12px;">Your Text</p>

Gyancode

A free library of HTML, CSS, JS

Search This Blog

Monday 14 May 2018

OnClick Scrolling go to difine div

Tuesday 11 April 2017

Tooltip with bootstrap

Monday 10 April 2017

Text-shadow not showing

I want to apply text-shadow property on a heading text but it is not showing

Wednesday 5 April 2017

CSS !important not working

Tuesday 4 April 2017

Some Reason CSS not working

Friday 31 March 2017

CSS Font Sizes

By pixel

By em

Thursday 30 March 2017

Height:100vh doesn't work correctly with content in the div

Wednesday 29 March 2017

Height for Full Screen Div?

Tuesday 28 March 2017

Changing the Font to All Caps with CSS

The 3 ways to insert CSS into your web pages

1. With an external file that you link to in your web page:

2. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:

3. By inserting the CSS code right on the tag itself: