cthornval

cthornval

Hey Avan! thanl you so much it worked!

cthornval

Hey Avan

Does this one work for you?

https://codepen.io/cthornval/pen/BaogXQx

cthornval

I struggle with connecting to javascript (which is at least what I assume Im supposed to do)

I have a slidetoggle in a navigation-bar that slides up when .item item 1 is clicked and slides down, whenever somewhere outside on the page is clicked.

at the same time theres a div that toggles(hides) whenever item item-1 is clicked but doesn't toggle back when the slidetoggle is clicked outside, which is what I would like.

Right now I have a script for the slidetoggle and I have another script for toggling the div in the nav-bar () and what I would like is that nav-bar div hides on slidetoggle and shows on toggle slide-down.

Finally the nav-bar div also toggles in a manner thats almost like a slidetoggle -- for reasons I do not understand - where I actually wish it would just disapper at once. How is it best to combine all of these commands in one? (slidetoggle stays intact + navbar div toggles + avoid slidetoggle effect on div nav-bar). Here's a codepen jsfiddlehttps://codepen.io/cthornval/pen/eYpwJmO

https://codepen.io/cthornval/pen/eYpwJmO

cthornval

Currently I, in my page, have an external script, that causes the text within the div "contact" to change color depending on which "item" element is hovered. Now I wish that it is not only the "contact div, that changes color but also the menu div and the curriculum div , as well as any other div, that I might feel like adding later on. I have tried to change my current javascript in order to do so, by adding another let variable and including that in the script. However Nothing has worked up untill this point. I am currently studying on my javascript, to be able to make these changes. But maybe someone could tell how this is done in the cleanest way possible?

Here's a codepen https://codepen.io/cthornval/pen/PoPrPVOhttps://codepen.io/cthornval/pen/PoPrPVO

cthornval

And this is for the onhover-function
https://codepen.io/cthornval/pen/LYpdYPR

cthornval

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

https://codepen.io/cthornval/pen/zYvWOJg

cthornval

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

https://codepen.io/cthornval/pen/dyYJJKy

cthornval

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
		               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		               sofiabordoni@gmail.com  
		               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		               0045 &nbsp;9164&nbsp;6938
		               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		               <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');
});

cthornval

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>

cthornval

Hey Avan

Thank you so much I managed to make it nok in this way. Simplifying was defintely the way.

cthornval

@cthornval

Latest posts made by cthornval