Hi everyone i have site I'm designing, but i need a effect to be change in the slider to getting sliced effect.
Current code & Site:
http://www.summerskymusic.net
// options
var accordion = $(this);
var items = accordion.find(':has('+options.slider+')');
items.each(function(){
var item = $(this);
var opener = item.find(options.opener);
var slider = item.find(options.slider);
opener.bind(options.event, function(e){
if(!slider.is(':animated')) {
if(item.hasClass(options.activeClass)) {
if(options.collapsible) {
slider.slideUp(options.animSpeed, function(){
hideSlide(slider);
item.removeClass(options.activeClass);
});
}
} else {
// show active
var levelItems = item.siblings('.'+options.activeClass);
var sliderElements = levelItems.find(options.slider);
item.addClass(options.activeClass);
showSlide(slider).hide().slideDown(options.animSpeed);
// collapse others
sliderElements.slideUp(options.animSpeed, function(){
levelItems.removeClass(options.activeClass);
hideSlide(sliderElements);
});
}
}
e.preventDefault();
});
if(item.hasClass(options.activeClass)) showSlide(slider); else hideSlide(slider);
});
});
};
Example of What i want to achieve site:
http://tympanus.net/Development/Slicebox/
Thank you.
Related
I have issue in flask project, i need set up two js with one link if both was clicked or checked.
For example my data table do changes if clicked check box or selected from multi select some options.
But need make them both if selected and clicked (can be only selected or only just clicked). But need make and option for both
For make issue more clearly after get checked send value in the python function.
I think problem with url.
My js code.
// MULTISELECT
$('.selectpicker').on('change', function() {
selectedServices = $(this).val();
alert(selectedServices)
var url = '/api/VERSION/DATABALE/get?groupFilter='+ selectedServices
console.log('new URL'+url);
table.ajax.url(url).load();
table.ajax.reload();
});
// CHECK BOX
$('input[name="checkboxGroup1"]').on("click", function(){
console.log("Filter clicked")
var own = false;
var own = false;
// var id = parseInt($(this).val(), 10);
if($('#own').is(":checked")) { var f_own = true;}
else { var f_own = false; }
if($('#research').is(":checked")) { var f_research = true;}
else { var f_research = false; }
var url = '/api/VERSION/DATABALE/get?f_own='+ f_own +'&f_research='+ f_research
console.log('new URL'+url);
table.ajax.url(url).load();
table.ajax.reload();
});
So need somehow combine this js. IF only selected options send this selectedServices if checked checkbox send only values from checkbox js. IF selected or clicked both send both values.
I try combine like this
$('.selectpicker').on('change'); or ('input[name="checkboxGroup1"]').on("click", function(){
selectedServices = $(this).val();
console.log("Filter clicked")
var own = false;
var research = false;
if($('#own').is(":checked")) { var f_own = true;}
else { var f_own = false; }
if($('#research').is(":checked")) { var f_research = true;}
else { var f_research = false; }
alert(selectedServices)
var url = '/api/VERSION/DATABALE/get?groupFilter='+ selectedServices + '&f_own='+ f_own +'&f_research='+ f_research
console.log('new URL'+url);
table.ajax.url(url).load();
table.ajax.reload();
});
I dont getting any error, but it not change date in my datatable too, when i combine my js code
Any idea how to solve it? all help will be appreciated
I created a side menu in css and want to use the the tranform: translateX() property to slide it on and off on the page. I'm using a checkbox to toggle the menu on and off. So I thought I can use javascript to make it function, but it's not working. Can you edit the transform property through javascript?
here's the code...
window.onload = function () {
var toggle_btn = document.getElementById('toggle_btn');
var slide_menu = document.getElementById('slide_menu');
var checked = function() {
toggle_btn.checked = true;
};
if (checked === true) {
slide_menu.style.transform = "translateX(0px)";
} else {
slide_menu.style.transform = "translateX(-200px)";
}
};
Try:
window.onload = function () {
var toggle_btn = document.getElementById('toggle_btn'),
slide_menu = document.getElementById('slide_menu');
slide_menu.style.transform = toggle_btn.checked=== true ? "none" : "translateX(-200px)";
};
BTW - you don't need javascript for this: http://jsfiddle.net/w5te8qqx/1/
I want to make 4 buttons that are:
when you click on it,the one chosen, its background-image changed, the other 3 remain the original background image unless user hover it ,while user hover the buttons it changes its background-image .
If I only use :hover, or :active,after clicked,the background image will revert to original when I release mouse,or just moved away mouse, if I use click function, after it changed background image it cannot be revert or have to type a long piece codes to control it.What is the simplest way to make these 4 buttons?
I tried this: abit clumsy, I have :hover in css, but it is actually missing the hover effect for this code
$s_btn_1.on('click',function() {
if (chosen!=1){
chosen = 1;
console.log('chosen');
$.get("services_1.php", function(data){
// $service_box.html(data);
});
return_default();
$folder1.css('background',"url('images/services/btn1_hover.png')");
$folder1.css('background-size',"100% 100%");
}
});
$s_btn_2.on('click',function() {
if (chosen!=2){
chosen = 2;
console.log('chosen');
$.get("services_2.php", function(data){
// $service_box.html(data);
});
return_default();
$folder2.css('background',"url('images/services/btn2_hover.png')");
$folder2.css('background-size',"100% 100%");
}
});
$s_btn_3.on('click',function() {
if (chosen!=3){
chosen = 3;
return_default();
$folder3.css('background',"url('images/services/btn3_hover.png')");
$folder3.css('background-size',"100% 100%");
}
});
$s_btn_4.on('click',function() {
if (chosen!=4){
chosen = 4;
return_default();
$folder4.css('background',"url('images/services/btn4_hover.png')");
$folder4.css('background-size',"100% 100%");
}
});
//$("#service_btn").addClass(".folder1_hover");
function return_default(){
$folder1.css('background-image',"url('images/services/btn1.png')");
$folder2.css('background-image',"url('images/services/btn2.png')");
$folder3.css('background-image',"url('images/services/btn3.png')");
$folder4.css('background-image',"url('images/services/btn4.png')");
$folder1.css('background-size',"100% 100%");
$folder2.css('background-size',"100% 100%");
$folder3.css('background-size',"100% 100%");
$folder4.css('background-size',"100% 100%");
}
});
I just finished my aim so I post my code here, I think it is the simplest way,and clear
$(document).ready(function() {
var btns = {
'bg_o' : ['images/services/btn1.png','images/services/btn2.png','images/services/btn3.png','images/services/btn4.png'],
'bg_h' : ['images/services/btn1_hover.png','images/services/btn2_hover.png','images/services/btn3_hover.png','images/services/btn4_hover.png'],
'$all_btn' : $('.all_btn'),
'$folders':[$('#folder1'),$('#folder2'),$('#folder3'),$('#folder4')],
'folders_status':new Array('inactive','inactive','inactive','inactive')
,jquery_func : function(){
btns.$all_btn.each(function(){
$(this).click(function(){
for(i=0;i<4;i++){
var imageurl_o = new Array();
imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
btns.$folders[i].css(imageurl_o[i]);
btns.folders_status[i]='inactive';
}
for(i=0;i<4;i++){
var myparent = btns.$folders[i].parent();
if($(this).attr('class') == myparent.attr('class')){
var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
btns.$folders[i].css(imageurl_h);
btns.folders_status[i]='active';
}
}
});
$(this).mouseover(function(){
for(i=0;i<4;i++){
var imageurl_o = new Array();
imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
if(btns.folders_status[i]=='inactive')
btns.$folders[i].css(imageurl_o[i]);
}
for(i=0;i<4;i++){
var myparent = btns.$folders[i].parent();
if($(this).attr('class') == myparent.attr('class')){
var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
btns.$folders[i].css(imageurl_h);
}
}
});
});
}
}
btns.jquery_func();
});
I'm trying to add some functionality to be able to edit comments inline. So far it's pretty close, but I'm experiencing issues trying to trigger a second event. It works the first time, but after that, fails.
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').append('saved');
clicked = false;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});
jsfiddle demo here
Hiya demo for your working solution: http://jsfiddle.net/8P6uz/
clicked=true was the issue :)) I have rectified another small thing. i.e. $('#output') is set to empty before appending another saved hence text **saved** will only appear once.
small note: If I may suggest use Id of the button or if there are many edit buttons try using this which you already i reckon; I will see if I can write this more cleaner but that will be sometime latter-ish but this should fix your issue. :) enjoy!
Jquery Code
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').text("");
$('#output').append('saved');
clicked = true;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});
so im a little rusty with my JS, but here is my code...
basically i have an image, that on mouseover, it cycles through a hidden div full of other images... fading it out, replacing the src, and fading back in. it works great. but once it gets through all the images, i want it to start back over and keep looping through them until the mouseout event stops it.
i thought i could just call the function again from within the function cycle_images($(current_image));, but that leads to the browser freaking out, understandably. what is a good method to accomplish this?
$.fn.image_cycler = function(options){
// default configuration properties
var defaults = {
fade_delay: 150,
image_duration: 1500,
repeatCycle: true,
};
var options = $.extend(defaults, options);
this.each(function(){
var product = $(this);
var image = $('div.image>a.product_link>img', product);
var description = $('div.image>div.description', product);
var all_images = $('div.all_images', product);
var next_image = ($(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img').attr('src')) ? $(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img') : $(all_images).children('img').first();;
// mouseover
image.fadeOut(options.fade_delay, function(){
image.attr('src', next_image.attr('src'));
image.fadeIn(options.fade_delay);
});
if (options.repeatCycle){
var loop = function() {
product.image_cycler();
}
setTimeout(loop,options.image_duration);
}
});
};
$(document).ready(function() {
$('div.product').hover(function(){
$(this).image_cycler();
}, function(){
$(this).image_cycler({repeatCycle: false});
});
});
It sounds like you want it to re-cycle and stop on mouseout.
After you define the cycle_images() function, add a flag, repeatCycle
cycle_images.repeatCycle = true;
At the end of the cycle_images function, add a recursive call with a timeout
if (this.repeatCycle) {
var f = function() {
return cycle_images.apply(this, [$current_image]);
}
setTimeout(f,50);
}
Then in mouseout,
cycle_images.repeatCycle = false;