I'm currently taking a web development class and looking to go beyond the "scope" of the class. I managed to create a jquery slide show in a div, now id like to show case some other features in two other divs, stack them into a single div and and call them via a set of toggles. Any methods or roads that can be suggested?
By stacked I mean three divs, one on top of the other. One of these divs is a jquery slider. I'd like a toggle to show one and hide the other two. I'll try and post code after I make it home from work.
Not sure what you mean by "stack", but jQuery Accordion might be a simple solution to get what you're looking for.
It also has methods that you could call from other ~buttons~ to trigger to show/hide effect.
You could even make the three divs into a slide show that is triggered by clicking some navigation like forward and back arrows. Look into the Anything Slider.
Related
I have a site where I want to be able to show or hide a div based on both user input (clicking/tapping a button) and screen size:
a) If the screen width is greater than a certain size, show the div but allow the user to hide it.
b) If the screen with is less than a certain size, hide the div but allow the user to reveal it.
What I'm struggling with is getting these two requirements to interact properly.
I'm using Foundation 5 and jQuery, so both parts of this are possible - Foundation's "show-for-foo-up" handles initial visibility, and there are numerous jQuery functions that allow a div to be toggled between visible and hidden. But what I can't seem to do is find a way to allow a user click to reveal a div that has initially been hidden by Foundation's media query, or a way to do a pure jQuery toggle (ignoring Foundation) that sets the initial visibility according to screen size.
What makes this more complex is that the div contains a form. So I can't simply repeat it in two different divs and toggle between them, as doing that would either mean duplicate element ids or two different forms, both of which aren't possible in this scenario.
Does anyone have any suggestions? I'm open to either a jQuery solution, a Foundation solution or a pure javascript solution, just so long as it works!
Yes, CBroe's comment put me on the right track and my assumption thereafter was correct. All it needs is to use jQuery to alter the class of the div to add or remove the class which uses a media query. Dunno why I didn't think of this before, really.
I would like to make a carousel slider similar to what you see on the new design for Youtube.com and pages like this: https://plus.google.com/discover/w29saB
Any recommendations on how to build this, or Jquery plugins that facilitate this.
I've tried itemSlide() but I don't know how to get the CSS so that it renders inside the container DIV properly. Also Itemslide doesn't give the arrows to scroll to the next page.
Other carousel plugins I've looked at even with their responsive options, make you specify the number of items to fit on a page. I would like that to be determined by css.
Update I've gotten itemSlide() to render in the container div however I still need to be able to add the arrows so that it scrolls when clicked. I figure getting the buttons to overlay is a matter of the right CSS. Getting the scroll to work when clicked is likely something specific to the itemSlide api that I should be able to figure out once the arrows are overlaid properly. itemSlide() as carousel slider library: http://itemslide.github.io/
Why not try a DIV inside a DIV. Have the overlap as hidden in css. Arrows can be div buttons that move the inner div "X" number of pixels in a given direction to match the block sizes in the carousel stile div.
Once you get the arrows overlaid you can use the disable_clicktoslide option of the library so that clicking on slides doesn't move to them.
To make the arrows work, call the functions next() and previous() on the carousel object.
Also you can use the function getActiveIndex() to detect where the user is on the carousel.
Good luck!
Here is what I am talking about:
When you visit https://soundcloud.com/ , when you look at the homepage you see the whole "Connect on Soundcloud" thing.
The texts and buttons on the screen in that confined space scrolls by itself in a given amount of time. It also has those two small white circle buttons that tell you which item it is on(the first white circle gets filled in while the other one is hollowed out with a border when the user is looking at "Connect on SoundCloud" and the other way around when it is on "Discover more with SoundCloud GO+").
How is this made?
Thank you!
You should take a look at Carousels on w3schools, they cover this pretty well.
Bootstrap brings functions and html attributes for building components that slide though elements. Elements not currently visible are pushed off the view with CSS and visible ones can slide into view.
That is called carousel, and it is part of many frameworks/libraries like Bootstap. Some frameworks/libraries call it gallery.
I have a three divs which slide in, they all have a z-order of 0, they can all slide in at different points and in different orders.
When then are all showing, how do I find out what order the divs are in, I want to be able to slide them back in with a delay on each.
Thanks
I guess your DIV's are slided in by a function of you or of jQuery. You can "override" this function. At this overriding you can put a mechanism that saves for example timestamp for the slided in DIV.
So you'll later be able to find out the order the div's have been shown in.
About overriding JavaScript-/jQuery-functions there are many good entries on Stackoverflow.
For example: Override jQuery functions
How can I make a dropdown menu similar to NFL.com's using jQuery? I really like the way it stays hidden, while still providing all the convince of a regular menu.
Something similar can be achieved with jQuery using their Slide effect. Essentially, each of those submenus will be contained in their own div, each positioned such that when fully visible you get the submenu under the main nav. Then, simply start off with all of those subnav divs hidden, and apply the slide effect to show/hide them during mouseover/mouseout events.
NFL.com uses Script.aculo.us, which was written by Thomas Fuchs
See the Script.aculo.us site for lots of examples and demo code
The Effect.SlideDown and Effect.SlideUp should get you what you need for this type of menu.