Looking To Expand What I Have Already Built

JavaScript
1

Hi there,
I am just getting my hands dirty with Javascript and have built the following:

http://cpointweb.com/dtv/

You’ll see that the blue blocks can be hovered over, and the content to the left changes along with the images, somewhat like a custom slider. How I achieved that was simple and can be seen here: http://cpointweb.com/dtv/js/custom.js

I want to expand this so that the content fades in and the images slide in upon each hover. Since being so new to all this javascript stuff I am somewhat at a cross-roads (mentally more than anything, hehe).

Can anyone point me in the right direction as to how I could achieve something like what I mentioned above? Is my current way of doing this incapable of what I described above? Seems like it to me, as I am just replacing text and such.

I don’t want the code written for me, I like to learn but am just not sure where to begin with something like that.

Thanks in advance, I appreciate any help!

2

When the images are not loaded and the blocks hovered, the page jumps all over the place.

I think the problem could be fixed by giving the image container a fixed height.

3

One of your major issues is defining a static height to your .slider class. It’s scary when the page jumps around because the image hasn’t loaded yet. :slight_smile:

You’re using jquery, so fading is easy.

But, for this to work properly and look good, you’re going to have to build a function to handle this and make your program DRY. So this way, you can just pass in info instead of copy and pasting it and changing a couple things like you have done.

Something like:

function changeSlider(header, html, img) {
   var rightHtml = '<h2>' + header + '</h2><p>' + html + '</p>';
   var slider = '<img src="' + img + '" />';

   // set the data to the elements and do your fadein/fadeout/fadetoggle stuff here
}
4

Thanks so much for the help. I will try to work with what you had provided and see if I can’t come up with something functional!

I added the height to avoid the bouncing around, not sure why I missed that before!

1 Like
5

Is there any way you can expand just a little on the code your provided? I’m having trouble understanding how I set the data to the elements and how I then implement this on the front-end with my current HTML.

As I understand it, I call the function with a simple changeSlider(“My H2 Tag”, “Any Text Here”, “…/img-source.jpg”);

But through the front-end, since they are two separate areas, how would I then accomplish this? Or is it a matter of re-arranging code? Maybe I am thinking about this far more difficult than I should be.

I am going through some books I have as well, just figured I’d ask as well.

Thanks,

6

The simplest way to be just like you did in the original.

function changeSlider(header, html, img) {
   var rightHtml = '<h2>' + header + '</h2><p>' + html + '</p>';
   var slider = '<img src="' + img + '" />';

   $('.right').html(rightHtml);
   $('.slider').html(slider);
}
7

Thanks for that.

Is this correct for accomplishing the fadeIn?

$(‘.slider’).fadeIn(“slow”).html(slider);

8

Nevermind, I figured it out. Had to hide the element first.

Thanks for all the help!

1 Like
9

Now, try throwing in a callback to fire when a fadeOut has completed :smile:

$('.right').fadeOut('fast', function(){
    $(this).html(rightHtml).fadeIn('slow');
});
10

I love it! I’ve been designing/building sites for years and have never gotten into Javascript, but I love what I can do so far! Don’t know why I never picked this up before.

Thanks so much for all the help, I really appreciate it! Learned a lot so far this morning.

11

If I wanted to rotate through these automatically, Is there a simple way to do that with my current code? A While loop or something?

12

If you’re new to programming or just want a quick way into JS. Check out CodeCademy. Either way, it’ll help get your feet wet.

http://www.codecademy.com/en/tracks/javascript (do this first)

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval

13

Not necessarily programming. I have good experience with PHP/MySQL but have never gotten into JS for whatever reason. 8 years in and I’m scratching my head as to why, hehe.

1 Like
14

CodeCademy will probably be a bit too slow for you then. But I’d still give it a shot and decide for yourself.

These are good and free:

http://eloquentjavascript.net/

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.