I'd need some help with pure CSS, JS and jQuery slide down list that can be animated with jQuery or with the methods themselves. 3 hidden lists would be visible showing "CSS" "JavaScript" and "jQuery". On click a list would move down with all the content, showing part of the code that works as the slide down list function. Only one list can be active or shown at a time. I have no idea how to manage to do pure CSS or JavaScript slide down menu, jQuery won't be a problem. Also I can't seem to manage to get all of the content below active list to slide down also, instead of hovering over the text and covering it. I'd be greatful for some help.
Related
I know this is a JS/ jQuery problem, and I have very decent CSS skills but sadly my JS knowledge is failing me big time. I bought a website template recently for my portfolio. It's a good one but I'm really struggling to adapt it.
What I'm trying to achieve is:
when you mouse wheel scroll (up or down) through each content block, the links below (at bottom of page) are active based on the content above. Forwards and backwards. So basically the text links at bottom would be bold depending on the active content above it.
I'd also like the text links below to link to it's relevant content above. i.e. Project 3 would open Project 3 content (with the content animation).
For a start I've tried targeting each ID for the content blocks. i.e. id="project-3" then adding href="#project-3" but this is clearly not working. I also tried data-target="#project-3". Still no dice.
I'm trying to mimic the bottom navigation of this brilliant site here: http://fakemusic.fr/ (so as you wheel scroll through each artist, the links below are highlighted + they're clickable.
I made a Codepen here:
[Codepen](https://codepen.io/oioisaveloy/pen/eYzjGLr)
Apologies in advance, I couldn't work out how to de-activate the annoying preloader.
Thanks in advance!
With Jquery it is very easy
Give A unique data-id to your each "display-table" class and give a unique id also in anchor of "menu-item"
make a css class which has a highlight css like underline
then try jquery conditional js like if your "display-table class" has class "projects-item-active" then add class to anchor id and remove from siblings
and if someone clicking on anchor then add class "projects-item-active projects-item-animate" to "display-table" and remove from siblings.
click project 1 project 2 project 3 and see
Pen Added
[1]: https://codepen.io/mamun-rashid-raja/pen/zYBLRrp
Guys I'm trying to recreate this site, just for a learning purpose,
and in the News section of the home page, there's this card with
a hover effect. Is it possible to pull out that just with css ?
I always end up with that slide out half behind the next card.
Different z-index on each card would work, it's just that last one
is sliding out in the 'wrong' direction.
Here's the sites link https://altar.io/
the website you're trying to re-create uses wow.js which generates animations with JS and CSS.
you can get it from here:
https://wowjs.uk/docs
you can check the library by just looking at the DIV element of each card. they contain a data attribute like data-wow-duration which is a wowjs library codes
I am learning Bootstrap, and I am stuck at creating a sidebar panel just like the following:
There are two things I have not figured out how to do.
In the above image, when you click on the "+" icon, this section slides down. Should I specify some properties in CSS as to when it is clicked or in javascript/jquery?
I want to have exactly 5 checkboxes and the rest should be seen through a slider, like sliding down. I tried to do it but the section just keeps getting longer:
This is what I have done so far. I just wanted to test if it will work.
I am new to this and I do not know JavaScript or jQuery. I want to strengthen Bootstrap first and then will go for Javascript.
I am using a list attribute for listing thumbnail images of youtube generated playlist(gdata feed).But I want it to wrap the list inside a div container then I want to have next and previous buttons to slide the playlist images.
Any one please help with some idea..
You can do that easily with a jquery plugin like this one http://als.musings.it/. After implementing the js library, style sheets, and HTML provided in this link you can place the thumbnails and other content you desire between the list tags. You can find other plugins by performing the google search, "jquery sliding list plugin."
For sliding your image thumbnail why not you try the j query lite plugin it is easy to instal. jquerylight box
On my site I'm currently having users click on a set of navigation links that will, onclick, highlight their backgrounds yellow.
I remember seeing a similar effect on this site at http://docs.meteor.com/
Here, when user scrolls to a specific anchor in the document, the navigation element that links to it is highlighted. How does this work? How do I begin to implement something like this on my page?
Any brief pieces of example code would be greatly appreciated. I've been working with some JavaScript for a while now and haven't been able to recreate anything.
EDIT: To clarify the effect I'm looking at on the Meteor site, when you scroll in the right column, the associated menu element on the left column changes font color to red. NOT, the on hover effect.
There is ready thing for that in bootstrap called scrollspy