I am new to jquery, so apologies if this is a lengthy question. The following is what I have come up with for a horizontal slider to scroll a div containing lists of images.
The result is the slider not scrolling the div. Any help would be great.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideDrag,
slideWidth = 330,
slideSpeed = 200;
animated = false;
$(".scroll-slider").slider({
animate: slideSpeed,
start: checkType,
slide: doSlide,
max: slideWidth
});
// Set each slider to a value
$(".scroll-slider").each(function(index){
$(this).slider("value", 330 / 5 * index);
});
// You can also change a slider at any time like so:
// $(".scroll-slider:eq(0)").slider("value", value);
//
// That would move the first slider to a value, along with its content
function checkType(e){
slideDrag = $(e.originalEvent.target).hasClass("ui-slider-handle");
}
function doSlide(e, ui){
var target = $(e.target).prev(".scroll-content"),
// If sliders were above the content instead of below, we'd use:
// target = $(e.target).next(".scroll-content")
maxScroll = target.attr("scrollWidth") - target.width();
// Need to check type now to prevent the new change handler from firing twice when user clicks on slider,
// because both 'slide' and 'change' events are fired on a click, but only a 'change' when setting slider
// value manually via code.
if (e.type == 'slide'){
// Was it a click or drag?
if (slideDrag === true){
// User dragged slider head, match position
target.attr({scrollLeft: ui.value * (maxScroll / slideWidth) });
}
else{
// User clicked on slider itself, animate to position
target.stop().animate({scrollLeft: ui.value * (maxScroll / slideWidth) }, slideSpeed);
}
animated = true;
}
else{
if (animated === false){
target.stop().animate({scrollLeft: ui.value * (maxScroll / slideWidth) }, slideSpeed);
}
animated = false;
}
}
});
</script>
</script>
<style>
/* Styling the scroll elements */
.scroll-container{padding-bottom:30px}
.scroll-content{width:330px;height:110px;overflow:hidden;margin-bottom:10px}
.scroll-content ul{
width:880px;
height:110px;
margin-bottom:5px
}
.scroll-content li{
float:left;
}
.ui-slider .ui-slider-handle{width:16px;height:12px;position:absolute;top:-3px;background:#234786;border:none}
</style>
<body>
<div id="wrapper">
<h2>Multiple Slider Control Demo</h2>
<div id="left">
<div class="scroll-container">
<div class="scroll-content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
<div class="scroll-slider"></div>
</div>
</div>
Are you trying to work from this demo?
http://cnanney.com/journal/demo/div-slide/
I had the same error, and replaced the version of jQuery I was using with the one used in the demo and it worked.
Related
I have a div that I want to transition when I add to it's innerHTML. It's height grows from 0 when added to, so I think transitioning it's height is reasonable.
<style>
.transitions {
transition: height 2s;
}
</style>
<div id="div" class="transitions"></div>
<button id="button">click</button>
<script>
div = document.getElementById('div');
button = document.getElementById('button');
button.onclick = (e) => {
div.innerHTML = "hello world"
}
</script>
Shouldn't the transition css property be able to target the element's increase in height after having it's innerHTML changed?
I want scroll down to the last div
<div v-for="(message, message_index) in messageArray" :key="message_index">
<div class="chatList">
</div>
</div>
I'm assuming you have a chat component where you want to scroll down to the last message on page load.
Although there are many ways to achieve this, I found this is the simplest one.
scrollIntoView() inside this.$nextTick(function () {}) gets the job done.
Bind your every div inside the loop with unique id. :id="`m-(some_unique_id)`">
<div v-for="(message, message_index) in messageArray" :key="message_index">
<div :id="`m-${message.id}`">
</div>
</div>
and get the element of the last index of messageArray. And tell the scrollIntoView to scroll down to that div.
script
<script>
mounted: {
this.getChatBoxUsersChats();
},
methods: {
getChatBoxUsersChats() {
this.$nextTick(function () {
let length = this.messageArray.length;
if (length > 0) {
let id = this.messageArray0[length - 1].id;
let element = document.getElementById("m-" + id);
element.scrollIntoView({ behavior: "smooth", block: "end" });
});
},
},
}
</script>
My current task is to replace knockout js conditional if to switch case(or like multiple if case) to check more than two conditions. The scenario is if the user is authenticated then the toggle icon should be visible in green color and for un authenticated user the toggle icon should be in grey color. Below is the code for the scenario I stated here, IsAuthenticatedUser() is a bool value always have true or false. Now I have to change the bool(0 1) value to flag(0 1 2 3) value.
Bool representation is,
0 - Not Authenticated - grey icon
1 - Authenticated - green icon
Flag Value
0 - Not Authenticated - grey icon
1 - Authenticated - green icon
2 - Authenticated but expired - no icon
3 - Authenticated but not yet license period started - no icon
For bool value the Knockout JS conditional separation is like,
<!-- ko if: IsAuthenticatedUser() -->
<i class="fa fa-toggle-on faIcons green" title="Active"
data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->
<!-- ko if: !IsNotAuthenticatedUser() -->
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive"
data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->
For Flag value, I have to do something like below,
<!-- ko if: UserFlag == 1 -->
<i class="fa fa-toggle-on faIcons green" title="Active"
data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->
<!-- ko if: UserFlag == 0 -->
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive"
data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->
<!-- ko if: UserFlag == 2 -->
<!-- No ICON -->
<!-- /ko -->
<!-- ko if: UserFlag == 2 -->
<!-- No ICON -->
<!-- /ko -->
But this is not working, So is there another way to use if for multiple condition checking or how we can user switch control to handle this scenario.
Any suggestion would be helpful.
Instead of 4 <!-- ko if --> I would instead move the logic to the view model.
From my experience, it's always better to have as few logic as possible in the view.
Moving logic to view model allows you to unit-test your behavior, while it's difficult to test the view rendering. In addition, complex views tend to be far less readable than complex view model, because of verbose syntax which has to be used, such as <!-- ko if --> or complex data-bind.
I tried to make a simplified example matching your needs, in which the same template is displayed differently depending on the user's status. To do that, I make use of the css binding.
click on the page to change user's status.
var myVM = function() {
var _this = this;
_this.status = ko.observable(2);
_this.authenticationStyle = ko.computed(function() {
if (_this.status() == 0) return "anonymous";
if (_this.status() == 1) return "expired";
return "authenticated";
}, this);
_this.statusText = ko.computed(function() {
if (_this.status() == 0) return "please log in";
if (_this.status() == 1) return "please refresh";
return "welcome";
}, this);
};
var vm = new myVM();
ko.applyBindings(vm);
window.onclick = function() {
var newStatus = vm.status() + 1;
if (newStatus > 2)
newStatus = 0;
vm.status(newStatus);
};
.anonymous {
display: none;
}
.expired {
color: lightgrey;
background-color: yellow;
}
.authenticated {
color: black;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="css: authenticationStyle">
<div data-bind="text: statusText"></div>
</div>
Your ko if: UserFlag should work, although I would change it to userFlag and you might need it to be ko if: userFlag()
Also, why not keep it simple and create a getAuthClass() function, and bind the element attributes and calculate all the icons in the viewModel?
I'm somewhat new to Angular. I am trying to display a Bootstap 3 modal dialog when an invalid user role is detected. I cannot get my modal template to display. The behavior seems to work i.e. I can dismiss the faded overlay..I just don't see the actual modal template.
Bootstrap 3
AngularJS 1.0.7
AngularJS UI Bootstrap 0.6.0
Controller
gsApp.controller('MainController', ['$rootScope', '$scope', '$q', '$window', '$location', '$modal', 'ApplicationCache', 'UserService',
function MainController($rootScope, $scope, $q, $window, $location, $modal, ApplicationCache, UserService) {
$scope.userRole = "BadRole";
$scope.showBadRoleModel = function () {
var showBadRoleModelInstance = $modal.open({
templateUrl: "badRoleModal.html",
backdrop: true,
windowClass: 'modal',
controller: badRoleModalInstance,
resolve: {
items: function () {
return $scope.userRole;
}
}
});
}
var badRoleModalInstance = function($scope, $modalInstance, items){
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
}]);
HTML
<div class="row" ng-controller="MainController">
<script type="text/ng-template" id="badRoleModal.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<h2>body</h2>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn" ng-click="showBadRoleModel()">Show bad role modal</button>
</div>
AngularJs UI Bootstrap doesn't work with Bootstrap 3 yet.
See more details here: https://github.com/angular-ui/bootstrap/issues/331
Here's a reusable Angular directive that will hide and show a Bootstrap 3 (or 2.x) modal.
app.directive("modalShow", function () {
return {
restrict: "A",
scope: {
modalVisible: "="
},
link: function (scope, element, attrs) {
//Hide or show the modal
scope.showModal = function (visible) {
if (visible)
{
element.modal("show");
}
else
{
element.modal("hide");
}
}
//Check to see if the modal-visible attribute exists
if (!attrs.modalVisible)
{
//The attribute isn't defined, show the modal by default
scope.showModal(true);
}
else
{
//Watch for changes to the modal-visible attribute
scope.$watch("modalVisible", function (newValue, oldValue) {
scope.showModal(newValue);
});
//Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
element.bind("hide.bs.modal", function () {
scope.modalVisible = false;
if (!scope.$$phase && !scope.$root.$$phase)
scope.$apply();
});
}
}
};
});
Usage Example #1 - this assumes you want to show the modal - you could add ng-if as a condition
<div modal-show class="modal fade"> ...bootstrap modal... </div>
Usage Example #2 - this uses an Angular expression in the modal-visible attribute
<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>
Another Example - to demo the controller interaction, you could add something like this to your controller and it will show the modal after 2 seconds and then hide it after 5 seconds.
$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)
I'm late to contribute to this question - created this directive for another question. Here are some related links: Simple Angular Directive for Bootstrap Modal and https://stackoverflow.com/a/19668616/1009125
Hope this helps.
How do you get the jqplot to resize the min and max and ranges like it would on an inital plot?
Right now it replots but the new data goes off the screen.
<body>
<input type=button onClick=replot() value=replot><br>
<div id="chart1" style="height:400px;width:600px; "></div>
</body>
</html>
<script>
var plot1;
function replot(){
alert(plot1);
alert(plot1.data);
plot1.series[0].data=[[0,1],[0,2],[1,4]];
alert(plot1.data);
plot1.replot();
}
// Some simple loops to build up data arrays.
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.4){
cosPoints.push([i, Math.cos(i)]);
}
$(document).ready(function(){
plot1 = $.jqplot('chart1', [cosPoints], {
title: 'Google, Inc.'
});
});
after some investigation I found the following fix
plot1.replot( { resetAxes: true } );
Now it works.