I'm (finally) starting to learn how to write web pages. I have this little issue:
I'm putting a <div> with some images (it's a simple slideshow, and it works great), and below it a paragraph inside another <div> (the relevant code is below). But when I open the page in the browser, sometimes the paragraph appears behind the images, but once I refresh the page, it appears on it's right place.
The sometimes is the thing that bothers me most. If it always appeared behind the immages, I'd know I was doing something wrong... but that's not the case... so, am I missing something?
So, the specific question is: How to ensure that the second <div> always appears below the first one?
The code:
index.php
<head>
<script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/scripts/script_main.js"></script>
</head>
<body>
<div id="mainpanel">
<div id="slideshow">
<?php
/*
This will simply add the images to the slideshow, and it works great
*/
$dir = "img/index";
$files = scandir($dir);
$i = 0;
foreach($files as $img) {
if(substr($img, 0, 5) == "slide" && substr($img, -4) == ".jpg") {
$i++;
if($i == 1) {
echo "\n" . '<img alt="" class="active" src="' . $dir .'/' . $img . '" />';
} else {
echo "\n" . '<img alt="" src="' . $dir .'/' . $img . '" />';
}
}
}
?>
</div>
<!--
This is the place where the problem seems to be:
This second div sometimes appears behind the first one.
-->
<div class="slideshow_text">
<p>
Suspendisse eu nibh ac ex interdum auctor.
Curabitur in nisi a libero tempor volutpat.
Praesent ornare tortor quis tempus aliquam.
</p>
</div>
</div>
</body>
css/index.css
#mainpanel {
min-height: 50em;
}
#mainpanel #slideshow {
min-height: 430px;
position: relative;
height: auto;
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
#mainpanel #slideshow img {
display: block;
margin-left: 2em;
max-width: 80%;
width: 480px;
position: absolute;
top: 0;
left: 0;
z-index: 8;
}
#mainpanel #slideshow img.active {
z-index: 10;
}
#mainpanel #slideshow img.last-active {
z-index: 9;
}
#mainpanel .slideshow_text {
display: block;
margin-left: 10%;
margin-right: 10%;
padding-left: 2em;
padding-right: 2em;
font-family: serif;
font-size: 0.9em;
clear:both;
}
js/scripts/script_main.js (Just in case the problem is here)
function slideSwitch() {
var $active = $('#slideshow img.active');
if($active.length === 0) {
$active = $('#slideshow img:last');
}
var $next = $active.next().length ? $active.next() : $('#slideshow img: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()', 5000) ;
});
$(document).ready(function() {
var $slideshow_height = $('#slideshow img:first').height();
$('#slideshow').css('min-height', $slideshow_height);
});
$(window).resize(function() {
var $slideshow_height = $('#slideshow img:first').height();
$('#slideshow').css('min-height', $slideshow_height);
});
Good day :) I would suggest you to force your text element to be over slideshow elements with z-index, maybe you should try adding something like:
#mainpanel .slideshow_text {
z-index: 12;
}
Related
So I want to put the two divs next to each other and the one below in the code gets put into the one above and I have no idea why.
HTML:
<body>
<div id="links">
<h1 id="title">Webcam</h1>
<?php
$dateinamen = 'pictures/Live.jpg';
$timestamp = filemtime($dateinamen);
$time = time();
$diff = $time -$timestamp;
// Wenn Bild jünger als 10sec
if ($diff < 10){
echo "<img src='pictures/Live.jpg'";
}
else {
echo "<img src='pictures/oops.jpg'";
}
?>
</div>
<div id="rechts">
<h2>Ping</h2>
<?php
$host1="192.168.1.1";
exec("ping -c 1 -w 1 " . $host1, $output1, $result1);
if ($result1 == 0) {
echo "<h3 id='sw1'style='background-color: green';>Router</h3></br>";
}else {
echo "<h3 id='sw1'style='background-color: red';>Router</h3></br>";
}
?>
</div>
</body>
CSS:
#links{
float: left;
width: 50%;
}
#rechts{
float: right;
width: 50%;
margin-top: 7%;
}
Haven't found any cases like these so I don't know if it's a problem with xampp or something else.
EDIT
Photo in inspection mode in Google Chrome
You didn't close the img tag used in the PHP code.
use <img src='pictures/Live.jpg'>
Try to check by removing margin-top:7%; form this class
#rechts {
float: right;
width: 50%;
// margin-top: 7%; remove this line
}
Try using flexbox instead.
#container {
display: flex;
}
#links{
flex: 1;
background-color: blue;
height: 500px;
}
#rechts{
flex: 1;
background-color: red;
height: 500px;
}
<body>
<div id="container">
<div id="links">
<h1 id="title">Webcam</h1>
</div>
<div id="rechts">
<h2>Ping</h2>
</div>
</div>
</body>
Seems like I just got trolled...
I just switched the two divs around (using the Flexbox solution proposed by Michał Drabik) and it worked...
I basically have two images (checkboxes), that when each one is clicked, it changes to a different image. However, it can only switch between two images only. I wanted to add a third one, how could I do that?
HTML:
<style>
body {
background-image: url("http://i.imgur.com/kcmsgdr.png");
background-color: #cccccc;
}
</style>
CSS:
#a{
margin: 3.55cm 5.025cm;
height: 40px;
width: 40px;
content: url(http://i.imgur.com/59fHyah.png);
}
#a:checked {
content: url(http://i.imgur.com/zgwd1n1.png);
}
#b{
margin: 3.55cm -0.65cm;
height: 40px;
width: 40px;
content: url(http://i.imgur.com/59fHyah.png);
}
#b:checked {
content: url(http://i.imgur.com/zgwd1n1.png);
}
#b{
margin: 3.55cm -0.65cm;
height: 40px;
width: 40px;
content: url(http://i.imgur.com/59fHyah.png);
}
#b:checked {
content: url(http://i.imgur.com/zgwd1n1.png);
}
Codepen: http://codepen.io/Coto16/pen/ENRdBv
with jquery its easy:
<html>
<input id="b" type="checkbox" onclick="changeImg()"/>
</html>
<style>
#b{
height: 40px;
width: 40px;
content: url(img1.png);
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"> </script>
<script>
var changeImg = function(){
switch($("#b").css("content")){
case "url(img1.png)":
$("#b").css("content", "url(img2.png)");
break;
case "url(img2.png)":
$("#b").css("content", "url(img3.png)");
break;
case "url(img3.png)":
$("#b").css("content", "url(img1.png)");
break;
}
};
</script>
If you are not against JavaScript, you can use the following code:
var checkbox = document.getElementById('checkbox');
var checkbox_1 = document.getElementById('checkbox_1');
var checkbox_2 = document.getElementById('checkbox_2');
var img_1 = 'http://i.imgur.com/59fHyah.png';
var img_2 = 'http://i.imgur.com/zgwd1n1.png';
checkbox.onclick = function () {
if (checkbox.src == img_1) {
checkbox.src = img_2;
} else if (checkbox.src == img_2) {
checkbox.src = img_1;
}
}
checkbox_1.onclick = function () {
if (checkbox_1.src == img_1) {
checkbox_1.src = img_2;
} else if (checkbox_1.src == img_2) {
checkbox_1.src = img_1;
}
}
checkbox_2.onclick = function () {
if (checkbox_2.src == img_1) {
checkbox_2.src = img_2;
} else if (checkbox_2.src == img_2) {
checkbox_2.src = img_1;
}
}
<img src="http://i.imgur.com/59fHyah.png" id="checkbox" width="32"/>
<img src="http://i.imgur.com/59fHyah.png" id="checkbox_1" width="32"/>
<img src="http://i.imgur.com/59fHyah.png" id="checkbox_2" width="32"/>
Update
In your question, you'r using three buttons. So, I'm adding two more buttons to my code.
I am trying to create two columns. One column is on the left and the other column is on the right. These two columns have an image and text to go along with it. Instead of having each image and text turn into a block of its own on a separate line, the images and text stack up on top of each other for both columns. How can I solve this?
PHP/HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css"?parameter="3"/>
</head>
<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$text = $rows["text"];
echo "<div id=body>";
if ($id > 3 && $id < 8)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
if ($id > 8)
{
echo "<div id=right>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
echo "</div>";
}
}
?>
CSS
#body{
position: relative;
margin: 0 auto;
width: 85%;
height: auto;
}
#left{
position: absolute;
left: 0%;
width: 28.33%;
display: block;
}
#left img{
width: 100%;
}
#right{
position: absolute;
right: 0%;
width: 28.33%;
}
#right img{
width: 100%;
}
First off there are a lot of things are added that don't need to be. That said, try this:
#left{
width: 28.33%;
display: inline-block;
float: left;
}
#right{
width: 28.33%;
display: inline-block;
float: left;
}
1.) Add singular ' quotes around you attribute values in the echo statements.
echo "<img src='path-to-img'>";
2.) If its only 2 columns, then the css for left box should be
`{position:relative; float:left;width:50%} ,
{position:relative; float:right;width:50%}`
for right box. From there you can choose to absolute position the images or text-align:center the boxes or whatever you want from there.
3.) Naming a id='body' is bad practice, you should rename it.
4.) Set CSS to display:block for both, not just one of those divs (left/right)
http://clubace.dk/viewright_test.htm
The green div at the bottom of the page is overlapped by the player as soon as the player loads.
I've tried setting wmode to 'transparent' in both the object tag and the param tag, but that doesn't help.
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
function changeChannel(url, chanid)
{
var player = document.getElementById('ViewRightControl');
var video = document.getElementById('video');
if (video != null)
{
video.src = url;
video.load();
video.play();
}
else if (player != null)
{
player.Close();
player.Open(url, false);
}
if(chanid != 0)
{
update(chanid);
}
else
{
tvclear();
}
}
function update(channelid) {
$.getJSON('api.php', function(data) {
console.log(data[channelid][0]);
$('.now').html("<strong>" + data[channelid][0]['title'] + "</strong><br>" + data[channelid][0]['starttime'] + "<br>");
$('.next').html("<strong>" + data[channelid][1]['title'] + "</strong><br>" + data[channelid][1]['starttime'] + "<br>");
});
}
function tvclear() {
$('.now').html("No data");
$('.next').html("No data");
}
</script>
<style type="text/css">
body {
background: black;
cursor: auto;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
:::-webkit-scrollbar {
display: none;
}
#ViewRightControl {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
#selectorHolder {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 200px;
background: green;
z-index: 100;
}
</style>
</head>
<body onload="changeChannel('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8', 0);">
<object id="ViewRightControl" type="application/x-viewright-m3u8" wmode="transparent">
<param name="wmode" value="transparent">
</object>
<div id="selectorHolder">
</div>
</body></html>
I'm using this ViewRight plugin from Verimatrix (for Windows):
http://warehouse.yousee.tv.s3.amazonaws.com/misc/plugin/YouSee.msi
I found a solution!!
It's a NPAPI plugin and here's a way to put something on top of that: HTML on top of NPAPI plugin
How do use this image:
http://h899310.devhost.se/proxy/newProxy/uplfile.png
Instead of the regular:
<input type="file" />
Have a look at Styling an input type="file".
I'm not very sure on whether you want to style file upload fields, or whether you simply want to use a png file in a style.
Quirksmode.org has a section on styling file upload fields though, that you would want to refer to.
If you want to use the PNG file to use in a style inside a page, you should like at how to set backgrounds using images, although this may not work for all HTML elements.
I did something like this and it worked perfectly!
<script type="text/javascript">
var t = 0;
var IE = navigator.appName;
var OP = navigator.userAgent.indexOf('Opera');
var tmp = '';
function operaFix() {
if (OP != -1) {
document.getElementById('browser').style.left = -120 + 'px';
}
}
function startBrowse() {
tmp = document.getElementById('dummy_path').value;
getFile();
}
function getFile() {
// IF Netscape or Opera is used...
//////////////////////////////////////////////////////////////////////////////////////////////
if (OP != -1) {
displayPath();
if (tmp != document.getElementById('dummy_path').value && document.getElementById('dummy_path').value
!= '') {
clearTimeout(0);
return;
}
setTimeout("getFile()", 20);
// If IE is used...
//////////////////////////////////////////////////////////////////////////////////////////////
} else if (IE == "Microsoft Internet Explorer") {
if (t == 3) {
displayPath();
clearTimeout(0);
t = 0;
return;
}
t++;
setTimeout("getFile()", 20);
// Or if some other, better browser is used... like Firefox for example :)
//////////////////////////////////////////////////////////////////////////////////////////////
} else {
displayPath();
}
}
function displayPath() {
document.getElementById('dummy_path').value = document.getElementById('browser').value;
}
</script>
<style type="text/css">
#browser
{
position: absolute;
left: -132px;
opacity: 0;
filter: alpha(opacity=0);
}
#browser_box
{
width: 104px;
height: 22px;
position: relative;
overflow: hidden;
background: url(button1_off.jpg) no-repeat;
}
#browser_box:active
{
background: url(button1_on.jpg) no-repeat;
}
#dummy_path
{
width: 350px;
font-family: verdana;
font-size: 10px;
font-style: italic;
color: #3a3c48;
border: 1px solid #3a3c48;
padding-left: 2px;
background: #dcdce0;
}
</style>
<body onload="operaFix()">
<div id="browser_box">
<input type="file" name="my_file" id="browser" onclick="startBrowse()" />
</div>
</body>