I have an image gallery which has modals for each image.
The gallery and modals are created in javascript using template literals.
The modals pop ups are different html files imported using iframe.
For some reason the modals won't close when clicking outside.
I tried creating the iframes inside the html instead of using template literals and I had no problems in that case, just when using javascript for making them.
Here is an example of what is happening.
THIS GITHUB EXAMPLE
This is the modal function used in both cases:
function modalLinks(tempgal){
let btnId = "btn" + tempgal.imgn;
let modId = "id" + tempgal.imgn;
let getBtnId = document.getElementById(btnId);
let getModId = document.getElementById(modId);
getBtnId.onclick = function() {
console.log('click: btn: ' + this.id + ', modal: ' + getModId.id);
getModId.classList.toggle('show-popup');
}
/* to dispose the popup on click */
getModId.onclick = function() {
console.log(this.id +" it's OK");
this.classList.toggle('show-popup');
}
}
The moon and its modal are created inside of the HTML.
The other two images (sorry if they don't show properly) are created using template literals, and, as you can see (if you already saw the example), the moon modal works fine but the other two don't.
It'll be great if someone please tell me what is happening.
Thanks for advance.
Ok, I just experimented changing things and moving others and got the solution.
When making modals with external html's and importing them with iframe, putting the iframe within a div is the best choice.
The iframed modal shoul look like this
<div id="modalid" class="modal-window">
<iframe class="modal-wrap" src="thelink" frameborder="0"></iframe>
</div>
the css like this
.modal-window{
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
}
.modal-wrap{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 50%;
height: 50%;
}
and the html imported must have this class
.modalcontent{
position: absolute;
z-index: 3;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%
}
Related
I have a problem, before adding the JS, just with the HTML and CSS, the two images overlapped well but since I added this function to my code, the concerned image (icon-cart-white) is no longer arranged in the same position and I do not know what to change so that it returns to normal, if you know how to fix this problem I would be very grateful. Thank you
This is before i add the JS
This is after i add the JS
HTML (before the JS) :
<img class="calebasse-icon-cart-white" src="calebasse-white" alt ="white-icon-cart">
<img class="calebasse-icon-cart-black" src="calebasse-black" alt ="black-icon-cart">
HTML (with the JS) :
<iconcart id="iconcart">
<img class="calebasse-icon-cart-white" src="calebasse-white" alt ="white-icon-cart">
</iconcart>
<img class="calebasse-icon-cart-black" src="calebasse-black" alt ="black-icon-cart">
CSS :
.calebasse-icon-cart-white {
position: absolute;
width: 75%;
height: 75%;
z-index: 2;
}
.calebasse-icon-cart-black {
position: absolute;
width: 75%;
height: 75%;
z-index: 1;
}
JS :
let iconcart = document.getElementById('iconcart');
document.addEventListener('scroll', function() {
let scrollPosition = window.pageYOffset;
if (scrollPosition <= 50) {
iconcart.style.opacity = 1 - scrollPosition / 50;
} else {
iconcart.style.opacity = 0;
}
});
I tried to change the position: absolute; to position: relative; to solve the problem but it wasn't better, i thought the problem was the CSS but in fact in not really sure, it can also be the JS.
Solved.
Instead of creating tag i just put the id in the tag and it worked, I don't really know why but it's fine for me. Thank you Pete for helping me with the Minimal, reproducible example article.
i want use loading gif in apex pages when doing a query:
i have a button and behind of it i use dynamic action for executing a query, in attributes of page in javascript section, i wrote these:
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js
and in css section, in inline, i wrote these:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(#APP_IMAGES#Preloader_1.gif) center no-repeat #fff;
}
and finally, behind of my button, in dynamic action , i created a true action (execute javascript code) and i wrote these:
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
after that, i created another true action (execute pl/sql code) for doing my query.
i expected when i clicked button, i saw gif loading until my query went done, but i didnt it and i havent any error.
what is my mistake?
thank you
Did you know there's a built-in API for this? Just call apex.util.showSpinner: https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/apex.util.html#.showSpinner
You can then call remove on the object returned.
Here's an example from the doc:
var lSpinner$ = apex.util.showSpinner($( "#container_id"));
// Then later...
lSpinner$.remove();
I got my page working how I wanted it (based on the previous question I asked). However, when I display the timeline (default is display:none) it creates a large gap of empty space beneath it. How can I remove this empty space? I just want the timeline to replace the image when it is clicked and vice-versa.
Here is my code pen
I don't know what code to include here.
You are using position:relative and giving css top value. That is causing this issue. I have done some change in css with position and top values. That works as you require.
#timeline{
position:absolute;
background-color:beige;
/*top:-829px;*/
top:210px;
width: 755px;
height: 827px;
margin-left: 180px;
}
Hope this resolves your issue.
change the css,
#main-image-div{
position: relative;
margin: 0 auto;
width: 750px;
height: 400px;
}
#main-image-div img{
max-width: 100%;
}
#timeline{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Hope this will solve the issue.
I created a nicer toggle effect and i think that's what you wanted.
http://codepen.io/anon/pen/dvdLpY
var img = $('img');
var list = $('.list');
list.hide();
img.click(function(){
$(this).fadeToggle(function(){
list.fadeToggle();
});
});
list.click(function(){
$(this).fadeToggle(function(){
img.fadeToggle();
});
});
I have two images...
function leftMove(el) {
if (el.className == "la") {
el.className = "la1";
getElementById(ra).className = "ra1";
} else {
el.className = "la";
getElementById(ra1).className = "ra";
}
}
.la {
position: absolute;
bottom: 370px;
opacity: .5;
}
.ra {
position: absolute;
bottom: 370px;
left: 1637px;
opacity: .5;
}
.la1 {
position: absolute;
bottom: 370px;
left: 500px;
opacity: 1;
}
.ra1 {
position: absolute;
bottom: 370px;
left: 1137px;
opacity: 1;
}
<img src="img.png" width="290" height="228" id="la" class="la" onclick="leftMove(this)">
<img src="img.png" width="290" height="228" id="ra" class="ra" onclick="rightMove(this)">
...that I am trying to modify. Specifically, I am trying to change the class of both images when either image is clicked. An example of the javascript I am using is:
The end goal would be to have both images reference new CSS, shown here:
If I do it correctly, both images should move and change opacity. For some reason, only the image with the "la"/"la1" class moves and changes opacity, while the "ra"/"ra1" image does nothing. I'm pretty sure this is because my javascript is broken, but I don't know why. Any advice would be greatly appreciated.
This is the first code I've written, so please be gentle if I'm being obtuse.
Thanks for taking the time. :)
You need to pass a string to getElementById and call the function on document:
document.getElementById("ra").className = "ra1";
...
document.getElementById("ra1").className = "ra";
I have made a simple slider gallery for my site but have found that when I click next the image updates but it does not centre until I have done a full cycle of the images
how can i get the images to align from the start?
HERE IS THE JS FIDDLE > http://jsfiddle.net/8pScd/4
HTML
<div class="view_gallery">view gallery</div>
<div class="prev control"><<</div>
<div class="next control">>></div>
<div class="gallery">
</div>
<div class="overlay"></div>
CSS
.overlay{
display: none;
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
z-index: 100;
}
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
left: 50%;
background: #fff;
}
.control{
position: absolute;
top: 200px;
z-index: 300;
color: #fff;
text-transform: capitalize;
font-size: 2em;
cursor: pointer;
}
.prev{left: 0;}
.next{right:0;}
JQUERY
//images
var pics = new Array();
pics[0] = "cars.jpg";
pics[1] = "cats.png";
pics[2] = "dogs.png";
pics[3] = "bus.jpg"
//total amount of pictures to display
var pictot = pics.length-1;
var nxt = $(".next"),
prv = $(".prev"),
view = $(".view_gallery"),
gal = $(".gallery"),
overlay = $(".overlay"),
num = 0;
//view gallery
view.click(function(){
overlay.show();
gal.show();
// Start gallery off on the first image
gal.html('<img src="' + pics[0] + '" />');
});
nxt.click(function(){
// If on the last image set value to 0. Else add 1
if (num == pictot){num = 0;}else{num++;};
update();
});
prv.click(function(){
// If on first image set value to last image number. Else minus 1
if (num == 0){num = pictot;}else{num--;}
update();
});
function update () {
// update image with next/previous
gal.html('<img src="' + pics[num] + '" />');
//center image (not working very well)
var x = gal.width()/2;
gal.css("marginLeft", -x);
};
//hide
overlay.click(function(){
gal.hide();
$(this).hide();
});
The problem you have is that the "update" function is called immediately after clicking on prev/next. The image has not yet been loaded, so the code does not actually know the new gal.width yet. That's why it works after a full round: the images are now in the cache, and therefore already available.
The best solution would be to use javascript Image objects to preload the pictures; an easier way but possibly problematic is to use the 'load' event (it may not work well in all browsers).
You can align your gallery div with some simple css hack.
1)first define width. (you can define dynamic width with jquery).
2)add position:absolute;
3)add left:0 , right:0;
4)add margin:0 auto;
final code looks like this.
.gallery {
background: none repeat scroll 0 0 #FFFFFF;
left: 0;
margin: 0 auto !important;
padding: 10px;
position: absolute;
right: 0;
width: 600px;
z-index: 200;
}
your math is wrong, look at this example http://jsfiddle.net/8pScd/6/
i've just need to change your math at
var x = $('body').width()/2 - gal.width()/2;
gal.css("margin-left", x + 'px');
and i removed this line at your css
left: 50%;
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
background: #fff;
}
Knowing that .gallery is 920px wide, set left: 50%; margin-left: -470px. Also remove the line in javascript which updates margin-left of the gallery container - gal.css("marginLeft", -x);