Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Well I want to show a gif image while the page is loading so I can make any action on the original div,
Here is my code:
<?php
echo"<input type='submit' value='Rechercher' name='rechercher' id='submit' onclick='display_loader()'/>";
?>
<div id="loader">
</div>
my javascript function:
<script>
function display_loader()
{
document.getElementById('loader').innerHTML = "<img src='load.gif' alt='load'/><br/>Loading, please wait ...";
}
</script>
The current solution allows me to display the gif image, but I really want it to display it above the original div.
HTML:
<div id="loader" class="visible">
<img src='load.gif' alt='load'/><br/>Loading, please wait ...
</div>
CSS:
#loader {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 999;
}
#loader img {
// position of your image on the screen
}
.hidden { display: none; }
.visible{ display: block; }
JS:
var loader = document.getElementById('#loader');
function showLoader() {
loader.classList.remove('hidden');
loader.classList.add('visible');
}
function hideLoader() {
loader.classList.remove('visible');
loader.classList.add('hidden');
}
More about classList (and its support read here - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
I guess you want to display a GIF centered "above" the div content. For this, absolute positioning works a charm. You first need a container with position:relative.
CSS:
.container {
position: relative;
}
.loader {
position: absolute;
width: 32px; height: 32px; /* set these to your GIF size */
margin: -16px; /* half of width and height */
left: 50%;
top: 50%;
}
HTML:
<div class="container">
<img class="loader" src="loader.gif" />
<!-- div or other content can go here -->
</div>
Related
So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?
Update, here is an illustration of what I kind of what to achieve:
Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i'm trying to positionate a footer (#footer) like the following:
It has to have a
margin-top: 50px;
to the div above (#content) BUT if the div above is in the display (eg in the middle) the footer should be at least
bottom:-100px;
AND if the div above (#content) is also out of the display (lower that bottom -100px) the footer should be under that div.
Is that possible? (if theres no other way with jq/js)
Thanks in advance for your help
JSFIDDLE EXAMPLE:
http://jsfiddle.net/nU7Vh/1/
If the height of #content is for eg 300 everything is ok, but if #content (which can have variable sizes, cause its a list which is queryed) is bigger that the display the #footer isnt under the #content anymore
1. Remove the following 2 lines from #footer:
position:absolute;
bottom:-100px;
2. Add a container div to #content, which will (unlike #content, which may have any height as you stated) have a min-height of 100% of the screen (you can of course change 100% to a different percentage if you like).
<div id="meta_content">
<div id="content">
</div>
</div>
3. Add this CSS, which makes the min-height magic happen:
html, body {
height:100%;
}
#meta_content { min-height:100%; }
jsFiddle demo.
You could use a wrapper element (with min-height:100%), and not use absolute positioning.
HTML
<div class="wrap">
<div id="content"></div>
</div>
<div id="footer"></div>
CSS
html,body{height:100%;}
.wrap{min-height:100%;}
Demo at http://jsfiddle.net/gaby/rXZkx/
You must configure a surrounding element (e.g. HTML) to fill at minimum the height of the window and allow an inner one (e.g. BODY) to overflow when higher:
CSS
html, body {
margin: 0;
padding: 0;
}
html {
height: 100%; /* fill up window height and let body overflow if higher */
}
body {
position: relative;
min-height: 100%;
padding-bottom: 50px; /* space for footer */
box-sizing: border-box; /* padding should not be added to height, but included in height */
}
#content {
height:200px;
width:500px;
background: blue;
opacity: 0.5;
}
#footer {
height: 18px;
width: 500px;
position:absolute;
bottom: 0px;
background: red;
opacity: 0.5;
}
http://jsfiddle.net/x4TPf/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm having a hard time on this one: HERE!
As you can see in my JSFIDDLE as you hover on the image you can see scrolling caption. My problem now, how can I show the scrolling caption when the image is CLICKED? and likewise when i clicked the other image when it is inactive the scrolling caption will hide.
THANK YOU IN ADVANCE!!
This is possible without the use of Javascript, but you need to rewrite your HTML a bit.
What you basically do, is to create a hidden checkbox or radiobutton, which overlays the image. Then you can use CSS to check for its :checked state, and hide/show content accordingly.
HTML
<figure class="item">
<label for="toggle" class="item__toggle"></label>
<input id="toggle" type="radio" name="item__togglers" class="item__check">
<img src="http://lorempixel.com/200/200/technics" alt="">
<figcaption class="item__caption">Hello world</figcaption>
</figure>
CSS
.item {
display: inline-block;
position: relative;
}
.item__caption {
background: #fff;
opacity: 0;
position: absolute;
bottom: 15px;
left: 0;
}
/* TOGGLE MECHANISM */
.item__toggle {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.item__check {
display: none;
}
/* THIS IS WHERE THE MAGIC HAPPENS */
.item:hover .item__caption,
.item__check:checked ~ .item__caption {
opacity: 1;
}
JS FIDDLE
I created a very basic jsfiddle to demonstrate the functionality: http://jsfiddle.net/TheNix/6vUVP/1/
Option 1:
http://jsfiddle.net/m3fU3/4/
Check now..
i think this is what you wanted?
Just replace the hover in the css with active,for active is on layman's terms ,the click picker on css.
Example:
.cap-left:active figcaption{
left: 0;
}
Option 2:
You can use javascript onclick functionality:
HTML:
<img src="image.png" id="image1" onclick="zoomImage()"/></a>
JS:
function zoomImage(){
e.preventDefault();
document.getElementById('image1').zoom=2;
}
Check here
This is similar to other questions asked, but with one extra issue and I can't find anyone with the same problem as me.
I have an image which is 1400px wide and which I want to be centred in the middle of the page even if the user is looking through a browser with a 800px resolution.
I can't use a BackGround image because I need to rotate this image with a few others using the jquery cycle plugin.
The way I found to centre an image by using:
div.slideshowWrap {
position: relative;
width: 100%;
overflow: hidden;
}
div.slideshowWrap div.homeslideshow {
position: relative;
width: 10000px;
left: 50%;
margin: 0 0 0 -5000px;
text-align: center;
}
<div class="slideshowWrap">
<div class="homeslideshow">
<?php echo $this->Html->image('background_01.jpg');?>
</div>
</div>
works, but when I add the extra slides required for the jquery cycle it messes up the positioning...
<div class="slideshowWrap">
<div class="homeslideshow">
<?php echo $this->Html->image('background_01.jpg');?>
</div>
<div class="homeslideshow">
<?php echo $this->Html->image('background_02.jpg');?>
</div>
<div class="homeslideshow">
<?php echo $this->Html->image('background_03.jpg');?>
</div>
</div>
I'm not sure what's the best way to sort this out? There doesn't seem to be a way to centre images, only backgrounds. But there's no way to fade in and out backgrounds like the jquery cycle plugin allows.
Anyone any ideas?
Try this:
.homeslidshow {
position: relative; /* if there is no position applied already */
}
.homeslideshow > img{
position: absolute;
left: 0px;
right: 0px;
/* and your width here */
}
I had seen this technique in a recent post.
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}