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();
Related
Fellow programmers,
I have 2 draggable div's with unique id's. I need to change the text on a droppable div to a specific text based on which draggable is dropped.
HTML:
<div id="drag1" class="ui-widget-content">
<p>Great</p>
</div>
<div id="drag2" class="ui-widget-content">
<p>Poor</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>You Chose</p>
</div>
jQuery code:
$( "#drag1, #drag2" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui )
{
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html(ui.draggable[0].id);
}
});
I used your code snippet and it seems to work that way.
I've added data-info attribute as an option to pass some text to the droppable div.
$( "#drag1, #drag2" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html($('#'+ui.draggable[0].id).data('info'));
}
});
.ui-widget-content {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="drag1" data-info="My great div was chosen" class="ui-widget-content">
<p>Great</p>
</div>
<div id="drag2" data-info="My poor div was chosen" class="ui-widget-content">
<p>Poor</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>You Chose</p>
</div>
Change the ids of your draggable elements to "drag_great" and "drag_poor", instead of "drag1" and "drag2" to match what you have in the jQuery code.
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
}
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);
});
I don't know why but the code belows doesn't work in Firefox. It goes perfect in Chrome.
// Buttons marker
$( "#second button" ).click(function() {
$( this ).toggleClass('selected');
$( this ).toggleClass('unselected');
$( this ).toggleClass('btn-warning');
$( this ).toggleClass('btn-default');
});
// Ads switcher
$( "#second button" ).click(function() {
var category = $( this ).attr( "name");
$( ".ad[data-category="+category+"]" ).toggle( "slow" );
});
// Hide all categories but newmotos when load website
$( document ).ready(function() {
$( ".ad[data-category=usedmotos" ).hide();
$( ".ad[data-category=spares" ).hide();
$( ".ad[data-category=accessories" ).hide();
});
Any suggestion? I thought that JQuery were multiplatform :/
EDIT: The code should hide some divs with the selected data-category and provide the power to show them with some buttons on the top.
I'm using other JS codes in the same webpage and these ones are working, I think this is important, because it's not crashing all the Javascript.
And Firebug dosen't say me nothing :(
EDIT 2: Adding my html. The code is the main of body only, I guess other isn't necessary.
<div id="main" role="main">
<!-- Section #1 / Cover -->
<section id="first" class="story" data-speed="8" data-type="background" data-offSetY="-432">
<article>
<h2>Tienda</h2>
</article>
</section>
<!-- Section #2 / Keycloud -->
<section id="second" class="point heads">
<article>
<div class="text">
<h5>Nube de palabras. Aquí van las palabras, selecciónalas. Y tal y eso y se marcarán, ya tu sabeh.</h5>
<h6>Básicamente es cómo funciona este sistema para ver tus peaso motos.</h6>
</div>
<div class="btn-group-vertical">
<div><span>CATEGORÍAS:</span></div>
<button type="button" class="selected btn btn-warning" name="newmotos">Motos nuevas</button>
<button type="button" class="selected btn btn-warning" name="usedmotos">Motos de ocasión</button>
<button type="button" class="selected btn btn-warning" name="spares">Recambios</button>
<button type="button" class="selected btn btn-warning" name="accessories">Accesorios</button>
</div>
</article>
</section>
<!-- Section #3 / Bulletin -->
<section id="third" class="point heads">
<h4 class="line-divider">ANUNCIOS</h4>
<article>
<div class="ad" data-category="newmotos">
<img src="images/ads/ad01/1.jpg" />
<div>
<h6>Piaggio Liberty 49cc</h6>
<p>Se vende motor en muy buen estado, procendete de un golpe tambien todo el despiece de esta moto y el de una 49! saludos! motores desde 250 euros! </p>
<fieldset>
<span class="label label-success">250€</span>
<span class="label label-default">49cc</span>
<span class="label label-info">5.000km</span>
<span class="label label-warning">Blanca</span>
</fieldset>
</div>
</div>
<div class="ad" data-category="usedmotos">
<img src="images/ads/aprilia.jpg" />
<div>
<h6>Aprilia RS 49cc</h6>
<p>Vendo moto varata de serie solo pasarle la itv y yasta 550€ negociables interesados Atiendo wasap.. Color negro </p>
<fieldset>
<span class="label label-info">550€</span>
<span class="label label-info">49cc</span>
<span class="label label-default">15.000km</span>
<span class="label label-default">Negra</span>
</fieldset>
</div>
</div>
<div class="ad" data-category="spares">
<img src="images/ads/puente.jpg" />
<div>
<h6>Puente culata Kawasaki 450 </h6>
<p>Vendo puentes de los arboles de lebas de culata de KAWASAKI KXF valido para KXF 450 del 2006 al 2008 </p>
<fieldset>
<span class="label label-default">150€</span>
<span class="label label-default">Modelo 450</span>
<span class="label label-default">2006</span>
</fieldset>
</div>
</div>
</article>
</section>
EDIT 3: The web it's not loading the 'ads-controller.js' the file where the code is. The code belows is how I insert the JS files.
</div> <!-- // End of #main -->
<!-- Our Javascript, starting with jQuery -->
<script src='js/libs/jquery-1.6.1.min.js'></script>
<script src="js/libs/slimbox/slimbox2.js"></script>
<script src="js/ads-controller.js"></script>
<script src="js/scroller.js"></script>
<script src="js/parallax.js"></script>
SOLVED: It was the extension 'Ad Blocker'. Because the 'ads' in the file name. I just renamed as 'controller.js' and works perfectly. Thanks everybody!
To make your code more DRY, chain and use CSS selectors:
// Buttons marker
$( "#second button" ).click(function() {
$( this )
.toggleClass('selected')
.toggleClass('unselected')
.toggleClass('btn-warning')
.toggleClass('btn-defualt');
});
// Ads switcher
$( "#second button" ).click(function() {
var category = $( this ).attr( "name");
$( ".ad[data-category="+category+"]" ).toggle( "slow" );
});
// Hide all categories but newmotos when load website
$( document ).ready(function() {
$( ".ad[data-category='usedmotos'], .ad[data-category='spares'], .ad[data-category='accessories']" ).hide();
});
Here's a fiddle.
Correct you code here:
Before:
$( ".ad[data-category=usedmotos" ).hide();
$( ".ad[data-category=spares" ).hide();
$( ".ad[data-category=accessories" ).hide();
After:
$( ".ad[data-category='usedmotos']" ).hide();
$( ".ad[data-category='spares']" ).hide();
$( ".ad[data-category='accessories']" ).hide();
Also enclose your code into DOM ready as following:
// Hide all categories but newmotos when load website
$( document ).ready(function() {
$( ".ad[data-category='usedmotos']" ).hide();
$( ".ad[data-category='spares']" ).hide();
$( ".ad[data-category='accessories']" ).hide();
// Buttons marker
$( "#second button" ).click(function() {
$( this ).toggleClass('selected');
$( this ).toggleClass('unselected');
$( this ).toggleClass('btn-warning');
$( this ).toggleClass('btn-default');
});
// Ads switcher
$( "#second button" ).click(function() {
var category = $( this ).attr( "name");
$( ".ad[data-category="+category+"]" ).toggle( "slow" );
});
});
It was the AdBlock extension catching the ad term.
<div class="player-tab">
<div class="img-wrap" draggable="true">
<img src="assets/player.png" alt="">
</div>
<div class="img-wrap" draggable="true">
<img src="assets/player.png" alt="">
</div>
<div class="add-recording"> + Add Recording
</div>
</div>
In this code anyone can add recording and a player image show them after add. I want to img-wrap draggable to each other.
I means I upload 1 record and 2 record. I can sort it to 2nd first and 1st later. This way it's can be sorting in format as user want. Someone know any good idea to implement this feature.
You can use jQuery:
$(function() {
$( "#divid" ).draggable();
});
see this:http://jqueryui.com/draggable/
I think you want this:
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
check here:http://jqueryui.com/sortable/