Run javascript when loading a specific page - javascript

I have an app that shows the active menu with javascript, it is an app made with Cordova.
The problem is that when I press the button to go back, it does not show me the active menu, the previous one is still here.
Is there a possibility to solve this? What I do is with javascript hide the non-active image and show the active image when pressed.
I have attached the code here:
<body>
<script>
var webAppWindow;
</script>
<iframe id="elframe" src="https://uoapp.es/cuenta/" name="iframe" style="position:fixed; width: 100%; height: 94%; "
onLoad="cambioiframe();"></iframe>
<div class="navbar">
<img src="img/logo-uo.png"
style="position: fixed;left: 50%; bottom: 0px; transform: translateX(-50%); width: 120px;" alt="logo"></a>
<a href="https://uoapp.es/blog" target="iframe"><img src="img/icons8-news-64-active.png"
style="position: fixed; left: 0%; bottom: 0px; width: 50px; display: none;" id="blog-activo"
alt="blog"></a>
<a href="https://uoapp.es/blog" target="iframe" onclick="mostraricono1();"><img src="img/icons8-news-64.png"
style="position: fixed;left: 0%; bottom: 0px; width: 50px;" id="blog-no-activo" alt="blog"></a>
<div class="contacto">
<a href="https://uoapp.es/contacto" target="iframe"><img src="img/icons8-group-message-64-active.png"
style="position: fixed;left: 15%; bottom: 0px; width: 50px; display: none;" id="contacto-activo"
alt="contacto"></a>
<a href="https://uoapp.es/contacto" target="iframe" onclick="mostraricono2();"><img
src="img/icons8-group-message-64.png" style="position: fixed;left: 15%; bottom: 0px; width: 50px;"
id="contacto-no-activo" alt="contacto"></a>
<a href="https://uoapp.es/directorio/" target="iframe"><img src="img/icons8-page-64-active.png"
id="directorio-activo" alt="directorio"
style="position: fixed;left: 72%; bottom: 0px; width: 50px; display: none;"></a>
<a href="https://uoapp.es/directorio/" target="iframe" onclick="mostraricono3();"><img
src="img/icons8-page-64.png" id="directorio-no-activo" alt="directorio"
style="position: fixed;left: 72%; bottom: 0px; width: 50px;"></a>
<a href="https://uoapp.es/cuenta/" target="iframe"><img src="img/icons8-user-male-64-active.png"
id="cuenta-activo" alt="cuenta"
style="position: fixed;left: 86%; bottom: 0px; width: 50px; display: none;"></a>
<a href="https://uoapp.es/cuenta/" target="iframe" onclick="mostraricono4();"><img
src="img/icons8-user-male-64.png" id="cuenta-no-activo" alt="cuenta"
style="position: fixed;left: 86%; bottom: 0px; width: 50px;"></a>
</div>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script>
</script>
<p id="OneSignalUserId"></p>
<p style="word-break: break-all;" id="OneSignalPushToken"></p>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
Javascript code is:
function mostraricono1() {
const blog_noactivo = document.getElementById('blog-no-activo');
blog_noactivo.style.display = "none";
const blog_activo = document.getElementById('blog-activo')
blog_activo.style.display = "block";
const contacto_noactivo = document.getElementById('contacto-no-activo');
contacto_noactivo.style.display = "block";
const contacto_activo = document.getElementById('contacto-activo')
contacto_activo.style.display = "none";
const directorio_noactivo = document.getElementById('directorio-no-activo');
directorio_noactivo.style.display = "block";
const directorio_activo = document.getElementById('directorio-activo')
directorio_activo.style.display = "none";
const cuenta_noactivo = document.getElementById('cuenta-no-activo');
cuenta_noactivo.style.display = "block";
const cuenta_activo = document.getElementById('cuenta-activo')
cuenta_activo.style.display = "none";
}
That is the function show icons 1 then there are the other 3 functions that are identical for each image
I hope someone can help me. If someone can, thank you!

one of the solutions is to give them serial id or serial class name , put for the first one
id = 'id1' and the second element give it an id = 'id2' and so on
then we gonna handle it in the java script using a counter like
var i = 1 ;
so if you want an element of id1 ,it gonna be ('id'+i) and after clicking the next button ,the counter increase (i++) and when clicking the previous button the counter decrease (i--)
below is an example of what i mean
// get all the elemnts of the main div
var selectedDiv = document.querySelectorAll('.contacto div')
// the counter
var i = 1;
function btnRing(clicked_id) {
// this for hide all the elements inside the main div
//when clicking any button the all elements is gonna hide
selectedDiv.forEach(div => {
div.style.display = "none"
})
// this for next button
if (clicked_id === 'btn1') {
// this line to make the previous button active when clicking the next button
document.getElementById('btn2').style.pointerEvents = 'all'
//this to show the next element
document.getElementById('div' + (i + 1)).style.display = 'block'
// increase the counter when clicking next
i++
// this for deactivating the next button when is there is no more elements
if (i >= 4) {
document.getElementById(clicked_id).style.pointerEvents = 'none'
}
//this is the previous button
} else if (clicked_id === 'btn2') {
// this for activating the next button after i deactivate it above
document.getElementById('btn1').style.pointerEvents = 'all'
//decrease the counter
i--
// showing the previous elemnt
document.getElementById('div' + i).style.display = 'block'
//this for deactivating the previous button after is no more elements
if (i <= 1) {
document.getElementById(clicked_id).style.pointerEvents = 'none'
}
}
}
#div1,
#div2,
#div3,
#div4 {
height: 10rem;
width: 10rem;
background-color: brown;
color: aliceblue;
display: none;
}
#div1 {
display: block;
}
<div class="contacto">
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
<div id="div4">DIV 4</div>
</div>
<button id='btn1' onclick="btnRing(this.id)">next</button>
<button id='btn2' onclick="btnRing(this.id)">previous</button>

Related

appendTo adds element to another one, but it does not show on the website

I am trying to add arrows to my simple lightbox. The arrows are simple symbols "<" and ">. I have created them with jquery and when I try to add them to the image, they show up in the developer tools but not in the website for whatever reason. Can you tell me what's the problem please?
Here is the screenshot of the issue, if you did not understand my poor english. As you can see, the arrows are created in developer tools, but they cannot be found on the website. https://prnt.sc/26lyfbc
//Gallery Lightbox made with Jquery
let gallery = $('#gallery'),
overlay = $('<div = id = "overlay"></div>').appendTo('body').hide();
//Opens the lightbox with chosen image
gallery.find('a').on("click", function(event){
event.preventDefault();
let href = $(this).attr('href'),
image = $('<img>', {src: href}),
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
image.appendTo(overlay);
larrow.appendTo(image);
overlay.show();
//Closes the Lightbox with the image, by clicking on the overlay
$(document).on("click", "#overlay", function(){
overlay.hide();
image.remove();
})
})
.gallery {
display: none;
opacity: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 1004px;
margin: 0 auto;
}
.gallery img {
position: relative;
top: 100px;
height: 200px;
width: 300px;
margin: 0 1em;
}
#overlay {
background: rgba(0, 0, 0, .7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#overlay img {
margin-top: 5%;
border: solid 5px white;
border-radius: 5px;
}
//Dont mind these, the silly values are just for testing purposes
#larrow {
font-size: 500px;
color: red;
z-index: 2000;
}
#rarrow {
font-size: 500px;
color: red;
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img src="img\placeholder1.jpg" alt="">
<img src="img\placeholder2.jpg" alt="">
<img src="img\placeholder3.jpg" alt="">
<img src="img\placeholder4.jpg" alt="">
<img src="img\placeholder5.jpg" alt="">
<img src="img\placeholder6.jpg" alt="">
</div>
</body>
You have a few errors in your code. Instead of
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
You should write it like this. There is no need for the '=' between div and id.
larrow = $('<div id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div id = "rarrow"> > </div>'); //RIGHT ARROW
The same goes for the following tags:
overlay = $('<div id = "overlay"></div>').appendTo('body').hide();
Putting the div tags in the image will also not work. Instead you should put the image and the arrows in a container together like this:
<div id="overlay">
<img src ... </img>
<div id = "larrow"> < </div>
<div id = "rarrow"> > </div>
</div>
Refer to Floating Div Over An Image to see the needed css.

Trying to make a function hide and reveal 2 images

This is my code. I'm trying to hide another image behind another and make a button press switch which image is visible along with changing the href link.
function revealHQ() {
var pilaf = document.getElementById('PilafHQ');
var altaf = document.getElementById('altafsung');
// get the current value of the hidden image's display property
var displaySetting = altaf.style.display;
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// hidden message is visible. hide it
altaf.style.display = 'none';
pilaf.style.display = 'block';
} else {
// if message is hidden. show it
altaf.style.display = 'block';
pilaf.style.display = 'none';
}
}
.altafsung {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
display: block;
}
.PilafHQ {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
display: none;
}
<a href="https://tse1.mm.bing.net/th/id/OIP.9uW8U7EhqDOzl1-gONQjwAHaGj?pid=ImgDet&rs=1" target="_blank">
<div class="PilafHQ"><img src="Images/Pilaf Castle Entrance cropped.png " alt="Pilaf castle entrance" width="250" height="250"></div>
</a>
<a href="https://altafs-bazaar.bertry.repl.co/" target="_blank">
<div class="altafsung"><img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250"></div>
</a>
<img src="Images/walkingbear.gif" alt="polar bear walking 😲" onclick="revealHQ();">
Use ID on the elements when you want to access byId
It is simpler to toggle the class
I gave the emoji an ID too
window.addEventListener("load", function() { // when page loads
document.getElementById("toggleImage").addEventListener("click", function() {
var pilaf = document.getElementById('PilafHQ');
var altaf = document.getElementById('altafsung');
// show one, hide the other
altaf.classList.toggle("hide")
pilaf.classList.toggle("hide")
});
});
.altafsung {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
}
.PilafHQ {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
}
.hide {
display: none
}
<a href="https://tse1.mm.bing.net/th/id/OIP.9uW8U7EhqDOzl1-gONQjwAHaGj?pid=ImgDet&rs=1" target="_blank">
<div id="PilafHQ" class="hide"><img src="Images/Pilaf Castle Entrance cropped.png " alt="Pilaf castle entrance" width="250" height="250"></div>
</a>
<a href="https://altafs-bazaar.bertry.repl.co/" target="_blank">
<div id="altafsung"><img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250"></div>
</a>
<img id="toggleImage" src="Images/walkingbear.gif" alt="polar bear walking 😲">

How to call jQuery event from another page?

Hi I have a question regarding the issue as title.
There is Page 1 with jQuery controlling to show the div, section 1 and section 2, as below.
$('.section2,.click1').fadeOut(0);
$('.click2').on('click', function() {
$(this).fadeOut(0);
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
});
$('.click1').on('click', function() {
$(this).fadeOut(0);
$('.section2').fadeOut();
$('.section1, .click2').fadeIn();
});
a {
display:block;
}
.section-wrapper {
position: relative;
width:400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click2">Click to section2.</a>
<a class="click1">Click to section1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
However, when I am at Page 2, there's a button need to link me to the section 2.
Go to Page 1 Section 2
How can I call the jquery function to show the section 2 and hide the section 1?
This is more generic
$(function() {
$('.click').on('click', function() {
let sectionNumber = $(this).data("section");
$(".click").show();
$(this).fadeOut(0);
$('.section-box').not(".section"+sectionNumber).fadeOut();
$('.section'+sectionNumber).fadeIn()
});
let hash = "#section2" // change to location.hash when happy
let section = hash ? hash.substring(1).replace("scrolldown&","") : "section1";
if (hash) {
let sectionNumber = hash.replace(/\D+/,"");
$("[data-section="+sectionNumber+"]").click()
}
});
a {
display: block;
}
.section-wrapper {
position: relative;
width: 400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click" data-section="2">Click to section 2.</a>
<a class="click" data-section="1">Click to section 1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
You could check for hash tag in page url and show/hide the element.
Edited
$(document).ready(function(){
if(window.location.hash) {
var hashVal = window.location.hash.substring(1);
if(hashVal == "Section2"){
var divId = "#"+hashVal; //id of the section 2 element
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
var pos = $(divId).offset().top; //top position relative to the document
$('body, html').animate({scrollTop: pos});
}
} else {
// No hash value
}
});

Adding touchEvents for navigation

I'm building a little site with full page horizontal and vertical scrolling. Check out a codepen demo here. There is a bug with the demo, the 'left' and 'up' buttons don't work how they're supposed to. The 'right' and 'down' buttons work fine. I just threw that together to show you what I'm talking about (excuse my inline styling).
First off, I need to incorporate touchEvents to make the full page scrolling work on mobile devices. If the user swipes left, right, down, or up, the page should move accordingly. I'm still learning the fundamentals of JS and I have no idea where to start with that.
Secondly, I have a few doubts about whether or not I'm using best practices in my JS. For one thing, I repeat myself a lot. For another, I'm pretty sure there's a simpler method for what I'm trying to do. I'd appreciate it if you could take a look at my code and give me some suggestions. Thanks!
You need to modify these two in CSS:
#center.cslide-up {
top: 100vh;
}
#center.cslide-left {
left: 100vw;
}
First one: When the up button is clicked, it will move 100vh down from top position.
Second one: When the left button is clicked, it will move 100vw right from left position.
As far as for mobile phones, I'd suggest try using:
Hammer.js : https://hammerjs.github.io/
Or Refer this answer: https://stackoverflow.com/a/23230280/2474466
And you can reduce the lines of code by cooking up a function and calling it like this: (Make sure to declare panel2 variable globally)
btnL.addEventListener('click', function() {
swiper("left");
});
btnLBack.addEventListener('click', function() {
swiper("left");
});
function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}
The function swiper takes a single argument dir which determines in which direction it has to be moved. And you can concatenate the dir with cslide- to move the center container. And use if/else conditions to determine which panel to move and use the same idea for it as well.
And to make it more simpler and a bit efficient, if you're not making use of any other eventlisteners for the buttons or panels and the only aim is to toggle the class around, you can just use inline onClick="swiper('direction');" attribute on the panels and buttons to trigger it only when needed instead of defining the eventlisteners in the script.
var panel2;
var panelC = document.getElementById('center');
var panelU = document.getElementById('up');
var panelR = document.getElementById('right');
var panelD = document.getElementById('down');
var panelL = document.getElementById('left');
var btnU = document.getElementById('btn-up');
var btnR = document.getElementById('btn-right');
var btnD = document.getElementById('btn-down');
var btnL = document.getElementById('btn-left');
var btnUBack = document.getElementById('btn-up-back');
var btnRBack = document.getElementById('btn-right-back');
var btnDBack = document.getElementById('btn-down-back');
var btnLBack = document.getElementById('btn-left-back');
btnU.addEventListener('click', function() {
swiper("up");
});
btnUBack.addEventListener('click', function() {
swiper("up");
});
btnR.addEventListener('click', function() {
swiper("right");
});
btnRBack.addEventListener('click', function() {
swiper("right");
});
btnD.addEventListener('click', function() {
swiper("down");
});
btnDBack.addEventListener('click', function() {
swiper("down");
});
btnL.addEventListener('click', function() {
swiper("left");
});
btnLBack.addEventListener('click', function() {
swiper("left");
});
function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}
* {
margin: 0;
padding: 0;
transition: 1.5s ease;
-webkit-transition: 1.5s ease;
overflow: hidden;
background: white;
}
.panel {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
border: 1px solid blue;
}
.btn {
position: absolute;
padding: 16px;
cursor: pointer;
}
#center {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
#center.cslide-up {
top: 100vh;
}
#center.cslide-left {
left: 100vw;
}
#center.cslide-right {
left: -100vw;
}
#center.cslide-down {
top: -100vh;
}
#up {
top: -100vh;
}
#up.slide-up {
top: 0;
}
#right {
right: -100vw;
}
#right.slide-right {
right: 0;
}
#down {
bottom: -100vh;
}
#down.slide-down {
bottom: 0;
}
#left {
left: -100vw
}
#left.slide-left {
left: 0;
}
<div class="panel" id="center">
<div class="btn" id="btn-up" style="text-align: center; width: 100%;">
up
</div>
<div class="btn" id="btn-right" style="right: 0; top: 50%;">
right
</div>
<div class="btn" id="btn-down" style="text-align: center; bottom: 0; width: 100%;">
down
</div>
<div class="btn" id="btn-left" style="top: 50%;">
left
</div>
</div>
<div class="panel" id="up">
<div class="btn" id="btn-up-back" style="bottom: 0; width: 100%; text-align: center;">
back
</div>
</div>
<div class="panel" id="right">
<div class="btn" id="btn-right-back" style="left: 0; top: 50%;">
back
</div>
</div>
<div class="panel" id="down">
<div class="btn" id="btn-down-back" style="top: 0; width: 100%; text-align: center;">
back
</div>
</div>
<div class="panel" id="left">
<div class="btn" id="btn-left-back" style="right: 0; top: 50%;">
back
</div>
</div>

javascript mouseout function flickering

I'm trying to create a mouse in and out effect that shows and disappears DIV's according to the mouse function. I've successfully done this, but the mouseout function flickers on and off when im inside the div instead of staying on.
Heres my sample code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kow Your Face</title>
<style>
#face {
background-image: url(face.png);
width: 262px;
height: 262px;
}
#lefteye {
background-image: url(circle.png);
width: 28px;
height: 28px;
position: relative;
top: 69px;
left: 59px;
}
#righteye {
background-image: url(circle.png);
width: 28px;
height: 28px;
position: relative;
top: 41px;
left: 167px;
}
#mouth {
background-image: url(circle.png);
width: 28px;
height: 28px;
position: relative;
top: 84px;
left: 114px;
}
</style>
</head>
<body>
<div id="face">
<div id="lefteye" onMouseOver="getElementById('lefteye').style.visibility='hidden'; getElementById('lefteyedes').style.visibility='visible';" onMouseOut="getElementById('lefteye').style.visibility='visible'; getElementById('lefteyedes').style.visibility='hidden';">
</div>
<div id="righteye" onMouseOver="getElementById('righteye').style.visibility='hidden'; getElementById('righteyedes').style.visibility='visible';" onMouseOut="getElementById('righteye').style.visibility='visible'; getElementById('righteyedes').style.visibility='hidden';">
</div>
<div id="mouth" onMouseOver="getElementById('mouth').style.visibility='hidden'; getElementById('mouthdes').style.visibility='visible';" onMouseOut="getElementById('mouth').style.visibility='visible'; getElementById('mouthdes').style.visibility='hidden';">
</div>
</div>
<div id="lefteyedes" style="visibility: hidden;">
<p>Left Eye</p>
</div>
<div id="righteyedes" style="visibility: hidden;">
<p>Right Eye</p>
</div>
<div id="mouthdes" style="visibility: hidden;">
<p>Mouth</p>
</div>
</body>
</html>
Use document.getElementById instead of just getElementById and you can use this keyword to refer to the current element:
<div id="lefteye" onMouseOver="this.style.visibility='hidden'; document.getElementById('lefteyedes').style.visibility='visible';" onMouseOut="this.style.visibility='visible'; document.getElementById('lefteyedes').style.visibility='hidden';">
</div>
For some reason your onmouseout function is being repeatedly called "onmousemove"...this solution should help you suppress the onmouseout function being repeatedly called. I've rewritten your code a little to help make it easier to enforce changes later (illustrated with one of the onmouseover/onmouseout pairs)...give this a shot:
<script type="text/javascript">
function leftEyeVisibility(vis1, vis2) {
//this function should work for the left eye when the left eye is hidden (lefteyedes is visible) and the mouse is moving over (or not moving at all) the hidden left eye div but has not moused out of it
var dg = document.getElementById("lefteye");
var divStyle = window.getComputedStyle(dg, "");
var mousePosition = function (e) {
var xCoord = e.pageX;
var yCoord = e.pageY;
return xCoord + "," + yCoord;
}
var positionArray = mousePosition.split(","); //split the xy coordinates returned by previous function
if ((positionArray[0] > dg.offsetLeft) && (positionArray[0] < dg.offsetLeft + dg.offsetWidth) && (positionArray[1] > dg.offsetTop) && (positionArray[1] < dg.offsetTop + dg.offsetHeight)) {
var mouseOverlap = 'yes';
} else var mouseOverlap = 'no';
if ((divStyle.visibility === 'hidden') && (mouseOverlap === 'yes')) {
return false;
} else {
document.getElementById("lefteye").style.visibility = vis1;
document.getElementById("lefteyedes").style.visibility = vis2;
}
}
</script>
<div id="lefteye" onmouseover="leftEyeVisibility('hidden', 'visible')" onmouseout="leftEyeVisibility('visible', 'hidden')">
</div>
With jQuery it would be much easier to do this...let me know if it works.

Categories

Resources