I am trying to have multiple slideshows of two images on a page; those two images are different for all rows. I have tried following multiple solutions on StackOverflow, like this and it's almost working fine but the display is a bit weird, the second image in the slideshow gets shown below the first image for a moment before it comes over the first image. I have attached a GIF file of the same:
Here's my code for the same:
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap -->
<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" href="./style.css"> -->
<!-- icons -->
<script src="https://kit.fontawesome.com/a7e5305de0.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>Autoencoder Results</title>
<style>
#slideshow {
margin: 0px auto;
position: relative;
width: 256px;
height: 256px;
}
#slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<center><h1>Autoencoder Results</h1></center>
<h2 style="margin-left: 1.5%;">Reconstructed Training Images</h2>
{% for i in range(len(training_images_list)) %}
<br>
<br>
<h3 style="margin-left: 10%;">{{ i+1 }}.</h3>
<center><table border="1">
<COLGROUP>
<COL width="100"><COL width="100">
<THEAD>
<tr>
<td><center><b>Input<b></center><img src={{ training_images_list[i] }} alt="Sorry, No Display!" border="0"/></td>
<td><center><b>Reconstructed<b></center><img src={{ reconstructed_training_images_list[i] }} alt="Sorry, No Display!" border="0"/></td>
<td><center><b>Flip-Test<b></center><div class="slideshow"><div>
<img src={{ training_images_list[i] }}>
</div>
<div>
<img src={{ reconstructed_training_images_list[i] }}>
</div>
</div></td>
</tr>
</table></center>
{% endfor %}
<script>
$.each($(".slideshow > div:not(:first-child)"), function() {
$(this).hide();
});
setInterval(function() {
$.each($(".slideshow"), function() {
$(this).children().first()
.fadeOut(200)
.next()
.fadeIn(200)
.end()
.appendTo(this);
});
}, 1500);
</script>
</body>
I've tried changing the duration and some position attributes, but none of that's correcting this behaviour, where am I going wrong exactly?
I didn't get your problem totally but I have seen two major errors in the code.
First thing is that you have your divs with the Class of slideshow but when you are calling them in styles you are calling the id. to fix this you can just write instead of:
<style>
#slideshow {
margin: 0px auto;
position: relative;
width: 256px;
height: 256px;
}
#slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
You can write:
<style>
.slideshow {
margin: 0px auto;
position: relative;
width: 256px;
height: 256px;
}
.slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
The second thing that I have noticed is that (I might be wrong because of the ambiguity of the problem) you want your images to be on a single row. but with the js template inside your HTML body, you are creating a table for each value in the array. This is logic and I do not know exactly what you are looking for, but this hint might help you.
You can comment for any further changes.
Related
Internal CSS works, but external doesn't. I've tried the external with the code !important, but it just didn't made any sense.
I want to add a gallery to my site. But I have a problem. As I've seen in the browser some margin overwrites the ext. CSS. But here's the thing, I have no margins in the HTML code. The only thing I can imagine is that the Bootstrap is doing something with high priority.
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
position: static;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="gallery">
<a target="_blank" href="gtrr35.jpg">
<img src="gtrr35.jpg" alt="Nissan GT-R R35 Nismo">
</a>
<div class="desc">Nissan GT-R R35 Nismo</div>
</div>
Where is your custom css stylesheet linked?
It should be the last of all the other tags (fromm top-left to bottom -right), otherwise it gets overwritten due the cascading aspect of CSS...
Problem:
I am using Bootstrap Slider, which can be found here https://seiyria.com/bootstrap-slider/. When using example 8, the tooltip does not show as it does on the website.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Judgement</title>
<!-- Bootstrap Core CSS -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Slider -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
</head>
<body>
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
</script>
</body>
</html>
Example Snippet:
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
body {
padding: 100px;
}
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
JS Fiddle:
http://jsfiddle.net/2u4xs9cv/1/
Desired outcome:
To always show the tooltip when the slider changes.
I know this is pretty late but I was looking for a solution and am posting here in hopes that this might be of help for someone else.
I set
.tooltip.in {
opacity: 1;
}
and the tooltip started showing.
Using Bootstrap v4.2.1 and the latest version of bootstrap-spinner with their angular directive (in their slider.js file), I used the following HTML
<slider id="intervalSlider"
ng-model="refreshInterval" on-stop-slide="intervalChanged($event,value)"
min="10" step="10" max="60" slider-tooltip="show" ></slider>
I found that the tootip and arrow did not display. I added the following CSS into my custom CSS file
.slider .tooltip.in {
opacity: 1;
}
.slider .tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.slider .tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.slider .tooltip.top {
padding: 5px 0;
}
This is still opened issue for Bootstrap 4.3.1 - #689. The Bootstrap v4 is not yet fully supported.
On the end of the discussed issue they are shown some solutions I use it following:
$("#ex12c").slider({ id: "slider12c", precision:2, step:0.01, min: 0.70, max: 1.00, range: true, value: [0.80, 0.90] });
#slider12c .slider-track-high {
background: #5cb85c;
}
#slider12c .slider-selection {
background: #ffc107;
}
.slider-handle::after{
content: attr(aria-valuenow);
position: absolute;
bottom: calc(100% + 0.5em);
left: 50%;
transform: translateX(-50%);
font-size: 0.75em;
font-weight: 600;
color: #393f50;
background-color: white;
box-shadow: 0px 0px 6px 0px rgba(182, 182, 182, 0.4);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.3em;
width: 4em;
height: 2.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 4 CDN CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap 3 slider -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" />
</head>
<body>
<br />
<br />
<input id="ex12c" type="text"/>
<!-- Bootstrap 4 CDN JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js">
</script>
<body/>
<html/>
I think something similar to this question was answered in the past. However, I read a number of StackOverflow posts and still couldn't solve the issue. Probably, that is because I don't have a good understanding of jQuery yet and can't apply basic concepts to what I need to solve. So, I would greatly appreciate if you could help me solve this issue. Thanks!
Right now, what happens is the following:
1. When clicking a button in the middle, five circles show up.
2. When you click a circle, a popup message made with SweetAlert2 shows up.
3. When clicking the "ok" button in the popup message, the message is closed and you can see that the circle's background was changed to light orange.
What I want to do : show a different image(https://s25.postimg.cc/kw0l49gz3/original.png) in the popup message when clicking a circle with the text "okay".
Note: I assigned "options" class for all circles and different id for each circle. The id for a circle with the text "okay" is "option5".
$(document).ready(function() {
$('#test').click(function(){
$(".options:hidden").fadeIn()
.on("click", function(){
$(this).css("background", "#F3C78D");
})
.on("click", function(){
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
// swal({
// title: 'Sweet!',
// text: 'Modal with a custom image.',
// imageUrl: 'https://s25.postimg.cc/kw0l49gz3/original.png',
// imageWidth: 400,
// imageHeight: 200,
// imageAlt: 'Custom image',
// animation: false
// })
});
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" id="option1"><span>Hello<br>World</span></div>
<div class="options" id="option2"><span>Goodbye</span></div>
<div class="options" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" id="option4"><span>Fine</span></div>
<div class="options" id="option5"><span>Okay</span></div>
</div>
</body>
</html>
You can use data-attribute to define the image link inside the element and then you can easily use it within the JS code. You can also do the same with the other parameter.
$(document).ready(function() {
$('#test').click(function(){
$(".options:hidden").fadeIn()
.on("click", function(){
$(this).css("background", "#F3C78D");
})
.on("click", function(){
var url=$(this).attr('data-img');
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: url,
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
});
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" data-img="https://unsplash.it/400/200" id="option1"><span>Hello<br>World</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option2"><span>Goodbye</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option4"><span>Fine</span></div>
<div class="options" data-img="https://s25.postimg.cc/kw0l49gz3/original.png" id="option5"><span>Okay</span></div>
</div>
</body>
</html>
I would like to make a footer that is similar to the footer of JavaScript column of JSBin in case of error:
(Before expanding)
(After expanding)
Precisely, it satisfies:
1) it is always at the bottom of the page, no matter how big the main body (that raises the error) is
2) It can be expanded when users click on it, and be collapsed back...
I have written the following code (JSBin), which shows the footer, and cannot be collapsed.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#footer {
background-color: #FA8072;
width: 100%;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body class="ms-font-m">
the body
<div id="footer">
footer_line_1<br>footer_line_2<br>footer_line_3
</div>
</body>
</html>
Does anyone know how to make it extensible and collapsable?
PS: I also list the css files I have to use for other purposes, they might be useful...
Yes. You can expand and collapse by using toggle() function.
$("#show").click(function() {
$("#shoowDiv").toggle(500);
});
#footer {
background-color: #FA8072;
width: 100%;
position: fixed;
bottom: 0px;
}
#shoowDiv{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body class="ms-font-m">
the body
<div id="footer">
<p id='show'>3 errors</p>
<p id='shoowDiv'>
footer_line_1
<br>footer_line_2
<br>footer_line_3</p>
</div>
</body>
the reason why toggle functionality slow is i mentioned the seconds for that like this
$("#shoowDiv").toggle(500);
If you want it to be fast, you can change the seconds
Here is the jsFiddle
If your number of errors is about to get big, you can add scroll support, so that footer wont cover all of your page - JSFiddle
$("#show").click(function() {
$("#shoowDiv").toggle(500);
});
#footer {
background-color: #FA8072;
width: 100%;
position: fixed;
bottom: 0px;
}
#shoowDiv{
display:none;
max-height: 100px;
overflow-y: auto;
}
#show{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body class="ms-font-m">
the body
<div id="footer">
<p id='show'>7 errors</p>
<div id='shoowDiv'>
<ul>
<li>Issue #1</li>
<li>Issue #2</li>
<li>Issue #3</li>
<li>Issue #4</li>
<li>Issue #5</li>
<li>Issue #6</li>
<li>Issue #7</li>
</ul>
</div>
</div>
</body>
Can someone point me in the right direction? I don't see why I can't get the achtergrond_homepage.png as background in rounded corners.
Edit: It looks like the grey color is allways on top of everything. Can it be that it's controlled in the javascript part?
This is the css:
#charset "utf-8";
/* CSS Document */
html, body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;}
.justyParagraph {
text-align: justify;}
a img {
border: 0;}
.clearer {
clear: both;}
.rounded_corners{
background: url(../images/achtergrond_homepage.png) no-repeat left bottom;
color:#FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
This is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="bookmark" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script src="js/jQuery.min.js" type="text/javascript"></script>
<script src="js/roundCorners.jQuery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function(){
$('.rounded_corners').bg(['20px', '20px', '20', '20']);
});
</script>
</head>
<body>
<div id="blockdark">
<div class="rounded_corners">
<div> <h1> Title </h1> </div>
<div> Content </div>
</div>
</div>
</body>
</html>
This is a example, maybe it has something to do with the javascript for rounded corners?
http://www.coldcharlie.nl/test/
Try adding display: block to the .rounded_corners. Also it looks like you're missing a ; from the background line of .rounded_corners