Align and centre divs - javascript

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>

Related

HTML Text NOT Wrapping properly, horizontal scrollbar issue

Building a simple text-based HTML document with limited CSS, and a single Jquery fueled button. I have 1 major issue: My text doesn't want to wrap, it just goes off the screen. It seems like something is wrong with any right-padding I try to apply. Help.
Codepen: https://codepen.io/nightcorey/pen/xxwyNgR
body {
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: absolute;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder div {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
/*init z-index*/
}
.holder div.current {
z-index: 1;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
margin:0 5% 0 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>

Correct your wrapper
.wrap {
padding: 0 5% 0 5%;
box-sizing: border-box;
}
UPDATE 2
Removed some excess code, rewrited it a bit
body {
width: 100%;
margin: 0;
padding: 0;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: fixed;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder > div {
width: 100%;
/* height: 100%;*/
position: absolute;
z-index: 0;
/*init z-index*/
display: none;
}
.holder > div.current {
z-index: 1;
display: block;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
padding:0 5% 0 5%;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>

You need to get rid of overflow: hidden; in the body. Also I noticed you're button for "yay" is probably not doing what you'd like it to do. You need to change the position from absolute to fixed.
body {
width: 100vw;
margin: 0;
padding: 0;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: fixed;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder div {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
/*init z-index*/
}
.holder div.current {
z-index: 1;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
margin:0 5% 0 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>
Here's the jsfiddle also. https://jsfiddle.net/5h2aqr6t/

Why does my (json) image go outside the border/container even with max-width set to 100%?

I'm using an API call to get the image info. The image I get back and want to display to the dom comes in the form of a <figure> json data. The API json data has set widths, which I notice I can change in CSS when I set a specific width to it. But what if I want it to grow or shrink with the container? I should be able to setting the max-width to 100%, but the images all go outside the container in mobile size. Also, they dont get larger when I increase the size of the screen, they stay at the same size.
JSON Data returned:
<figure data-align="right" data-img-src="https://static.giantbomb.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" data-ref-id="1300-1349827" data-size="small" data-ratio="1.3333333333333" data-width="375" data-embed-type="image" style="width: 375px"><a class="fluid-height" style="padding-bottom:133.3%" href="https://static.giantbomb.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" data-ref-id="1300-1349827"><img alt=" Original Arcade Cabinet" src="https://giantbomb1.cbsistatic.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" srcset="https://giantbomb1.cbsistatic.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg 375w" sizes="(max-width: 480px) 100vw, 480px" data-width="480"></a><figcaption> Original Arcade Cabinet</figcaption></figure>
My CSS:
figure {
font-size: 20px;
margin-left: auto;
margin-right: auto;
font-style: italic;
padding: 10px;
text-align: center;
}
figure img{
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding: 10px;
}
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Classic Arcade Game Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Raleway|Amatic+SC&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<a name="top"></a>
<div class="title">
<img src=images/jacob.jpg class="jacobLogo" alt="cartoon Jacob head">
<h1> Classic Arcade Game Info</h1>
</div>
<div class="headInfo">
<p>Search for you favorite Arcade Game below to recieve information about the game and videos!</p>
</div>
<form>
<div class="searchSection">
<input class="searchBox" type="text" placeholder="e.g. Donkey Kong" required>
</div>
<div class="buttonSection">
<input class="submitButton" type="submit" value="Search">
</div>
</form>
</header>
<main class="main">
<div class="arrow hidden">
<img class="arrowImage" src="images/boxArrow.jpg"><a href="#top">
</div>
<div class="loading">
<section class="loadingMessage"></section>
</div>
<div class="errors">
<section class="errorMessage"></section>
</div>
<div class="infoContainer hidden">
<section class="infoResults hidden info"></section>
</div>
<div class="tubeContainer hidden">
<section class="tubeResults hidden tube">
<input class="youTubeLogo" type="image" src="images/youtube.png" alt="YouTube Logo">
<section class="tubeList"></section>
</section>
</div>
</main>
<footer class="footer">
<p>Another fun site created by Jacob Ashley</p>
</footer>
<script src="script.js" async defer></script>
</body>
</html>

The HTML provided doesn't really correlate with the image you shared. I'm sure this is because a call happens from your script.js and one of these divs is replaced with the json figure tag.
However, the figure code you provided that's returned from the api has width declared in a style tag to override this in your front end you'll need to use !important.
div {
padding: 40px;
border: 1px solid #ccc;
margin: 40px;
}
figure {
font-size: 20px;
margin-left: auto;
margin-right: auto;
font-style: italic;
text-align: center;
width: 100% !important;
}
figure img{
margin-left: auto;
margin-right: auto;
height: auto;
max-width: 100%;
}
Here's a Fiddle approximating what I assume your layout is like with the returned image.

Don't work retina.js

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>

Set height of p element based on content inside it

I have a notification panel where I show the last notification. But the content of the notification depends on what the notification pushes. So this can vary from a very short message to a longer one. The short message are shown perfectly but the longer once are not shown correctly now I wrote it like this to look better:
And this is the HTML where I am talking about:
<div data-role="content" class="ui-content">
<ul data-role="listview">
<li id="notification-block">
<img class="notification_bell" src="img/icons/alert.png">
<div class="notification-wrapper">
<h2 class="notification-header"></h2>
<p class="notification-message"></p>
<p class="read-more">
<a href="#all" style="text-decoration: none" data-transition="slide">
Meer <span class="fa fa-angle-right carot"></span>
</a>
</p>
</div>
</li>
</ul>
</div>
And this is how I set the content of the notification message dynamically:
$(".notification-header").append(title);
$(".notification-message").append(message).first("p");
As you see in the Fiddle it will have overflow hidden en elipsis. But What I want is that it changes the height and break the line to read it all.
Here is recreated FIDDLE

Change height: 150px to min-height: 150px for #notification-block and reset the white-space property for notification-message:
#notification-block .notification-message {
white-space:normal;
}
Updated fiddle: http://jsfiddle.net/84ps035L/

Please see my fiddle.
I kept notifications height of constant 150px. Notification messages can contain up to 3 lines of text, always kept aligned vertically to middle:
.notification-block {
display: table;
width: 100%;
}
.notification-wrapper {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
If there are more lines, the rest of notification message is truncated and replaced with ellipsis.
.notification-message {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
font-size: 13px;
line-height: 19px;
max-height: 57px; /* 3 lines of height 19 */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
There are also some additional fixes to override jquery-mobile default styling.

add this class to your css file:
.notification-message{
white-space: normal !important;
overflow: visible !important;
word-break: break-word;
}
Fiddle

.notification-wrapper {
position: relative;
left: -10px;
font-size: 17px;
line-height: 1.47;
letter-spacing: 0.6px;
}
#notification-block {
height: 150px;
border-radius: 5px;
margin: 60px 10px 5px 10px;
background-color: #ffffff;
}
#notification-block h2 {
margin-top: 45px;
}
#notification-block img {
margin-top: 50px;
}
.notification-message {
white-space: normal !important;
}
.read-more,
.read-more a {
float: right;
font-weight: bold !important;
font-size: 16px !important;
color: black !important;
text-decoration: none !important;
}
<!DOCTYPE html>
<html>
<head>
<title>JQM latest</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
</head>
<body>
<div data-role="content" class="ui-content">
<ul data-role="listview">
<li id="notification-block">
<img class="notification_bell" src="https://cdn1.iconfinder.com/data/icons/trycons/32/bell-512.png">
<div class="notification-wrapper">
<h2 class="notification-header">Gate update</h2>
<p class="notification-message">This is a very long message and will not shown properly because this is way to long for the wrapper</p>
<p class="read-more">
<a href="#all" style="text-decoration: none" data-transition="slide">
Meer <span class="fa fa-angle-right carot"></span>
</a>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>

LTR to RTL jQuery Collapsibles block

I was looking to know how to convert from LTR to RTL the
http://www.beladitvnews.com/news/en-iraqi-mofa-ambassadors to RTL .
Code been used for to create this was :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Blocks</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
Plus as you can see first element because of alot of text it's not showing even when you click on expand.
Please advise
Thank you
Kind regards

I have reproduced the block with the "+" sign you're trying to reverse. I have added 4 lines and it did the trick. See below, if you remove/comment my 4 lines, the "+" goes back to the left :
div{
background : lightgrey;
padding: 10px;
}
a.ui-icon-plus{
display: block;
position: relative;
padding-left: 40px; /* this is the original value */
padding-right: 16px; /* this is the original value */
padding-left: 16px; /* Added this to overwrite */
padding-right: 40px; /* Added this to overwrite */
}
a.ui-icon-plus:after{
content: "";
left: 9px;
margin-top: -11px;
position: absolute;
top: 50%;
width: 22px;
height: 22px;
border-radius: 1em;
display: block;
background-color: rgba(0,0,0,.3);
background-position: center center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C5%209%2C5%209%2C0%205%2C0%205%2C5%200%2C5%200%2C9%205%2C9%205%2C14%209%2C14%209%2C9%2014%2C9%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
left: auto; /* Added this to overwrite */
right: 0; /* Added this to overwrite */
}
<div>
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-icon-plus">
Dhiaa Hadi Mahmoud AlDabas ----->
<br>
Iraq's Ambassador to the republic of Iraq in Cairo and The Representative of Iraq to the Arab Leaque
</a>
</h3>
</div>

Categories