Can some please, PLEASE! help me with this problem. Okay so I have a code that at first I thought worked well but I forgot that when the default <img src="test-img-1.jpg" class="actual-img"> content is loaded the first of the three buttons below the image should take the active css state that I've specified for the active buttons to take. Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the ".image-area" div and it works when I click on the buttons. Problems only surface when I am I trying to give the first loaded content an active state. One way I believe can fix this (I can't implement it) is to let the first immediate default content be this inline hidden div: ( <div id="image-area2"> <div class="img-area-wrapper"> <img src="test-img-2.jpg" class="actual-img"> </div> </div>) while somehow letting the first button be set to active. I should also mention that I'm not the best with jquery. Please help me fix this someone!
Here is a fiddle to get a better understanding: http://jsfiddle.net/pyrot/84sU4/
If my way of going about this is totally absurd please let me know.
this is my code:
<script type="text/javascript"> $(document).ready(function() { //loads default content //$('#image-area').load($('.menu_top a:first-child').attr('href')); $('.o-links').click(function() { // href has to be the id of the hidden content element var href = $(this).attr('href'); $('#image-area').fadeOut(1000, function() { $(this).html($('#' + href).html()).fadeIn(1000); }); return false; }); }); $(function() { $('.o-links').click(function(e) { //e.preventDefault(); $('.o-links').not(this).removeClass('O_Nav_Current'); $(this).addClass('O_Nav_Current'); }); }); </script> this is my html:
<section id="image-slider-container"> <div class="image-slider-inner"> <div id="image-area"> <div class="img-area-wrapper"> <!--currently this is the default I want to change--> <img src="test-img-1.jpg" class="actual-img"> </div> </div> <div id="image-area2"> <div class="img-area-wrapper"> <!--I would like this to be the default content that when seen the first button is set to active--> <img src="test-img-2.jpg" class="actual-img"> </div> </div> <div id="image-area3"> <div class="img-area-wrapper"> <img src="test-img-3.jpg" class="actual-img"> </div> </div> <div class="slider-buttons"> <div class="slider-buttons-container"> <a href="image-area" class="o-links"> </a> <a href="image-area2" class="o-links"> </a> <a href="image-area3" class="o-links"> </a> </div> </div> </div> </section> and this is my css:
#image-slider-container { width: 100%; height: auto; background-color: #ffffff; padding: 5% 0px 0% 0px; } .image-slider-inner { width: 100%; height: auto; max-width: 1040px; margin: 0px auto; padding: 0px 20px 0px 20px; } #image-area2, #image-area3 { width: 100%; height: auto; display: none; } #image-area { width: 100%; height: auto; } #image-area .img-area-wrapper { width: 80%; height: auto; max-width: 1140px; margin: 0px auto; } .actual-img { width: 100%; height: 100%; } .slider-buttons { width: 100%; height: auto; max-width: 1140px; margin-top: 0px; } .slider-buttons-container { width: 100%; height: auto; max-width: 1140px; margin: 10px auto 0px auto; text-align: center; } .slider-buttons-container a { border-radius: 360px; border: 1px #C5C5C5 solid; padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; background-color: #efefef; outline: 0px; text-decoration: none; font-size: 12px; box-shadow: -2px 1px 2px 0px #ADADAD; transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; } .slider-buttons-container a:hover { border: 1px #C5C5C5 solid; padding: 0px 5px 0px 5px; background-color: #DAD8D8 } .slider-buttons-container a:active { position: relative; top: 2px; } .O_Nav_Current { border: 1px #999999 solid !important; background-color: #DAD8D8 !important; } This question is related to
javascript
jquery
html
css
dynamic
Problems only surface when I am I trying to give the first loaded content an active state
Does this mean that you want to add a class to the first button?
$('.o-links').click(function(e) { // ... }).first().addClass('O_Nav_Current'); instead of using IDs for the slider's items and resetting html contents you can use classes and indexes:
CSS:
.image-area { width: 100%; height: auto; display: none; } .image-area:first-of-type { display: block; } JavaScript:
var $slides = $('.image-area'), $btns = $('a.o-links'); $btns.on('click', function (e) { var i = $btns.removeClass('O_Nav_Current').index(this); $(this).addClass('O_Nav_Current'); $slides.filter(':visible').fadeOut(1000, function () { $slides.eq(i).fadeIn(1000); }); e.preventDefault(); }).first().addClass('O_Nav_Current'); Source: Stackoverflow.com