The original template just used fixed image and made it responsive for different screen resolutions:
<div class="bg-img" style="background-image: url('./img/background1.jpg');">
<div class="overlay"></div>
</div>
Now, I add a random image and tried to make the class/style of the responsive, work here, but it doesn't.
<header id="home">
<div class="bg-img" style="background-image">
<div id="banner-load"></div>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'>
</script>
<script>
var images = ['background11.jpg', 'background12.jpg', 'background13.jpg',
'background14.jpg',
'background15.jpg'];
$('<img class="fade-in, bg-img" style="background-image" src="img/' +
images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-
load');
</script>
<div class="overlay"></div>
</div>
What am I doing wrong? may be the class="bg-img" style="background-image" doesn't recognize the random image? if so, how can it be solved?
Update
I am trying something else, taking the original code using the div for the background, and making it programmable:
$("<div class='bg-img' style="background-image: url('img/" + images[Math.floor(Math.random() * images.length)] + ");'>")
but still I can't make it work. Something is wrong and I get an error
--> Uncaught SyntaxError: missing ) after argument list
<header id="home">
<div class="bg-img" style="height:100%;width:100%;background-image:none;background-size:cover;">
<div id="banner-load"></div>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'>
</script>
<script>
var images = ['background11.jpg', 'background12.jpg', 'background13.jpg',
'background14.jpg', 'background15.jpg'];
function getRandomImage() {
return 'img/'+images[Math.floor(Math.random() * images.length)];
}
function setRandomImage() {
$('.bg-img').css('backgroundImage', 'url('+getRandomImage()+')');
}
$(function(){
setRandomImage();
});
</script>
<div class="overlay"></div>
</div>
Normally I would use img instead of div for displaying an image. I had to set a width and height for the div since it had nothing in it. This can be something like 100px or to be responsive - I used 100% (to fill the current view).
I used background-size:cover so that the image fills the div no matter what size it is.
Use this :
$('.bg-image').css('backgroundImage', 'img/' + images[Math.floor(Math.random() * images.length)]);
Instead of
$('<img class="fade-in, bg-img" style="background-image" src="img/' +
images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-
load');
Related
I have a site with fullheight sections using fullpage.js. Every section has a unique class of ".row" and classes ".light" or ".dark", depending on the row.
I'm trying to change between 6 dark & light svg logos randomly on every scroll.
Every logo has a unique name like so:
dark_logo_1.svg
dark_logo_2.svg
dark_logo_3.svg
...
light_logo_1.svg
light_logo_2.svg
light_logo_3.svg
...
HTML:
<nav>
<a id="logo" href="#">
<img id="moody-logo" src="">
</a>
</nav>
<body>
<div class="row light">CONTENT</div>
<div class="row dark">CONTENT</div>
<div class="row light">CONTENT</div>
<div class="row dark">CONTENT</div>
...
</body>
This is my jquery code so far, using scrollspy.js:
<script src="http://path-to-js-folder/scrollspy.js"></script>
$(document).ready(function() {
var randomNumber = Math.floor((Math.random() * 5) + 1);
$('.row').on('scrollSpy:exit', function() {
if (jQuery(this).hasClass('dark')){
var newColor = "light";
} else {
var newColor = "dark";
}
var logoFileName = newColor + "_logo_" + randomNumber + ".svg";
$("#moody-logo").attr("src", "http://path-to-logos-folder/" + logoFileName);
});
});
Kinda stuck, can't get the src in html for my #moody-logo to show anything other than blank src (src="").
Many thanks for your help!
I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>
I have a few images of superheroes. These are in divs along with much larger images of astronomical objects. These larger images take a while to load. I want the astronomical images to replace the superhero images after they've loaded.
Here's what I have so far: https://jsfiddle.net/vmpfc1/5typ7pnp/1/
HTML:
<body>
<div class="image-wrapper">
<div class="pix"style="background: url('http://baltimorepostexaminer.com/wp-content/uploads/2012/07/spider-man2_pole_4681.jpg'); height:200px;width:200px;">
</div>
<div class="true-image" style="background: url('http://m1.i.pbase.com/o9/27/876727/1/151851961.JlvdQ9xW.GreatCarinaKeyholeandRedHoodNebulae3454x2566pixelsimproved3.jpg')"></div>
</div>
<div class="image-wrapper">
<div class="pix"style="background: url('https://upload.wikimedia.org/wikipedia/en/7/75/Comic_Art_-_Batman_by_Jim_Lee_%282002%29.png'); height:200px;width:200px;">
</div>
<div class="true-image" style="background:url(' https://www.nasa.gov/sites/default/files/706439main_20121113_m6triptych_0.jpg')"></div>
</div>
</body>
js:
setTimeout(function () {
$('.true-image').attr('style').on('load', function () {
$('.pix')({
'background-image': 'url(' + $(this).attr('src') + ')'
});
});
}, 0);
css:
.true-image {
display : none;
}
I am a javascript newbie -- is there a decent way to make the larger space images replace the superhero placeholders?
Is there an easier way to do this in HTML5?
Edited Answer to reflect changes:
<div style="background-image: url('https://i.imgur.com/sOcRl3M.jpg'); height:400px;width:400px" rel="https://i.imgur.com/xr7CRQo.jpg">
</div>
<div style="background-image: url('https://i.imgur.com/1m0NwgN.png'); height:400px;width:400px" rel="https://i.imgur.com/nlFPkc4.jpg">
</div>
Then you can have jQuery to loop through all images which has a rel attribute. 2 or 2,000 images, it does not matter.
$('div[rel]').each(function() {
var rel = $(this).attr('rel');
var self = $(this);
var img = new Image();
$(img).load(rel, '', function() {
self.css('background-image', 'url('+rel+')');
});
});
You can see it working here: https://jsfiddle.net/83zLumuk/4/
I have this HTML :
HTML :
<div class="stave-container">
<section id="Captcha"></section>
<div id="horiz_container_outer">
<img class="img1" />
...
<img class="imgn"/>
</div>
</div>
++++++++++++++++++++++++++++++++++++++++
+ + +
+#Captcha + img | img | img | img +
+ + div#horiz_container_outer +
++++++++++++++++++++++++++++++++++++++++
The section #Captcha is fixed!
The div #horiz_container_outer is scrollable and contains img element!
How can i detect when a img element are behind the Div #Captcha while
scrolling?
My Solution :
I put it into the jquery : .scroll function
$("#horiz_container_outer > img").each(function(){
if( $("#Captcha").offset().left > $(this).offset().left )
{
console.log($(this).attr("class"));
}
})
If you are attempting to have a section of the screen that doesn't scroll (which is what it sounds like, but I am not quite sure from your question) the standards compliant way to do this is:
.non-scroll-div {
position:fixed;
}
Keep compatability in mind however: http://caniuse.com/#feat=css-fixed
To copy all the elements from one div to another you could do something like this:
html
<div id="fixedDiv"></div>
<div id="stuff"><span>some stuff</span><br /><hr /></div>
js
document.getElementById("fixedDiv").innerHTML = document.getElementById("stuff").innerHTML;
i have a single div 100px X 300px. What's the easiest way in JavaScript so when I hover over the div i show an image and then when i leave the div the image disappears.
for starters i thought the following would get me started but i can't seem to remove the image properly
<script type="text/javascript">
function MouseOver_Event(elementId) {
var imgToCreate = document.createElement('img');
imgToCreate.setAttribute('id', 'imgHandle');
imgToCreate.setAttribute('src', elementId + '.png');
imgToCreate.setAttribute('onmouseout', 'MouseOut_Event('+elementId+')');
var targetDiv = document.getElementById(elementId);
targetDiv.appendChild(imgToCreate);
targetDiv.removeAttribute('onmouseover', 'MouseOver_Event');
}
function MouseOut_Event(elementId) {
var imgToRemove = document.getElementById('imgHandle');
var targetDiv = imgToRemove.parentNode();
if (imgToRemove != null)
targetDiv.removeChild(imgToRemove);
targetDiv.setAttribute('onmouseover', 'MouseOut_Event(' + elementId + ')');
}
</script>
</head>
<body>
<div id="div1" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div2" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div3" onmouseover="MouseOver_Event(this.id)"><img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /></div>
</body>
You're attaching your MouseOut_Event to onmouseover instead of onmouseout. But you probably don't need to be messing with dynamic event creation anyway; just add onmouseout="MouseOut_Event(this.id)" to the three divs and that should do it.
Why don't you use CSS instead ?
For example:
#div1{background:none;}
#div1:hover{background:url('src/div1.png') no-repeat;}