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. 😊
Related
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>
When I click on the image itself, the lightbox loads but the image itself doesn't - instead, all I see is a white box. Basically, the lightbox shows up, but the image doesn't load. I'm not sure what I am doing wrong. I watched a youtube video on how to create a lightbox and followed the steps exactly. I don't know what I am doing wrong. I included the links to the proper javascript and css files.
Please help!!
This is my html below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description:" content="Image Gallery">
<meta http-equiv="author" content="Fiona Blumin" />
<title>Image Gallery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="lightbox.min.css" type="text/css">
<script type="text/javascript" src="lightbox-plus-jquery.min.js"></script>
</head>
<body>
<div class="Welcome">
<h1>My Travels through Europe</h1>
</div>
<div class="Pictures">
<div class="container-fluid">
<div class="row">
<div class="col">
<a href="images/pic1.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic1 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic2.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic2 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic3.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic3 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic4.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic4 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic5.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic5 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic6.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic6 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic7.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic7 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic8.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic8 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic9.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic9 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic10.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic10 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic11.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic11 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic12.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic12 copy.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This how it looks when I click on an image in my gallery:
maybe this is the problem
src="images/pic1 copy.jpg"
try to do it like this
src="images/pic1copy.jpg"
and make sure you are targeting the right picture with the right path. Let me know if it works
I am developing an app on different tv screens, everything is working fine on each and every platform except on LG 32LJ57 WebOS, the layout doesn't fit the whole screen for some reason, I've tried different things, 1) adding meta tags to fit the screen, 2) increasing resolution (noting that the default resolution is 1920x1080), but nothing is changing, also, when I tested on LG webOS emulator everything fits perfectly but not on the actual screen, appreciate your assistance
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width">
<meta name='viewport' content='height=device-height'>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Libya TV</title>
</head>
<body>
<section id="deviceready">
<div class="row h-100 align-items-center text-center">
<div class="col-xl-5 offset-xl-6">
<div class="row row1">
<div class="col-xl-4">
<a id="0" class="logo" onclick="playMedia(0)"><img
src="./img/Kids.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="1" class="logo" onclick="playMedia(1)"><img
src="./img/sport.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="2" class="logo" onclick="playMedia(2)"><img
src="./img/beauty.png" class="img-fluid"></a>
</div>
</div>
<div class="row row2">
<div class="col-xl-4">
<a id="3" class="logo" onclick="playMedia(3)"><img
src="./img/doc.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="4" class="logo" onclick="playMedia(4)"><img
src="./img/libyaTv.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="5" class="logo" onclick="playMedia(5)"><img
src="./img/movies.png" class="img-fluid"></a>
</div>
</div>
<div class="row row3">
<div class="col-xl-4">
<a id="6" class="logo" onclick="playMedia(6)"><img
src="./img/series.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="7" class="logo" onclick="playMedia(7)"><img
src="./img/kojina.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="8" class="logo" onclick="playMedia(8)"><img
src="./img/music.png" class="img-fluid"></a>
</div>
</div>
<div class="row row4">
<div class="col">
<p>
<span>NILESAT 11526 H</span>
<img src="./img/Layer%2015.png" class="img-fluid">
<img src="./img/square-twitter-256.png" class="img-fluid">
<img src="./img/app-icon21.png" class="img-fluid">
#Libyatvnetwork
</p>
</div>
</div>
<div class="row row5 ">
<div class="offset-1 ">
<img src="./img/Layer%2016.png" class="img-fluid ">
<img src="./img/appstore-icon-mobile-retina.png" class="img-fluid">
<img src="./img/Group%2010%20copy.png" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href='css/video.css'>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="toast.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/media.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
Maybe the TV can not process applications with 1080 resolution (http://webostv.developer.lge.com/discover/specifications/webos-tv-platform/supported-app-resolution/)
I guess you have configured the appinfo.json with the 'resolution': '1920x1080', but you are also setting the HTML application with the device width 1280 (content ="width=device-width") so basically the TV is trying use two different sizes
To support these televisions, you must publish two applications with two different appinfo.json , one for 1080 ("resolution": "1920x1080") and the other for 720 ("resolution": "1280x720")
this is the meta tag I use for my app, try adding viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
Please add your CSS, do you have widths on the containing row divs? Use container-fluid to contain the rows in bootstrap:
https://getbootstrap.com/docs/4.0/layout/overview/ - try wrapping the rows in a div with the class container-fluid:
<div class="container-fluid">
<div class="row h-100 align-items-center text-center">
<div class="col-xl-5 offset-xl-6">
<div class="row row1">
<div class="col-xl-4">
<a id="0" class="logo" onclick="playMedia(0)"><img
src="./img/Kids.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="1" class="logo" onclick="playMedia(1)"><img
src="./img/sport.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="2" class="logo" onclick="playMedia(2)"><img
src="./img/beauty.png" class="img-fluid"></a>
</div>
</div>
<div class="row row2">
<div class="col-xl-4">
<a id="3" class="logo" onclick="playMedia(3)"><img
src="./img/doc.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="4" class="logo" onclick="playMedia(4)"><img
src="./img/libyaTv.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="5" class="logo" onclick="playMedia(5)"><img
src="./img/movies.png" class="img-fluid"></a>
</div>
</div>
<div class="row row3">
<div class="col-xl-4">
<a id="6" class="logo" onclick="playMedia(6)"><img
src="./img/series.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="7" class="logo" onclick="playMedia(7)"><img
src="./img/kojina.png" class="img-fluid"></a>
</div>
<div class="col-xl-4">
<a id="8" class="logo" onclick="playMedia(8)"><img
src="./img/music.png" class="img-fluid"></a>
</div>
</div>
<div class="row row4">
<div class="col">
<p>
<span>NILESAT 11526 H</span>
<img src="./img/Layer%2015.png" class="img-fluid">
<img src="./img/square-twitter-256.png" class="img-fluid">
<img src="./img/app-icon21.png" class="img-fluid">
#Libyatvnetwork
</p>
</div>
</div>
<div class="row row5 ">
<div class="offset-1 ">
<img src="./img/Layer%2016.png" class="img-fluid ">
<img src="./img/appstore-icon-mobile-retina.png" class="img-fluid">
<img src="./img/Group%2010%20copy.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
First post. I've been web designing as a minor part of my role for quite some time and rely on using CSS templates extra. Just to give you an idea of where I am. I've recently utilised a template that contains a "mini menu" (a dropdown navigiation menu that only shows when the width of the page is narrow). For some reason the navigation is not working. If I select a page in the list, it does not navigate to the page. This is probably a real newbie question, but I've tried playing with the code, and I can't for the life of me get it too work.
Below is the HTML I have. Any suggestions would be very much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.mi
</body>
</html>
The JS folder contains,
bootstrap.js
html5shiv.js
jquery-1.9.1.js
modernizr-2.6.2-respond-1.1.0.min.js
respond.min.js
I get the following errors when using Inspect in Google Chrome;
Failed to load resource: the server responded with a status of 404
(Not Found)
index.html:28 Uncaught ReferenceError: $ is not defined
at index.html:28 /favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found)
Not sure since your code is not complete here, but I think you are using document.ready, before jQuery is loaded. Your
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
must be at the end of the document, after you imported all your libraries. And jQuery has to be the very first one of the list (even before jquery.mobilemenu), since the others will use it.
You can open the console to check if there is an error like $ is unknown, that means either your code or the libraries are loaded before jQuery.
Here an updated version of your code with the librairies in the right order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</body>
</html>
I have a floating red bubble, much like used in googles material design.
I am using Materializecss for web development. Info can be found here on the floating red bubble I am trying to implement:
http://materializecss.com/buttons.html
I have tried all their built in helpers for css to move it center at the bottom but no luck. Here is my html:
<html lang="en"><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>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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">
</head>
<body style="position: relative;">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="collection"><h5 class="orange-text text-darken-2"> Bitter</h5> <div class="right">65% </div> <div class="progress col "> <div class="determinate orange" style="width:65%"> </div> </div><h5 class="orange-text text-darken-2"> Malty</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div><h5 class="orange-text text-darken-2"> Smooth</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div><h5 class="orange-text text-darken-2"> Dry</h5> <div class="right">5% </div> <div class="progress col "> <div class="determinate orange" style="width:5%"> </div> </div></div><div class="center-align" style="position: fixed; bottom: 0;"> <a id="redCircle" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a></div>
<!-- Modal Structure For loading beer-->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">Loading Taste Tags</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
My css I am using can be found here:
http://pastebin.com/bHW6Fzp3
Assuming this is the fix you are looking for, your container needs to have a width greater than the width of the button, and from there you can add margin: 0 auto;
As noted above, you should create a fiddle or similar first to demonstrate your problem.
.center-align {
width: 100%;
}
.btn-floating.btn-large {
margin: 0 auto;
}
Updated your fiddle: https://jsfiddle.net/2ftu5rqg/3/
I didn't notice the centering class that was already in there - all you really need is a width on the parent container, which in this example is .center-align.