I want to add the smooth scrolling effect so users can go straight to the bottom of the page to fill out a form. I need to add the smooth scrolling effect using inline CSS. I used the code below but I'm not sure why is not working?
/* added by edito for visualization purpose */
a {
display: block;
margin-bottom: 400vh;
}
<div>
REGISTER NOW
<div id="quick-contact" class="quick-contact pad-bottom-30">
<h4>REGISTER NOW</h4>
</div>
</div>
scroll-behavior: smooth needs to bet applied to the scrolling element which by default would be html:
/* added by edito for visualization purpose */
a {
display: block;
margin-bottom: 400vh;
}
<html style="scroll-behavior: smooth;">
<body>
<div>
REGISTER NOW
<div id="quick-contact" class="quick-contact pad-bottom-30">
<h4>REGISTER NOW</h4>
</div>
</div>
</body>
</html>
I would suggest using the latest scrollIntoView() or scrollTo() function using JavaScript. You can check [MDN Doc][1]s, because scroll-behavior:smooth doesn't have all browser support plus we can't make customisations.
LOGIC YOU NEED :.
let link = document.querySelector('a');
let targetElement = document.querySelector(".quick-contact");
link.addEventListener('click', function(){
targetElement.scrollIntoView({behavior: "smooth"});
});
MAKE THE FOLLING CHANGES IN HTML AND TRY THIS, CODE, I FIND IT THE SIMPLEST
let link = document.querySelector('.link');
let targetElement = document.querySelector(".quick-contact");
link.addEventListener('click', function(e){
e.preventDefault();
targetElement.scrollIntoView({behavior: "smooth"});
});
.main {
height:290vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}
a {
flex:1;
}
<div class="main">
REGISTER NOW
<div class="quick-contact pad-bottom-30">
<h4>REGISTER NOW</h4>
</div>
</div>
body {
scroll-behavior: smooth;
}
Related
I have a problem with my web. When I set css for #responzivniMenu (display: none;) It's still displaying and might not change. I don't know where does the problem come from.
[SOLVED] It was problem with hosting! Check my answer post if you are interested what exactly was the problem.
My HTML:
<div id="responzivniMenu">
<div id="skautLogoResponzivni"></div>
<div class="responzivDrop">
<button onclick="responziv()" class="responzivBtn"></button>
<div id="responzivni" class="responzivni-content">
Domů
Historie
Aktuality
Vedoucí
Kontakt
Oddíly
</div>
</div>
<script>
function responziv() {
document.getElementById("responzivni").classList.toggle("resshow");
}
window.onclick = function(event) {
if (!event.target.matches('.responzivBtn')) {
var dropdowns = document.getElementsByClassName("responzivni-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('resshow')) {
openDropdown.classList.remove('resshow');
}
}
}
}
</script>
</div>
And CSS:
#responzivniMenu {
display: none;
}
your css style is overrided by another css rule,try adding !important after display:none.
#responzivniMenu {
display: none!important;
}
check your css file. it may contain a specific css for your #responzivniMenu that override yours
In your html i didn't saw where you are linking your css to the page.
If your css it's on the same page than your html but not in a separated page, so you must use "style" tag an your code will be
<style>
#responzivniMenu
{
display:none !important;
}
</style>
Sorry guys for this post, my hosting just has a long delay between uploading the file and changing it on the server for some reason. It's about one hour. Thanks for all your replies and I apologize for wasting your time!
I am using wordpress site. I created menu bar, inside of sub-menu, used position:fixed element. Anybody tell me how can i disable mousewheel inside of that sub-menu. That means i don't want page scroll inside of that sub-menu.
Please anyone help me.
You can use CSS property overflow: hidden; which specifies what happens if content overflows an element's box.
Using overflow: hidden; allow you to do not show up the scroll bar and so do not allowing scrolling at all including mouse weal.
Here below a very generic example, please consider to add your real markup in your question for a fix on your real app code.
https://jsfiddle.net/bxohL8tt/2/
#sub-menu{
width:250px;
height: 100px;
background-color:red;
overflow: hidden;
}
If the element that is scrolling on mouse-wheel event is the body, or even some other element, you can use JavaScript to prevent it from scrolling while your menu has "focus" like this:
var menuBar = document.getElementById('menuBar');
menuBar.onmouseover = function()
{
document.body.style.overflow = 'hidden';
};
menuBar.onmouseout = function()
{
document.body.style.overflow = 'auto';
};
Add the above inside a <script> element at the end of your main HTML source-code and it should work.
You can do this by the following code:
$("sub-menu-selector").bind("wheel mousewheel", function() {
return false;
});
For example: (The example shows the disabling on the menu but it's just the same)
$(".menu").bind("wheel mousewheel", function() {
return false;
});
body {
margin:0;
}
.menu {
background:black;
color:#fff;
position:fixed;
width:100%;
padding:15px;
}
.content {
height:1500px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
Menu
</div>
<div class="content"></div>
Is there a method in html which makes the webpage scroll to a specific Element using HTML !?
Yes you use this
<div id="google"></div>
But this does not create a smooth scroll just so you know.
You can also add in your CSS
html {
scroll-behavior: smooth;
}
You should mention whether you want it to smoothly scroll or simply jump to an element.
Jumping is easy & can be done just with HTML or Javascript. The simplest is to use anchor's. The limitation is that every element you want to scroll to has to have an id. A side effect is that #theID will be appended to the URL
Go to Title
<div>
<h1 id="scroll">Title</h1>
</div>
You can add CSS effects to the target when the link is clicked with the CSS :target selector.
With some basic JS you can do more, namely the method scrollIntoView(). Your elements don't need an id, though it is still easier, e.g.
function onLinkClick() {
document.getElementsByTagName('h2')[3].scrollIntoView();
// will scroll to 4th h3 element
}
Finally, if you need smooth scrolling, you should have a look at JS Smooth Scroll or this snippet for jQuery. (NB: there are probably many more).
<!-- HTML -->
<div id="google"></div>
/*CSS*/
html { scroll-behavior: smooth; }
Additionally, you can add html { scroll-behavior: smooth; } to your CSS to create a smooth scroll.
Year 2020. Now we have element.scrollIntoView() method to scroll to specific element.
HTML
<div id="my_element">
</div>
JS
var my_element = document.getElementById("my_element");
my_element.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
Good thing is we can initiate this from any onclick/event and need not be limited to tag.
If you use Jquery you can add this to your javascript:
$('.smooth-goto').on('click', function() {
$('html, body').animate({scrollTop: $(this.hash).offset().top - 50}, 1000);
return false;
});
Also, don't forget to add this class to your a tag too like this:
Text
Here is a pure HTML and CSS method :)
html {
scroll-behavior: smooth;
/*Adds smooth scrolling instead of snapping to element*/
}
#element {
height: 100px;
width: 100%;
background-color: red;
scroll-margin-block-start: 110px;
/*Adds margin to the top of the viewport*/
scroll-margin-block-end: 110pxx;
/*Adds margin to the bottom of the viewport*/
}
#otherElement {
padding-top: 500px;
width: 100%;
}
Link
<div id="otherElement">Content</a>
<div id="element">
Where you want to scroll
</div>
<div id="otherElement">Content</a>
<nav>
1
2
3
</nav>
<section id="section1">1</section>
<section id="section2" class="fifty">2</section>
<section id="section3">3</section>
<style>
* {padding: 0; margin: 0;}
nav {
background: black;
position: fixed;
}
a {
color: #fff;
display: inline-block;
padding: 0 1em;
height: 50px;
}
section {
background: red;
height: 100vh;
text-align: center;
font-size: 5em;
}
html {
scroll-behavior: smooth;
}
#section1{
background-color:green;
}
#section3{
background-color:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" >
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</script>
I got it working by doing this, consider that top-page is the element that you want to scroll to:
document.getElementById("top-page").scrollTo({ behavior: "smooth", top: 0 });
Yes, you may use an anchor by specifying the id attribute of an element and then linking to it with a hash.
For example (taken from the W3 specification):
You may read more about this in Section Two.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to Section Two above
for more details.
By using an href attribute inside an anchor tag you can scroll the page to a specific element using a # in front of the elements id name.
Also, here is some jQuery/JS that will accomplish putting variables into a div.
<html>
<body>
Click here to scroll to the myContent section.
<div id="myContent">
...
</div>
<script>
var myClassName = "foo";
$(function() {
$("#myContent").addClass(myClassName);
});
</script>
</body>
Should you want to resort to using a plug-in, malihu-custom-scrollbar-plugin, could do the job. It performs an actual scroll, not just a jump. You can even specify the speed/momentum of scroll. It also lets you set up a menu (list of links to scroll to), which have their CSS changed based on whether the anchors-to-scroll-to are in viewport, and other useful features.
There are demo on the author's site and let our company site serve as a real-world example too.
The above answers are good and correct. However, the code may not give the expected results. Allow me to add something to explain why this is very important.
It is true that adding the scroll-behavior: smooth to the html element allows smooth scrolling for the whole page. However not all web browsers support smooth scrolling using HTML.
So if you want to create a website accessible to all user, regardless of their web browsers, it is highly recommended to use JavaScript or a JavaScript library such as jQuery, to create a solution that will work for all browsers.
Otherwise, some users may not enjoy the smooth scrolling of your website / platform.
I can give a simpler example on how it can be applicable.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<style>
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Smooth Scroll</h1>
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
Click Me to Smooth Scroll to Section 2 Below
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
Click Me to Smooth Scroll to Section 1 Above
</div>
</body>
</html>
I have a menu consisting of 4 div boxes. I want the active box to have a red border, if another box is clicked the border is white and the border of the other box is red. Do I need JavaScript or is CSS enough?
jsfiddel div
HTML
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
CSS
.box{
margin: 10px;
float: left;
width: 100px;
height: 50px;
background-color: blue;
border: solid 1px red;
}
For click you'll need JavaScript if you want to maintain the state, hover is OK with CSS.
You can use div:active { /* style */ } for a click and hold style but it will disappear after mouse up.
This is a quick way to do it with jQuery:
$('.box').on('click', function(e){
e.preventDefault();
$(this).css('border-color', 'lime');
});
Probably better to toggle a class though:
JS:
$('.box').on('click', function(e){
e.preventDefault();
$(this).toggleClass('myClickState');
});
CSS:
.myClickState {
border-color: lime;
}
function fnChangeBorder(boxId)
{document.getElementById(boxId).style.border = "solid #AA00FF";}
<div class="box" id="A" onclick="fnChangeBorder('A')">Click here !!</div>
i chose A as a parameter because numbers won't work as a function parameters
Try this:
.box:focus{ border-color:#cd3232; }
Yes, you can use the :active pseudo-selector to achieve this.
Try this:
.box:active {
border-color: red;
}
This, however, will not persist after you release the mouse.
It is also not supported in IE6.
Take a look at this function:
http://jqueryui.com/addClass/
It shows how to apply the click event and change the CSS class. You would simply have to create a desired class with border color.
You can do this via jQuery (JSFiddle here):
$(document).ready(function() {
$('.box').click(function() {
if($('.active').length) {
$('.active').not($(this)).removeClass('active').addClass('box');
}
$(this).removeClass('box').addClass('active');
});
});
I'm relatively new to Web dev. The question is generic, but I'll pose specific user-cases.
Use-case 1:
I have a div element on a web page. When the page loads the first time, this div runs a small 5 sec animation. What I wish to do is, when this animation ends, I want the same div to contain some other element - it could be an image, a link, another animation etc.
That is, one container - the div - hosting multiple elements on a time-scale. First 5 secs animation , followed by an image or a link.
What Javascript methods will allow me to do so?
Use-case 2:
Again, I have a div element in a page. Now this div element is like a tabbed browser - you click on a different tab to view a different web page. Similarly, I wish to make this a "tabbed" div. As in, when the user hovers the mouse on tab 1, the div would show a video, when hovered over tab 2, it would show another video in the same div - that is, replacing the old video. The tabs can be considered as a fancy looking link.
Or, in the first place, is there an alternative to 'div' to do the things mentioned above?
Thanks,
SMK.
Solution for use case 2 -
This is a slightly lengthy solution but its extremely flexible and can be scaled up to any number of tabs very easily
We will divide the solution into 3 parts - The CSS, HTML and JQuery.
Lets take a look at the CSS part first
<style>
#tab_holder {
width: 350px; !important
}
#tab_holder .tabs {
float: left;
height: 20px;
padding: 5px;
border: 1px solid #eee;
border-bottom: none;
width: 50px;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
#tab_holder .tabs:hover {
background-color: #eee;
}
#tab_holder #content_holder {
width: 400px; !important
margin: 0 0 0 0;
border: 1px solid #000;
padding: 10px;
float: left;
border-radius: 0 5px 5px 5px;
}
.content {
visibility: hidden;
}
</style>
Let us now take a look at the HTML part of this solution
<div id="tab_holder">
<div id="tab1" class="tabs">Video1</div>
<div id="tab2" class="tabs">Video2</div>
<div id="tab3" class="tabs">Video3</div>
<div id="content_holder">
<div id="main_content">Select a tab to see the video..</div>
</div>
</div>
<!-- These are divs in which you put your actual content.
They are always hidden -->
<div id="content1" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/4Z6YUGGlwtA?rel=0" frameborder="0" allowfullscreen></iframe>
< /div>
<div id="content2" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/s13dLaTIHSg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content3" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/I1qHVVbYG8Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
You can see that each tab is represented by a div which is using the "tabs" class from the CSS section. If you need to add a new tab, all you have to do is add a new div and give is a new id. For example to add a forth tab, you can say -
<div id="tab4" class="tabs">Video4</div>
It is as simple as that.
Now the thing I like about this approach is that you can place the content to be displayed also in div's, rather that nesting it under jquery. In this case we use the div's with the id content1 content2 content3
This gives you the flexibility to expand as you enter content into the div and use normal markup without getting confused and at ease.
These div's are not visible as we have set their visibility to hidden is CSS.
If you add a new tab div you must also add a new content div.
Now we move onto the JQuery part -
$(document).ready(function (){
/* Add the listeners. */
$("#tab1").mouseover(function (){
switch_content('content1')
});
$("#tab2").mouseover(function (){
switch_content('content2')
});
$("#tab3").mouseover(function (){
switch_content('content3')
});
});
function switch_content(name){
$("#main_content").fadeOut('fast',function (){
$("#main_content").html($("#"+name).html());
$("#main_content").fadeIn('fast');
});
}
The above JQuery function is extremely straight forward. Each tab is attached a action listener which is fired by a mousover event. So if you add another tab with the id=tab4 and its respective content div with the id=content4 then all you have to add in the jQuery is:
$("#tab4").mouseover(function (){
switch_content('content4')
});
So it becomes very easy to expand the code.
You can find a working demo of this on my website demo section
Tips -
Avoid using hover because it creates an annoying user experience due to accidental hovers and it is hard for mobile platforms to emulate this event. Most of them fall back to click. So I suggest use the click event instead.
If you must use, make use of the HTML video tag and pause the video using JS if the user hovers on another tab. This will render a better user experience.
Here is an example for use-case 1.
In your html you need to include the 5 second animation, i persume this is a gif? Although it can be any content. For the sake of this example i will show it as a div.
The html i have used:
<div id="example">
<div id="somecontent"> </div>
<div id="morecontent"> </div>
</div>
The CSS:
#example
{
width:500px;
height:500px;
background-color:#f00;
padding:10px;
}
#somecontent
{
width:200px;
height:200px;
background-color:#fff;
}
#morecontent
{
width:200px;
display:none;
height:200px;
background-color:#000;
}
and the javascript(using jQuery):
setTimeout(function() {
$("#somecontent").fadeOut("slow", function() {
$("#morecontent").fadeIn("slow");
});
}, 5000);
Have a look at this jsfiddle for it in action - http://jsfiddle.net/fntWZ/
For use case 2 it will be more complicated. Try having a look for some different plugins that could help with this
answer for use-case:1
css :
<style>
#myDiv {
height:0;
width:0;
position:absolute;
border:1px solid red;
}
</style>
script :
$(document).ready(function(){
$("#myDiv").animate({width:"100px", height:"100px"},5000, function(){
var image = new Image();
image.src = "dropdownContainerBottomMiddle.png"; //your image src goes here
$("#myDiv").append(image);
//you can append more content by using setTimeout function
setTimeout(function(){
var anc = "stackoverflow";
$("#myDiv").append(anc);
}, 1000);
});
});
html:
<div id="myDiv"></div>