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-->
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 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
}
This is my .html code
<div class="col-2">
<div class="col-content">
<div class="lt">
<div class="lt-img arch"></div>
</div>
<div class="rt">
<h3>Competitve Prices</h3>
<p>Arch Linux 2012.12 x64</p>
Read more <div class="arrow"></div>
</div>
<div class="clearfix"></div>
<div class="wholebox">
<ul>
<li>Arch Linux 2012.12 x64</li>
<li>Arch Linux 2012.08 x64</li>
<li>Arch Linux 2012.08 x86</li>
</ul>
</div>
</div>
</div>
I have .js file code here ..
$( ".rt a" ).click(function() {
$( ".wholebox" ).slideToggle( "slow" );
return false;
});
Problem : When i click on link it show all div having classwholebox.In .css file i set property to display:none for this wholebox class.How can i show wholebox only for particular link with this hierarchy of HTML code .
$('.rt a').click(function() {
$(this).closest('.col-content').find('.wholebox').slideToggle('slow');
return false;
});
Try sth like following:
$( ".rt a" ).click(function() {
//first look for <div class="col-content"> and find class .wholebox
$(this).parent().parent().find(".wholebox").slideToggle( "slow" );
return false;
});
Give some data-id to your tag and map that id to your "wholebox" class.
Refer below code.
Only need to collect id from <a href="" data-id="1"> and map it to <div class="wholebox**1**">
<div class="col-2">
<div class="col-content">
<div class="lt">
<div class="lt-img arch"></div>
</div>
<div class="rt">
<h3>Competitve Prices</h3>
<p>Arch Linux 2012.12 x64</p>
Read more <div class="arrow"></div>
</div>
<div class="clearfix"></div>
<div class="wholebox1">
<ul>
<li>Arch Linux 2012.12 x64</li>
<li>Arch Linux 2012.08 x64</li>
<li>Arch Linux 2012.08 x86</li>
</ul>
</div>
</div>
</div>
$( ".rt a" ).click(function() {
$( ".wholebox"+($(this).attr("data-id")) ).slideToggle( "slow" );
return false;
});
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);
});
im using the slider explained in codrops tutorial http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/comment-page-2/#comment-458990.
It uses a simple ordered list to display the slides:
<div class="slideshow" id="slideshow">
<ol class="slides">
<li class="current">
<div class="description">
<h2>Slide 1 Title</h2>
<p>Slide 1 content</p>
</div>
<div class="tiltview col">
<img src="img/1_screen.jpg"/>
<img src="img/2_screen.jpg"/>
</div>
</li>
<li>
<div class="description">
<h2>Slide 2 title</h2>
<p>Slide 2 content</p>
</div>
<div class="tiltview row">
<img src="img/3_mobile.jpg"/>
<img src="img/4_mobile.jpg"/>
</div>
</li>
</ol>
</div><!-- /slideshow -->
Then a navigation is created using javascript, this navigation display a set of that when clicked they display the slides:
TiltSlider.prototype._addNavigation = function() {
// add nav "dots"
this.nav = document.createElement( 'nav' )
var inner = '';
for( var i = 0; i < this.itemsCount; ++i ) {
inner += i === 0 ? '<span class="current"></span>' : '<span></span>';
}
this.nav.innerHTML = inner;
this.el.appendChild( this.nav );
this.navDots = [].slice.call( this.nav.children );
}
TiltSlider.prototype._initEvents = function() {
var self = this;
// show a new item when clicking the navigation "dots"
this.navDots.forEach( function( dot, idx ) {
dot.addEventListener( 'click', function() {
if( idx !== self.current ) {
self._showItem( idx );
}
} );
} );
}
It all works fine but does anybody have any idea of how could I add autoplay and prev&next buttons to this slider??
You can create the autoplay function manually by using jquery. My code will call the each slide after 10 seconds. (i.e) the next slider will called after 10 seconds
$(document).ready(function(){
new TiltSlider( document.getElementById( 'slideshow' ) );
window.setInterval(function(){
$('nav>.current').next().trigger('click');
if($('nav > .current').next().index() == '-1'){
$('nav > span').trigger('click');
}
}, 10000);
});