Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,148,894 members, 7,802,877 topics. Date: Saturday, 20 April 2024 at 12:50 AM

How Do I Create Responsive Slider With Javascript - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / How Do I Create Responsive Slider With Javascript (1326 Views)

My Semester GPA Calculator With Javascript / Help A Beginner With Javascript / Please Help A Script Kiddie Out With Javascript (2) (3) (4)

(1) (Reply) (Go Down)

How Do I Create Responsive Slider With Javascript by teampregar(m): 7:58am On Jul 29, 2016
I need the source code of the kind of reponsive slider that miss boyashakashaka have on gdevit(the green header on desktop), but i noticed hers was implemented with jquery.. I want mine to be javascript help me with the source code or u guys should give me the algorithm...
Re: How Do I Create Responsive Slider With Javascript by Codenister: 8:41am On Jul 29, 2016
teampregar:
I need the source code of the kind of reponsive slider that miss boyashakashaka have on gdevit(the green header on desktop), but i noticed hers was implemented with jquery.. I want mine to be javascript help me with the source code or u guys should give me the algorithm...

https://www.nairaland.com/2875699/coding-responsive-slider-html-css
Re: How Do I Create Responsive Slider With Javascript by teampregar(m): 11:10am On Jul 29, 2016
Codenister:


https://www.nairaland.com/2875699/coding-responsive-slider-html-css
That is not what i want, DanielTheGeeks sample was to make photos change like an animation... I mean a slider that when the users scrolls down on a desktop the header will move down also...
Re: How Do I Create Responsive Slider With Javascript by Booyakasha(f): 2:52pm On Jul 29, 2016
teampregar:

That is not what i want, DanielTheGeeks sample was to make photos change like an animation... I mean a slider that when the users scrolls down on a desktop the header will move down also...

It's not a slider lol.. it's the CSS position:fixed attribute.
Some reference:
http://www.w3schools.com/css/css_positioning.asp

You can spice things a bit with some animation using the jQuery scrollTop() and animate() methods..
Re: How Do I Create Responsive Slider With Javascript by guru01(m): 4:38pm On Jul 29, 2016
teampregar:

That is not what i want, DanielTheGeeks sample was to make photos change like an animation... I mean a slider that when the users scrolls down on a desktop the header will move down also...
You can Google bootstrap affix plugin. Its a feature you can find in bootstrap 3.

Or may be you can Google for jquery or CSS fixed header.
Re: How Do I Create Responsive Slider With Javascript by teampregar(m): 5:33pm On Jul 29, 2016
Booyakasha:

It's not a slider lol.. it's the CSS position:fixed attribute.
Some reference:
http://www.w3schools.com/css/css_positioning.asp

You can spice things a bit with some animation using the jQuery scrollTop() and animate() methods..

I have tried the fixed attribute but each time i do it the the header will no mre be visible, here is what i do
CSS:
header
{position:fixed}

When u try dis the header will not be visible again..
Re: How Do I Create Responsive Slider With Javascript by guru01(m): 5:37pm On Jul 29, 2016
teampregar:
I have tried the fixed attribute but each time i do it the the header will no mre be visible, here is what i do
CSS:
header
{position:fixed}

When u try dis the header will not be visible again..
Add z-index: 999;
Top: 0;
Left: 0;
Height: __;
Width: __;

Let's know the out come.
Re: How Do I Create Responsive Slider With Javascript by teampregar(m): 6:35pm On Jul 29, 2016
guru01:

Add z-index: 999;
Top: 0;
Left: 0;
Height: __;
Width: __;

Let's know the out come.
Its still not working well, i actually want to fix the nav bar and header together , but when i use ur css rules the nav bar keeps overlapping the header..
Re: How Do I Create Responsive Slider With Javascript by guru01(m): 9:28pm On Jul 29, 2016
teampregar:

Its still not working well, i actually want to fix the nav bar and header together , but when i use ur css rules the nav bar keeps overlapping the header..
Please learn how to ask good and detailed question and not half baked ones.

You said its slider, then u turn it to header and now header and nav. You better learn how to write good HTML.
What ever you are trying to achieve according to your last reply, you should style the parent container holder the header and nav, not just the header.
Remove the fix style from the header and style the parent container.
Re: How Do I Create Responsive Slider With Javascript by Nobody: 9:38pm On Jul 29, 2016
You need to give it space by adding
nav
{
Margin-top:300px;
Margin-left:100px;
}
Re: How Do I Create Responsive Slider With Javascript by teampregar(m): 11:35pm On Jul 30, 2016
Thanks ƴ'all it now works..
Re: How Do I Create Responsive Slider With Javascript by guru01(m): 6:59am On Jul 31, 2016
teampregar:
Thanks ƴ'all it now works..
Next let all the details show up in the first post, that way you save your self from trouble and also those who is assisting you.
Re: How Do I Create Responsive Slider With Javascript by teampregar(m): 2:26pm On Jul 31, 2016
guru01:

Next let all the details show up in the first post, that way you save your self from trouble and also those who is assisting you.
Thanks, i wil launch the project tommorw and i will alert you guys for testing... #Tytit..

(1) (Reply)

Voguepay Hostbill Module / Professional Web Designer Needed / .

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 19
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.