I have the code like this for serving the image from 3rd party system:
var bbimagebannerfile = "";
document.write("<img src=\"" + bbimagebannerfile + "\" border=\"0\" />");
This image is positioned at the bottom of the page. What i am trying to do is make this image scroll along with the page once user reaches its position and when the user scrolls upwards then this image becomes static again. Can anyone help me with that ?
Just an example:
<div id="fixed-image"></div>
If we assume that the HTML above is your content that is being served. You can add this css:
#fixed-image {
width: 100%;
height: 100px;
background-color: red;
position: fixed;
bottom: 0;
}
In your case, you can try adding a class property with the styling above.
JS Fiddle: http://jsfiddle.net/df6tmLrg/
Another demo with your javascript:
http://codepen.io/FakeHeal/pen/qEgxKN (codepen, because jsfiddle doesn't allow document.write)
var bbimagebannerfile = "https://avatars2.githubusercontent.com/u/1038697?v=3&s=460";
document.write("<img src=\"" + bbimagebannerfile + "\" border=\"0\" width="100" />");
And the css:
.bottom-fixed {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
UPDATE:
If you use jQuery, you can use .scroll():
var t = $("#fixed-image").offset().top;
$(document).scroll(function(){
if($(this).scrollTop() > t)
{
$("#fixed-image")
.css('position', 'fixed') //we change the position to fixed
.css('top',0); // and the top to zero
} else {
$("#fixed-image")
.css('position', 'static') //we change the position to fixed
.css('top',0); // and the top to zero
}
});
Here's a demo:
http://jsfiddle.net/df6tmLrg/2/
Related
I'm calling images from a folder at random and putting them in HTML img tags using PHPs glob function.
I'm then using JS to read the URLs and flip the CSS background image of div#wrapper, 300ms for each image. The images should be preloaded as they have HTML img tags. They are being hidden from the user using the following CSS (which should not stop preloading as "display: none" does):
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Nonetheless I'm experiencing the images flashing inconsistently / at different rates. It seems that larger file size images cause this to happen, but the images should be preloaded so I'm not sure why this is occurring.
My JS looks like this:
var slides = [];
$('.slide').each(function(index){
slides.push($(this).attr('id'));
});
var slide = 0;
function changeImage(){
if (slide < 10){
var currentSlide = $("#" + slides[slide]);
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-image', 'url("' + currentSlide.attr('src') + '")');
slide++
} else {
$('#headline').removeClass('visuallyhidden');
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-color', '#ef3308');
}
}
setInterval(changeImage, 300);
The site is http://robertirish.com.
Is there a better way to do this / can anyone explain why it's happening?
I'm going to guess it's a loading issue: either that CSS is interfering with preload or else it's being treated differently because you're loading it into the background of another element rather than using the img that you preloaded. Instead, I would load all the images inside the div, absolute-positioned on top of each other, and then just remove them one by one:
CSS:
#wrapper{
position: relative;
}
#wrapper img{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
HTML:
<div id="wrapper">
<img src="image1.png">
<img src="image2.png">
<!--etc-->
</div>
JS:
$(document).on('ready', function(){
var images = [];
$("img", "#wrapper").each(function(){
images.push(this);
});
var timer = setInterval(function(){
if (images.length)
$(images.pop()).remove();
else
clearInterval(timer);
}, 300);
});
I am trying to add multiple div inside a single div with horizontal scroll.
This is my code:
<div id="scrollimages">
<script>
var container = document.getElementById("scrollimages");
var array=["img/screen2.png","img/logo.png"];
for(var i=0;i<array.length;i++)
{
var src="url("+array[i]+")";
// var inside = '<div class="block" style="background-image: { ' + src + ' }"></div>';
var inside = '<div class="blocks"></div>'
inside.style.backgroundImage=src;
inside.style.marginLeft=100*i+"%";
container.innerHTML +=inside;
}
</script>
</div>
This is my css code:
#scrollimages {
background-color: #00FFFF;
width: 100%;
margin-left:0px;
height: 150px;
overflow: scroll;
white-space:normal;
overflow-y:none;
margin-top:20px;
}
.blocks
{
height: 100%;
width: 100%
margin-left:0px;
word-wrap:normal;
}
First time i am using java script and css all ,so i can't get this easy step .help me out this problem.
what mistake i made,
The same #id can only be once in a document.
var inside = '<div id="block"></div>'
Use a class instead
var inside = '<div class="block"></div>'
and in CSS
.block { ...
Also, much easier, to add the attributes directly to the string
var inside = '<div class="block" style="background-image:'+ src +'"></div>';
Edit: fixed remove {} in style.
Edit: There were some other problems in the script, here is a working jsfiddle: https://jsfiddle.net/C14L/9hnqheos/
Add Flex property to the container, also keep overflow auto. If using Flex no need to use white-space.
#scrollimages {
display: flex;
overflow: auto;
}
Instead of attaching background to div I am creating img & appending it inside the div.
Also
Hope this will be useful
JS
var container = document.getElementById("scrollimages");
var myArray=[image urls];
for(var i=0;i < myArray.length;i++){
var _createElem = document.createElement('div');
var _img = document.createElement('img')
_img.src = myArray[i]
_createElem.id ="block_"+i;
_createElem.appendChild(_img)
_createElem.className = "block";
container.appendChild(_createElem);
}
CSS
#scrollimages {
background-color: #00FFFF;
width: 100%;
margin-left:0px;
overflow-x:scroll;
margin-top:20px;
}
.block{
width:auto;
display:table-cell;
height: 100%;
}
you can make further changes if it required
Demo
As per C14L, need to assign class, and since you're using getElementByID, each element should be assigned a seperate ID.
In the below JS Fiddle, I've swapped backgroundImage for backgroundColor, and removed your margin code (not sure what you were attempted here, but you had 100% margin on the 2nd iteration, 200% for the third... Don't think thats what you had in mind... For demo purposes, height of 'block' was set to 30px instead of 100% since divs have no height by default...
https://jsfiddle.net/7mua0rez/
var container = document.getElementById("scrollimages");
var array=["red","green", "black"];
for(var i=0;i<array.length;i++)
{
var src=array[i];
var inside = '<div id="block' + i + '" class="block"></div>'
container.innerHTML +=inside;
document.getElementById("block" + i).style.backgroundColor=src;
document.getElementById("block" +i).style.marginLeft=10+"%";
}
As you scroll down, the top bar goes up and the moment the top bar gets out of sight, the header gets set to position: fixed;. The moment this happens, the content below takes a massive jump upward with 1 scroll wheel click.
I'm assuming its probably something simple I'm overlooking, but wanted to check to see if someone else saw the issue. I've looked through it, but can't really see whats happening right off.
I've set up a jsfiddle to show this code in full.
http://jsfiddle.net/yZVjU/
$(document).ready(function() {
var s = $("#header");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
//$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
CSS:
#header { float: left; width: 100%; height: 60px; background: #fff; }
#header_left { float: left; display: inline; width: 650px; height: 100px; }
#header_right { float: right; display: inline; width: 200px; height: 100px; text-align: right; }
.stick {
position:fixed;
top:0px;
/*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
z-index: 1000;
}
If you get to the position where the header gets set to fixed, and click up and down, you'll see where the content below is jumping more than 1 click.
When you set an element to Position Fixed, it stops taking space anymore from the document since it will be like-floating around. Therefore the rest of DOM will jump up as if that element was suddenly deleted.
Add an empty div and before you set Position to Fixed, fill in that div with empty space, or allocate more space for document to occupy.
This is a weird question. I have one page that is centered via the same method all of my other pages are centered but ONLY on my iPhone, it has decided to left justify.
I narrowed it down to this line of code that is causing the problem:
<websitesnext><img src="graphic_elements/1-2.png" width="41" height="22" /> <img src="graphic_elements/next-icon.png" width="32" height="22" /></websitesnext>
That line is wrapped in a div titled "div id=websites", and is located just below a table. Here is the CSS for that wrapping div, and the CSS for the problem div:
#websites {
position: absolute;
top: 282px;
left: 72px;
width: 878px;
}
websitesnext {
position: absolute;
left: 418px;
width: 878px;
top: 350px;
z-index: 6;
}
Here is the javascript that that line is referencing:
<script type="text/javascript"> //this is for the top gallery buttons
$(document).ready(function() {
var option = 'websites2';
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.hidden').hide();
$('#' + option).show();
$('#websites').hide(); //this hides the default gallery, which in this case is the first "websites" gallery page
}
</script>
I also noticed that again, just on this page, my viewport settings are being ignored! Any idea why this is causing ALL of my page contents to left justify on an iPhone? Thanks in advance!
I want to detect where in the div with id clickdetectiondiv have i clicked. The code that I am using gives me the position with respect to the top left of the body of the HTML page. I have spent lot of time in figuring out how this could be done but am unable to find the answer.
One solution i have is to subtract the position of this absolutely positioned div. But not always will I get the position of the div, as the screen sizes may vary. Please tell me an alternate method to do this.
Thanks in advance,
<html>
<head>
<script type="text/javascript">
function clicked(event){
var x=event.clientX
var y=event.clientY
document.getElementById("outputdiv").innerHTML= "X coords: " + x + ", Y coords: " + y;
}
</script>
<style type="text/css">
#clickdetectiondiv{
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 500px;
background: gray;
}
#outputdiv{
position: absolute;
top: 300px;
left: 100px;
height: 100px;
width: 500px;
background: #eee;
text-align: center;
}
</style>
</head>
<body>
<div id="clickdetectiondiv" onmousedown="clicked(event);"></div>
<div id="outputdiv"></div>
</body>
</html>
You want to use a javascript framework like jquery or mootools, they have functions to get relative position of an element to any other element you want already written in a cross-browser manner. Why reinvent the wheel?
If you can use jquery
$('#A').click(function(e) { //Default mouse Position
alert(e.pageX+ ' , ' + e.pageY);
});
I suppose this can be solution:
function clicked(event){
var x = event.x;
var y = event.y;
var divClicked = document.getElementById("clickdetectiondiv");
x -= divClicked.offsetLeft;
y -= divClicked.offsetTop;
document.getElementById("outputdiv").innerHTML= "X coords: " + x + ", Y coords: " + y;
}