Sometimes our website has a fixed header or navigation menu that usually remains fixed at the top of the page. When you use the URL anchor (the #fragment part), the browser window will scroll itself (instantly) to bring anchor at the top of the page, leaving the content behind the fixed header. So here we need for offsetting anchor hash tag links to adjust for fixed header to let content appear below the fixed item.
Tag » CSS
Styling Contact Form 7 validation with CSS and border
Contact Form 7 uses minimum CSS for styling and validation. Hence lacking of better UI designing. We can overcome this issue by styling Contact Form 7 validation with border which I’m describing here in this article. Here, we will apply some CSS rules for validation customization on Contact Form 7 forms including styling Contact Form 7 validation with border.
Top Fixed Menu Bar on Scroll with CSS & jQuery – Less Code
Here I am writing minimum code to make Top Fixed Menu Bar on Scroll with CSS & jQuery. The purpose of this article is to have the navigation menu fixed at top when visitors scroll down the page and place menu back to it’s original position when scrolling back to upside.
Power CSS3 – pseudo-class and pseudo-element selectors
This last article in the series about CSS3 selectors will tell you about Pseudo-class and Pseudo-element. Pseudo-class targets an element when it’s in a particular state or specific elements in a stack. A pseudo-element is composed of two colons- ::
Power CSS3 – Attribute Selectors
This tutorial will cover a detail description about the capability of Attribute Selectors in CSS3. The attribute selectors target elements based on the presence of HTML attributes and/or it’s value and are declared using square brackets.
Descendant, Adjacent, Child, Sibling Combinators and Selectors
Coming into second part of Power CSS3 selectors, we will learn here about Descendant, Adjacent, Child, Sibling Combinators and Selectors that make our styling task lots easier.
1. X Y (Descendant Combinator)
2. X + Y (Adjacent Combinator)
3. X > Y (Child Combinator)
4. X ~ Y (Sibling Combinator)
Power CSS3 – universal, type, id and class selectors
CSS3 selectors actually select the content we want to style. Obviously a CSS selector is the part of a CSS rule set. Here we will be familiar with the power of basic CSS3 selectors:
1. * (universal selector)
2. X (type selector)
3. #X (id selector)
4. .X (class selector)
Make a HTML, CSS, JS try it yourself editor
Making a try it yourself editor is a very easy and 5 minutes task if you know the concept behind it. Here I’m telling you step by step to create a try it yourself editor like w3 schools that would be able to run your HTML, CSS and javascript code online and display the result in iframe.
Open popup from another popup in jQuery
I had popup working and I wanted to open popup from another popup where a link was placed inside first popup using jQuery. This kind of scenario is quite common.
Most probable example we see are login and register popup boxes where one can toggle to login/register popup box through a link given in currently opened popup.
update div top position based on its changing height
Few days ago, I have a requirement to update Div top position based on its changing height. I tried to resolve it by using different way
[ Page 4 of 6 ]