개발노예 코드와 일상

코드저장..

검색페이지를 만드는데

이번에는 주로하던 php 페이지가 아니라 java로 제작페이지여서

javascript로 검색결과에 검색어 표시를 해줘야했다

결과적으로는 크게 복잡하지않았다

search_filter();
function search_filter(){
var search = $('#searchKeyWord').val();
var sf_cnt = 0;
$(".sc_td").each(function () {
var regex = new RegExp(search,'gi');

    $(this).html( $(this).text().replace(regex, "<span class='text-danger bold'>"+search+"</span>") );

    sf_cnt = sf_cnt+1;
});

};

replace 함수를 사용하고있고
해당 구역에서 키워드 텍스트를 찾아서 span으로 한번 둘러싸주는 형식

순조롭게 적용되서 굳이었다

오래된 홈페이지 수정이 들어와서 수정중인데

캡차가 며칠사이 안뜬다고 해서 보는데

오류코드야 원래있던것도 억지로 수정해봐도 도통 이미지가 엑박이고

새로운 버전으로 넣어봐도그렇고

해결방법으론 

1. include된 파일들의 앞끝 공백을 없애고 

2. data/session 용량체크 , 기타 하드 용량체크

3. 폴더 권한체크

일주일사이 용량이 얼마나 찻겠냐만은...

일단 용량 비우는중인데 이정도로 대부분 해결됬다고하니

이미지뜨고 끝났으면 좋겠다

오랜만에 코드 글을쓴다

작업중에 애니메이션 요청이들어왔는데

숫자를 0~ ** 까지 올라가는 내용이었다

한두개면 그냥 수동으로 할텐데

수가 꽤 많아서 함수로 해두고 클래스명 통일해서 한번에 넣어버렸다

//스크롤 했을때 숫자 애니메이션이 동작하도록, 1회만 동작
//함수화 , 기능수정
var _once = 1;

    $(window).scroll( function(){
        var na_div = $(".now_wrap ").offset().top + 500;
        var _window = $(window).scrollTop() + $(window).height();


        if(na_div < _window && _once == 1){
            number_animation();

            _once = 2;
        }

    })

    function number_animation(){
        //숫자애니메이션
        $(".number_animation").each(function(index, element){
            var $this = $(this),
                goal_cnt = $this.text();

            $({ val : 0 }).animate({ val : goal_cnt }, {
                duration: 1000,
                step: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);

                },
                complete: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);
                }
            });
        })
    }
    function numberWithCommas(x) { //숫자콤마로 출력
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }  

    어우 줄바꿈 하기는 귀찮네
    일단 코드는 이렇게 되어있다

    목표 숫자를 일단 초기로 적어둔다

    .number_animation 으로 클래스를 통일해서 해당 div의 text값으로다가 목표로 해서 애니메이션을주었고


    이게 하다보니까 로드 하고 화면위치에 상관없이 애니메이션이 시작되서

    스크롤 내리면 밑에꺼는 끝나있더라
    그래서 .now_wrap 이라고 다시 감싸주고

    화면위치랑 해당 클래스 위치랑 비교해서 함수 실행하도록 설정했다

홈페이지 제작중

서브메뉴나 레이어를 화면 꽉차게 띄웠는데

안에 내용이 넘어가서 스크롤이되는경우

본 페이지와 중복되어 브라우저 스크롤이 두개이상으로 나오는 경우가있다

몹시 보기싫은 경우인데

이번에 css로 간단하게 수정해서 적어본다

일단 본페이지 스크롤은 html,body 로 적용되고있다

그래서 html,body에 height:100%와 overflow hidden을 주어서 본 스크롤을 없애고

위에 띄우는 레이어의 스크롤만 남기는 방식이다

자바스크립트나 제이쿼리로는

오픈할때 스타일 주고

닫을때 스타일 빼는 작업을 해주면 완성.

코딩할때 javascript나 jquery 에서 여러가지 슬라이더를 사용한다

자주 사용하는 스위퍼 슬라이더는 

옵션 자체에 반응형을 지원해서

간편하게 사용하고는한다

일단 js 파일들을 추가한다 css도 추가하던가

swiper.min.css

swiper.min.js

공홈이나 여러군데 돌아다니는걸로 다운받아서 선언해주고 

var swiper1 = new Swiper('#main-visual', {    
            //pagination: {
            //el: '.swiper-pagination',
            //    clickable: true,
            //    renderBullet: function (index, className) {
            //    return '<span class="' + className + '">' + (menu[index]) + '</span>';
            //    }
            //},
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            spaceBetween: 0, //30
            loop: true,
            autoHeight : true,
            autoplay: {
                delay:5000,
                disableOnInteraction: true
            },
        });

이렇게 기본형태로 사용하고있다

반응형 옵션이 필요할때는

breakpoints: { 

  320: { slidesPerView: 2, spaceBetween: 20 },

  640: { slidesPerView: 4, spaceBetween: 40 }

}

이렇게 옵션을 추가해준다

자바스크립트 메모

ajax로 구해온 정보를 다시 페이지에 삽입하려고할때

위치를 정해서 집어넣으면 편한데

이게 갯수가 변동할수있다거나

줄이 바뀌는,

이번경우에는 품목을 추가 삭제할수있는 변동성이 있는 구조여서

거기다 맨 하단에는 합계를 넣어줘야했기에

맨하단 윗칸에 넣어야했다

뭐 테이블구조로 작업을 해둬서 약간 애매하긴했는데

그래도 원래 명령어가 다 있어서

수월하게 풀렸다

 - after()

 지정한 요소 뒤에 새로운 요소를 삽입 

 A.after(B) - A 뒤에 B를 추가

 - insertAfter()

 지정한 요소 뒤에 새로운 요소를 삽입

 A.insertAfter(B - B 뒤에 A 를 추가

 - before()

 지정한 요소 시작 부분에 내용을 삽입 

 A.berfore(B) - A 앞에 B를 추가

 - insertBefore()

 지정한 요소 시작 부분에 내용을 삽입

 A.insertBefore(B) - B 앞에 A 를 추가

요즘 바빠죽겠다

연말이라 그런가 전화가 쏟아지고 수정사항에 추가사항에

다들 보고서 요청도있고

머리가아프네

일단 시청시간을 초로 db에 받아놨는데

시분초로 계산해서 출력해달라는 요청이있었다

이게 그냥 처리할랫더니 여간 귀찮은게 아니어서

뒤적거리다 함수하나 괜찮아서

적어놔본다

//시간구하기
if ( ! function_exists('get_time_array')) {
function get_time_array($time)
{
global $g5, $pk;
$return = '';

    //시분초로변환
    $full_sec = floor($time);
    $hour = floor($full_sec / 60 / 60) % 24;
    $min = floor($full_sec / 60) % 60;
    $sec = floor($full_sec % 60);

    //array_push($time_arr,$hour);
    //array_push($time_arr,$min);
    //array_push($time_arr,$sec);
    //$return = $time_arr;

    $return = $hour.'시'.$min.'분'.$sec.'초';
    return $return;
}

}

게시판이외에 따로 페이지생성시에

체크박스를 체크하는기능을 사용하고있었는데

이제 리스트 하단부에 선택수정과 삭제등등 옵션을추가하면서

내가 몇개를 체크했는지와 하단에서도 전체체크를 추가하면서 약간 스크립트를 추가했다

별건아닌데 체크한 숫자가 눈에보이니까 좀 편한거같기도하고 쓸데없는거같기도하고

$('[name="chk[]"]').on('click',function(){ var $this = $(this), $number = $(".number").val(); var tmp; if($this.is(':checked')){ $tmp = parseInt($number)+1; }else{ $tmp = parseInt($number)-1; if(tmp<0){ $tmp = 0; } } $('.number').val($tmp); }) // 모두선택 $('#chkall').on('click', function() { var $this = $(this), $that = $this.closest('table').find('tr[data-bunch]'), check = $('[name="db_id[]"]:enabled'); check.prop('checked', $this.is(':checked') ? true : false); if ($this.is(':checked')) { $that.addClass('checked'); //선택된갯수추가 $(".number").val($that.length); } else { $that.removeClass('checked'); $('[data-proto]').val(function() { return $(this).data('proto') }); //선택된갯수추가 $(".number").val('0'); } });

엥 스크립트가 한줄로들어가보리네

html 관련은 뭐 input 쪽 네임정도와 클래스만 보고 따로 추가하면 될거같다