I am pretty sure this is a positioning issue, but unfortunately positioning is my weakness.
I have a container with a jquery image slideshow in it. The images in the slideshow have to be {position: absolute;} or else they will just display one after the other down the page.
Unfortuntely, the containers that come after the slideshow container are displaying behind the slideshow container, not underneath it. I think this is because of the absolute positioning of the slideshow images, but I don't know how to rectify it.
#charset "UTF-8";
/* CSS Document */
#main {
position: relative;
width: 100%;
}
#slideshow {
position: relative;
width: auto;
}
#slideshow IMG {
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0;
}
#slideshow IMG.active {
z-index: 10;
opacity: 1.0;
}
#slideshow IMG.last-active {
z-index: 9;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({
opacity: 0.0
})
.addClass('active')
.animate({
opacity: 1.0
}, 500, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 3000);
});
</script>
<link href="../../Assignment5-Portfolio/HTML/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="slideshow">
<img src="../Images/bike.png" width="100%" height="auto" class="active" />
<img src="../Images/fish.png" width="100%" height="auto" />
<img src="../Images/stairs.png" width="100%" height="auto" />
<img src="../Images/gage.png" width="100%" height="auto" />
</div>
<div id="aboutme">About me</div>
<div id="videography">Video
<div id="text">text goes here</div>
<div id="video">video goes here</div>
</div>
<div id="photography">
<div id="photos">photos go here</div>
<div id="photography"></div>
</div>
</div>
</body>
</html>
So, #slideshow is the container in question. The images in it are blocking the containers below it. I want the images to stretch across the whole width of the screen.
As I said, I'm fairly certain it's a positioning problem, but I feel like I could also be missing something important from the #slideshow container, but I can't find what it is.
Thanks in advance for any help you can provide!
You should put a wrapper div around the entire slideshow and give it position:relative; That way it will contain the slideshow and create the spacing you need.
If you will consider a bit more javascript you could add this tidbit of code
$(document).ready(function()
{
var objHeight = 0;
$.each($('#slideshow').children(), function(){
objHeight = $(this).height();
});
$('#slideshow').height(objHeight);
});
DEMO
the absolute and also relative positioned elements should have certain height and width (however block elements have the width:100% initially). Otherwise next elements will overlap with them. So if you have certain height for your images e.g. 400px then:
#slideshow {
position:relative;
width:auto;
height:400px;
}
Related
I want to fit the video to the screen and scrolling needs to be disabled.
Problem:
Instead of being full screen it is overflowing from the screen.
What am I doing wrong here?
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/indigo-player#1/lib/indigo-player.js"></script>
</head>
<body>
<div id="playerContainer" class="videosize">
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</div>
</body>
</html>
Make the <body> element have a class where
position: relative , width: 100% and overflow: hidden are declared or use the inline style="..."
After doing this the video should take the width of the parent with a relative position.
The solution can be this:
Added position:fixed; in css
Added height:100%; in css
Added background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center; in css
Added background-size: 100%; in css
Know Issues
NavigationUI visible only in full screen mode (F11 or F) given of the script (Need to change the script to fix these) but it still work.
Final Code
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:fixed;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center;
background-size: 100%;
}
</style>
</head>
<body>
<div id="playerContainer" class="videosize">
</div>
<script src="https://cdn.jsdelivr.net/npm/indigo-player#1/lib/indigo-player.js"></script>
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</body>
</html>
I want to rotate the image, but it is going out of parent div.
<div>
<img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg">
<button class="rotate-button">rotate image</button>
</div>
jquery code
$('.rotate-button').on('click', function() {
var image = $(this).prev('img');
image.className = "rotated_90deg";
});
unrotated state:
rotated state:
how can I keep the image smaller in rotated state, so that it does not go out of parent div?
Try using the solution with scale property
$('.rotate-button').on('click', function() {
var image = $(this).prev('img');
image.className = "rotated_90deg";
});
.rotated_90deg {
transform: rotate(90deg) scale(0.5, 1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg">
<button class="rotate-button">rotate image</button>
</div>
"tranform rotate" does just that. It retains its original height, and the forging is done in a separate visual layer.
the best thing you can do is set the height of the area where the image rotates equal to the largest side of the image
const img = document.querySelector('img');
const {offsetHeight, offsetWidth} = img;
if(offsetWidth >= offsetHeight) {
img.parentElement.style.height = offsetWidth + 'px';
}
const rotations = [];
const rotateImage = () => {
rotations.push('rotate(45deg)');
img.style.transform = rotations.join(' ');
}
div { display: flex; }
img { transition: .3s; margin: auto; }
button { display: block; margin: auto; position: relative }
<div>
<img src="http://placekitten.com/300/200">
</div>
<button onclick=rotateImage()>Rotate</button>
hmm ... maybe I hastened to answer.
As a solution, "position: relative;" on the button
Put the image inside a container div, give it an id or class and set the overflow to hidden:
.imgContainer{
overflow: hidden;
}
Or if you want the picture to scale so it fits within the div, set max width and height:
.imgContainer img{
max-width: 100%;
max-height: 100%;
}
So, in web-programming class (a few weeks ago) we started a project to make our own website. Now, most things are going fine, though I tried to center my page it didnt work. I don't know why it doesn't work either, I'm thinking it might be something in the codes that might block/counter it, but I don't know. I basically want the whole html centered. I used an ID which I named "wrap" on the div tag after the bgcolor tag as you will see.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Norskandi</title>
<link rel="stylesheet" type="text/css" href="css/norskandi.css">
<style type="text/css">
</style>
</head>
<body bgcolor="#4A96AD">
<div id="wrap">
<IMG STYLE="WIDTH:1400px; HEIGHT:80px" src="../bilder/3_11.png">
Contact
About
<script type="text/javascript">
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
/*window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}*/
function geography() {
document.getElementById("geography").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
/*window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}*/
function anthems() {
document.getElementById("anthems").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
/*window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}*/
</script>
<div class="dropdown">
<button onmouseover="myFunction()" class="dropbtn">History</button>
<div id="myDropdown" class="dropdown-content">
Sweden
Norway
Denmark
</div>
</div>
<div class="dropdown1">
<button onmouseover="geography()" class="dropbtn">Geography</button>
<div id="geography" class="dropdown-content1">
Sweden
Norway
Denmark
</div>
</div>
<div class="dropdown2">
<button onmouseover="anthems()" class="dropbtn">Anthems</button>
<div id="anthems" class="dropdown-content2">
Sweden
Norway
Denmark
</div>
</div>
</div>
</body>
</html>
CSS:
#wrap{
width: 800px;
margin-right: auto;
margin-left: auto;
height: auto;
}
Like #Juan-Ferres here is a JSFiddle that may help you. Another great resource is Bootstrap and look at the class container in their examples. As a few have pointed out though the key is margin: 0 auto or something like margin: 10px 10px 10px 10px but then you need to be more exacting with your width.
Try justify-content: center in you CSS code
Your #wrap div is being centered on the site. However, for resolutions smaller than 800px, you will see it overflows horizontally.
You may think it's not centered due to your img tag having an inline style of width: 1400px which makes it extend beyond the actual container div.
Here's a fiddle with that tag removed (try not to use inline styles on your HTML for proper separation of concerns as in, CSS in css files, and HTML in html files). https://jsfiddle.net/dm3bmpas/
I've also replaced width: 800px for max-width: 800px and width: 100% so your container takes up to 800px on resolutions big enough but for smaller resolutions it takes all the available width; this is a common responsive pattern.
Finally, just in case, if you want your text to be centered inside your div, the rule you're looking at is text-align: center on your #wrap div.
Try this css
#wrap{
width: 800px;
margin:0px auto;
}
Situation:
I am making an own site, today I was facing a little problem..
On my page I'm using a wrap, in the wrap I'm using three columns, in the middle, the main, I'm using a grey image as a background. In the main I want some text and a slideshow, but the image has to adapt, when I'm using simple text this works(the image is as long as the text).
Problem:
Under my text I want a simple slideshow, nothing really special. But when I place the slideshow in the main, the image does not adapt..? It is not recognised as an element in the main?
Code:
For the html page this is my code:
<div id="main">
<p id="Title">Welcome</p>
<p>Some text here</p>
<p>
<div id="slideshow2">
<div class="slide active"><img src="images/1.png" alt="Slideshow Image 1" /></a>
</div>
<div class="slide"><img src="images/2.png" alt="Slideshow Image 2" /></a>
</div>
<div class="slide"><img src="images/3.png" alt="Slideshow Image 3" /></a>
</div>
</div>
</p>
</div>
I'm using a script to operate the slideshow, this is working perfect, so no need to post this.
In the CSS I'm doing this:
#slideshow2{
position: absolute;
}
#slideshow2 .slide {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow2 div.active {
z-index:10;
opacity:1.0;
}
#slideshow2 div.last-active {
z-index:9;
}
#main{
padding-top: 1px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
margin-left: auto;
margin-right: auto;
width: 800px;
background: url("images/main.png") repeat;
z-index: 1;
}
And the wrap:
#wrap{
margin-left: auto;
margin-right: auto;
width: 1240px;
height: auto;
min-height: 100%;
position: relative;
}
I hope someone can help me because I do not know how I can fix this..
Update:
I tried to do this:
<p id="slideshow2">
<div class="slide active"><img src="images/1.png" alt="Slideshow Image 1" /></a>
</div>
<div class="slide"><img src="images/2.png" alt="Slideshow Image 2" /></a>
</div>
<div class="slide"><img src="images/3.png" alt="Slideshow Image 3" /></a>
</div>
</p>
Here the main recognises the slideshow as an element but all the images are placed under eachother and not above eachother..
Script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 ) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3500 );
});
</script>
Please help :)
Thank you
Does the slideshow script you are using require you to have the anchor close tags without a corresponding opening tag for some reason ? If not, perhaps it is gakking on it.
Also, what do you mean by "adapt" in this question ?
but ok, the problem is that absolutely positioned elements leave the normal document flow. Their height doesn't contribute to the height of their container. So yes, you are correct, they are not recognized as an element within main for the purposes of element height. As it is now, #main will have a height based only on the text outside of #slideshow2.
As a quick fix, try this:
#slideshow2 {
position: relative;
height: 400px;
}
or whatever the height of your images is, if they are consistent
If the size of your slides are variable, add this to slideSwitch() :
var slideHeight = $next.height();
$next.parent().height( slideHeight );
like so:
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 ) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
// set the #slideshow2 height
$next.parent().height( $next.height() );
$(function() {
setInterval( "slideSwitch()", 3500 );
});
</script>
Although maybe this is all nonsense, and the problem is that you've changed the ID of #slideshow to #slideshow2, but your script still references #slideshow
#slideshow2{
position: absolute;
}
Should have a size, since content is absolute too.
I've been trying to make two divs stick to the top of the page after the user scrolled past these divs. Both divs are positioned at the same hight. This is what I have been using from other stackoverflow answers:
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#blockleft').addClass('sticky')
else
$('#blockleft').removeClass('sticky');
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
</head>
<body>
<div id="header"></div>
<div id="sticky-anchor"></div>
<div class="container">
<div id="blockleft"></div>
<div id="blockright"></div>
<div id="content"></div>
</div>
</body>
Css:
body {
margin: 0;
padding: 0;
}
#header {
height:200px;
background-color:#666;
}
#blockleft {
width:100px;
height:500px;
margin-top:10px;
background-color:#090;
float:left;
}
#blockright {
width:100px;
height:500px;
margin-top:10px;
background-color:#0F3;
float:right;
}
#content {
width:500px;
height:2000px;
background-color:#0CF;
margin:auto;
}
.container {
width:800px;
margin:auto;
}
.sticky {
position: fixed;
top: 0;
}
The script is working fine on one div, but when using the script twice it automatically moves the right div to the left and this one is not sticking to the top of the page.
I was hoping someone could help me out with this one.
Edit: Recreated the problem in a new document
Since the divs lose float property when we make it position:fixed, they both overlap with each other. In order to make them in their position, we need to apply right distance for the right div. To fix this, replace your script code as follows.
<script type="text/javascript">
function sticky_relocate() {
var containerWidth = $(".container").outerWidth(true);
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
{
$('#blockleft').addClass('sticky');
$('#blockright').addClass('sticky');
$('#blockright').css("right", (containerWidth-800)/2 + "px");
}
else
{
$('#blockleft').removeClass('sticky');
$('#blockright').removeClass('sticky');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
The code $('#blockright').css("right", (containerWidth-800)/2 + "px"); calculates the right distance value for the right div and adds css property right:XXXpx to that div while scrolling. The code var containerWidth = $(".container").outerWidth(true); fetches the width of the container div with its margin value (since margin is made auto, we need definite number for calculation)