Each text belongs to a specific image, so when someone is moving the cursor over that image. The text should be shown up and when the cursor goes mouseout the text should be hidden. No jQuerty required please, must be in pure JavaScript. Anyone an idea how I should fix that.
function show() {
document.getElementsByClassName("text").style.visibility = "visible";
}
function hide() {
document.getElementsByClassName("text").style.visibility = "hidden";
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="www.bbc.com" target="_blank" class="image" onmouseover="show()" onmouseout="hide()">
<img src="img/a-print-screen.png" class="project" alt="a-print-screen"/>
<div class="text">A-picture</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="www.cnn.com" target="_blank" class="image" onmouseover="show()" onmouseout="hide()">
<img src="img/x-picture.png" class="project" alt="x-print-screen"/>
<div class="text">x-picture</div>
</a>
</div>
</div>
</div>
The command document.getElementsByClassName("text"); returns a List of elements opposed to document.getElementById("text"); which returns just one element.
So to use one element to change its style you have to use array notation document.getElementsByClassName("text")[0] for example for the first element.
I used a for loop to iterate over every list element in the code sample below:
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="www.bbc.com" target="_blank" class="image" >
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" class="project" alt="a-print-screen" onmouseover="show('text1')" onmouseout="hide('text1')"/>
<div class="text1">A-picture</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="www.cnn.com" target="_blank" class="image" >
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg" class="project" alt="x-print-screen" onmouseover="show('text2')" onmouseout="hide('text2')" />
<div class="text2">x-picture</div>
</a>
</div>
</div>
</div>
Related
I'm attempting to create a set of div's based on the number of iterations of an element.
The element created is an image and depending on the page there is a variable number generated by the server, contained in a parent div.
The HTML is:
<div id="thumbImageList">
<div class="thumbSlides"> //parent div
<div class="col-3 col-md-3"> //child div that is generated
<a href="#">
<img src="img1.png">
</a>
</div>
<div class="col-3 col-md-3"> //child div that is generated
<a href="#">
<img src="img2.png">
</a>
</div>
// Child Div repeated per number of images available.
</div>
</div>
The Child div's need to be separated into groups of no more than 4. I was intending to do this with JS, maybe using an array, but have not been able to get anything to work so far.
Edit:
To be clear, the templated code is:
<div id="thumbImageList">
//parent div
<div class="thumbSlides">
[%THUMBNAILS%]
[%param *body%]
//child div that is reproduced per the number of images available.
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]">
<img src="[#thumb_image#]" class="img-fluid product-image-small">
</a>
</div>
[%/ param%]
[%/ THUMBNAILS%]
</div>
</div>
The template is parsed by the server before handing it off to the browser with the HTML structure provided above.
The sets of 4 images are intended to be inside a new iteration of the parent div. So the result would be:
<div id="thumbImageList">>
<div class="thumbSlides">
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]1">
<img src="[#thumb_image#]1" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]2">
<img src="[#thumb_image#]2" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]3">
<img src="[#thumb_image#]3" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]4">
<img src="[#thumb_image#]4" class="img-fluid product-image-small">
</a>
</div>
</div>
<div class="thumbSlides">
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]5">
<img src="[#thumb_image#]5" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]6">
<img src="[#thumb_image#]6" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]7">
<img src="[#thumb_image#]7" class="img-fluid product-image-small">
</a>
</div>
<div class="col-3 col-md-3">
<a href="javascript:;" rel="[#full_image#]8">
<img src="[#thumb_image#]8" class="img-fluid product-image-small">
</a>
</div>
</div>
</div>
Update:
I have managed to create the required div's thanks to Henry Manuel's input. using the following:
var w = document.getElementById('thumbImageList');
var n = w.childElementCount / 4;
for(var i=0; i<n; i++){
$("#thumbImageList").append(
'<div class="thumbSlides">'
);
};
Now from what I can see, I need to place the child div's into the new parents.
Take this basic example and modify it based on what you need.
<html>
<body>
<div id="idAttr">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var n = 5;
for(var i=0; i<n; i++){
$("#idAttr").append(
'<img src="https://images.pexels.com/photos/5549976/pexels-photo-5549976.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> '
);
};
</script>
note that var n = 5, this will represent the number of times you are getting from the server
I've solved this using a simple jQuery function:
$("#thumbImageList div").slice(start, end,).wrapAll(
'<div class="thumbSlides">'
);
Then I just iterate this string based on the number of images.
I want to select multiple modals through Javascript. I have already set an id on every modal.
So far I am able to loop through the elements but I don't know how to grab every id of modals.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my Javascript:
const projects = document.querySelectorAll('.projects > div');
for(var i = 0; i< projects.length;i++){
var thisBtn = projects[i];
thisBtn.addEventListener('click', ()=> {
var modal = document.getElementById(this.dataset.modal);
modal.style.display = 'block';
}, false);
}
I saw this.dataset.modal implement at one of the solutions. But unfortunately, it didn't work. How can I grab that particular id of element when its parent modal is clicked.
Any help would be appreciated.
Code for closing modal when clicking outside:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});
Open modeal: The first loop puts "addEventListener" which takes date information with the ID of the modal.
Close modal: The second loop takes all the "close" buttons. Puts "addEventListener" when this button is pressed, it applies a style display:none; to the parent item
const projects = document.querySelectorAll('.projects > div');
for (var i = 0; i < projects.length; i++) {
projects[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
document.getElementById(x).setAttribute('style', 'display:block;');
});
}
const close = document.querySelectorAll('.close');
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function () {
var x = this.parentElement;
x.setAttribute('style', 'display:none;');
});
}
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1" style="display:none;">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2" style="display:none;">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
There is no this in arrow (=>) function syntax, use normal function syntax instead.
Demo:
const projects = document.querySelectorAll('.projects > div');
for(var i = 0; i < projects.length;i++){
var thisBtn = projects[i];
thisBtn.addEventListener('click', function() {
var modal = document.getElementById(this.dataset.modal);
modal.style.display = 'block';
console.log('You have clicked: ' +this.dataset.modal);
}, false);
}
.project-card{
display: none;
}
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Hi I am new to the world of Greasemonkey and JavaScript..
I want to replace every onclick function with a part of its related img src link
the source looks like this:
<div id="playlist_container">
<div id="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
i want to replace the onclick 'playvid' a1a1a1a1a1 & b2b2b2b2bb2 & c3c3c3c3c3c3 ... with part of img src link
to become like this:
<div id="playlist_container">
<div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('EFGH',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
Here's what i've tried so far:
var els = $("#playlist_container");
var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
for(var i=0;i<els.length;i++){
var el = els[i];
el.innerHTML = el.innerHTML.replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + cod +"'");
}
this works for me but the issue is that it puts the first cod 'ABCD' to all the following 'playvid()' functions as shown below:
<div id="playlist_container">
<div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('ABCD',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
another issue is when i try $("#video_container") it doesnt work i dont know why, I'm very confused and can't find anything on it
Your html has duplicate ID values which can cause issues when finding the correct element. Try using class if you want to target multiple elements.
This code only gets the first element value
var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
Try this code and let me know how it goes
var images = $("div.thumbnail img");
images.each(function(img) {
var name = $(this).prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
var container = this.closest("div.video_container");
var evt = $(container).attr("onclick").replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + name +"'");
$(container).attr("onclick", evt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="playlist_container">
<div class="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
<div class="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div class="title"></div>
<div class="synopsis">Vid 1</div>
</div>
<hr>
<div class="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
<div class="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div class="title"></div>
<div class="synopsis">Vid 2</div>
</div>
Here is my HTML and Javascript code, and basically as you can see currently what it does is show/hide a row of 3 images upon button click.
Thing is, that there are another 2 rows just like this one and I need to know how I can change the javascript code to make the show/hide thing work for all of them.
I know it has something to do with looping through an array of buttons, but I have no idea of Javascript.
Here it is :
<style>
.show-tapas{
display: none;
}
.show-tapas.showing{
display: block;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_1_0.jpeg">
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_2_0.jpeg">
</div>
</div></div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_3_0.jpeg">
</div>
</div></div>
</a>
</div>
</div>
<script>
var a = document.querySelector('.load-more-button');
var b = document.querySelector('.show-tapas');
a.addEventListener("click",function(e){
e.preventDefault
b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
})
</script>
Thank you very much!!!
In this code I only see one row with the class .show-tapas.
Anyway, you should use querySelectorAll to take every matched items.
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click",function(e){
tapas.forEach(b => $(b).toggle());
})
Pro-tip: If you have JQuery you might consider using $(b).toggle() instead of b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
I just need each div to fade in once, doesn't need to fade out. Only .landing and .about fade in. .images and .contact don't fade in at all, but I can still click the invisible button on the .images div. If you need my CSS for the ids, please let me know. I'm still a JavaScript beginner, so this could be an easy fix.
<div class="landing">
<div class="content" id="fadein"> <!-- "fadein" is for my onload function -->
<div class="header">
<h1 style="margin: 0;">Placeholder</h1>
<h4 style="margin: 0;">Placeholder</h4>
</div>
<div class="down">
<a href="#about">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="about"></a>
<div class="wrapper">
<div class="content" id="fadeinclick">
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<div class="down">
<a href="#images">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="images"></a>
<div class="wrapper">
<div class="content" id="fadeinclick"> <!-- first div that won't fade in -->
<h3>Images</h3>
<div class="activity">
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
</div>
<div class="down">
<a href="#contact">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="contact"></a>
<div class="wrapper">
<div class="content" id="fadeinclick"> <!-- second div that won't fade in -->
<h3>Contact</h3>
<div class="activity">
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
</div>
</div>
</div>
<!-- Fade scripts -->
<script>
window.onload = function() {
document.getElementById("fadein").style.opacity = 1;
}
</script>
<script>
window.onclick = function() {
document.getElementById("fadeinclick").style.opacity = 1;
}
</script>
opacity isn't a child of style, but rather a property. Just do
elem.style = "opacity:100%"
But keep in mind it won't fade. My advice?
var fade = 0
var elem = document.getElementById('imageId')
rate = 1
function step() {
fade = fade + 1
}
function start() {
if (fade < 100) {
step()
setInterval(function() {start}, rate)
};
};