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
Related
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
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
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
If we have a single page website with different divs (sections) and a header at the top with different links pointing to different anchors (divs) on the page, or of course by scrolling. How can I display a little indicator on the link that represents the anchor the user is currently on, and example is this website.
I'd use the :hover CSS selector (http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes). You can also use a title attribute on the link to create a tooltip.
UPDATE:
I have to assume by your comment that you are referring to the "Page Indicator" in the lower right of the linked website.
To mimic that, simply change the CSS of the targeted indicator when you change the active div. Here's a simple example: http://jsfiddle.net/N39Gf/1/
Mind you, if you're willing to consider using jQuery or a similar library, animations get super simple, as does class-switching and many other operations needed to mimic this effect.
I have a div area (for main slider. But there will not be sliding inside).
And under this div area there is a tab system.
In these tabs there are 1-6 images (In each tab there are another images (1 to 6 images)
When I click one of these images I want to show the related content / photo etc in this Div area above.
How can I do that? Any example? Any clue?
I tried to use jquery for show/hide, toggle etc but for example I couldnt find how to keep those big divs unvisible within my html (I tried css "display:none;" but that didn't seem to me wise enough) and call them in its place (above of the tab system)
P.S: when an image is shown the others must be hidden.
Here you are demyr obviously you will have to modify to your exact needs:
http://jsfiddle.net/S4LGr/1/
It is no problem here is the updated code, edit as you need you should really be able to take it from here:
http://jsfiddle.net/S4LGr/3/
I changed the images on this one so you can actuall see it happen, very similiar to ford.ca:
http://jsfiddle.net/S4LGr/5/
Here you go man all the pieces brought together:
http://jsfiddle.net/S4LGr/9/
totallyFeelLikeIdidYourHomeWork lol you owe me a beer!
you can bind a function on all images/text that loads the relevant images/text to the detail div. Like this fiddle: http://jsfiddle.net/9jc46/