I'm new to Stack, html and mobirise and (insert anything).
So, I bought a template in Mobirise, built a website Skystreem, but have 1 problem, animation in blocks doesn't work in Chrome or any webkit browsers, works in Edge and Safari. (especially that part "section class="counters1").
So, I tried to explore it and found this: For example,
1) if I add 2 blocks and then counter animation block - it doesnt count, just shows numbers.
2) if I add all the same, but counter block is first - it does animate in chrome.
I tried to check source code, but it is exactly the same and using the same assets, just sections' places (header2-h and counters1-d) are switched places.
Also there you can find the code itself:
<!DOCTYPE html>
<html>
<head>
<!-- Hi -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/logo.png" type="image/x-icon">
<meta name="description" content="">
<title>Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
<link rel="stylesheet" href="assets/web/assets/icons/icons.css">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/animate.css/animate.min.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link href="assets/fonts/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/skystreem/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="mbr-section article content1 cid-qA7BcRsr7c" id="content1-g" data-rv-view="229">
<div class="container">
<div class="media-container-row">
<div class="mbr-text col-12 col-md-12">
<h2 class="mbr-fonts-style block-title align-center display-2">Siz əldə edirsiniz</h2>
</div>
</div>
</div>
</section>
<section class="header2 cid-qA7BfwvgVH" id="header2-h" data-rv-view="233">
<div class="container">
<div class="media-container-row">
<div class="media-content">
<h1 class="mbr-section-title mbr-white pb-3 mbr-fonts-style display-1">Bu nədir?</h1>
<div class="mbr-section-text mbr-white pb-3 ">
<p class="mbr-text mbr-fonts-style display-5"><strong>SkyStreem </strong>– Azərbaycanda çalışan şirkətlər üçün unikal marketinq xidmətidir.<br><br>Təsəvvür edin, müştəri məkanınızda WiFi şəbəkənizə qoşulur və Siz onun Facebook/Instagram profili, onun adı, yaşı, ad günü və bütün digər
dəyərli ictimai məlumatlarını icazəsi ilə avtomatik əldə edirsiniz!
<br><br>Bizimlə bu <strong>artıq mümkündür</strong>!</p>
</div>
</div>
<div class="mbr-figure" style="width: 100%;">
<img src="assets/images/pic3-6881x5681.jpg" alt="SkyStreem" title="" media-simple="true">
</div>
</div>
</div>
</section>
<section class="counters1 counters cid-qA7ADWZ6ht" id="counters1-d" data-rv-view="230">
<div class="mbr-overlay" style="opacity: 0.7; background-color: rgb(4, 54, 124);">
</div>
<div class="container mbr-white">
<div class="container pt-4 mt-2">
<div class="media-container-row">
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
166
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Clients
</h4>
</div>
</div>
</div>
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
210
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Projects
</h4>
</div>
</div>
</div>
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
357
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Testimonials
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/popper/popper.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smooth-scroll/smooth-scroll.js"></script>
<script src="assets/viewport-checker/jquery.viewportchecker.js"></script>
<script src="assets/theme/js/script.js"></script>
<div id="scrollToTop" class="scrollToTop mbr-arrow-up"><a style="text-align: center;"><i class="mbri-down mbr-iconfont"></i></a></div>
<input name="animation" type="hidden">
</body>
</html>
I will be very grateful to anyone who helps even a little bit.
Thank y'all in advance!
Yes, in last versions Mobirise often has this problem in different themes. I solved this issue with moving the script. Maybe you would also find an answer somewhere here: http://benalman.com/projects/jquery-throttle-debounce-plugin/
Related
I am creating a visual style sheet for a website that uses an extensive list of variables to define colors. For each of the colors, I have created a div with a class containing the variable name.
Is there a way to walk each of the divs on the page and add the background-color definition below the variable name in each of the divs?
I found the script below, but I am not sure how to get it to walk the page and add the color definition to each div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Oral Health Color Pallet</title>
</head>
<body onload="myFunction()">
<div class="container py-5 text-center">
<h1>Background Colors</h1>
<div class="row row-cols-2 text-white">
<div id="test" class="col bg-secondary p-5">
<h2>bg-secondary</h2>
<span id="demo"></span>
</div>
<div class="col bg-primary p-5">
<h2>bg-primary</h2>
</div>
<div class="col bg-success p-5">
<h2>bg-success</h2>
</div>
<div class="col bg-info p-5">
<h2>bg-info</h2>
</div>
<div class="col bg-warning p-5">
<h2>bg-warning</h2>
</div>
<div class="col bg-danger p-5">
<h2>bg-danger</h2>
</div>
</div>
</div>
<div class="container py-5 text-center">
<h1>Gradients</h1>
<div class="row row-cols-2">
<div class="row row-cols-2 text-white">
<div class="col bg-gradient-secondary p-5">
<h2>bg-secondary</h2>
</div>
<div class="col bg-gradient-primary p-5">
<h2>bg-primary</h2>
</div>
<div class="col bg-gradient-success p-5">
<h2>bg-success</h2>
</div>
<div class="col bg-gradient-info p-5">
<h2>bg-info</h2>
</div>
<div class="col bg-gradient-warning p-5">
<h2>bg-warning</h2>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var elem = document.getElementById("test");
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
You can try like in the following snippet:
function myFunction() {
let elems = document.querySelectorAll(".col");
elems.forEach(elem => {
let theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
let gradient = window.getComputedStyle(elem, null).getPropertyValue("background-image");
let title = elem.querySelector("h2")
let hex = rgb2hex(theCSSprop)
title.insertAdjacentHTML('afterend', `<span>${hex}</span><br/><span>${gradient}</span>`);
})
}
let rgb2hex = c => '#' + c.match(/\d+/g).map(x => (+x).toString(16).padStart(2, 0)).join``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Oral Health Color Pallet</title>
<style>
.bg-gradient-blue-radial {
background-image: radial-gradient(at 91% 100%, #00a1e4 1%, #1f4282 100%);
color: #fff;
}
</style>
</head>
<body onload="myFunction()">
<div class="container py-5 text-center">
<h1>Background Colors</h1>
<div class="row row-cols-2 text-white">
<div id="test" class="col bg-secondary p-5">
<h2>bg-secondary</h2>
<span id="demo"></span>
</div>
<div class="col bg-primary p-5">
<h2>bg-primary</h2>
</div>
<div class="col bg-success p-5">
<h2>bg-success</h2>
</div>
<div class="col bg-info p-5">
<h2>bg-info</h2>
</div>
<div class="col bg-warning p-5">
<h2>bg-warning</h2>
</div>
<div class="col bg-danger p-5">
<h2>bg-danger</h2>
</div>
</div>
</div>
<div class="container py-5 text-center">
<h1>Gradients</h1>
<div class="row">
<div class="row row-cols-2 text-white">
<div class="col bg-gradient-blue-radial p-5">
<h2>bg-blue-radial</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
Slick slider messing with font in complete different location on Chrome
Very weird situation.
When my slick slider goes to the next / previous image one 3-column block with red titles in them the font goes a little darker and then comes back normaly as the slider finished sliding one element.
It looks like the font ins "blinking"
What I tried:
downgrading slick back to 1.6.0
remove all classes of the 3-column block and style each element
different window-sizes
different browsers (Firefox & Internet Explorer)
Validate Source-Code (NU checker showed no errors.)
Nothing is working.
It works fine in Firefox & IE but not in Chrome - can't test in safari but somebody told me the same is happening there.
My Chrome - version: 87.0.4280.66
I really don't know what else i could do.
Here is a GIF of what's happening:
Simplified Sourcecode (In Execution | Slick already initiated)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="robots" content="all,follow">
<link rel="stylesheet" href="//cdn.componentator.com/spa.min#14.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,700">
<link rel="stylesheet" href="/widgets.css?ts=gnt3q">
<script src="//cdn.componentator.com/spa.min#14.js"></script>
<meta name="keywords" content="Node.js, eshop, ecommerce, Total.js">
<meta name="author" content="Peter Širka">
<link type="text/css" rel="stylesheet" href="/default/css/bootstrap.min.css">
<script src="/default/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="/default/css/slick.css">
<script src="/default/js/slick.min.js"></script>
<link type="text/css" rel="stylesheet" href="/default/css/default.css">
<link type="text/css" rel="stylesheet" href="/default/css/style.css">
<script src="/default/js/default.js"></script>
<script src="/default/js/custom.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body data-jc="exec,binder,modificator">
<div data-jc="loading" class="ui-loading hidden">
<div></div>
</div>
<div data-jc="shoppingcart" data-jc-path="shoppingcart" data-jc-config="discount:0"></div>
<div data-jc="message" data-jc-config="button:Schließen" class="ui-message hidden"></div>
<div data-jc="autocomplete" class="ui-autocomplete-container hidden">
<div class="ui-autocomplete" style="max-height: 200px;">
<ul></ul>
</div>
</div>
<div class="header-spacer"></div>
<main class="main" style="min-height: 939px;">
<div class="container">
<div class="row">
<div class="col-12">
<section class="body">
<div>
<div></div>
<div class="productslider">
<div class="row slick-initialized slick-slider"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 2400px; transform: translate3d(-1280px, 0px, 0px);">
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-6" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-5" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
</div>
</div><button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button>
</div>
</div>
<div></div>
</div>
</section>
</div>
</div>
</div>
</main>
<footer class="">
<div class="container">
<hr><br>
<div class="row" style="
font-size: 40px !important;
">
<div class="col-md-4 text-md-left text-center">
<h2>TEXT 1</h2>
</div>
<div class="col-md-4 text-md-center text-center">
<h2>TEXT 2</h2>
</div>
<div class="col-md-4 text-md-right text-center">
<h2>TEXT 3</h2>
</div>
</div>
</div>
</footer>
<div class="scrollToTop" style="display: none;"></div>
</body>
</html>
Maybe you know why this is happening / you have the same problem
Would really appreciate it,
as i already spent hours debugging this...
Give the footer position: relative; and z-index: 1;
In this way you take the element out of the stacking context, and that usually solves the problem. 😊
I'm just starting to learn the code, going through the courses.
I've made the react app, and have a basic HTML template to show up before the bundled.js is loading (for slow connection)
<link href="https://fonts.googleapis.com/css?family=Public+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="..." crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="..." crossorigin="anonymous"></script>
<div id="app">
<header class="header-bar bg-primary mb-3">
<div class="container d-flex flex-column flex-md-row align-items-center p-3">
<h4 class="my-0 mr-md-auto font-weight-normal"><a class="text-white" href="/">ComplexApp</a></h4>
</div>
</header>
<div class="py-5 my-5 text-center">
<div class="dots-loading">
<div></div>
</div>
</div>
<footer class="border-top text-center small text-muted py-3">
<p>
<a class="mx-1" href="/">Home</a>
<!-- -->|
<!-- -->
<a class="mx-1" href="/about-us">About Us</a>
<!-- -->|<a class="mx-1" href="/terms">Terms</a>
</p>
<p class="m-0">
Copyright © 2020
<!-- -->
ComplexApp. All rights reserved.
</p>
</footer>
</div>
In Chrome, it loads nicely:
But for some reason in Firefox, the page is blank until the js is fully loaded.
Network tab shows that CSS and fonts are loading all the time in parallel with js
What might be the problem? is it some Firefox-specific stuff? Can it be fixed somehow?
This is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
</div>
</body>
</html>
'''
I have a code:
window.onload = function(){
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
}
'''
Finally, when I click on the second element for scrolling, in debugger I recieve an error:"Uncaught TypeError: top.scrollIntoView is not a function
at HTMLImageElement.scrollToTop (script.js:22)". It should works properly, but I don't understand why it doen not working
you just needed to define "top". add var and your code works!
window.onload = function(){
}
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
var top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
Other than using it like that it might be better to make it one function and use it in the HTML.
The following code should work like a charm:
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
And, in HTML use it like that:
<a class="btn-outline-light" onclick="scrollSmoothTo('work')">See our work</a>
I have js fiddle which works fine,
I tried to replicate it on my local system, where slider(menu icon) neither appears nor works. Here is my jsfiddle and source code, can anyone tell me what I missed.
Jsfiddle: https://jsfiddle.net/karimkhan/nzxd5r3r/10/
source code on local system:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Starter Template - Materialize</title>
<!--<link href="font/material-design-icons/Material-Design-Icons.ttf" rel="stylesheet">-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link href="css/materialize.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script>
$(".button-collapse").sideNav();
$(".dropdown-button").dropdown();
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
</script>
</head>
<body>
<main>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Follower analysis</li>
<li>Tweet analysis</li>
<li>Retweet analysis</li>
<li>Tweet analysis</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
<div class="row scrollspy grey lighten-4">
<div class="container">
<div class="row">
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text">Tweets
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<i class="material-icons">repeat</i>
<span class="white-text">Retweet
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Favourite
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Followers
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Sentiment
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Social score
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m6">
<div class="card-panel teal">
<span class="white-text">Sentiment analysis graph for tweets
</span>
</div>
</div>
<div class="col s6 m6">
<div class="card-panel light-blue accent-4">
<span class="white-text">Sentiment analysis donuts graph for all hastags
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="card-panel teal">
<span class="white-text">Tags analysis.
</span>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="js/init.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
You have to wait until the DOM has been initialized (document has been fully loaded). Wrap your slider code in something like this:
$(function() {
//code
});
Also, you're using an old version of jQuery in the code you posted which is incompatible with Materialize.js. Please use the latest version of jQuery 1.x (check here: https://developers.google.com/speed/libraries/#jquery)