Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Matt Van Dyck
Matt Van Dyck
2,033 Points

HTML Slideshow

Hi there, I am not actually sure whether this should be in the PHP section or in the HTML section. I have a question about this website http://supereightstudio.com/

In their slideshow, it is static, but when you refresh the page, the featured image changes every time. Can someone give me some hint as to how this is done? Could this possibly be php code at work here?

Thanks!

2 Answers

Abhay Sharma
Abhay Sharma
8,287 Points

If you are referring to the big background image behind the we work with you block, it can be achieved with several ways, but definately it is php into play here.

rand(min,max); //function which gives any random integer between min and max

It could be done by changing class on your element

<section class="backgroundImg<?php echo rand(1,6);?>">
</section>

Now above code will give a random number from 1 to 6 and your class will be randomly any one from backgroundImg1 to backgroundImg6 In your CSS

.backgroundImg1{
    background: url('img/back1.png'); 
}
.backgroundImg2{
    background: url('img/back2.png'); 
}
.
.
.backgroundImg6{
    background: url('img/back6.png'); 
}

Hope this helps !

Matt Van Dyck
Matt Van Dyck
2,033 Points

Thank you! That makes perfect sense! Learning something new every day.

Matt Van Dyck
Matt Van Dyck
2,033 Points

Hello again!

I have a very similar question pertaining to this website, http://www.supereightstudio.com/

I am now looking at their nav bar and how it switches classes to nav fixed once you scroll down. I assume the same sort of php code comes into play to change classes to fixed, but what I don't understand is how the php code knows when to change the class to fixed. As you can tell I am new to php :)

Thank you for your time.

Abhay Sharma
Abhay Sharma
8,287 Points

The navigation on the top is using JavaScript to do so. Its the offset.top property to see if the nav is touching the top of the window and then make it fixed.

Matt Van Dyck
Matt Van Dyck
2,033 Points

Hi Abhay. I tried to recreate this menu bar located about 310px below the very top of the page. I created a bit of jquery code but I can't get it to work when I have a navigation bar below the very top of the page...

    $(function() {

        var sticky_navigation_offset_top = $('.nav').offset().top;


        var sticky_navigation = function(){
            var scroll_top = $(window).scrollTop(); 

            if (scroll_top > sticky_navigation_offset_top) { 
                $('.nav').css({ 'position': 'fixed', 'top':0, 'left':0 });
            } else {
                $('.nav').css({ 'position': 'relative' }); 
            }   
        };


        sticky_navigation();


        $(window).scroll(function() {
             sticky_navigation();
        });

    });

I am not sure how to compensate for my menu bar being below the top of the page?

Thanks for any help!

Abhay Sharma
Abhay Sharma
8,287 Points
Abhay Sharma
Abhay Sharma
8,287 Points

I have created a little example for this Question please check this code pen snippet http://codepen.io/abhaysharma/pen/gEcCK

I hope this serves your purpose.

Matt Van Dyck
Matt Van Dyck
2,033 Points

Thanks so much! You are awesome!!