Don't work retina.js - javascript

I have problems with retina.js.
Download images https://yadi.sk/d/VEpe-Kdz35PEfr
Why not apply #2x and #3x images? Why retina.js doesn't work? I've been doing documentation. Why this is happening? How to fix this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
text-align: center;
font-family: helvetica, sans-serif;
padding-bottom: 25px;
}
h2 {
margin-top: 35px;
}
.responsive {
width: 80%;
margin: auto;
}
.responsive img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.wrapper {
background: #eaeaea;
margin: 35px auto;
width: 1170px;
padding: 25px 25px 45px;
border-radius: 5px;
}
.img-wrapper {
display: inline-block;
width: 30%;
background: rgba(0, 0, 0, .06);
padding: 0 15px 25px;
vertical-align: middle;
border-radius: 3px;
}
.img-wrapper p {
height: 75px;
font-size: 13px;
}
.bg, .bg2, .bg3 {
height: 150px;
}
</style>
<!-- Uncomment one of the following CSS links to test the behavior of a
different CSS preprocessor.-->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.scss.css"> -->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.sass.css"> -->
<script type="text/javascript">
// Spoof the browser into thinking it is Retina
// comment the next line out to make sure it works without retina
window.devicePixelRatio = 3;
</script>
</head>
<body>
<div class="wrapper">
<h1>retina.js test environement</h1>
<h2>Img Tags</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>Img tag #1x</h3>
<p>
This image does not opt in. It will always be shown at 1x.
</p>
<img src="google-logo.png">
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Img tag #2x</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<img src="google-logo.png" data-rjs="2">
</div>
<!-- This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments. -->
<div class="img-wrapper">
<h3>Img tag #3x</h3>
<p>
This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments.
</p>
<img src="google-logo.png" data-rjs="3">
</div>
</div>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.0/retina.min.js"></script>
</body>
</html>

There must be a bug in v2.1.0, I changed the source of the script to 2.0.0 and it works as expected:
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.0.0/retina.min.js"></script>

Related

How can I make my splitscreen responsive?

I created this split screen view using split.js. Two divs are shown next to each other. You can drag the middle to make one bigger of smaller.
Now it would be nice to let the two divs automatically fall below each other if the screen is smaller than lets say 768 px, but offcourse keeping the split screen functionality.
Even better apart from automatically changing the view when scaling the browser it would be nice to give the user the option to choose for horizontal/vertical themselves as well. So this way they can overrule the standard behavior.
I already tried working with bootstrap 4, cfr. https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be, but they don't seem to work together well.
My code: https://jsfiddle.net/rjtpvhn1/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="content">
<div class="split a">text left</div>
<div class="split b">text right</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
font-size: 20px;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width: 100%;
height: 100%;
padding: 30px;
border: 1px solid;
overflow: auto;
}
.gutter {
cursor: e-resize;
height: 100%;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ccc;
}
JAVASCRIPT: (include https://unpkg.com/split.js/dist/split.min.js)
Split(['.a', '.b'], {
gutterSize: 9,
sizes: [50, 50]
});

How to let "cross" pop up with ::after a different section

I'm trying to make a cross change to minus and pop up some text.
I have a example but I don't understand how it works with ::after.
It is made with ::after but I don't understand how to use it. Or is it made with a JavaScript?
My code
h2 {
text-transform: uppercase;
letter-spacing: 3px;
font-family: ProximaNovaT-Thin;
font-weight: 400;
font-size: 34px;
line-height: 44px;
}
h5 {
cursor: pointer;
line-height: 24px;
border-top: 1px solid #777;
border-bottom: 1px solid #777;
position: relative;
padding: 20px 75px 20px 0;
}
h5::before {
content: "";
position: absolute;
background: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/plus-icon1.png) scroll no-repeat center center;
background-size: auto;
top: 0;
right: 0;
width: 70px;
height: 100%;
background-size: 45px 45px;
}
.opencont h5::after {
content: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/minus.png) scroll no-repeat center center !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- COSTUM STYLE.CSS -->
<link href="Classes/Model/Contact.css" rel="stylesheet" type="text/css"/>
<title>ThemeBuild B.V.B.A</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 style="padding-top: 50px; padding-bottom: 40px; font-weight: 400; font-family: ProximaNovaT-Thin;">Contact gegevens</h2>
<div class="locatie-dropdown">
<div class="topc text-left">
<h5 style="font-size: 16px;">WOODSTOCK LOCATIONS</h5>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- BOOTSTRAP SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</html>
I'll answer what I can with the information you've given.
First, ::after is a pseudo element. You can read about it here: https://www.w3schools.com/cssref/sel_after.asp.
This means that the "cross" (+) and (-) are positioned after a selected element (in this case h5).
Second, this functionality is most likely accomplished with some javascript. It would involve using an event listener (or in-line javascript onClick) to catch the onClick event of an element (in this case likely the parent of the h5 or the h5 itself), and change a css property that says whether the content is expanded (shown) or not. The content to be shown would be toggled on/off probably using display:none or visibility:hidden. The "cross" (+) or (-) would be changed appropriately within the same onClick event.
In pseudo-code:
If clicked, and content is hidden, then show content and change + to -.
If clicked, and content is shown, then hide content and change - to +.

CSS breaks on reload mobile

I'm not very skilled at CSS. I have website that has 4 stylesheets and 3 JS files-using Bootstrap 4 and jQuery. When I deployed it on live and refresh the page, all was working fine.
However, when I go to website from mobile, it works fine the first time but when I refresh, all the CSS and HTML is broken (this usually happens after 1st or 2nd refresh). After it is broken, I refresh it once or twice, it fixes the issue. I searched about it and some say it is happening because of using relative positioning and floating, but when I commented out those lines from my CSS files, I still have the same problem. Does anyone have any idea about how to fix this issue?
index html
**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landor App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<style></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/>
</head>
<body>
<!--INTRO PAGE-->
<div id="intro-page" class="container-fluid" style="display: none">
<div class="row intro-header">
<div class="col-12"><img id="landor-worldmark"></div>
</div>
<div class="row intro-text">
<div class="intro-text col-12">
<h3>Hi Andrew,</h3><br>
<h3>We can't wait to welcome you to Landor London.
Until then please take a few minutes
<span style="white-space: nowrap;">(3, to be exact)to explore more about us...</span></h3><br>
<h3>Regards,</h3>
<h3>Peter</h3><br><br>
<span id="enter-button">Enter</span>
</div>
</div>
<div class="intro-footer row">
<div class="col-12"><img class="img-fluid intro-boat"></img></div>
</div>
</div>
intro.css
html {
height: 100%;
}
.intro-text{
font-family: "apercuBold";
}
#intro-page{
padding-left: 20px;
padding-right: 20px;
}
body {
background-color:black;
}
.container-fluid{
padding-right: 10px;
padding-left: 10px;
}
.intro-text{
position: relative;
top: 5%;
}
#enter-button{
font-family: "timeposRegular";
text-decoration: underline;
font-size: 150%;
cursor: pointer;
position: relative;
top: 20%;
}
.intro-header{
padding-top: 3%;
}
.intro-text{
padding-top: 50px;
padding-bottom: 50px;
}
#landor-worldmark{
content:url("../assets/Landor_Logo.png");
width: 120px;
height: 30px;
}
.intro-boat{
content:url("../assets/boat2.png");
max-width: 400px;
height: auto;
float:right;
}
#media screen and (max-width: 450px) {
.intro-text > h3{
font-size: 100%;
}
.intro-text{
font-size: 100%;
line-height: 1.4;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 100%;
}
.intro-boat{
max-width: 200px;
height: auto;
float:right;
}
.intro-header{
padding-top: 5%;
}
}
#media screen and (max-width: 350px) {
.intro-text > h4{
font-size: 90%;
}
.intro-text{
font-size: 94%;
line-height: 1.1;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 94%;
}
.intro-boat{
max-width: 200px;
height: auto;
}
.intro-header{
padding-top: 5%;
}
}
.intro-footer{
position: fixed;
bottom: 10%;
width: 100%;
}
**
I just pulled out my phone and went to the site, and used the Browser tools phone emulator option (i don't know if that's what it's called) and it looks just fine on reload. Maybe try restarting your phone or clearing cache.
Is it because you are tilting your phone and switching the view from horizontal and vertical (That still shouldn't change anything)
After a whole day, I finally solved this problem by adding "?" at the end of my stylesheets paths on the link tag. It's a caching issue, although I disabled caching, for some reason it did not work. Now I refreshed the page > 10 times and never experienced any problem! I think, because of the question mark, when it is loading the CSS, first it's checking to see if there is another version available which prevents it from fetching from the cache completely.

Align and centre divs

I am making a web page. I am trying to centre and align my divs properly (the animated company logos).
I need them to sit next to each other instead of on top of each other, with spacing in between to fit the page.
This might make things more clear:
Here is my code:
<html>
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/CSS" href="Style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="container">
<h1>
My Interactive Webpage
</h1>
<h1>
Career Page
</h1>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Information</li>
<li>Games</li>
<li>Career</li>
</ul>
</header>
<div id="container">
<head>
<center>
<p><font face="verdana" color="green">Welcome to my Career Page!
I am passionate about all aspects of computer games development especially programming and games design. Since an early age I have played and experienced a wide range of platforms and games and retain my love for this form of entertainment. One of my favourite games of all time is Oblivion, on the PC and developed by Bethesda, it played brilliantly, was graphically superb and had a perfect soundtrack. I would love to be involved in developing a game of that quality for the current generation of platforms as well as PC. A computer games programme that gives me a strong foundation in computer science is ideal. It gives me the fundamental skills and knowledge for adapting to this rapidly changing and evolving games industry.
Below are some of the companies I would dream of working for. Please click the text to be taken to the respective homepage of each company.
</font></p>
</center>
</div>
<div class="tilt pic">
<style>
#rcorners3 {
border-radius: 25px;
background: url(http://i.imgur.com/AkIPWeF.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://eu.blizzard.com/en-gb/">
<font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
</a>
</div>
<div class="tilt pic">
<style>
#rcorners2 {
border-radius: 25px;
background: url(http://i.imgur.com/Mouf1lw.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
</a>
</div>
<!DOCTYPE html>
<html>
<head>
<div class="tilt pic">
<style>
#rcorners4 {
border-radius: 25px;
background: url(http://i.imgur.com/pFeIHdd.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="https://www.ubisoft.com/en-GB/">
<font color="white"><p id="rcorners4">UBISOFT</p></font>
</a>
</div>
</body>
</html>
</body>
</html>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>
As others have mentioned there is a lot of unnecessary repetition in your code that can be cleaned up but to answer your question I'd suggest using a table, specifically a table row with its width set to 100% to format your images how you want them like so:
<table style="width: 100%;">
<tr>
<td>
<div class="tilt pic">
<a href="http://eu.blizzard.com/en-gb/">
<font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
</a>
</div>
</td>
<td>
<div class="tilt pic">
<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
</a>
</div>
</td>
<td>
<div class="tilt pic">
<a href="https://www.ubisoft.com/en-GB/">
<font color="white"><p id="rcorners4">UBISOFT</p></font>
</a>
</div>
</td>
And lastly in order to center your images within their respective cells you need to add the following to each of their ids:
#rcorners3 {
margin-left:auto;
margin-right:auto;
...
}
#rcorners2 {
margin-left:auto;
margin-right:auto;
...
}
#rcorners4 {
margin-left:auto;
margin-right:auto;
...
}
This makes ensures that the spacing on each side of the element is equal regardless of how much space is actually available.
See working example - http://jsfiddle.net/ddwqkm5t/1/
As mentioned already there are a lot of errors, I really tried to go through it, but it actually would take quite a while...
Here is an first attempt of removing some errors: https://jsfiddle.net/6qfq1c7g/
However, you should not use this code since there are still many mistakes.
Please consider to read something about classes and the html basic structure which should be something like http://www.w3schools.com/html/html_intro.asp
Do not use <html> or <head> or <body> twice.
You can of course use <style> tags within your html but you should at least put them all together so you are not switching between html and css all the time. Best practice would be creating a separate file for your css as you already implement in your head (style.css).
Use classes for same elements. Your "company" elements are basically all the same, so you should do something like
.company {
border: 1px solid #333;
border-radius: 5px;
// and so on ....
}
For the background then you can use specific ids or even classes again
.blizzard {
background-color: url('blizzard.jpg');
}
.ubisoft {
background-color: url('ubisoft.jpg');
}
This will clean up your code a lot.
Actual response:
To align your 3 elements every element needs the css style
display: inline-block;
I also recommend to give
vertical-align: top;
so that everything is aligned on the same height. To center it then again you should add
margin: 0 auto;
And the outer wrapping element should have
text-align: center;
you can try this one:
<html>
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/CSS" href="Style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="container">
<h1>
My Interactive Webpage
</h1>
<h1>
Career Page
</h1>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Information</li>
<li>Games</li>
<li>Career</li>
</ul>
</header>
<div id="container">
<head>
<center>
<p><font face="verdana" color="green">Welcome to my Career Page!
I am passionate about all aspects of computer games development especially programming and games design. Since an early age I have played and experienced a wide range of platforms and games and retain my love for this form of entertainment. One of my favourite games of all time is Oblivion, on the PC and developed by Bethesda, it played brilliantly, was graphically superb and had a perfect soundtrack. I would love to be involved in developing a game of that quality for the current generation of platforms as well as PC. A computer games programme that gives me a strong foundation in computer science is ideal. It gives me the fundamental skills and knowledge for adapting to this rapidly changing and evolving games industry.
Below are some of the companies I would dream of working for. Please click the text to be taken to the respective homepage of each company.
</font></p>
</center>
</div>
<div class="tilt pic" style="float:left; padding:10px;">
<style>
#rcorners3 {
border-radius: 25px;
background: url(http://i.imgur.com/AkIPWeF.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://eu.blizzard.com/en-gb/">
<font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
</a>
</div>
<div class="tilt pic" style="float:left; padding:10px;">
<style>
#rcorners2 {
border-radius: 25px;
background: url(http://i.imgur.com/Mouf1lw.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
</a>
</div>
<!DOCTYPE html>
<html>
<head>
<div class="tilt pic" style="float:left; padding:10px;">
<style>
#rcorners4 {
border-radius: 25px;
background: url(http://i.imgur.com/pFeIHdd.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="https://www.ubisoft.com/en-GB/">
<font color="white"><p id="rcorners4">UBISOFT</p></font>
</a>
</div>
</body>
</html>
</body>
</html>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>

Dead Center for JavaScript Output

I'm going to apologize in advance for how basic this question is, but this is my first time using JavaScript in HTML.
Basically, I have a JavaScript that produces a different bit of random text every time a user loads the page. I'd like to format that text in Helvetica and then display it centred in the middle of the page. I'm attempting to do this with CSS as indicated below, but it is not working for me. Any suggestions much appreciated.
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="horizon">
<div id="content">
<script type="text/javascript" src="scripts.js"></script>
</div>
</div>
</body>
CSS
#horizon {
color: white;
background-color: #ffffff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
margin-left: -410px;
position: absolute;
top: -237px;
left: 50%;
width: 825px;
height: 475px;
visibility: visible
}
Well for starters, your missing your HTML tags.
You need to wrap your HTML code between HTML Tags.
Second, you will need to set your text to a different color as the background color. In your CSS, you will need to change the #horizon color to black, or something else.
Other than that, your code works.
try
#content
{
margin: auto;
width: 200px; /* however wide it should be (required) */
}
...
<div id="content">
stuff goes here from js / whatever
</div>
for vertical alignment you are looking at JS and not CSS.
How about using text-align: center?:
#content
{
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
text-align: center;
}

Categories