I'm designing my portfolio which have one area with horizontal slide, like coda slide. My problem is, the width generated by the JS are in px and I need to set that width in % to work in the most screen resolutions. When I try to change something the width becomes in % but the slide goes vertically.
A sample HTML:
<div class="scroll">
<!-- the element that will be scrolled during the effect -->
<div class="scrollContainer">
<!-- our individual panels -->
<!-- PROJECT 1 -->
<article class="panel" id="work1">
<figure><img src="images/works/project1.png" alt="Alt Text" title="Title Text"/></figure>
<header>
<h1>TITLE</h1>
</header>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu diam elit, non sodales magna. Nam ut imperdiet metus. Nam in lectus eros, non varius nunc. In elementum, urna in pulvinar vestibulum, ligula ipsum pharetra massa, ac porta neque turpis vel ligula. Morbi nec justo vitae urna luctus suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi semper cursus nisi nec tincidunt. Donec non sapien at turpis iaculis iaculis vel at eros. Phasellus dictum consectetur dui, sed imperdiet diam rhoncus et. Aliquam egestas, nisl ut pellentesque egestas, sapien orci tristique lacus, quis egestas odio enim a felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mattis dapibus libero, nec ultrices neque iaculis nec.</p>
<p> Ut quis purus diam. Vestibulum bibendum, ipsum ac pharetra pretium, lectus justo molestie ligula, nec dignissim ante nulla non nulla. Maecenas sit amet elit metus. Nulla dignissim pretium porttitor. Cras pellentesque condimentum fringilla. Fusce ac odio convallis ante venenatis interdum et et mauris. Donec tincidunt sapien nec enim egestas sollicitudin. Proin sit amet metus ac eros commodo dapibus id vel neque. Nulla in luctus felis. Sed at urna magna, ac vestibulum neque. Nam dictum elementum pharetra.</p>
</article>
<!-- PROJECT 2 -->
<article class="panel" id="work2">
<figure><img src="images/works/project2.png" alt="Alt Text" title="Title Text"/></figure>
<header>
<h1>TITLE</h1>
</header>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu diam elit, non sodales magna. Nam ut imperdiet metus. Nam in lectus eros, non varius nunc. In elementum, urna in pulvinar vestibulum, ligula ipsum pharetra massa, ac porta neque turpis vel ligula. Morbi nec justo vitae urna luctus suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi semper cursus nisi nec tincidunt. Donec non sapien at turpis iaculis iaculis vel at eros. Phasellus dictum consectetur dui, sed imperdiet diam rhoncus et. Aliquam egestas, nisl ut pellentesque egestas, sapien orci tristique lacus, quis egestas odio enim a felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mattis dapibus libero, nec ultrices neque iaculis nec.</p>
<p> Ut quis purus diam. Vestibulum bibendum, ipsum ac pharetra pretium, lectus justo molestie ligula, nec dignissim ante nulla non nulla. Maecenas sit amet elit metus. Nulla dignissim pretium porttitor. Cras pellentesque condimentum fringilla. Fusce ac odio convallis ante venenatis interdum et et mauris. Donec tincidunt sapien nec enim egestas sollicitudin. Proin sit amet metus ac eros commodo dapibus id vel neque. Nulla in luctus felis. Sed at urna magna, ac vestibulum neque. Nam dictum elementum pharetra.</p>
<figure>
<img src="images/works/project2a.png" class="workscenter" alt="Alt Text" title="Title Text"/><br/>
<img src="images/works/project2b.png" class="workscenter" alt="Alt Text" title="Title Text"/><br/>
<img src="images/works/project2c.png" class="workscenter" alt="Alt Text" title="Title Text"/>
</figure>
</article>
</div>
</div>
Below the jS I'm using:
jQuery(document).ready(function($) {
// Container
var container = $('.scroll');
// Navigation
var navContainer = $('#slider .navigation');
var navLink = $('#slider .navigation li a');
// Slides
var panelsContainer = $('.scroll .scrollContainer');
var panels = $('.scroll .scrollContainer > article');
var panelWidth = panels[0].offsetWidth;
// Float all slides side by side
panels.css({
'float' : 'left',
'position' : 'relative',
'width': panelWidth,
'height': 'auto',
'opacity': 0
});
// Set the width of the first slide
container.css({
'width': panelWidth,
'height': panels[0].offsetHeight,
'overflow': 'hidden'
});
// Set the total width to allow the slide effect
panelsContainer.css({
'width': panelWidth * panels.length,
});
// Activate the first slide
navLink.eq(0).addClass('selected');
panels.eq(0).css('opacity', 1);
// Verify the links where is possible to slide
$('a').bind('click', function(e) {
var target = $(this).attr('href');
if($(target).html() !== undefined ) {
$('html, body').stop().animate({
scrollTop: $(target).offset().top
}, 1500, 'easeInOutExpo');
if($(target).parent('div').hasClass('scrollContainer')) {
$('#slider .navigation li a').removeClass('selected');
$('#slider .navigation li a[href=' + target + ']').addClass('selected');
// Actual slide
var current = $('#slider .navigation li a.selected');
// Slide to be opened
var index = current.closest('li').index();
// Dinâmica height with plus 70px at the end
container.css('height', $(target).height() + 70);
// Set the actual slide
navLink.removeClass('selected');
current.addClass('selected');
// Show the actual slide
panels.css('opacity', 1);
// Create the transition effect
$(container).scrollTo($('.scroll .scrollContainer > article').eq(index), 800);
// Hidden all others slides
setTimeout(function() {
panels.css('opacity', 0);
panels.eq(index).css('opacity', 1);
}, 800);
}
}
});
// Fix to makes right wrong projects
if(window.location.hash) {
$('a[href="' + window.location.hash + '"]:first').trigger('click');
}
})
Someone know some way to make what I want?
Thank you guys.