Randomly change logo when scrolling - javascript

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!

Related

Why won't my cart increment counter work?

I want the count to increase in the navbar for every time the "add to cart" button is clicked on an item, but I can't see why my code isn't working, when I click add to cart button currently the counter does not increase. If anyone could tell me what I'm missing or give me a better solution to what I have I'd appreciate it, thanks!
$('.addCart').on('click', function() {
console.log(completedIncrements.indexOf(this.id));
if (completedIncrements.indexOf(this.id) == -1) {
var count = parseInt($("#count").text());
$("#count").html(count + 1);
completedIncrements.push(this.id);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
Shopping Cart (<span id="count">0</span>)
Shop
Contact Us
</div>
<a href="shoe1.html"><img id="shoe3" img src="images/shoe1.jpg" alt="shoe1">
<div id="cart1" class="addCart" href="#"><button>Add to cart</button></div>
<a href="shoe2.html"><img id="shoe4" img src="images/shoe2.jpg" alt="shoe2">
<div id="cart2" class="addCart" href="#"><button>Add to cart</button></div>
I just checked your code. The completeIncrements is throwing error in the console and preventing the execution of your logic. Please give information about that or else use the code below to solve it.
$('.addCart').on('click', function() {
var count = parseInt($("#count").text());
$("#count").html(count + 1);
})
$('.addCart').on('click', function(e) {
e.preventDefault();
var completedIncrements =0;
var count = parseInt($("#count").text());
$("#count").html(count + 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
Shopping Cart (<span id="count">0</span>)
Shop
Contact Us
</div>
<a href="shoe1.html"><img id="shoe3" img src="images/shoe1.jpg" alt="shoe1">
<div id="cart1" class="addCart" href="#"><button>Add to cart</button></div>
<a href="shoe2.html"><img id="shoe4" img src="images/shoe2.jpg" alt="shoe2">
<div id="cart2" class="addCart" href="#"><button>Add to cart</button></div>
Use prevent default function so that link should not be refreshed and also removed unnecessary code
$('.addCart').on('click', function(e) {
e.preventDefault();
var count = parseInt($("#count").text());
$("#count").html(count + 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to hide an item?

var r1=Math.floor(Math.random()*255)
var g1=Math.floor(Math.random()*255)
var b1=Math.floor(Math.random()*255)
$(".color1").click(function (){
$(this).css("background", "rgb(" + r1 + "," + g1 + "," + b1 + ")")
})
$(document).ready(function () {
$(document).on('click', function (event) {
$target = $(event.target);
$target.addClass('clicked');
});
})
var numItems
var getfirstclass
var getsecondclass
$('div').click(function saveclassnames(){
var getfirstclass=$(this).attr('class')
console.log(getfirstclass)
var getsecondclass=$(this).attr('class')
console.log(getsecondclass)
getfirstclass===null
getsecondclass===null
})
$('div').click(function remove(){
var numItems = $('.clicked').length
if(numItems===2 && getfirstclass === getsecondclass){
$('.clicked').css('opacity', '0')
}
else{
$('.clicked').css('background', 'black')
}
})
<body>
<div class="container">
<div class="row">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
</div>
<div class="row">
<div class="color5"></div>
<div class="color3"></div>
<div class="color1"></div>
<div class="color6"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color6"></div>
<div class="color8"></div>
<div class="color5"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color8"></div>
<div class="color4"></div>
<div class="color2"></div>
</div>
</div>
</body>
I am trying to make a game called "Memory" (if 2 flipped cards are same, the cards will disappear, but if the cards are not the same, they will flip back). But there is a difference between the original one). I am using random colors instead of card pictures, but I cannot make <div> elements with the same background-color disappear, or flip back if they are not the same. Can someone explain to me why this code does not work?
Thanks.
opacity: 0; hiding generates a lot of space although the element is not visible.
background: black; – the element needs to blend in with the background, otherwise it will not work (technically it won't work)
You can either do this:
$('yourItem').css({
display: 'none'
});
Or, the "simplest way to hide an element":
$('yourItem').hide();
For more information see https://api.jquery.com/hide/
You could use
display: none
If that messes with other stuff, use
visiblity: hidden;

HTML Responsive css doesn't work with random image

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');

Change product image based on variant color

Online example of my goal:
I'm trying to display bike products on a category page. On each product there's a frame variant color, I'm displaying that using round divs.
When I click a color, the image should change as you can see on Specialized website: (underneath the product image) Specialized Example.
My own website
You can see my own example here: My own website example (scroll down till you see the product with multiple products).
My target functionality:
When I click the GREEN div I'd like to show picture 2 and when I click the RED div I'd like to see image 3, but as Default it will always be the firs
The first color = the first image
The second color = the second image
And so forth
My HTML:
<div class="frameColors">
<div class="frameColor" data-color="#95BD40" style="background-color:#95BD40"></div>
<div class="frameColor" data-color="#000000" style="background-color:#000000"></div>
<div class="frameColor" data-color="#C6352D" style="background-color:#C6352D"></div>
</div>
<a href="/produkter/cykler/mountain-bikes/specialized/epic-hardtails/epic-hardtail/">
<div class="categoryImage" data-frame-color="95BD40">
<img src="/media/1072/165519.jpg?anchor=center&mode=crop&width=500&height=350&rnd=131200748910000000" class="productImage">
</div>
<div class="categoryImage" data-frame-color="000000">
<img src="/media/1071/165518.jpg?anchor=center&mode=crop&width=500&height=350&rnd=131200746750000000" class="productImage">
</div>
<div class="categoryImage" data-frame-color="C6352D">
<img src="/media/1073/166762.jpg?anchor=center&mode=crop&width=500&height=350&rnd=131200749050000000" class="productImage">
</div>
</a>
My Foreach(s):
var imageIds = item.GetPropertyValue<string>("productImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var images = Umbraco.Media(imageIds);
<div class="frameColors">
#foreach (var bikeColor in images)
{
var color = bikeColor.GetPropertyValue("frameColor");
<div class="frameColor" data-color="##color" style="background-color:##color"></div>
}
</div>
<a href="#item.Url">
#foreach (var img in images)
{
<div class="categoryImage" data-frame-color="#img.GetPropertyValue("frameColor")">
<img src="#img.GetCropUrl("product image")" class="productImage" />
</div>
}
</a>
Based on Adeneo reply I managed to modify the code a little so it worked out as I wanted.
First, I added a css line: .categoryImage { display:none; } to hide ALL the product images.
I then added the script based on Adeneo's reply. I start off with targeting EACH of the .frameColor divs and inside that, I added this the following line to show the first image: categoryImage.first().show();
If the CSS line is not included, all of the product images will be displayed by default, so it was necessary to HIDE all the images and inside the script, show the first image.
$(function () {
$(".frameColor").each(function () {
var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
categoryImage.first().show();
if ($(categoryImage).length > 1) {
$(this).on('click', function () {
var color = $(this).data('color').replace('#', '');
$(categoryImage).hide().filter(function () {
return $(this).data('frame-color') === color;
}).show();
});
}
else {
$(this).hide();
}
});
});
Credits goes to Adeneo for providing the original script.

Replace a smaller image with a larger one (after the larger image loads)

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/

Categories

Resources