Adding a reference point to a Jquery Slider - javascript

I have created a data entry web application using asp mvc where the user can submit a record of their wellbeing. The data is saved to a SQL database and everything is working fine however, I would like to add a fixed reference point on the jQuery slider itself to show the user their most recent score. Maybe in the form of an additional fixed handle at the corresponding value...however I'm very new to javascript and have tried and failed so far.
Here is a screen shot of my sliders
The numbers at the bottom show the values for the previous entry
I have posted my JS code for the sliders below. Any help would be much appreciated.
$(function() {
var handle = $("#pain-handle");
$("#painSlider").slider({
min: 0,
max: 10,
value: 0,
animate: "fast",
create: function() {
handle.text($(this).slider("value"));
}
}
);
$("#painSlider").slider().slider("pips", {
labels: {
first: "No Symptoms",
last: "Worst Symptoms"
}
}
).on("slidechange", function(e, ui) {
$("#pain-handle").text(ui.value);
}
);
}
);

so it seems like you need to make specific pips visible. Just for information; the slider always has values, but the css hides them. So we just need to make the correct pips visible.
The steps are;
figure out the correct values (suggest to put them as html-data)
add a cssClass to those values
use css to display the correct pips (style accordingly)
Firstly, I've amended your JS a little so that you're using the float plugin for the pips to display the values on the slider handles. It'll be a little more robust than your solution. $(".slider").slider("float"); You can read about it here; https://simeydotme.github.io/jQuery-ui-Slider-Pips/#options-float
the final js code is;
$(function() {
// here we assume 4 sliders all with the same css class
var $sliders = $(".painSlider");
$sliders.each( function(k, el) {
var $slider = $(el);
var previousValue = $slider.data( "previous" );
// handle different labels for best/worst
var firstLabel = $slider.hasClass( "bestWorst" ) ? "Best Imaginable" : "No Symptoms";
var lastLabel = $slider.hasClass( "bestWorst" ) ? "Worst Imaginable" : "Worst Symptoms";
$slider.slider({
min: 0,
max: 10,
value: 0,
animate: "fast"
})
.slider("pips", {
labels: {
first: firstLabel,
last: lastLabel
}
})
.slider("float")
// add a css class to the correct values
// so that we can style them to be shown
.find(".ui-slider-pip")
.eq( previousValue )
.find( ".ui-slider-label" )
.addClass( "previous-value" );
});
});
and then there's a little bit of css to apply;
/* this is the magic to show the value */
.ui-slider-label.previous-value {
display: block;
}
/* these two styles are to show the "float"
labels inside the handle, instead of using
your own custom handle-text. */
.ui-slider-tip {
visibility: visible!important;
opacity: 1!important;
transform: none!important;
position: static!important;
background: transparent!important;
border: none!important;
color: white!important;
margin: auto!important;
width: auto!important;
}
.ui-slider-tip::before,
.ui-slider-tip::after {
display: none!important;
}
the fully, working code, is viewable here; https://jsfiddle.net/vzw53dge/

Related

NoUiSlider does not work properly

I'm trying to set up noUiSlider.
My html is
<div id="slider" class"noUiSlider"></div>
My javascript
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: 10,
range: {
min: 0,
max: 100
},
pips: {
mode: 'values',
values: [20, 80],
density: 4
}
});
The javascript is exactly the code from the website (examples page, last example).
That's how my slider looks like:
Both javascript and css files are correctly implemented.
Any ideas why it's not working?
UPDATE: As jsfiddle didn't work, here is a CodePen example:
http://codepen.io/anon/pen/oXVoyO
This plugin doesn't styling these values. You need to apply custom CSS to the elements:
.noUi-value.noUi-value-horizontal.noUi-value-large {
position: absolute;
}
With this rule, you have the 20% and 80% values in bottom of their position in slider. If you want to stylize much more, you need to apply custom CSS to this elements, or attach elements to update() function of the plugin:
slider.noUiSlider.on('update', function( values, handle ) {
//on slide you can update values and items.
});
See it working:
http://codepen.io/anon/pen/gpEXQP

Endless wall javascript/mootools

I am trying to create and endless draggable wall on wordpress using this script: http://wall.plasm.it/ .
The problem I am facing, is that I don't know how could I grab wordpress posts, and insert them into the wall grid.
This is the code that initialises the wall:
window.addEvent("domready", function(){
// Define The Wall
var maxLength = 100; // Max Number images
var counterFluid = 1;
var wallFluid = new Wall("wall", {
"draggable":true,
"inertia":true,
"width":150,
"height":150,
"rangex":[-100,100],
"rangey":[-100,100],
callOnUpdate: function(items){
items.each(function(e, i){
var a = new Element("img[src=/your/folder/images/"+counterFluid+".jpg]");
a.inject(e.node).fade("hide").fade("in");
counterFluid++;
// Reset counter
if( counterFluid > maxLength ) counterFluid = 1;
})
}
});
// Init Fluid Wall
wallFluid.initWall();
});
I should find a way to make 'new Element', grab an already existing wordpress post, or add a new one using ajax, although I think this would make it really slow. Any ideas how I could make this work?
I think what you want to do is setup a Wordpress Query to get the posts you want via an ajax query. These would be returned into your items array instead of the images in your example.
If the page is based on a standard Wordpress structure I do not see any benefit from using AJAX here. The easiest way would be to grab the posts and place them inside the wall. So this script, in the case of more than one post, creates html elements of the wall, sets the basic css, takes the posts and places them inside the wall. Is based on this example.
window.addEvent( "domready", function() {
if ( $$( '.post' ).length > 1 ) {
// create base container for the wall
new Element( 'div#wall_container' ).setStyles({
width: 608,
position: 'relative',
margin: '0 auto'
}).inject( $$( '.post' )[0], 'before' );
// create viewport, wall, and navigation
new Element( 'div#viewport' ).setStyles({
width: 608,
height: 450,
position: 'relative',
overflow: 'hidden',
}).inject( 'wall_container' );
new Element( 'div#wall' ).inject( 'viewport' );
new Element( 'div#wall-list' ).inject( 'viewport', 'after' );
// collect all posts ( elements with class="post" ) and dispose them
var posts = $$( '.post' ).dispose();
new Wall( "wall", {
"draggable": true,
"inertia": true,
"autoposition": true,
"preload": true,
"width": 608,
"height": 450,
"rangex": [ 0, posts.length ], // use number of posts for number of items in the wall
"rangey": [ 0, 1 ], // only one line
callOnUpdate: function( items ) {
items.each( function(e, i) {
posts[e.y].inject(e.node); // inject posts into wall
});
}
}) .initWall()
.getListLinksPoints( "wall-list" );
}
});
The Wall script is intended primarily for images, and not for text, because all the elements are absolutely positioned with fixed dimensions (unless the posts are similar in length, which can be also fixed with the use of more tag).
The examle is tested with WP 3.8.1, on the default themes. In order to work you need to enqueue the following scripts:
mootools-core-1.4.5-full-compat.js
mootools-more-1.4.0.1.js
wall.js

Todays Special: How is this done? Is there a jquery plugin or product to do it?

I saw this technique at the bottom of a web page where the TAB stays in place at the bottom of the page and can be opened and closed to display more info. I assume it can be rotated to display a different special for different days. Can you point me to anything like it or explain the technique ? thanks. Here is a sample: http://www.tmdhosting.com/ look at the bottom of the page .
position: fixed is how you manage to keep something at the bottom or top of the page, regardless of scrolling.
This is easily discoverable using firebug's (http://getfirebug.com/) inspect element feature
You can check out my version of this at uxspoke.com
I wrote a jQuery plugin to do it, and calling it is straightforward:
$('#about').pulloutPanel({open:true}).
click(function() { $(this).trigger('toggle'); }) });
I basically instrument the panel to support "open", "close" events, and the implement the appropriate animations around them. The only "hard" part is getting the height right. It also supports "toggle" so you can add a generic click handler to it to open or close it. Finally, it uses opened/closed classes to keep track of its current state. That's it!
The code's pretty coupled to the technologies on the page (Csster) and the design it is in, so I'm not sure it will work for you. You can either use Csster, or just put the CSS rules into your stylesheet and remove them from the code. The important Css attributes are the positioning and bottom.
Here it is:
$.fn.pulloutPanel = function(options) {
var settings = $.extend({}, {
attachTo: 'bottom',
css: {
left: 0,
minHeight: 390,
border: '1px 1px 1px 0 solid #666',
has: [roundedCorners('tr', 10),boxShadow([0,0], 10, phaseToColor('requirements').saturate(-30).darken(50))],
cursor: 'pointer'
}, options);
return $(this).each(function() {
var $this = $(this);
$this.addClass('pullout_panel');
$this.bind('open', function(event) {
$this.animate({bottom: 0}, 'slow', 'easeOutBounce', function() {
$this.removeClass('closed').addClass('opened');
$this.trigger('opened');
});
});
$this.bind('close', function(event) {
var height = $this.innerHeight();
$this.animate({bottom: -height + 50}, 'slow', 'easeOutBounce', function() {
$this.addClass('closed').removeClass('opened');
$this.trigger('closed');
});
});
$this.bind('toggle', function(event) {
$this.trigger($this.hasClass('opened') ? 'close' : 'open');
});
once(function() {
Csster.style({
'.pullout_panel': {
position: 'fixed',
bottom: 0,
has: [settings.css]
}
});
});
$this.trigger(settings.open ? 'open' : 'close');
});
};

jQuery UI Dialog, adding elements next to a button

One of the nice things about the jQuery UI Dialog is that it has an option for Buttons, which automatically positions them correctly. I just wonder: Can I somehow place elements next to the buttons? I have a little Ajax-Loader gif that I would like to display in the lower left corner of the dialog, while the buttons stay at the lower right?
I know I can just remove the buttons and create them manually in HTML, but as jQuery takes care of positioning and styling already for me, I'd like to keep that functionality if it makes sense.
$("#newProjectDialog").dialog({
bgiframe: true,
resizable: false,
width: 400,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Create': function() {
$("#ajax-loader").show();
// Make the Ajax Call and whatever else is needed
$(this).dialog('destroy');
},
Cancel: function() {
$(this).dialog('destroy');
}
}
});
All you basically need to do is
//depending on what #ajax-loader is you maybe need to style it (float:left, ...)
$("#ajax-loader").clone(true).appendTo("div.ui-dialog-buttonpane").show();
Below a fancier version with a few considerations incorporated.
I imagine #ajax-loader to look similar to this
<div id='ajax-loader'><img src='loader.gif' /><span>loading...</span></div>
or just this
<img id='ajax-loader' src='loader.gif' />
javascript can look like this
...
'Create': function() {
var btnpane = $("div.ui-dialog-buttonpane");
//prevent bad things if create is clicked multiple times
var there = btnpane.find("#ajax-loader").size() > 0;
if(!there) {
$("#ajax-loader").clone(true).appendTo(btnpane).show();
// Make the Ajax Call and whatever else is needed
// if ajax call fails maybe add $("#ajax-loader", btnpane).remove();
$(this).dialog('destroy');
}
},
...
A note
You should call .dialog('destroy') in the complete event of the ajax request else the dialog may get destroyed before the ajax request finished and the user may not even see the "loader".
How about just inserting your spinner before the first ui-dialog-button?
buttons: {
'Create' : function() {
$('<img src="spinner.gif" style="float: left;" />').insertBefore('.ui-dialog-buttonpane > button:first');
...ajax stuff...
$(this).dialog('destroy');
}
}
The best way to do this, is to create another button, make it totally transparent with no border, and add the animated gif as its background image. By using another button, you can easily locate its position relative to all your other buttons.
First, to be able to style buttons more, you need to create them with one level higher of definition. So instead of:
buttons: {
'Create': function() {
$("#ajax-loader").show();
// Make the Ajax Call and whatever else is needed
$(this).dialog('destroy');
},
Cancel: function() {
$(this).dialog('destroy');
}
}
Do it like this (notice square brackets and one more level of indent):
buttons: [
{
id: 'create-button',
class: 'create-button-class',
text: 'Create',
click: function() {
$("#ajax-loader").show();
// Make the Ajax Call and whatever else is needed
$(this).dialog('destroy');
}
},
text: 'Cancel',
click: function() {
$(this).dialog('destroy');
}
}
]
You can assign an id and class to each button or not. If you assign either id and/or class, then you can apply CSS styling to it.
<style>
.create-button-class{
height:50px;
width:50px;
left:-300px; /* Pushes it left, change value for desired location. */
}
.ui-dialog .ui-dialog-buttonpane #create-button {
color: transparent; /* no inner color and also hides text */
border: none; /* removes border */
background-image:url(images/spinner-gif-25px.gif); /*replaces default image */
background-size: 50px;
background-repeat: no-repeat;
}
</style>
If you like, create a normal additional button and use CSS property left to push it as far left in the button panel as you like, before making it transparent and no border.

jQuery: how can I control a div's opacity when hovering over another div?

I am currently working on my portfolio website which uses a very simple navigation.
However what I want to do is have the drop shadow beneath the type become stronger (read: higher opacity/ darker) when the type is being hovered on.
Right now my code looks as follows and does not generate any errors but simply does not do anything either.
For a good understanding of what I mean please have a look at the website with a live example.
/* Work | Play | About | Contact */
/* Shadow Opacity */
$(document).ready(function() {
$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
});
/* Shadow Hover effect */
$(document).ready(function() {
$('a#work').hover(function() {
$('#workShadow').fadeTo( 200, 0.5);
}, function() {
$('#workShadow').fadeTo( 400, 0.1);
});
});
/* Type movement on hovering */
$(document).ready(function() {
$('a.shift').hover(function() { //mouse in
$(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200);
}, function() { //mouse out
$(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400);
});
});
Basically I need the opacity of the shadow elements (4 individual ones) to start at 10% opacity and while the user hovers, the type moves down (this part is working) and simultaneously the shadow becomes stronger, increases to 60% opacity. Then revert back to 10% when on mouseOut.
This line is wrong - it is passing a bunch of arguments to the $() function.
$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
As the documentation notes, jQuery doesn't expect N arguments as a selector, but 1:
$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo( 0, 0.1);
It is common (and good) practice to give a set of objects that should do something a common class or to select them in a smarter than just listing all their IDs. Based on your current HTML, this selector gets all the shadow <div>s in the menu, and is much shorter - you won't have to modify your code if you add a new menu element later on, for example:
$('div','#navigationFrame').fadeTo(0, 0.1);
I also see you have this:
<li id="work"><a id="work" ...>
This is really, really, wrong. IDs should be unique in the document. By having more than 1 ID in the document not only are you breaking best practices, ID selection on jQuery will go crazy and won't work as expected. Like the fadeTo selector, you can change the shadow changing code to a cleaner:
$('a','#navigationFrame').hover(function() {
$(this).next('div').fadeTo(200, 0.5);
}, function() {
$(this).next('div').fadeTo(400, 0.1);
});
I tested the website with these changes and it works fine.
What the selectors in my examples are doing is taking advantage of jQuery's context. By doing this:
$('a','#navigationFrame');
Or this:
$('div','#navigationFrame');
We are telling jQuery "only give me the <a> (or <div>) elements inside #navigationFrame.
It is equivalent to this:
$('#navigationFrame').find('a');
It is a good idea to take advantage of this. I see you have a tendency to manually list the elements you're trying to do stuff to do even if they are all similar in some way. Try to shake this habit and let jQuery's powerful selectors get what you want from the document.
I use this:
$(".thumbs img").addClass('unselected_img');
$('.thumbs img').click(function() {
$(this).addClass('selected_img');
if ($(this).is('selected_img')) {
$(this).removeClass('selected_img');
} else {
$('.thumbs img').removeClass('selected_img');
$(this).addClass('selected_img');
}
});
// hover the lists
$('.thumbs img').hover(
function() {
$(this).addClass('selected_img_h');
},
function() {
$(this).removeClass('selected_img_h');
});`
and style:
.selected_img
{
opacity: 1; filter: alpha(opacity = 100);
border:none;
}
.selected_img_h{
opacity: 1; filter: alpha(opacity = 100);
border:none;
}
.unselected_img
{
opacity: 0.6; filter: alpha(opacity = 60);
border:none;
}

Categories