How can i make on my portfolio images clickable to make appear information about project and re-clickable to hide this information on second click?
Will like to use simple js not jquery.
See website, but not it's working by holding the click and not toggle:
enter link description here
I went through your site a bit and this might be a possible solution to your problem.
Add the following script in your JS:
var imageElems = document.getElementsByClassName('image-box');
for (var i=0; i<imageElems.length; i++) {
imageElems[i].addEventListener('click', function() {
this.querySelector('.overlay').classList.toggle('show');
});
}
And add this in CSS:
.overlay.show {
opacity: 1;
}
So basically what I have done here is I have added a click event on all your images with className: image-box which toggeles a class called show on click.
P.S. you should frame your question in a better way, providing code examples to your problem so that people in here can understand your problem better. The only reason why I tried helping you is because I see you are a graphic designer trying to do a bit of code, and it was encouraging enough! :)
You can also accomplish desired effect without JS, pure CSS.
.element {
position: relative;
height: 300px;
width: 300px;
background: red;
}
.pseudo-checkbox {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
cursor: pointer;
}
.pseudo-checkbox:checked + .description {
display: initial;
}
.description {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="element">
<input type="checkbox" class="pseudo-checkbox" />
<div class="description">
Description
</div>
</div>
Related
How to stop/start CSS animation
Background-Info
I'm trying to make a loader for my website where when someone makes a search to my API it will popup the loader then after the table gets built it will stop the loading animation. I'm not good with javascript and I'm just trying to create this side project so I don't completely know how this stuff works. I did see another stack overflow post about this topic but it didn't apply to me because the way they called the CSS animation was different
I followed a tutorial for this loader here he shows how to stop it but he doesn't show how to start it, but it doesn't stop for me
What I tried
Like I was saying above I'm not good with javascript so I wasn't sure what i should try but like in the video I tried to make the CSS display = None and also i tried to remove the HTML entirely ( you can see it below in the code)
End goal
My end goal is to have a javascript function like start_loading() and stop_loading() I can call to stop and start the loading at any time
Code
function start_load() {
let spinnerWrapper = document.querySelector('.spinner-wrapper')
console.log(document.querySelector('.spinner-wrapper'))
window.addEventListener('load', function() {
spinnerWrapper.style.display = 'none';
// spinnerWrapper.parentElement.removeChild(spinnerWrapper)
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
.spinner-wrapper {
width: 100%;
height: 100%;
/* background-color: #151515; */
position: absolute;
top: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
position: relative;
width: 8rem;
height: 8rem;
border-radius: 50%;
}
.spinner::before,
.spinner:after {
content: "";
position: absolute;
border-radius: 50%;
}
.spinner:before {
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, #212529 0%, white 100%);
animation: spin .5s infinite linear;
}
.spinner:after {
width: 90%;
height: 90%;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#keyframes spin {
to {
transform: rotate(360deg);
}
}
/*Simulate page content*/
.main-content {
width: 100%;
height: 100vh;
background: url("https://source.unsplash.com/random/4000x4000") center no-repeat;
background-size: cover;
}
<body onload="verifySession(), start_load()">
<div class="spinner-wrapper">
<div class="spinner">
</div>
</div>
const start_load = function () {
document.querySelector('.spinner-wrapper').style.display = "block"
}
const end_load= function () {
document.querySelector('.spinner-wrapper').style.display = "none"
}
You can change .spinner-wrapper by any class you want. Those function will set fisrt html tag have .spinner-wrapper class to display : block or display : none
Hope this help for you
Your question is not very clear on when you want to start and stop the loader but from my understanding you have an api and you want the loader to show when someone calls your api so in this particular case you want to work with DOM event listeners (at least when you start your search by a click of a button or when you press enter on your keyboard) you can read more on event listeners here:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener and here:
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
As for stopping the event you will want to call the stop function once data are returned from your API
I've created a little codesandbox for you with two buttons to start and stop the loader as a simple example of how to use event listeners which you can find here: https://codesandbox.io/s/happy-rain-e9w3mz
I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq
As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code snippet to be the following:
<style>
body {
position: fixed;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.mask {
position: absolute;
z-index: 2;
background: white;
height: 100vh;
width: 100vw;
mix-blend-mode: screen;
/* display: none; */
}
svg {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
I copied the HTML code into a code block embed on my page, the CSS into the inside head tag on page settings & the JS into the before body tag on page settings. When I publish my site, the 'CREATIVE' text displays, but without the interactive fluid element. I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered (changing the body background to white, as opposed to transparent; adding the code as a code block rather than the Inside tag, but nothing has as yet made it work. I’d really appreciate any help.
My Webflow site read-only can be found here: https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview
.container {
background-color: red;
}
.container img {
mix-blend-mode: darken;
}
this is how it works the container should have background-color to mix the background color in child image
Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Reference : https://www.w3schools.com/cssref/pr_mix-blend-mode.asp
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.
I'm trying to show an image to let the user known that something is happening while some pages are being loaded.
I tried several examples that I found in google.
My goal is every time that I click in some link, the image should appear to let me known that the page is loading. But I'm not able to do that.
So far what I accomplish is that the image appear when I load that page and don't disappear, but I would like to make this available when I click on a link.
What I've done:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>
<img id="loading" alt="" src="/ajax-loader.gif"/>
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Any help is appreciate :)
Thanks
Maybe this will be of some help:
http://docs.jquery.com/UI/Progressbar
Here's a simple one: http://www.webappers.com/progressBar/
That's the first result in google when I type in "js progress bar" -- there's hundreds of others.