And this is for the onhover-function
refresh page if you can't see the codepen above
C
cthornval
@cthornval
0
Reputation
13
Posts
2
Profile views
0
Followers
0
Following
Best posts made by cthornval
This user hasn't posted anything yet.
Latest posts made by cthornval
-
RE: How to make a resposive bottom-up slider, that also works as a nav-barposted in Javascript + jQuery
refresh page if you can't see the codepen above
-
RE: How to make a resposive bottom-up slider, that also works as a nav-barposted in Javascript + jQuery
Hey Avan
Thanks for responding. I’ve continued to liddle around with the code. I wish to create a bottom nav-bar, with a slide-up effect like the one on this website https://tatianabilbao.com - when an item on the page is hovered, a project description is displayed in the nav-bar and when it is clicked i slides up.
At this point in time I have managed to create the hover effect, that and the click/slide up effect. However I have a hard time combining them in the same code.
At this point, in my html-sheet the nav-bar is a div <div class="slider”>, styled in a css grid, with four columns. In the html sheet each column is indicated with a div class <div class="targetDiv" style="display: none;">
So at this point when “About” is clicked, the nav-bar slides up and displays a curriculum vitae, set in four coulmns.Howvever, when I try to include and over the on-hover divs in the slider “section” and connect them to an external javascript file, the slider effect freezes.
So at this point in time I need a way to display content in the nav-bar when it is not “activated” thorugh click/slide up - bascially a way of combining both codes. I am maybe suspecting some javascript code, but I haven’t been able to detect exactly which one.
I am going to post the code for both the “hover”-code and the “slide-up” code
This is for the Slide-up function
refresh page if you can't see the codepen above
-
How to make a resposive bottom-up slider, that also works as a nav-barposted in Javascript + jQuery
0
Right now I am working on creating bottom-up slider, very much like this one https://tatianabilbao.com (actually precisely like this one), that upon loading the page has static height and display project description, when a project is hovered, but however without changing.
But when a project is clicked, I wish for the nav-bar (currently a div), to slide up, to take up 75% of the screens height, then finally when the user click outside of the open slider, it once again shrinks to "normal".
Finally I also wish to make the slider/nav-bar responsive, so that it's appropriate for smartphones etc.
Right now, my slider is simply a div, with columns, and where information is displayed with a toggle-effect. When the word "About" is hovered, the div expands, but without transition-time or animation-effect, which I have tried to tweek. First I thought to create a new toggle effect upon clicking a project, so that the div would expand/slide upwards. But thinking of all of things I'd like it to do, that seems like a short-sighted solution.
I have tried finding the code for this kind of slider, but I find it really hard. So maybe someone knew of something, or have done it before
refresh page if you can't see the codepen above
-
Make slider (.toggleClass) visible in bottom of page, and make different content appear on Mouseoverposted in Javascript + jQuery
I am working on a page, where I have a slider in the bottom of the page. Now the slider is activated when one is "About" is clicked, and it slides from the bottom of the page and upwards. I wish to create an effect like on this website https://tatianabilbao.com/, where the slider is always slightly visible in the bottom, and where the content of the slider changes, when different elements of the page is hovered. I have tried to imitate this, but unfortunately I have not been alle to find a way around this.
Can anyone provide any insights?
Kind regards
<!DOCTYPE html> <html> <head> <title>Sofia Bordoni</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="main"> <div id="contact"> Sofia Bordoni sofiabordoni@gmail.com 0045 9164 6938 <a class="trigger"> About </a> </div> </div> <div id="container_1"> <div class="item item-1"> <img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="150px"> </div> <div class="item item-2"> <img class="Image" src="Images/Merry Christmas NC.jpg" width="150px"> </div> <div class="item item-3"> <img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="150px"> </div> <div class="item item-4"> <img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA.jpg" width="150px"> </div> <div class="item item-5"> <img class="Image" src="Images/2019_Normann_Copenhagen_Tap_Stool_Caramel_Walnut_Ren_Tea_Towel_Double_Grid_Dark_Blue_Cool_Grey_01.jpg" width="150px"> </div> <div class="item item-6"> <img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="150px"> </div> <div class="item item-7"> <img class="Image" src="Images/grido_leggero-kopi.jpg" width="150px"> </div> <div class="item item-8"> <img class="Image" src="Images/Happy New Year NC.png" width="150px"> </div> <div class="item item-9"> <img class="Image" src="Images/HAY.png" width="150px"> </div> <div class="item item-10"> <img class="Image" src="Images/Holiday_Greeting_Main.png" width="150px"> </div> <div class="item item-11"> <img class="Image" src="Images/mani-sito-kopi.jpg" width="150px"> </div> </div> <div class="slider close" style="max-height: 100vh;"> <div id="container_curriculum"> <div class="item item-12"> <div class="item item-11"> <img class="Image" src="Images/Skærmbillede 2020-04-20 kl. 16.04.31.png" width="300px"> </div> <p> I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm. </p> </div> <div class="item item-14"> <p> <b> Education </b> </p> <p> 2013 <br> Scientific High School N. Tron Technology Plan </p> <p> 2016 <br> University Architecture of Venice IUAV Industrial Design and Multimedia </p> <p> <b> Interests </b> </p> <p> Graphic Design / Typography/ Product Design / Textile / Accessories/ Printing / Letterpress / Binding Architecture / Interior Design Cultural Exhibitions / Art Photography </p> <p> <b> Collaborations </b> </p> <p> BetaFactory / UnderBroen CPH <br> Art direction / Graphic Designer <br> September 2017 – Present </p> <p> Drogheria Creativa <br> Art direction / Graphic Designer <br> January 2018 – January 2019 Client Baglioni Hotels </p> </div> <div class="item item-16"> <p> <b> Experience </b> </p> <p> Normann Copenhagen <br> Graphic Product Designer<br> May 2018 - Present <br> </p> <p> Copenhagen Architecture Festival <br> Graphic Product Designer <br> January 2018 - May 2018<br> </p> <p> Clara von Zweigberg Studio <br> Graphic Designer Intern <br> Jan 2017 - July 2017 <br> Clients: HAY, Varier Furniture, Areaware <br> </p> <p> Studio FM Milano <br> Graphic Designer Intern <br> Feb 2016 - July 2016 <br> Clients: Poltrona Frau, Cassina, Tecno <br> </p> <p> Studio Anagramma <br> Graphic Designer Intern<br> June 2015 - Aug 2015<br> </p> <p> Università di Architettura Venezia IUAV<br> Laboratory assistant <br> Feb 2015 - May 2015<br> </p> </div> <div class="item item-15"> <p> <b> Competences </b> </p> <p> Languages <br> Italian – native <br> English – fluent <br> Danish – 4th Module <br> </p> <p> Adobe Suite <br> Indesign – expert <br> Illustrator – expert <br> Photoshop – expert <br> Lightroom – expert <br> </p> <p> Operating systems <br> Macintosh – expert <br> Windows – basic <br> </p> <p> Webprogramming <br> HTML – basico <br> CSS – basico <br> </p> <p> 2D/3D modelling <br> AutoCAD – basic <br> Rhinoceros – basic <br> </p> </div> </div> </div> </div> <script src="slider.js"></script> </body> </html>/* Body */ * { margin: o; padding: o; } html, body { margin:0; padding:0; } /* Header */ #main{ overflow: auto; margin-top: 25px; margin-bottom: 50px; } #contact{ text-align: center; margin: auto; font-size: 15px; font-family: 'Times New Roman'; color: red; } #About{ margin: 50px; } /* Works */ #container_1{ display: grid; grid-template-columns: 25% 25% 25% 25%; justify-items: center; grid-gap: 1em; } /* Footer */ #footer { position: relative; height: 100px; margin-top: -100px; clear: both; } /* Slider */ .slider { position: relative; margin-bottom: -100px; clear: both; position: fixed; min-height: 100%; width: 100%; top: 0; overflow: hidden; background-color: #FFF; color: #000; transition: all 1s; } .slider.close { top: 100%; min-height: 100%; } /* slider_content */ #container_curriculum{ font-family: 'Times New Roman'; display: grid; font-size: 15px; grid-template-columns: 25% 25% 25% 25%; justify-items: center; grid-gap: 1em; padding:25px; height: 100%; }$('.trigger, .slider').click(function() { $('.slider').toggleClass('close'); }); -
Problems with loading modal in Safari, Firefox and on Smartphoneposted in Javascript + jQuery
I have a wierd situation, where my webpage used to lad just fine, before I put it online with hosting and domain. Now the Modal, that's supposed to popup on click, takes so long to load, that it undermines the whole purpose of the page. And so it's a real problem. At this point it seems to lad just fine in chrome though.
I have tried several things, for example thoroughly checking my FTP-client, deleting, editing code, re-uploading but at this point, nothing has worked. Can anyone offer some infight as to where I go wrong?
window.onload = function() { const span = document.querySelectorAll(".PopUp"); span.forEach(LIelm => { LIelm.addEventListener('click', showHideModal) }) }; function showHideModal(e) { const projectNode = e.target.parentNode.parentNode; if (!projectNode.matches('.Project, .modal-content')) return; e.preventDefault(); if (projectNode.matches('.Project')) { document.getElementById(projectNode.dataset.modal).style.display = "block"; } else { projectNode.parentNode.style.display = ""; } }<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script src="ModalPopUp.js"></script> </head> <body> <div class="content"> <ul style="list-style: none;"> <li class="Project" data-modal="myModal_1"> <span id="myBtn_1"> Lirma Type </span> <span id="year"> 2019 </span> <div class="Describtion"> <p>Typedesign</p> <br> <span class="PopUp">Images</id> </div> <div id="myModal_1" class="modal"> <div class="modal-content"> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Lirma/type.jpg" alt="img" width="100%"> </div> </div> </div> </div> </div> </li> </ul> </div> </body> <script src="ModalHide.js"></script> <script src="pExpand.js"></script> </html> -
RE: Toggle both <div> and <p> onclick + hide <div>posted in Javascript + jQuery
Hey Avan
Thank you so much I managed to make it nok in this way. Simplifying was defintely the way.
-
RE: Toggle both <div> and <p> onclick + hide <div>posted in Javascript + jQuery
Here's almost the entire html
below, there's the different javascript codes including the javascript that i pastel in above. It's a lot though - but I hope it's okay.<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div class="content"> <div id="contact"> <a href="">About</a> Contact: c.thornval@live.dk 0045 7158 0488 <br> <br> </div> <ul style="list-style: none;"> <li class="Project" data-modal="myModal_1"> <span id="myBtn_1"> Lirma Type </span> <span id="year"> 2019 </span> <div class="Describtion"> <p> Typedesign <span class="PopUp">Images</span> </p> </div> <div id="myModal_1" class="modal" > <div class="modal-content"> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Lirma/type.jpg" alt="img" width="100%"> </div> </div> <p>Type design</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_2"> <span id="myBtn_2"> Wer Baut Der Stadt? </span> <span id="year"> 2018 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. </p> </div> <div id="myModal_2" class="modal"> <div class="modal-content"> <div id="demo1" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/WER BAUT 2018/HVIDAktiv 20.png" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/WER BAUT 2018/poster_mockup_MD1 kopi 2-kopi.jpg" alt="img" width="100%"> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo1" data-slide="prev" "> <span class="carousel-control-prev-icon" style="display:none;"></span> </a> <a class="carousel-control-next" href="#demo1" data-slide="next"> <span class="carousel-control-next-icon" style="display:none;"></span> </a> </div> <p>Type and identity design</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_3"> <span id="myBtn_3"> CAFX </span> <span id="year"> 2018 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Identity Design for Copenhagen Architecture Festival 2018 </p> </div> <div id="myModal_3" class="modal"> <div class="modal-content"> <div id="demo2" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/CAFX/poster_mockup_MD31-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/poster_mockup_MD21-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/poster_mockup_MD1-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_56184-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_56183-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_5618_5-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_5618_2-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_0546 (1)_Cafx_9-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_0546 (1)_Cafx_8-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_0546 (1)_Cafx2-kopi.png" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_0546 (1)_Cafx_7-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/CAFX/IMG_0546 (1)_Cafx_3-kopi.png" alt="img" width="100%"> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo2" data-slide="prev"> <span class="carousel-control-prev-icon" style="display:none;"></span> </a> <a class="carousel-control-next" href="#demo2" data-slide="next"> <span class="carousel-control-next-icon" style="display:none;"></span> </a> </div> <p>Identity design</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_4"> <span id="myBtn_4"> Contagious Tales </span> <span id="year"> 2017 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Graduation project, editorial design. </p> </div> <div id="myModal_4" class="modal"> <div class="modal-content"> <div id="demo4" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Contagious Tales/IMG_5613_7-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Contagious Tales/IMG_5613_4-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Contagious Tales/IMG_5613_5-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Contagious Tales/IMG_5613_3-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Contagious Tales/IMG_5613_2-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Contagious Tales/IMG_5613-kopi.jpg" alt="img" width="100%"> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo4" data-slide="prev"> <span class="carousel-control-prev-icon" style="display:none;"></span> </a> <a class="carousel-control-next" href="#demo4" data-slide="next"> <span class="carousel-control-next-icon" style="display:none;"></span> </a> </div> <p>Editorial design</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_5"> <span id="myBtn_5"> Foam X Hydra </span> <span id="year"> 2017 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Design of exhibition cahier in connection to the exhibition FOAM X HYDRA. </p> </div> <div id="myModal_5" class="modal"> <div class="modal-content"> <div id="demo5" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/FOAM/Hydra1-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/FOAM/Hydra3-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/FOAM/Hydra2-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/FOAM/Hydra4-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/FOAM/Hydra5-kopi.jpg" alt="img" width="100%"> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo5" data-slide="prev"> <span class="carousel-control-prev-icon" style="display:none;"></span> </a> <a class="carousel-control-next" href="#demo5" data-slide="next"> <span class="carousel-control-next-icon" style="display:none;"></span> </a> </div> <p>Editorial design</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_6"> <span id="myBtn_6"> Money Publication </span> <span id="year"> 2017 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Money Can No Longer Buy </p> </div> <div id="myModal_6" class="modal"> <div class="modal-content"> <div id="demo6" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Money Publication/_97A0746-kopi 2.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Money Publication/_97A0751-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Money Publication/_97A0752-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Money Publication/_97A0767-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Money Publication/_97A0774-kopi.jpg" alt="img" width="100%"> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo6" data-slide="prev"> <span class="carousel-control-prev-icon" style="display:none;"></span> </a> <a class="carousel-control-next" href="#demo6" data-slide="next"> <span class="carousel-control-next-icon" style="display:none;"></span> </a> </div> <p>Editorial design</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_7"> <span id="myBtn_7"> What Is The News Article? </span> <span id="year"> 2017 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Pamphlet with infographics. </p> </div> <div id="myModal_7" class="modal"> <div class="modal-content"> <div id="demo7" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Newsarticle/_97A0846-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Newsarticle/_97A0855-kopi.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Newsarticle/_97A0883-kopi.jpg" alt="img" width="100%"> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo7" data-slide="prev"> <span class="carousel-control-prev-icon" style="display:none;"></span> </a> <a class="carousel-control-next" href="#demo7" data-slide="next"> <span class="carousel-control-next-icon" style="display:none;"></span> </a> </div> <p>Editorial Design</p> </div> </div> </div> </li> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo11" data-slide="prev"> <span class="carousel-control-prev-icon" style="display:none;"></span> </a> <a class="carousel-control-next" href="#demo11" data-slide="next"> <span class="carousel-control-next-icon" style="display:none;"></span> </a> </div> <p>Litography Print</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_12"> <span id="myBtn_12"> Wordshuffler </span> <span id="year"> 2017 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Posters </p> </div> <div id="myModal_12" class="modal"> <div class="modal-content"> <div id="demo12" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Wordshuffler/_MG_9940 kopi-kopi.jpg" alt="img" width="100%"> </div> </div> <p>Posterseries</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_13"> <span id="myBtn_13"> Mumbliest </span> <span id="year"> 2017 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Poster. </p> </div> <div id="myModal_13" class="modal"> <div class="modal-content"> <div id="demo13" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Mumbliest/MUMBLIE-kopi.png" alt="img" width="100%"> </div> </div> <p>Poster</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_16"> <span id="myBtn_16"> M/O </span> <span id="year"> 2018 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Book-design </p> </div> <div id="myModal_16" class="modal"> <div class="modal-content"> <div id="demo16" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/MO/_MG_0153.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/MO/_MG_0156.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/MO/_MG_0156.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/MO/_MG_0157.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/MO/_MG_0159.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/MO/_MG_0163.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/MO/_MG_0165.jpg" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/MO/_MG_0167.jpg" alt="img" width="100%"> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo16" data-slide="prev"> <span class="carousel-control-prev-icon" style="display:none;"></span> </a> <a class="carousel-control-next" href="#demo16" data-slide="next"> <span class="carousel-control-next-icon" style="display:none;"></span> </a> </div> <p>Editorial design</p> </div> </div> </div> </li> <li class="Project" data-modal="myModal_17"> <span id="myBtn_17"> Panchen Lama </span> <span id="year"> 2017 </span> <div class="Describtion"> <span class="PopUp">Images</id> <p style="display:none;"> Pamphlet Risoprint. </p> </div> <div id="myModal_17" class="modal"> <div class="modal-content"> <div id="demo17" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Panchen/IMG_8867 2.png" alt="img" width="100%"> </div> <div class="carousel-item"> <img src="Images/Panchen/Laatste.png" alt="img" width="100%"> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo17" data-slide="prev"> <span class="carousel-control-prev-icon"style="display:none;"> </span> </a> <a class="carousel-control-next" href="#demo17" data-slide="next"> <span class="carousel-control-next-icon"style="display:none;"> </span> </a> </div> <p>Editorial design</p> </div> </div> </div> </li> </ul> </div> </body> <script src="pExpand.js"></script> <script src="ModalHide.js"></script> <script src="ModalPopUp.js"></script> </html>var myModal_1 = document.getElementById("myModal_1") var myModal_2 = document.getElementById("myModal_2") var myModal_3 = document.getElementById("myModal_3") var myModal_4 = document.getElementById("myModal_4") var myModal_5 = document.getElementById("myModal_5") var myModal_6 = document.getElementById("myModal_6") var myModal_7 = document.getElementById("myModal_7") var myModal_8 = document.getElementById("myModal_8") var myModal_9 = document.getElementById("myModal_9") var myModal_10 = document.getElementById("myModal_10") var myModal_11 = document.getElementById("myModal_11") var myModal_12 = document.getElementById("myModal_12") var myModal_13 = document.getElementById("myModal_13") var myModal_14 = document.getElementById("myModal_16") var myModal_15 = document.getElementById("myModal_17") window.onclick = function(event) { if (event.target == myModal_1) { myModal_1.style.display = "none"; } if (event.target == myModal_2) { myModal_2.style.display = "none"; } if (event.target == myModal_3) { myModal_3.style.display = "none"; } if (event.target == myModal_4) { myModal_4.style.display = "none"; } if (event.target == myModal_5) { myModal_5.style.display = "none"; } if (event.target == myModal_6) { myModal_6.style.display = "none"; } if (event.target == myModal_7) { myModal_7.style.display = "none"; } if (event.target == myModal_8) { myModal_8.style.display = "none"; } if (event.target == myModal_9) { myModal_9.style.display = "none"; } if (event.target == myModal_10) { myModal_10.style.display = "none"; } if (event.target == myModal_11) { myModal_11.style.display = "none"; } if (event.target == myModal_12) { myModal_12.style.display = "none"; } if (event.target == myModal_13) { myModal_13.style.display = "none"; } if (event.target == myModal_16) { myModal_16.style.display = "none"; } if (event.target == myModal_17) { myModal_17.style.display = "none"; } } window.onload = function() { const span = document.querySelectorAll(".PopUp"); span.forEach(LIelm => { LIelm.addEventListener('click', showHideModal) }) }; function showHideModal(e) { const projectNode = e.target.parentNode.parentNode; if (!projectNode.matches('.Project, .modal-content')) return e.preventDefault(); if (projectNode.matches('.Project')) { document.getElementById(projectNode.dataset.modal).style.display = "block"; } else { projectNode.parentNode.style.display = ""; } } $(document).ready(function(){ $(".li_element").each(function(index) { $(this).find('p,span.PopUp').first().hide(); }); $("li").click(function(){ $(this).find('p,span.PopUp').first().toggle(); $(this).find('p,span.PopUp').first().toggle(); $(this).toggleClass("expand"); }); }); -
Toggle both <div> and <p> onclick + hide <div>posted in Javascript + jQuery
I have a problem, that I presumed, should be fairly easy to solve, but regardless I still haven't mangaged.
At this point I have a portfolio page, where each project is displayed alongside a an "Image" tag, when this tag is clicked, a bootstap modal pops up and shows images. I the code there also a paragraph-tag, but at the moment that is not displaying.
What I want is that the image tag, below each project is hidden, along with a short describtion, upon opening the page, and so when the project title is clicked, both describtion and the image tag is made visible. and when the "image" is clicked, it still has the function of opening the modal.
Here's my code
$(document).ready(function(){ $(".li_element").each(function(index) { $(this).find('p,span.PopUp').first().hide(); }); $("li").click(function(){ $(this).find('p,span.PopUp').first().toggle(); $(this).find('p,span.PopUp').first().toggle(); $(this).toggleClass("expand"); }); });<li class="Project" data-modal="myModal_1"> <span id="myBtn_1"> Lirma Type </span> <span id="year"> 2019 </span> <div class="Describtion"> <p style="display:none;"> Typedesign <span class="PopUp">Images</span> </p> </div> <div id="myModal_1" class="modal" > <div class="modal-content"> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="Images/Lirma/type.jpg" alt="img" width="100%"> </div> </div> <p>Type design</p> </div> </div> </div> </li> -
RE: Images does not show in Lightbox module on clickposted in Javascript + jQuery
This worked wonderfully! I ended up using both codes!
-
Images does not show in Lightbox module on clickposted in Javascript + jQuery
I have a mine consisting of 12 projects. Onclick a lightbox module is supposed to pop up and show one or multiple images
No matter what I do, this lightbox module is not showing my "src" images. On click the module pops up, with an image "placeholder", but not the actual image and this is the case for all of the projects.
I've been double-checking and all of the images are linked correctly. I've been doing quite a bit of fidgetting around, and at one point an image would show, upon clicking for example project 1 or 2 - only it would not be the correct one. Instead, when I was investigating the page in chrome I noticed that project 1 actually displayed the image designated project 3. but at this point nothing is showing. I am only writing it as it might be an indicator of the source problem.
I have decided to pretty much paste in the entire code
<script> var modal = document.getElementById("myModal_1"); var btn = document.getElementById("myBtn_1"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_2"); var btn = document.getElementById("myBtn_2"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_3"); var btn = document.getElementById("myBtn_3"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_4"); var btn = document.getElementById("myBtn_4"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_5"); var btn = document.getElementById("myBtn_5"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_6"); var btn = document.getElementById("myBtn_6"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_7"); var btn = document.getElementById("myBtn_7"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_8"); var btn = document.getElementById("myBtn_8"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_9"); var btn = document.getElementById("myBtn_9"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_10"); var btn = document.getElementById("myBtn_10"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_11"); var btn = document.getElementById("myBtn_11"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <script> var modal = document.getElementById("myModal_12"); var btn = document.getElementById("myBtn_12"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script>.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }<ul style="list-style: none;"> <li class="Project"> <span id="myBtn_1"> Wer Baut Der Stadt <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. </p> </div> <div id="myModal_1" class="modal"> <div class="modal-content"> <img src="Images/WER BAUT 2018/Poster 7-11.pdf"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_2"> Hans Oscar Carlsson <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Webpage for curator and critic Hans Oscar Carlsson </p> </div> <div id="myModal_2" class="modal"> <div class="modal-content"> <img src="Images/Newsarticle/_97A0846.jpg" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_3"> Atelier Toer <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Webpage for Atelier Toer </p> </div> <div id="myModal_3" class="modal"> <div class="modal-content"> <img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_4"> Wer Baut Der Stadt? <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin in 2018. </p> </div> <div id="myModal_4" class="modal"> <div class="modal-content"> <img class=WerBaut src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_5"> CAFX 2018 <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Identity design for Copenhagen Architecture Festival 2018. </p> </div> <div id="myModal_5" class="modal"> <div class="modal-content"> <img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px"> <span class="close">× </span> <p>Some text in the Modal..</p> </div> </div> </li> <li class="Project"> <span id="myBtn_6"> Mette Riis <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Webpage for artist and researcher Mette Riis. </p> </div> <div id="myModal_6" class="modal"> <div class="modal-content"> <img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_7"> Contagious Tales <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Graduation project, editorial design </p> </div> <div id="myModal_7" class="modal"> <div class="modal-content"> <img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_8"> Foam X Hydra <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Design of exhibition cahier in connection to the exhibition FOAM X HYDRA. </p> </div> <div id="myModal_8" class="modal"> <div class="modal-content"> <img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_9"> What Is The News Article? <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Pamphlet with infographics. </p> </div> <div id="myModal_9" class="modal"> <div class="modal-content"> <img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_10"> Money Can No Longer Buy <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Book. </p> </div> <div id="myModal_10" class="modal"> <div class="modal-content"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_11"> Questionnarie on Individuality <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Litography on napkins. </p> </div> <div id="myModal_11" class="modal"> <div class="modal-content"> <img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> <li class="Project"> <span id="myBtn_12"> Wordshuffler Posters <span id="year"> 2019 </span> </span> <div class="Describtion"> <p style="display:none;"> Posters. </p> </div> <div id="myModal_12" class="modal"> <div class="modal-content"> <img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px"> <span class="close">× </span> <p>Some text in the Modal.. </p> </div> </div> </li> </ul>