I have a div selector script with icons as pagination that I'm working on. So far everything is working well, the question I have is how can I change the active state of a an icon dependent on the div or "page" that is currently being shown. Here is a simple example of what I have so far. The images being used for the navigation right now are clickable as well.
Here is the example:
http://jsfiddle.net/Rua2B/
Thanks for any possible help!
EDIT: Just to clear things up I mainly trying to get active states to change when the "prev" and "next" buttons are hit.
Your code for pagination isn't the most efficient - you should look into tidying this up. But a simple fix for you for next/prev buttons is this line:
$("#pager img").removeClass("active").eq($("#container .boxes:visible").index()).addClass("active");
DEMO: http://jsfiddle.net/Rua2B/1/
Related
I guess, it is better if I show you what I tried.
So, I am working to build a weather app in order to learn https://material-ui.com/.
I am trying to prototyping the animation how I see it in Google flights as
I tried to do this using Grid, Fade available in material-ui (I used latest 3.9.3).
However, in my version, even though I use Grid, when I hide the AppBar and the Form content, the grid beneath it, does not slide up. My version looks like
As you might see, what I mean. So, how do I slide the content up?
I have shared my code at https://codesandbox.io/s/13q4mmm36q?fontsize=14
Can someone please help me understand what I am missing?
Fade will simply just change the opacity. It doesn't inherently set its height to 0 or become display: none after fading out.
Just use material-ui Collapse component on the Header.
Code:
https://codesandbox.io/s/ooyxn96mo9
Documentation:
https://material-ui.com/api/collapse/
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.
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
We are trying to replace a set of four radio buttons with a set of four images, each with its own hover and selected image.
We have sent the radio button off screen using CSS, created the main images to show as the label and also set the hover, but we are experiencing issues with the Javascript/jQuery we are using which adds a 'selected' class to the buttons. It works for the first button, but I am lost on how to replicate this for the other three - your advice on this would be very much appreciated.
The JS Fiddle for this can be seen here:
http://jsfiddle.net/HVk7d/8/
Managed to get it working in the end - here is the code: http://jsfiddle.net/HVk7d/18/
All the best,
Matthew
I am using jQuery Isotope for my personal website:
http://www.ryanpays.com
The issues i am facing are when a user clicks either 'Websites' or 'HTML-Email' after the page has loaded there is no animation of the project thumbnails when filtering. However, they do animate when either link is clicked again.
Also i would like to preserve the layout of the 'Clients and projects' section after the animation. It seems to break onto a new row/s when there should be enough room for the last child to be positioned on the first row. When 'show all' is clicked it does not return to the original layout either. I am unsure if there is something i need to do in the CSS to achieve this or maybe re-structure my HTML.
Update
I have worked around this issue by initialising isotope on page load and then again on click. Doesn't look right in IE6 (can live with that for now) and is not really the functionality i would ideally like to achieve.
You need to set your #UL to #UL.isotope because it is adding that class on click, and it needs to already be applied for the css3 animations to work. Just had this issue today, www.mactyler.net you can see it working.