I have implemented this animated tabs in my app, following this setup on codepen.
Now, instead of jquery I wanted use vanilla Javascript, this is what I wrote:
<div class="slides">
<div class="slides__slide">
<span class="slide-title">
yoga coaching
<i class="ion-chevron-down"></i>
</span>
<div class="experience__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi rem ab voluptate provident voluptatum
veniam cupiditate beatae expedita veritatis aliquid officia doloribus dolore maiores doloremque mollitia! A ducimus autem ut!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus obcaecati velit autem tenetur doloribus perferendis esse odit
animi quasi deserunt recusandae perspiciatis a sapiente aliquam qui libero dolor officiis assumenda.
</div>
</div>
this is the javascript:
const slideTitles = Array.from(document.querySelectorAll('.slide-title'));
let activeClasses = []
slideTitles.forEach(function(el){
el.addEventListener('click',function(){
if(activeClasses.length>0){
activeClasses[0].classList.remove('active')
activeClasses[0].firstElementChild.getElementsByTagName('i')[0].classList.replace('ion-chevron-up','ion-chevron-down')
//activeClasses[0].firstElementChild.lastElementChild.classList.replace('ion-chevron-up','ion-chevron-down')
activeClasses = []
}
this.parentElement.classList.add('active')
this.lastElementChild.classList.replace('ion-chevron-down','ion-chevron-up')
activeClasses.push(this.parentElement)
})
})
This implementation works well in chrome, firefox opera (I cannot test it on Safari at the moment) but in Edge I have some problem: first of all, when a slide is clicked, the width is incremented first, and then the position (with no transition effect apparently), this happens also in the codepen, but in my implementetion also the remove classList function seems not works: because if i click to another card, the one that is previously selected remains in an active position, and does not go up.
The classList implementation seems work in Edge, and also the code I wrote works in another browser..
Related
I am trying to create an App which has 2 html files, index.html and bookmarks.html. Index.html has some question cards which contain some text and a bookmarks button.
My goal is that when I press the bookmark button in the question card from index.html, that card should be replicated in bookmarks.html.
I was thinking to use the createElement approach, but I have no idea how to do this when the elements that should be created are on a different page...
For more clarity, here is the html code for the question cards in index.html:
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit
libero saepe repellat. Tempore delectus deleniti libero aliquid rem
velit illum expedita nostrum quam optio maiores officiis consequatur
ea, sint enim cum repudiandae inventore ab nemo? Eum dicta illum odio
harum, commodi similique. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Inventore maxime ipsa accusamus, soluta provident
tenetur aliquid ad nisi voluptate iste quaerat ab ullam voluptatem
illo eos optio ut dolor nostrum.
</p>
<button type="button" class="qc-bookmark-icon">
<img src="/assets/bookmark-icon.jpeg" alt="bookmark icon"/>
</button>
</section>
And this is what it looks like, with the bookmark button on the top-right corner.
Do you have any idea if this would be the right approach and if yes, how could I implement this?
If not, I am open to any suggestions, how I could make this work...
Thank you.
I was trying to do my first Portfolio website. I tried to run following html code in a browser, but unfortunately my code doesn't run as I expect. The main problem is that the lat div (github) from services section doesn't ,,fit into the window. I mean it doesn't stop when I scroll to the very bottom of the page. I think it it should be visible when I scroll to the very end, but I am not sure why it isn't. Could you please check and advise?
Emilia Front End DeveloperEmilia BXxXHomeAboutSkillsMy ProjectsContact meResumeHi, I'm EmiliaYour Web DeveloperLorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur doloremque eius sit ratione eveniet laborum inventore recusandae consequuntur ipsum, nostrumabout meAbout meLorem ipsum dolor sitLorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere blanditiis eum, quam possimus sint maiores ab consequuntur placeat deserunt harum dolor enim nostrum repellat dolorum atque unde nisi labore. My SkillsMy Skills HTML My projectsCSS My projectsAngular My projectsReact My projectsGIT My projectsAOS.init({duration: 800,offset: 150,});main JS file:let navbar = document.querySelector('.header .navbar');document.querySelector('#menu-btn').onclick = () =>{navbar.classList.toggle('active');}window.onscroll = () => {navbar.classList.remove('active');}
Facing issue in animation while reloading its working but normally while scrolling its not working. I want to add this section twice in a page every time when I scroll I need the animation to work
<div class="content"></div>
<div class="about hidden">
<h2>header</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo dolor, similique ea molestiae earum quas
sint accusantium itaque magnam laborum laboriosam, expedita qui nihil dicta soluta exercitationem quos
iste. Quam.</p>
</div>
<div class="content"></div>
<script>
(function(){
var aboutEl= $('div.about'),
aboutEloffset=aboutEl.offset().top/2,
documentEl= $(document);
documentEl.on('scroll',function(){
if(documentEl.scrollTop() >aboutEloffset && aboutEl.hasClass('hidden'))aboutEl.removeClass('hidden');
});
})();
hello i try to reach like on this page http://mynameismatthieu.com/WOW/index.html
if we look at that doge image (right from such easy and right from very JS), the doge image drop to bottom (from way top)
i try to reach that result with this:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus velit obcaecati et, tenetur excepturi voluptatum doloremque reprehenderit esse nisi quae necessitatibus facilis provident voluptatem quos, dolorem dicta, modi eos iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus velit obcaecati et, tenetur excepturi voluptatum doloremque reprehenderit esse nisi quae necessitatibus facilis provident voluptatem quos, dolorem dicta, modi eos iusto.</p>
<div class="about-tile">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur commodi saepe atque vitae harum, alias impedit sunt. Praesentium esse voluptatem possimus, autem, tenetur maiores modi ab veritatis nam architecto excepturi!</h2>
<hr class="divider wow fadeInDown" data-wow-duration="2s" data-wow-delay="0.5s" >
</div>
or you can see on here:
https://jsfiddle.net/fvjqj7f0/2/
as you can see the result from what i code, the hr only go down a little bit. i need to the hr start go down from h1 how to do like that
Your issue is actually due to the fadeInDown animation :
fadeInDown make it appear a little bit higher than its final place.
In the demo bounceIndown is used to drop from the top of the page.
On animate css website you can have all the availables animations. You can use fadeInDownBig to archieve a drop from the top of the page, but i believe that you can't use wow.js to drop from a specific position. You should use keyframes animations to do so. (with some custom javascript)
Here is the working example
I've got a bit of an issue with skrollr & z-index.
http://i.imgur.com/whCViHV.png
I'm trying to have the picture at the top to go underneath the blog post.
I can't for the life of me work out why, no matter where/how I apply the z-index (I assume that's what I should be doing) the image ALWAYS sits above the post.
I've tried everything I can think of, putting it inside divs, inside the css...
You can make it go underneath the blog post by putting the post in the skrollr div, but then I run into lots of issues with line height.
I've stripped all my failed z-index attempts out, so it should be 'conflict free' of my old, stupid code.
http://jsfiddle.net/8fb4C/ (not 100% sure that this is correctly done)
https://github.com/pxlprfct/Blog-SO-Question
<div id="skrollr-body">
<div id="test"
data-0="top:0px;"
data-1000="top: 400px;" >
<img src="apple.jpg" alt="">
</div>
</div>
<article>
<h1>
Hi there helpful person!
</h1>
<p>
Hi there, I've been trying, and failing, to do what I thought was a reasonably simple thing.
</p>
<p>
I just want the picture to stay where it is, (don't worry about the horrible aspect ratio and how it looks crushed, I'm fixing that after) and the 'blog', well the article to overlap it.
</p>
<p>
I've been pratting around with z-index and have done pretty much everything I can think of, but the image still persists to scroll on top of the text (rather than underneath).
</P>
<p>
I have tried a few sketchy things that worked, but didn't work well. I think i'm missing something mega obvious, anyways. Thanks for being awesome :)
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt earum eum recusandae accusantium porro facere vero nulla delectus. Adipisci, omnis velit molestias nemo expedita! Ad, enim similique placeat rerum. Libero.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, fuga eius ipsa alias repudiandae itaque neque totam veniam ut minus dignissimos eveniet dicta unde quos enim possimus optio nihil omnis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, magni est officia quis vitae veritatis doloribus laudantium corporis doloremque ratione ut ullam voluptatibus numquam quos optio voluptas veniam corrupti repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, provident, maxime beatae ea distinctio aperiam dicta ipsa soluta consequatur eius explicabo cumque possimus iure temporibus laudantium eveniet et ex placeat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, quidem sint labore saepe explicabo aspernatur sunt vero quos minima nesciunt velit et debitis est accusantium eveniet dolorum sed quibusdam voluptate!
</p>
</article>
Adding position: fixed and tweaking the z-index to -1 does the trick. You also have to set the top and left to 0, but that's secondary:
#test {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
JSFiddle:
http://jsfiddle.net/8fb4C/1/