I am trying to change the display property of a div based on if the carousel image is active at the time. I have gotten it to work but it only works when i doubleclick. With a single click it displays the div corresponding to the previous active image instead of the current one. Please HELP.
=====================================
CODE BELOW
HTML
<div class="container-fluid" id="siteImgs">
<div class="row col-xs-12 col-md-7">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" id="lg" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" id="ma"></li>
<li data-target="#myCarousel" data-slide-to="2" id="sz"></li>
<li data-target="#myCarousel" data-slide-to="3"id="ti"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="img/work/lookingGlass.png" alt="looking glass">
</div>
<div class="item">
<img src="img/work/mauriceSite.png" alt="maurice site">
</div>
<div class="item">
<img src="img/work/sza.png" alt="sza">
</div>
<div class="item">
<img src="img/work/tina.png" alt="tina">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!--INFORMATION DIVS-->
<div class="row col-xs-12 col-md-5 lookingGlass lg">
<h1>THE LOOKING GLASS</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass ma">
<h1>MAURICEDANIELS.COM</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass sz">
<h1>SZA</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass ti">
<h1>TINA D. PHOTOGRAPHY</h1>
<p>Lorem ipsum</p>
</div>
JS/JQUERY
$( '.ma' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
$( ".carousel-control" ).click(function() {
if ( $( '#lg' ).hasClass( "active" ) ) {
$( '.lg' ).show(),
$( '.ma' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#ma' ).hasClass( "active" ) ) {
$( '.ma' ).show(),
$( '.lg' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#sz' ).hasClass( "active" ) ) {
$( '.sz' ).show(),
$( '.lg' ).hide();
$( '.ma' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#ti' ).hasClass( "active" ) ) {
$( '.ti' ).show(),
$( '.lg' ).hide();
$( '.sz' ).hide(),
$( '.ma' ).hide();
}
});
Full Example HERE
You can use the slide event for this.
$('#myCarousel').on('slide.bs.carousel', function (e) {
var index = $(e.relatedTarget).index();
var obj = $('[data-slide-to="' + index + '"]').attr('id');
$('.lookingGlass').hide(); // all individual hide() that you had in your code can be replaced by targeting the divs with class
$('.' + obj).show();
})
Fiddle demo
Also another way is to remove the ids from the carousel indicators and add it as a data-attribute to div.item something like this <div class="item" data-target="lg"> and use it like this
$('#myCarousel').on('slide.bs.carousel', function (e) {
var obj = $(e.relatedTarget).data('target');
$('.lookingGlass').hide();
$('.' + obj).show();
})
Demo fiddle
you could do something like that,
$( ".carousel-control" ).click(function() {
$(".carousel-indicators").each(function(){
var idActive = $(this).attr("id");
if($(".lookingGlass ").hasClass("idActive ")){
$(this).show();
}
$(".lookingGlass").hide();
});
});
And im not if its gonna work just wrote it here, can check it after 15 min from now on, but maybe its help you now.
I'm not sure if this will work, but looking at your site, and how the carousel works, there is a delay to which the class "active" is applied when images/slides are switching. I think whats happening is that this delay causes the carousel's bootstrap js to mismatch a little with your custom js, so that when you click, the previous slide is still active, then the bootstrap js kicks in and switches the slide, but your js has already executed, thus causing the mismatch in divs vs images displayed. Instead of using "active" class to determine, try using:
if ($('#ti').hasClass("next") || $('#ti').hasClass("prev") {
// do stuff here
}
Related
Hi I am looking to place content from a child element into another element.
I have a hidden div called "DetailsExpanded" and a series of items called "IconWrapper". On clicking "IconWrapper" I would like to copy the content from that items "ItemDetail" Into "DetailsExpanded" and slide down "DetailsExpanded" with said content
Please see below my html structure.
I have begin on the sliding js but I am a bit out of my depth unfortunately.
$( ".IconWrapper" ).click(function () {
if ( $( ".DetailsExpanded" ).is( ":hidden" ) ) {
$( ".DetailsExpanded" ).slideDown( "fast" );
} else {
$( ".DetailsExpanded" ).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
All you have to do is to take the .html() of the clicked element and to set it in your .DetailsExpanded element :
$(".IconWrapper").on("click", function() {
var content = $(this).find(".ItemDetail").html();
$(".DetailsExpanded").html(content);
$(".DetailsExpanded").slideToggle("fast"); // this replaces slideDown or hide
});
$( ".IconWrapper" ).click(function () {
var text = $(this).find('.ItemDetail').text();
$( ".DetailsExpanded" ).html(text).slideDown( "slow" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy1</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy2</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy3</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
Is this what you are looking for ?
$(document).ready(function(){
$('.IconWrapper').on('click', function(e) {
$(".DetailsExpanded").text($(this).text()).slideDown();
});
});
I use a live search form working version,
but why is mine not working how it should work?
I geuss it is because the div class="wrapper faq" is messing things up?
Sorry for the slobby html, but copying 1500 lines and 4 css docs wasnt going to help.
thanks in advance!
<script>
'use strict';
// search & highlight
;( function( $, window, document, undefined )
{
var $container = $( '.faq' );
if( !$container.length ) return true;
var $input = $container.find( 'input' ),
$notfound = $container.find( '.faq__notfound' ),
$items = $container.find( '> ul > li' ),
$item = $(),
itemsIndexed = [];
$items.each( function()
{
itemsIndexed.push( $( this ).text().replace( /\s{2,}/g, ' ' ).toLowerCase() );
});
$input.on( 'keyup', function( e )
{
if( e.keyCode == 13 ) // enter
{
$input.trigger( 'blur' );
return true;
}
$items.each( function()
{
$item = $( this );
$item.html( $item.html().replace( /<span class="highlight">([^<]+)<\/span>/gi, '$1' ) );
});
var searchVal = $.trim( $input.val() ).toLowerCase();
if( searchVal.length )
{
for( var i in itemsIndexed )
{
$item = $items.eq( i );
if( itemsIndexed[ i ].indexOf( searchVal ) != -1 )
$item.removeClass( 'is-hidden' ).html( $item.html().replace( new RegExp( searchVal+'(?!([^<]+)?>)', 'gi' ), '<span class="highlight">$&</span>' ) );
else
$item.addClass( 'is-hidden' );
}
}
else $items.removeClass( 'is-hidden' );
$notfound.toggleClass( 'is-visible', $items.not( '.is-hidden' ).length == 0 );
});
})( jQuery, window, document );
// toggling items on title press
;( function( $, window, document, undefined )
{
$( document ).on( 'click', '.faq h2 a', function( e )
{
e.preventDefault();
$( this ).parents( 'li' ).toggleClass( 'is-active' );
});
})( jQuery, window, document );
// auto-show item content when show results reduces to single
;( function( $, window, document, undefined )
{
var $container = $( '.faq' );
if( !$container.length ) return true;
var $input = $container.find( 'input' ),
$items = $container.find( '> ul > li' ),
$item = $();
$input.on( 'keyup', function()
{
$item = $items.not( '.is-hidden' );
if( $item.length == 1 )
$item.addClass( 'js--autoshown is-active' );
else
$items.filter( '.js--autoshown' ).removeClass( 'js--autoshown is-active' );
});
})( jQuery, window, document );
</script>
<!-- Search bar -->
<div class="search-wrapper faq" >
<div class="container container--add faq">
<input type="search" value="" placeholder="Search">
</div>
</div>
<!-- Movie preview item -->
<div id="Page1" class="page" style="">
<ul>
<li id="faq-1">
<h2>Last Vegas (2013)</h2>
<div class="movie movie--preview movie--full release">
<div class="col-sm-3 col-md-2 col-lg-2">
<div class="movie__images">
<img alt='' src="images/movie/movie-sample1.jpg">
</div>
</div>
<div class="col-sm-9 col-md-10 col-lg-10 movie__about">
</div>
</div>
<div class="clearfix"></div>
</div>
</li>
<!-- end movie preview item -->
<!-- Movie preview item -->
<li id="faq-2">
<h2>the book thief (2013)</h2>
<div class="movie movie--preview movie--full comments">
<div class="col-sm-3 col-md-2 col-lg-2">
<div class="movie__images">
<img alt='' src="images/movie/movie-sample2.jpg">
</div>
</div>
<div class="col-sm-9 col-md-10 col-lg-10 movie__about">
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</li>
</ul>
<!-- end movie preview item -->
</div>
It looks like you are closing off the .faq div in the HTML too soon - move the from before the to the end in order to wrap the contents into into the parent .faq div. Also - you have some closing issues in the ul as well- i have rejigged it a bit - insert the following code into your - replacing the entire section with mine to see if this helps. This is an example of when text indentation and checking the openings / closings is useful.
<!-- Search bar -->
<div class="search-wrapper faq" >
<div class="container container--add faq">
<input type="search" value="" placeholder="Search">
</div>
<!-- Movie preview item -->
<div id="Page1" class="page" style="">
<ul>
<li id="faq-1">
<h2>Last Vegas (2013)</h2>
<div class="movie movie--preview movie--full release clearfix">
<div class="col-sm-3 col-md-2 col-lg-2">
<div class="movie__images">
<img alt='' src="images/movie/movie-sample1.jpg">
</div>
</div>
<div class="col-sm-9 col-md-10 col-lg-10 movie__about">
</div>
</div>
</li><!-- end movie preview item -->
<li id="faq-2"><!-- Movie preview item -->
<h2>the book thief (2013)</h2>
<div class="movie movie--preview movie--full comments clearfix">
<div class="col-sm-3 col-md-2 col-lg-2">
<div class="movie__images">
<img alt='' src="images/movie/movie-sample2.jpg">
</div>
</div>
<div class="col-sm-9 col-md-10 col-lg-10 movie__about">
</div>
</div>
</li>
</ul><!-- end movie preview item -->
</div><!--end of page 1 div-->
</div><!--end of faq-->
I have code something like that :
<div class="fieldset clearfix">
<h2 class="fieldset_title">Title <i class="indicator glyphicon pull-right glyphicon-chevron-down"></i></h2>
<div class="fieldsgroup_info"></div>
<div class="fieldsgroup">
....
</div>
</div>
When I do in jquery
$('.fieldset_title').click(function(){
$( this ).closest( ".fieldsgroup" ).hide();
});
Seems not working, do you have an idea why it doesn't work?
Thanks
.fieldsGroup is the sibling of .fieldset_title not its parent, so replace
$( this ).closest( ".fieldsgroup" ).hide();
with siblings
$( this ).siblings( ".fieldsgroup" ).hide();
Or as suggested by A.Wolff in his comment below
$( this ).nextAll(".fieldsgroup").first().hide();
I am trying to jquery isotope and Balkin Style portfolio to work together (http://codepen.io/MightyShaban/pen/eGaCf) buti cant. I can get them to work perfectly on there own but once together it wont work. I have also tried noConflict() with no luck as well. Any ideas would be much appreciated.
JS Code.
// Balkin
$( document ).ready(function() {
$('.portfolio ul li a').click(function() {
var itemID = $(this).attr('href');
$('.portfolio ul').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .portfolio ul').removeClass('item_open');
return false;
});
$(".portfolio ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
});
/*===========================================================*/
/* Isotope Posrtfolio
/*===========================================================*/
if(jQuery.isFunction(jQuery.fn.isotope)){
jQuery('.portfolio_list').isotope({
itemSelector : '.list_item',
layoutMode : 'fitRows',
animationEngine : 'jquery'
});
/* ---- Filtering ----- */
jQuery('#filter li').click(function(){
var $this = jQuery(this);
if ( $this.hasClass('selected') ) {
return false;
} else {
jQuery('#filter .selected').removeClass('selected');
var selector = $this.attr('data-filter');
$this.parent().next().isotope({ filter: selector });
$this.addClass('selected');
return false;
}
});
}
HTML (needs to be made more tidy i know, sorry)
<!--Portfolio-->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<!--begin isotope -->
<div class="isotope">
<!--begin portfolio filter -->
<ul id="filter" class="option-set clearfix">
<li data-filter="*" class="selected">All</li>
<li data-filter=".responsive">Responsive</li>
<li data-filter=".mobile">Mobile</li>
<li data-filter=".branding">Branding</li>
</ul>
<!--end portfolio filter -->
<!--begin portfolio_list -->
<ul id="list" class="portfolio_list">
<!--begin span4 -->
<li class="list_item col-xs-12 col-sm-4 col-md-4 responsive"><a href="#item02">
<div class="view view-first"> <img src="../overlay/images/photos/project_1.jpg" class="img-responsive" alt="Title Goes Here"> <div class="mask"> <div class="portfolio_details zoom"><h2>Nostrum mnesarchum</h2>
<span>Art / Illustration</span></div> </div> </div></a>
</li>
<!--end span4 -->
Put the second jQuery item in a separate $( document ).ready(function() {});, and you should be fine.
You might even want to put it in a whole different set of <script></script> tags too.
I started some time studying javascript, and I have some questions and was wondering if you can do this.
I have a div:
<div class="category"> </div>
it automatically repeats everytime I create a new category in a forum system. this is default "so there is no possibility to manually"
So wanted it to be added numbering for each category. thereby:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
and so on, all this through jquery or javascript.
If it is possible what is the way?
jQuery solution:
$( ".category" ).each( function( index ) {
$( this ).addClass( "category"+(index+1) );
});
Result:
<div class="category category1"> </div>
<div class="category category2"> </div>
<div class="category category3"> </div>
<div class="category category4"> </div>
Solution 2:
$( ".category" ).each( function( index ) {
$( this ).removeClass( "category" ).addClass( "category"+(index+1) );
});
Result:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
FIDDLE
HTML
<button id="category-button">Add Category</button>
<div id="category-container"></div>
Javascript
$('#category-button').on('click', function() {
var $container = $('#category-container'),
$elem = $('<div/>', {
"class": "category" + ($container.children().length + 1)
});
$container.append($elem);
});