[ASK] HTML atau CSS yang error ?

Beranda
Komunitas
Tech
Programmer Forum
[ASK] HTML atau CSS yang error ?

HafidzFachris

19-06-2014 13:47

gan bantuin ane, ane ada masalah ni ama project web ane, di coba di mozilla fire fox lancar aja gan, tapi begitu di coba di web browser laen kaya opera atau chrome gagal. kegagalanya tu di menu yang di bagian bawah itu gan, ga berfungsi sama sekali. nih screen shoot nya

kalo kurang jelas bisa langsung ke link ini aja gan TKP

ni kodenya gan

Spoiler for Html:

<body>

<div class="dock">
<ul class="navigation">
<li data-slide="1">Home</li>
<li data-slide="2">Vision & Mission</li>
<li>Management Team</li>
<li>Property Portofolio</li>
</ul>
</div>

</body>
</html>

Spoiler for CSS:

@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'BebasRegular';
src: url('font/BEBAS___-webfont.eot');
src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
url('font/BEBAS___-webfont.woff') format('woff'),
url('font/BEBAS___-webfont.ttf') format('truetype'),
url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');
font-weight: normal;
font-style: normal;

}
html,body{
font-family: 'BebasRegular';
width:100%;
height:100%;
overflow: hidden;
}

.navigation{
position:absolute;
forbidden5;
left: 2%;
height: 6%;
}
.navigation li{
text-decoration: none;
color : white;
display:inline-block;
padding: 0 10px;
margin-top:2%;
-webkit-transition: all .2s ease-in-out;
text-align:center;
background-color: rgba(0,0,0,0.7);
border-radius: 5px;
box-shadow: 0px -4px 2px rgba(0,0,0,0.8);
}
.navigation li:hover{
background-color: rgba(200,0,0,0.7);
cursor emoticon-Stick Out Tongue

ointer;
}

.dock{
position: fixed;
height: inherit;
max-height: 6%;
width: 100%;
bottom: 0%;
margin: 0%;
forbidden 3;
background-color: rgba(255,255,255,0.6);
box-shadow emoticon-Embarrassment

utset 0px 25px 25px rgba(255,255,255,0.3);

}

Spoiler for JS:

jQuery(document).ready(function ($) {

//initialise Stellar.js
$(window).stellar();

//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');

//Setup waypoints plugin
slide.waypoint(function (event, direction) {

//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');

//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}

});

//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});

//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');
}

//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});

//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);

});

});

itu ane udah otak-atik z-index nyaa tetep ga pengaruh gan
mohon bantuanya ga :'( ngejar dead-line nih emoticon-Mewek

1.4K

Kutip

Balasan

Guest

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru

Urutan

Terbaru

Terlama

Guest

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru

Komunitas Pilihan