I am very new to JS so please try to be as elaborate as possible. I am implementing bootstrap tabs in my html page. There I have a slider using the jquery ui. Before implementing the tabs the slider was working perfectly. But now the slider is invisible. I can move it if I click at the right place. All I can see now is the value of the slider instead of the whole thing.
Tried to reload the slider script after the tab is clicked but it doesn't help. And another weird thing is that, when I remove the tabs altogether now and try to just have the slider, the result is still the same ie. I see only the slider value and the entire div is invisible.
Please ask for any further clarification if needed. Any help would be appreciated. Thanks in advance.
js:
$(document).ready(function(){
alert("Inside slider");
$( "#slider" ).slider({
value:<%-tasks["priority"]%>,
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
// alert(ui.value);
$( "#priority" ).val( ui.value );
},
start: function( event, ui ) {alert("started")}
});
$( "#priority" ).val( $( "#slider" ).slider( "value" ) );
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert("here")
$( "#slider" ).slider();
});
$('#tab_control a[href="#basic"]').tab('show');
})
html:
<ul class="nav nav-tabs" role="tablist" id="tab_control">
<li class="active">Basic</li>
<li>Advanced</li>
</ul>
<div class="tab-pane active basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly style="border:0; color:#f6931f; font-weight:bold;"></p>
</div>
</div>
<div class="tab-pane advanced-tab" id="advanced">
</div>
update:
The slider is now working perfectly! All I did was load these files:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Previously I was loading them from my local disk like this :
<link href="/css/jquery-ui.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.min.js"></script>
They are of these versions:
jquery-ui.min.css : jQuery UI - v1.11.2
jquery.js : jQuery v1.11.1
jquery-ui.min.js : jQuery UI - v1.11.2
So any ideas as to what was the problem?? Its really baffling me.
HTH
Basic
Advanced
<div class="tab-pane active fade in basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly =""/> </p>
</div>
</div>
<div class="tab-pane fade advanced-tab" id="advanced">
testing
</div>
$( "#slider" ).slider({
value:"",
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
$( "#priority" ).val( ui.value );
},
start: function( event, ui ) {alert("started")}
});
$( "#priority" ).val( $( "#slider" ).slider( "value" ) );
http://jsfiddle.net/jz5r5dsw/1/
Related
I have two range sliders ( slider1, slider2). What I want: when the user starts sliding with mouse on the slider1 then the position( or width) and the value to be same on the slider2 as slider 1.
My current code :
<p>
<label for="amount">Distance</label>
<input type="text" id="amount">
</p>
<!--Range slider-->
<div class='col-xl-6 col-lg-6 col-md-6 col-xs-12' id='slide'>
</div>
<p>
<label for="amount2">Distance</label>
<input type="text" id="amount2">
</p>
<div class='col-xl-6 col-lg-6 col-md-6 col-xs-12' id='slide2'>
</div>
<script>
$( function() {
$( "#slide" ).slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
});
$( function() {
$( "#slide2" ).slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
})
});
</script>
I know that I have to use the slide event, but I cant change the position of the slide2, thanks in advance
You can use slide event this will get called when user slide the slider then use slider("value") to get value and finally set value to both slider.
Demo Code:
$(function() {
$("#slide").slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
});
$("#slide2").slider({
range: 'min',
min: 0,
max: 5000,
value: 0
});
//on slide of slider call this
$(".slides").on("slide", function() {
var selection = $(this).slider("value"); //get value
$(".slides").slider("value", selection); //set that value in both
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
<label for="amount">Distance</label>
<input type="text" id="amount">
</p>
<!-- Range slider 1 -->
<div class="slides" id="slide"></div>
<p>
<label for="amount2">Distance</label>
<input type="text" id="amount2">
</p>
<!-- Range slider 2 -->
<div class="slides" id="slide2"></div>
<div class='toast' onload='function(){setTimeout(function(e){$(this).fadeOut()}, 2000)}'>
<div class='toastIcon'><img src='weather_sunny-icon.png'></div>
<div class='toastLabel'><h1>Weather: Sunny</h1><p>Today's weather forecast predicts sunshine.</div></div>
I'm trying to make the div .toast fade out when it is clicked. Currently, when it is clicked, nothing happens. I have the latest version of jQuery implemented correctly.
I hope this helps you. As you asked, we're fading out now on click. I've added "slow" to the fadeOut function, because I would prefer this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toast' onclick='jQuery(this).fadeOut("slow")'>
<div class='toastIcon'><img src='weather_sunny-icon.png'></div>
<div class='toastLabel'><h1>Weather: Sunny</h1>
<p>Today's weather forecast predicts sunshine.</div>
</div>
Another solution by using your timeout:
jQuery( document ).ready( function ( $ ) {
$( ".toast" ).click( function () {
setTimeout( function () {
$( ".toast" ).fadeOut();
}, 2000 );
} );
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toast">
<div class="toastIcon">
<img src='weather_sunny-icon.png'>
</div>
<div class="toastLabel">
<h1>Weather: Sunny</h1>
<p>Today's weather forecast predicts sunshine.</p>
</div>
</div>
Another way is that you call a function when clicking on the element:
function fadeOutToast() {
setTimeout( function () {
$( ".toast" ).fadeOut();
}, 2000 );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toast" onclick="fadeOutToast()">
<div class="toastIcon">
<img src='weather_sunny-icon.png'>
</div>
<div class="toastLabel">
<h1>Weather: Sunny</h1>
<p>Today's weather forecast predicts sunshine.</p>
</div>
</div>
Now you can choose what fits best to your project. If I were you, I would do it that way (finally):
jQuery( document ).ready( function ( $ ) {
$( ".toast" ).click( function () {
$( ".toast" ).fadeOut( "slow" );
} );
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toast">
<div class="toastIcon">
<img src='weather_sunny-icon.png'>
</div>
<div class="toastLabel">
<h1>Weather: Sunny</h1>
<p>Today's weather forecast predicts sunshine.</p>
</div>
</div>
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
}
$("div.con_user").draggable({
delay: 100,
revert: true,
containment: $(this).closest(".roomblock_content"),
start: function( event, ui) {
$(this).css("z-index", "200");
},
stop: function( event, ui) {
$(this).css("z-index","50");
}
});
The containment option for JQuery UI just seems to be broken. Unless I clone div.con_user and reapply the draggable, it doesn't seem to respect the containment option at all.
Could it be due to the fact that I have many .roomblock_content elements in my page, or because my draggable is contained inside a droppable?
EDIT: Sorry, I forgot the HTML markup. Here it is:
<div class="roomblock_content">
<div class="roomblock_col1">
<div class="roomblock_pool_box">
<span class="roomblock_pool_title"> Pool </span>
<ul class="roomblock_slots">
<li>
<div class="con_user prepaid_con"> </div>
</li>
<li>
<div class="con_user prepaid_con"> </div>
</li>
</ul>
</div>
</div>
</div>
I think you are wrongly setting the containment option of draggable. It should be like below:
containment: ".roomblock_content",
DEMO
Hope this works for you :)