I've tried out this solution for rotating background images:
Original Article: Preloading images and transition for my simple Javascript option for CSS row
Now i'm trying to find out how to avoid the flickering if there is only one image.
I believe what you're asking for is a smooth way of loading an image. Here's an example on how to do that. If it's not what you're looking for just comment.
$("#background").load(function () {
$(this).fadeIn(500)
});
#background {
display:none;
position:fixed;
z-index:0; /* modify this number acording to how your page is layed out, so -1 will work for some webpages */
object-fit: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="background" src="http://neil.computer/stack/bg3.jpg" />
Without the fading effect:
$("#background").load(function () {
$(this).show();
});
body {
padding:0;
margin:0;
}
#background {
display:none;
position:fixed;
z-index:0; /* modify this number acording to how your page is layed out, so -1 will work for some webpages */
object-fit: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="background" src="http://neil.computer/stack/bg3.jpg" />
that's the solution - add this filter in line 9:
if (zindex == -1) return;
Related
I am presenting an image embedded in a descriptive text item, followed by several questions about that image. I would like that item to remain in place while the participant scrolls.
I've been able to get the entire image to remain in place using something like this HTML code:
<html>
<style>
.image{position: fixed; background: white;}
</style>
<div class = "image">
<img src="LOCATION OF IMAGE FILE" style="width: 395px; height: 395px;" />
</div>
</html>
But this freezes the image itself in a very awkward place (it actually does this in the editor itself, which blocks me from doing anything else). Is there a way to keep the presentation of the item exactly the same as it is normally, but just keep it in place?
Edit:
This is how it should appear, as a separate item from the questions to follow. I would then like it to remain frozen in place while the user can scroll through the questions.
This shows how it currently appears. The image is frozen in place, but not where it should appear (i.e., above and separated from the questions that follow.
You can use a spacer element to align the starting height of other elements. For example:
<div class = "image">
<img src="LOCATION OF IMAGE FILE" width="395px" height="395px"/>
</div>
<div class = "image_spacer">
This is a spacer element
</div>
<style>
.image{
position: fixed;
background: white;
z-index: 1000;
}
.image_spacer{
height: 395px;
visibility: hidden;
}
</style>
Visually speaking, I may recommend adding a width of 100% to your image div as well, so that other elements are fully covered when you scroll.
To fix at the top on scroll, do the following:
<div class = "image">
<img src="IMAGE LOCATION HERE" width="395px" height="395px"/>
</div>
<div class = "image_spacer">
This is a spacer element
</div>
<style>
.image{
background: white;
width:100%;
z-index: 1000;
text-align:center;
}
.image.fixed{
position: fixed;
top:0;
left:0;
}
.image_spacer{
height: 395px;
visibility: hidden;
display:none;
}
.image_spacer.fixed{
display:block;
}
</style>
In addition, add this to the JavaScript for the question:
Qualtrics.SurveyEngine.addOnload(function()
{
var space = $$('.image')[0].cumulativeOffset().top;
console.log(space);
window.addEventListener("scroll", function(){
if( document.body.scrollTop > space){
$$('.image')[0].addClassName('fixed');
$$('.image_spacer')[0].addClassName('fixed');
}
else{
$$('.image')[0].removeClassName('fixed');
$$('.image_spacer')[0].removeClassName('fixed');
}
});
});
Did you try using the Text/Graphic option?
As I am seeing no problem if I add an image that way, and the survey questions are in their place, check the image below for reference.
I am having a loading effect on some divs, I put a transparent div on them with a loading image on the center of it.
Here is the CSS:
.gear-modal {
width: 100%;
height: 100%;
position: absolute;
z-index:2147483640;
overflow:hidden;
background-image:url('https://business.comcast.com/img/preloader.gif');
background-repeat:no-repeat;
background-position: center;
background-color:rgba(0,0,0,0.5);
}
Please see this jsfiddle demo:
http://jsfiddle.net/margwt9h/3/
As you can see in the demo, the image borders are somehow not smooth, why it is showing like this? How this could be fixed?
P.S: The problem is not with the loading image, the same image looks fine everywhere else but not here.
Yes, the image looks really pixelated. Try using different gif image and adjust the width and height. Check out this snippet, where I used different image and set height and width :)
function show_gear_modal(element){
$(element).css('position', 'relative');
var custom_modal_html = '<div class="gear-modal"></div>';
$(element).prepend(custom_modal_html);
$(element+' .gear-modal').fadeIn();
}
$('.show_loading').on('click', function(){
show_gear_modal('.my_div');
})
.gear-modal {
width: 100%;
height: 100%;
position: absolute;
z-index:2147483640;
overflow:hidden;
background-image:url('http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_350.gif');
background-size: 64px 64px;
background-repeat:no-repeat;
background-position: center;
background-color:rgba(0,0,0,0.5);
}
.my_div{
min-height: 400px;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="my_div">
Here is some Content....<br /><br /><br />
<a class="show_loading"><strong>Click here to show the loading</strong></a>
</div>
Nope, it actually is just the image. There are ugly white non-transparent pixels around the edges of the image. Pretty obvious when you put just a plain black background behind it.
If you don't like how it looks I suggest you find a different image.
I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.
jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.
I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>
I need to create a function that will animate div sliding from the left when the page loads. It needs to delay the animation for about 5 seconds. The example can be seen at this link
http://www.exacttarget.com/blog/amazon-dash-the-skinny-on-this-stick/
just under the title there is a section with share count. I need to create a function that will slide the item that has all the numbers summarized. This is the one on the right with gray background.
Hey i am not Css expert but what the site people doing is bit from CSS as well.So i made this jsfiddle .This might help you .I am not sure this will be working in all browsers as so far.You can use jQuery as fall back for browsers who doesn't support CSS3 Transition
The code i used is :
div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
margin-left:-100px;
}
div.active
{
margin-left:0px;
}
The jQuery code is :
$(function(){
$(".mydiv").addClass("active");
console.log($(".mydiv"));
});
Fiddle
$(document).ready(function () {
$("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});
html
<div id="upper_div"></div>
<div id="slideBox"></div>
CSS
#upper_div{
width:200px;
height:50px;
background-color:#E5E5E5;
float:left;
}
#slideBox{
width:50px;
height:50px;
background-color:#CCCCCC;
float:left;
display:none;
}
jQuery
$(document).ready(function () {
$("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});
DEMO
I was wondering how you make a background slideshow fade into other photos like a regular slideshow. I've tried many codes and have yet to be successful.
Now, I have a code to make the background change to different photos which works well, but it doesn't fade. Is there anyway to add this?
Here is the code
<html>
<head>
<style>
body{
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
/*Use center center in place of 300 200 to center bg image*/
background-position: 0 0; background-
}
</style>
<script language="JavaScript1.2">
//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
//Specify background images to slide
var bgslides=new Array()
bgslides[0]="http://i892.photobucket.c…
bgslides[1]="http://i892.photobucket.c…
bgslides[2]="http://i892.photobucket.c…
//Specify interval between slide (in miliseconds)
var speed=2000
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}
var inc=-1
function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc…
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",spee…
</script>
</head>
</html>
If you have any suggestions please let me know. Also, I am not the greatest at coding and don't have a clue about JavaScript, so please explain what to do.
Working example on jsFiddle.
Use this code instead: (note that you'll need to load jQuery in order for this code to work)
HTML
<div class="fadein">
<img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
<img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
<img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
<img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
<img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
</div>
CSS
.fadein {
position:relative;
height:320px;
width:320px;
}
.fadein img {
position:absolute;
left:0;
top:0;
}
JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
});
</script>
Inside the Css:
width: 100%;
height: 100%;
position: fixed;