Home
Hello
I have a problem with this code
Do not save your changes
This code places a specific color into a specific item, but a problem occurs when the page is not updated and it returns to its default state
If you can help
- Show icon:
- Code:
$(document).ready(function(){
$(function(){
$('#colorwheel .colors').each(function(i){
$(this).attr('id','color_' + ++i);
});
});
var speed = 500;
function hex(rgb){
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return '#' +
('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +
('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +
('0' + parseInt(rgb[3],10).toString(16)).slice(-2);
}
$(function(){
$('.prev').bind('click',function(){ slide('prev'); });
$('.next').bind('click',function(){ slide('next'); });
$('.colors').last().addClass('active');
function slide($control) {
var $active = $('.active'),
$next = $active.next().length ? $active.next() : $('.colors').first(),
$prev = $active.prev().length ? $active.prev() : $('.colors').last();
console.log('next',$next);
console.log('prev',$prev);
if ($control === 'next'){
console.log($control);
$active.removeClass('active');
$next.addClass('active');
var $activeBg = $('.active .color').first().css('backgroundColor');
$('#info .info-bg').animate({ backgroundColor: $activeBg },speed);
$('#info .arrow').animate({ 'border-bottom-color': $activeBg },speed);
var big = $('.active .color').first().css('backgroundColor'),
medium = $('.active .color').first().next().css('backgroundColor'),
small = $('.active .color').last().css('backgroundColor');
$('#info .values .big span').text(hex(big));
$('#info .values .medium span').text(hex(medium));
$('#info .values .small span').text(hex(small));
}
if ($control === 'prev'){
console.log($control);
$active.removeClass('active');
$prev.addClass('active');
var $activeBg = $('.active .color').first().css('backgroundColor');
$('#info .info-bg').animate({ backgroundColor: $activeBg },speed);
$('#info .arrow').animate({ 'border-bottom-color': $activeBg },speed);
var big = $('.active .color').first().css('backgroundColor'),
medium = $('.active .color').first().next().css('backgroundColor'),
small = $('.active .color').last().css('backgroundColor');
$('#info .values .big span').text(hex(big));
$('#info .values .medium span').text(hex(medium));
$('#info .values .small span').text(hex(small));
}
}
});
$(function(){
var $activeBg = $('.active .color').first().css('backgroundColor');
$('#info .info-bg').css({ backgroundColor: $activeBg });
$('#info .arrow').css({ 'border-bottom-color': $activeBg });
var big = $('.active .color').first().css('backgroundColor'),
medium = $('.active .color').first().next().css('backgroundColor'),
small = $('.active .color').last().css('backgroundColor');
$('#info .values .big span').text(hex(big));
$('#info .values .medium span').text(hex(medium));
$('#info .values .small span').text(hex(small));
});
$(function(){
var $frame = $('.frame'), angle = 0;
$('.next').rotate({
bind: {
click: function(){
angle -= 30;
$frame.rotate({ duration: speed*2, animateTo: angle, easing: $.easing.easeOutElastic });
}
}
});
$('.prev').rotate({
bind: {
click: function(){
angle += 30;
$frame.rotate({ duration: speed*2, animateTo: angle, easing: $.easing.easeOutElastic });
}
}
});
});
});
