I found an image slider on here and attempted to modify my existing slider I had to be more like the one I found. After tinkering with it, I am unable to get anything with it even working.
I created this to show what I am trying to do:
https://jsfiddle.net/xeud0rw6/
I'm basing it around this...http://gualini.adostudio.it/realizations_2.html#
I have added in my id's of
#thumb
and
#big
in attempts to modify this to make it work, but I think I am missing something. Does anyone see what I'm doing wrong?
Don't ask us to make your buggy code work, this question will not help anyone but yourself. I suggest you approach the authors of your plugin or at least specify the plugins you are speaking of.
Try this:
$(document).ready(function(){
var realSlider= jQuery("#big ul").bxSlider({
speed:1000,
pager:false,
nextText:'',
prevText:'',
infiniteLoop:false,
hideControlOnEnd:true,
onSlideBefore:function($slideElement, oldIndex, newIndex){
changeRealThumb(realThumbSlider,newIndex);
}
});
var realThumbSlider=jQuery("#big ul").bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 156,
slideMargin: 12,
moveSlides: 1,
pager:false,
speed:1000,
infiniteLoop:false,
hideControlOnEnd:true,
nextText:'<span></span>',
prevText:'<span></span>',
onSlideBefore:function($slideElement, oldIndex, newIndex){
/*jQuery("#thumb ul .active").removeClass("active");
$slideElement.addClass("active"); */
}
});
linkRealSliders(realSlider,realThumbSlider);
if(jQuery("#thumb li").length<5){
jQuery("#thumb .bx-next").hide();
}
// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
jQuery("#thumb ul").on("click","a",function(event){
event.preventDefault();
var newIndex=jQuery(this).parent().attr("slideIndex");
bigS.goToSlide(newIndex);
});
}
//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
var $thumbS=jQuery("#thumb");
$thumbS.find('.active').removeClass("active");
$thumbS.find('li[slideIndex="'+newIndex+'"]').addClass("active");
if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
else slider.goToSlide(slider.getSlideCount()-4);
}
});
Related
I'm new to charting and js and don't have much experience with js and jqplot so maybe someone can help me out?
I try to replot a jqplot meter gauge when the browser window is resized. I could find some examples during my research that seem to work fine but as soon as I try it myself, I can't make it work.
Here is my code:
A fiddle can be found here
$(document).ready(function(){
s1 = [72];
var plot0 = $.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[30, 60, 80, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#737373',
ringWidth: 0.00000000001,
background :"transparent",
intervalInnerRadius: 95,
hubRadius: 6,
showTicks: false,
needleThickness: 5,
showTickLabels: false,
}
}
});
$(window).resize(function() {
plot0.replot( { resetAxes: true } );
});
});
Maybe someone can see what I'm doing wrong? Any help is highly appreciated! I'm totally frustrated :(
UPDATE
So I read again through all the documents and found this little sentence on the jqplot homepage:
"A meterGauge plot does not support events."
So I guess it just won't work whatever I do?
Any other idea how to make the jqplot meter gauge responsive?
Wow, we finally found a solution.
For anybody else interested in the topic, here is how we did it in the end.
<script>
var plot0;
$(window).resize(function(){
$('#chart0').html('');
plotGauge();
});
$(document).ready(function(){
plotGauge();
});
s1 = [22]
function plotGauge(){
plot0 = $.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[30, 60, 80, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#737373',
ringWidth: 0.00000000001,
background :"transparent",
intervalInnerRadius: 95,
hubRadius: 6,
showTicks: false,
needleThickness: 5,
showTickLabels: false,
}
}
});
}
</script>
<div id="chart0"></div>
The above solution had problem with animation of graph(update data and replot), because when you have updated the data before resizing, again it shows from starting.So, you have to update the data before replot the graph.
But i found one more solution for this graph(i don't know what exact problem with graph), but somehow i had managed the graph replot by adding some dummy data to replot function. Please follow the below snippet.
$(window).resize(function() {
plot0.replot( { resetAxes: true, dummy:'dummy' });
});
The above snippet is working fine, and is best instead of creating new object.
Hope this is helpful.
I also faced this problem with Gauge replot.
What I did is passed a dummy parameter to replot and it worked for me.
$(window).resize(function() {
plot0.replot( { resetAxes: true, dummy: 'dummy' } );
});
I didn't dig into the jqPlot code, will open an issue in free time.
I am currently comparing our price slider http://www.showstyle.lu/homme/ to that on http://theme-lookz-responsive.webshopapp.com/en/designer/ and as you can see under filters if you drag the filter on our homepage (ShowStyle) the number value of the min & max do not update dynamically i.e. you have to guess where to let go of the slider and hope it lands on a price.
On the example website: if you drag the price filter the min & max values update dynamically making it easier to see what your settings are.
I tried comparing the code of both filter price boxes and saw this additional script they implemented but couldn't figure out if that is what caused it, I think it is but any idea how to re-enact that onto my template? Both are using the same CMS so utilising this code is permitted, it's just a comfort update. I managed to adjust the code but don't understand if I should replace the "ui" syntax with price-filter-range or min/max syntax.
Original Script
<script type="text/javascript">
$(function(){
$('#filter_form input, #filter_form select').change(function(){
$(this).closest('form').submit();
});
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 20,
values: [0, 20],
step: 1,
slide: function( event, ui){
$('.sidebar-filter-range .min span').html(ui.values[0]);
$('.sidebar-filter-range .max span').html(ui.values[1]);
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form').submit();
}
});
});
The 0/20 values are depending on the page you were on so I suppose that also needs to be dynamic based on the highest price item on the current catalog page
Any help is greatly appreciated, thanks a lot!
Try this:
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 750,
values: [$('#filter_form_min').val(), $('#filter_form_max').val()],
step: 1,
slide: function( event, ui){
$('.price-filter-range .min span').text(ui.values[0]);
$('.price-filter-range .max span').text(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
$('#filter_form').submit();
}
});
Please note this code (in my answer) been updated from the original due to a misunderstanding. I have also re-edited it to fix functionality that was broken by the inclusion of this code.
Edit: I just noticed that your site already includes the JS code
$(function(){
$('#filter_form input, #filter_form select').change(function(){
$(this).closest('form').submit();
});
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 750,
values: [0, 520],
step: 1,
slide: function( event, ui){
$('.sidebar-filter-range .min span').html(ui.values[0]);
$('.sidebar-filter-range .max span').html(ui.values[1]);
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form').submit();
}
});
});
However this code is being dynamically generated by the server (notice how 520 is embedded into the script)... The only reason it's not working is because it's expecting the class name to be sidebar-filter-range instead of price-filter-range. If you could just make the correct modification so that it's pointing to the correct elements then it should work.
At random times the buttons with a score not work. I dont understand why? Is there is a problem with js code? Tried it in chrome and ie
http://live.tennisofficial.ru/dev/operator/mobile/chair2.php#live
p.s. some php errors couz I manually turned off authorization.
there are looks like a lot of code but there is just a lot of if's
added: strange, Im commented everything in pointOne,Two function except
console.log("Point1 clicked");
and still dont work S:
added: removed everything... still have a problem
added: it works well with an <a>. So there is a problem with a buttton mechanics? I will change buttons for an <a> but still interesting why buttons didnt work? I hear smth about 300ms between button clicks, is it a problem?
<script>
$(document).on("pagebeforeshow","#live",function(){ // When entering page live
$("#pointOne").val("0");
$("#pointTwo").val("0");
$("#pointOne").button("refresh");
$("#pointTwo").button("refresh");
$point1 = 0;
$point2 = 0;
$sets1 = new Array (0, 0, 0, 0, 0, 0);
$sets2 = new Array (0, 0, 0, 0, 0, 0);
$score = new Array(0, 15, 30, 40, "Ad", "-", "Ad");
$currentset = 1;
//reload score
$("#gamescore").text("0:0");
$("#gamescore2").text("Sets: 0:0 0:0 0:0");
});
/*get id of match*/
/*END OF get id of match*/
$("#pointOne").on("click", function() {
console.log("Point1 clicked");
});
$("#pointTwo").on("click", function() {
console.log("Point2 clicked");
});
</script>
try adding:
$("#pointOne").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
...
I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/
I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)
Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.
What did I do wrong?
(Sorry I am totally new to JavaScript)
Here is my Jsfiddle: http://jsfiddle.net/7qDyq/1/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year
<div id="bill_slider">
</div>
$(document).ready(function(){
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (monthly_bill * 12 )
$("#monthly_bill").text(tasks_time);
$("#monthly_bill").text(tasks_done);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function() {
update();
}
});
});
Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...
Any help on this is greatly appreciated. Thanks!
Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/
If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.
I'm using this jQuery plugin called "jQuery illuminate"
It's working fine and looks great but one more thing that I want!
I only want it to illuminate for 5 seconds.
Then it should stop illuminating.
But it looks there's no option for that.
Is it possible to stop illuminating after 5 seconds have pased?
My code is this
jQuery(document).ready(function () {
$(document).on('click', 'a#request', function() {
$(".box#input").val($(this).attr('value'));
var input = $(".box#input");
$(document).scrollTop(input .offset().top - 60);
input.focus();
input.illuminate({
'intensity': '0.3',
'color': '#e8f7e7',
'blink': 'true',
'blinkSpeed': '1000',
'outerGlow': 'true',
'outerGlowSize': '20px',
'outerGlowColor': '#228b22'
});
});
});
Add this to the end of your script:
setTimeout(function() {
$("#button").illuminateDie();
}, 5000); // 5000ms = 5 seconds
That calls the illuminateDie function after five seconds. The existence of the illuminateDie function is sort of hidden away in a comment part-way down the page you linked. (That's also quite a non-standard way to do it. The standard way for a plug-in to provide methods like that is as a string you feed into the one plug-in method, e.g. .illuminate("die") or more normally .illuminate("destroy"). But it's what the author decided to do...)
Update: Live Example using code from the updated question (source).
Looks like $('#button').illuminateDie() should work.
It should be straight forward if look into source code.
<script type="text/javascript">
$(document).ready(function(){
$('#button').illuminate({
'intensity': '0.3',
'color': '#98cb00',
'blink': 'true',
'blinkSpeed': '1200',
'outerGlow': 'true',
'outerGlowSize': '30px',
'outerGlowColor': '#98cb00'
});
setTimeout(function() {
$("#button").illuminateDie();
}, 5000);
});
</script>
As you can see in the comments of the plugin. You might have wanted to check those out.