Change multiple element contents/background depending on slider contents - javascript

I have made an image using photoshop of a mock design of the page so you can visually see what I am trying to achieve.
Please look at the image at the end of this question whilst trying to answer.
Updated Question:
At this moment in time I have no code, I was wondering if someone could point me in the correct direction. I am making an online application using Ruby on Rails. At this moment I am not worried about the Rails side, I firstly want to conquer the JQuery. I have six sauces, each with a name, a picture, and a desctiption. What I want to achieve is the page starts on sauce one as shown in the picture, when the right arrow is clicked, sauce number 1 becomes sauce number 2, the picture changes, and the relevant description changes (i.e. sauce number 2's description.
My main problem is I do not know how to fit the relevent content between the two arrows, and then get them to change as the arrows are pressed. I.e. the user can click the right arrow once and I can change the contents, but how to I set the jQuery so that when the arrow is clicked the second time, it becomes the second sauce, the third time the third sauce and so on, as in chronological order, so when they click the back arrow it goes to the sauce before the current one.
In a nutshell everything happens dynamically, not that I have divs all ready, and the JQuery just truncates through them (i.e. not a Jquery div slider).
Here's the image:

I would recommend using an already made jQuery slider, like this one:
http://basic-slider.com/
For each li used in the slider, have a div with the image and description. You would need to modify the slider css a little bit but I think it would be a lot easier than making a slider yourself.

These are a good start for achieving what you want with jquery:
Animate: http://api.jquery.com/animate/
Capture a click: http://api.jquery.com/click/
Show/hide elements: http://api.jquery.com/show/ http://api.jquery.com/hide/
Set the html of an element: http://api.jquery.com/html/
If you have a problem with anything specific with these functions, you can ask again or just search Stackoverflow, there's a good chance whatever questions you might have have been answered already.

Related

How to animate text within div.card-img-overlay when hovering

I would like to use the card element to forward to a blog post. My idea was to have the heading displayed permanently and the respective description when entering the mouse.
As soon as the mouse leaves the element, the description should disappear again. The heading should be moved to the original position.
To illustrate my thoughts, I have created this sketch.
My current progress is relatively modest.
I have already tried to use both fadeInUp and fadeOutDown (animate.css). This turned out to be a bit unsatisfying. You can find a preview here.
Here, you can find a preview without animations.
In principle, the desired animations are in place. However, the heading does not end up in the original position, which of course is caused by the use of fadeOutDown.
Personally, I feel uncomfortable integrating Animate.css when I want to implement a fairly simple animation. Can you give me your advice at this point?
How would you rate my progress? Was that a good approach?
Here is your solution. Fiddle
Just add
.removeClass().addClass("card-title fadeInDown down animated");
to
$(this).find('.card-title').removeClass().addClass('card-title
fadeOutDown animated')
In hover callback
for the integrating Animate.css Part. You dont have to use the whole css file just use the part that you need

DIV in HTML dynamically changing but add white space

I have been working on a dynamic question thingee(technical terms) but of course there is always some small hop that you need to overcome.
My issue is that when I select 'show answer' on one of the question panels then the dividers add a massive white space between the rows.
Basically the amount of questions asked are managed by the width of the screen, then via AJAX is gets the questions from index.php?questions&a={insertwidthofscreen*4} this is done via javascript and works automatically.
The code that I have is the following, it is called 'math.php' as a temp test:
http://pastebin.com/MjGgSTYh
Everything is generated via the above file and no external connections are made, the database stuff is easy and I will use my old system that keeps a track of what has already been shown.
The idea is that all the DIVS change height when the answer button is clicked, the height is dependent on the answer, the answer could vary from 1 word to a paragraph.
Screen shots of what I mean with the white space.
http://imgur.com/KAOPHFI,wj0vWSg
there is two photos in that, I didn't see the next button for a while.
Cheers,
Leon
Since it isn't complete code (and therefore difficult for me to test myself) I'll just spitball this -- your qbox style (and possibly others?) have fixed width -- qbox is 200px. Should that be dynamic? (you also have width listed twice, but same value so it shouldn't matter in this case)
If you want to post more complete code that I can paste into a file myself, I'd be able to troubleshoot much easier.
Update:
I see what is happening now. The whitespace occurs when you click the answers in a particular order -- ie if you go through them left to right top to bottom, there is no extra whitespace, but if you click diagonally like in your screencap, the whitespace is added to allow for the length of the current answer, but doesn't reorder the previous cells to utilize the space.
In order to resolve this, it looks like you'll have to relocate some of the answer boxes when one answer is clicked on... just expanding them in a certain order will cause the issue you're seeing. Another option would be to have an answer pane/frame, on the side or bottom of the page, that shows the answer without expanding the question boxes themselves. I can't picture the algorithm you'd need to auto rearrange the boxes every time one is clicked...

Emulating an on-clickable input form

I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.

jQuery div autoscroller solution

I need a jQuery scroller to scroll my divs with auto scrolling facility. I am looking for something like jCarousel.
But there are limitations for this. What I want is one which;
1. Scrolls <div>s (or some html elements) and not just images. I may have something like the picture below, to scroll.
It is a text and image combination.
2. It should auto scroll contents
3. The slider should MARQUE continuously and should not rewind to beginning. The slider should not rewind (in the opposite direction) to go for first image/content after the last image/content.
What jcarousel is doing is in autoscroll mode, it shows a set of of images/contents at a time, stop for a while, and then immediately displays the next set. I don't want this and want to autoscroll contents smoothly in a loop. That is, first content should come after last content, in circular loop.
I can provide additional details. just post comments.
Anybody got what I am trying to say and what I want and suggest me a solution?
You can do this without a plugin with some fairly simple jQuery.
See an example here that I put together for another answer:
http://jsfiddle.net/6Dxg6/
Basically, the idea is you clone the contents of a wrapper, and then continually move the contents to the right/left the width of the original content and then reset. Works with any content.
That code even includes hover-stop functionality. Without that, the code is simpler still:
http://jsfiddle.net/qJZtp/1/

Looking for simple slideshow with previous and next navigation

I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.

Categories