Currently in the process of working on my site, www.runebs.dk.
Utilizing a script to activate information for each project.
JS..
$('.showHide').on('click',function(){
$(this).toggleClass('active');
$( '#subHeadline .description' ).slideToggle(200);
var currentState = $(this).text();
console.log('state: ', currentState);
if($(this).hasClass('active')) {
$('.showHide').empty();
$(this).text('(+)');
} else {
$(this).text('(–)');
}
});
}
$(document).ready(function(){
// initializing toggleInfo when document is ready
toggleInfo();
var $window = $(window);
$window.trigger('scroll'); // setting initial value
$window.on('scroll', function(){
var pos = $('#subHeadline').offset();
$('.article-header').each(function(){
if (pos.top <= $(this).offset().top && pos.top >= $(this).next().offset().top) {
var desc = $('.description', this).text();
var title = $('.h3', this).text();
var year = $('.year', this).text();
var button = $('.showHide', this).text();
$('#subHeadline .title').text(title);
$('#subHeadline .year').text(year);
$('#subHeadline .description').text(desc);
$('#subHeadline .showHide').show();
return;
}
});
});
CSS..
.article-header {
display: none;
}
#subHeadline {
display:none;
position:fixed;
top:0px;
left: 0;
margin-left: 22px;
padding-top: 64px;
height: auto;
width: 600px;
z-index:1;
}
#subHeadline .description {
display: none;
width: 280px;
position: relative;
margin-top: 28px;
}
#subHeadline .showHide {
display: none;
width: 280px;
position: relative;
margin-top: 28px;
cursor: pointer;
}
.year {
display: block;
margin-top: -19px;
}
The current script functions perfectly, however I would like to adjust it so that the information for the first project is displayed upon entering the site instead of requiring scrolling.
If anyone could offer assistance, it would be greatly appreciated. Thank you..