I'm struggling with an issue in my code.
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
I am trying to click on a navigation link (refer to Screenshot). It should scroll to the vertical red line (main DIV with class "#incontent"). However, when clicking on the "Home" link, it scrolls to the end of the site instead (Screenshot on the left side).
Can anyone provide assistance? I have limited skills in JavaScript and can't seem to find a solution.
UPDATE: Current Code:
Hello, thank you for your prompt response!
I attempted your suggested solution but it still isn't functioning correctly. I inserted
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>Perhaps I could share the entire code here as I am working with Joomla.
The PHP index file:
<div id="content">
<div id="incontent" class="test">
<div id="breadcrumbs"> <jdoc:include type="modules" name="breadcrumbs" style="xhtml">
</div>
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
var winWidth = $(window).width(),
containerWidth = $('.test').width(),
leftOff = (winWidth - containerWidth)/2;
$('ul.nav a').on('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left - leftOff
}, 1000);
event.preventDefault();
});
});
</script>
CSS
#incontent{
font-family: 'Raleway', sans-serif;
padding-top: 170px;
width: 6000px;
font-size: 12px;
font-weight: lighter;
line-height: 17px;
}
.items-row{
margin-left: 0px !important;
width:840px;
float: left;
background-color: #E5E5E5;
padding: 20px;
margin: 10px;
margin-top:;
border: 1px dashed #cfcfcf;
outline: 2px solid #E5E5E5;
min-height: 320px;
}
JOOMLA WYSIWYG:
<table border="0">
<tbody>
<tr>
<td class="kat">
<div id="buttons">
<ul class="nav">
<li><a href="#home">Home</a></li>
|
<li><a href="#ueberuns">Über uns</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<p><img src="images/fotolia_38533929.jpg" border="0" width="300" height="215" style="float: right; margin-left: 10px; margin-right: 10px;" /></p>
<div id="home" class="ultimativ"> </div>
<h2>Herzlich Willkommen!</h2>
<p>Haben Sie schon länger keine Familienfotos mehr gemacht oder wollen Sie gerne schöne Fotos von Sich an dem schönsten Ort ihrer Stadt machen? Durch jahrelanger Erfahrung ist eine Vielzahl an Fotoshootings durch unsere Kameralinsen gewandert und hat vielen Freude bereitet, egal ob Studiofotos, Fotos für Ihre Hochzeitseinladungskarten oder ein außergewöhnliches Bewerbungsfoto. Klicken Sie sich durch unsere verschiedenen Bereiche und machen Sie sich ein Bild davon, wie auch ihre Bilder aussehen könnten.</p>
</td>
</tr>
</tbody>
</table>
I suspect that my issue lies in the CSS "width: 6000px", as I require horizontal space for Joomla to insert blog posts inside. I'm unsure how else to address this.
I am still encountering a bug here.
xxx
On the index page, there are two Divs
On the Print Page, there are three divs xxx
I set the width to 6000px so I can add more blog posts that automatically display inline.
But here's the issue, with 6000px everywhere, I can scroll too far to the right, causing my blog post to disappear.
I hope this is clear. I still need help with this problem!