728x90

숫자형식의 값을 화면에 보여줄때에는 화폐단위처럼 숫자 3자리마다 콤마(comma)를 추가해주면 가독성이 좋아진다.

프로그래밍 언어별로 이러한것을 처리하기 위해 숫자를 특정 형식대로 포맷팅 해줄수가 있는데, 자바스크립트는 그러한 기능이 없다. 물론 우리들이 흔하게 사용하년 jQuery에도 그러한 기능은 없다. (jQuery는 숫자형식을 컨트롤 하는 플러그인이 있다)

그렇기 때문에 숫자를 화페단위처럼 3자리마다 콤마를 넣어주긴 위해선 해당 기능을 하는 함수를 만들어서 사용해야 한다.

일반적으로 인터넷에서 검색했을때 제일 많이 나오는 함수는 아래와 같다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function comma(num){
    var len, point, str; 
       
    num = num + ""; 
    point = num.length % 3 ;
    len = num.length; 
   
    str = num.substring(0, point); 
    while (point < len) { 
        if (str != "") str += ","; 
        str += num.substring(point, point + 3); 
        point += 3; 
    } 
     
    return str;
 
}



위의 함수의 경우 나와 같이 일을 하는 막내직원이 어디선가 긁어와서 사용중인 함수인데, 위와 같이 while문을 통해
자릿수마다 콤마를 추가하고 있다. 

위 방법보다는 공백제거 함수처럼 정규식을 사용할수 있지 않을까 해서 검색해보니 stackoverflow에 떡하니 있다 !!

?
1
2
3
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}



심플하다 !!

참고 : http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript



출처: http://fruitdev.tistory.com/160 [과일가게 개발자]

'WEB > jQuery' 카테고리의 다른 글

jQuery checkbox values to comma separated list  (0) 2018.01.22
jQuery event to trigger action when a div is made visible  (0) 2018.01.22
jQuery Change Image src with Fade Effect  (0) 2018.01.14
jQuery change() Method  (0) 2018.01.14
PHP array_push  (0) 2018.01.14
728x90

I'm trying to create an effect where you click on a thumbnail image, and the link to the thumbnail will replace the main image, but fade it in. This is the code I'm currently using:

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery").fadeIn(400, function() {
        $(".boat_listing .mainGallery").attr('src',$imgURL);
    });
});

This works and replaces the image without a fade effect. What do I need to change to get the fadeIn effect to work?

  
shareimprove this question
up vote67down voteaccepted

You have to make it fadeOut() first, or hide it.

Try this :

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery")
        .fadeOut(400, function() {
            $(".boat_listing .mainGallery").attr('src',$imgURL);
        })
        .fadeIn(400);
});

It should fadeOut the image, then change the src when it's hidden, and then fadeIn.

Here's a jsFiddle example.

shareimprove this answer
up vote29down vote

I thing instead of using FadeIn and fadeOut, its better to use fadeTo functionality as fadeIn and fadeOut created a time gap between them for few micro-seconds.

I have used above code from Sylvain : thanks to him

$("#link").click(function() {

  $("#image").fadeTo(1000,0.30, function() {
      $("#image").attr("src",$("#link").attr("href"));
  }).fadeTo(500,1);
  return false;
});
shareimprove this answer
   
I had the same issue; thanks for this fix. – John 'Mark' Smith Apr 15 '14 at 15:36
   
I had issues with making fadeIn/fadeOut work for Firefox. This solution works for all browsers. Thanks! – DIGApr 9 '15 at 17:53
   
This works better for me. Thanks! – Juni Brosas Jun 18 '15 at 7:24
   
Yeah, this solution is better, thanks – punov Jan 27 '16 at 8:16
up vote0down vote

You cannot fade-in something that is already at 100% alpha :)

In other words, you either fade it out or hide it, and then fade it in.

I made this example, basically, I hide it and then fade it:

http://jsfiddle.net/uGFMt/

shareimprove this answer
up vote0down vote

I reproduced the given samples above. It gives a strange flickering, which I found that it waits for image to load after it's opacity is restored to 1. I modified the code by Sandeep.

$("#link").click(function() {

$("#image").fadeTo(1000,0.30, function() {
  $("#image").attr("src",$("#link").attr("href"));
  $("#image").on('load', function(){
    $("#image").fadeTo(500,1);
  });
 });
 return false;
});`
shareimprove this answer


'WEB > jQuery' 카테고리의 다른 글

jQuery event to trigger action when a div is made visible  (0) 2018.01.22
[Javascript] 숫자 3자리 단위마다 콤마(comma) 찍기  (0) 2018.01.14
jQuery change() Method  (0) 2018.01.14
PHP array_push  (0) 2018.01.14
Fatal error: Call to a member function query() on null  (0) 2018.01.14
728x90

Example

Alert a text when an <input> field is changed:

$("input").change(function(){
    alert("The text has been changed.");
});
Try it Yourself »

Definition and Usage

The change event occurs when the value of an element has been changed (only works on <input>, <textarea> and <select> elements).

The change() method triggers the change event, or attaches a function to run when a change event occurs.

Note: For select menus, the change event occurs when an option is selected. For text fields or text areas, the change event occurs when the field loses focus, after the content has been changed.

Syntax

Trigger the change event for the selected elements:

$(selector).change()Try it

Attach a function to the change event:

$(selector).change(function)Try it


ParameterDescription
functionOptional. Specifies the function to run when the change event occurs for the selected elements



jQuery Change 이벤트에서 input, textarea 에서 change 가 trigger 되는 경우는, 해당 박스의 데이터가 바뀌고 나서 포인터가 다른곳으로 눌러졌을때 발동된다. (즉 그 칸안에 있으면 안된다는 소리다)

'WEB > jQuery' 카테고리의 다른 글

[Javascript] 숫자 3자리 단위마다 콤마(comma) 찍기  (0) 2018.01.14
jQuery Change Image src with Fade Effect  (0) 2018.01.14
PHP array_push  (0) 2018.01.14
Fatal error: Call to a member function query() on null  (0) 2018.01.14
Fatal error: Call to a member function fetch_array() on a non-object  (0) 2018.01.14
728x90

.mouseleave( handler )Returns: jQuery

Description: Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

This method is a shortcut for .on('mouseleave', handler) in the first two variations, and .trigger('mouseleave') in the third.

The mouseleave JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.

For example, consider the HTML:

1
2
3
4
5
6
7
8
9
10
<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>
Figure 1 - Illustration of the rendered HTML

The event handler can be bound to any element:

1
2
3
$( "#outer" ).mouseleave(function() {
  $( "#log" ).append( "<div>Handler for .mouseleave() called.</div>" );
});

Now when the mouse pointer moves out of the Outer <div>, the message is appended to <div id="log">. You can also trigger the event when another element is clicked:

1
2
3
$( "#other" ).click(function() {
  $( "#outer" ).mouseleave();
});

After this code executes, clicks on Trigger the handler will also append the message.

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

Additional Notes:

  • As the .mouseleave() method is just a shorthand for .on( "mouseleave", handler ), detaching is possible using .off( "mouseleave" ).

Example:

Show number of times mouseout and mouseleave events are triggered. mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseleave demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="out overout">
  <p>move your mouse</p>
  <div class="in overout"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
<div class="out enterleave">
  <p>move your mouse</p>
  <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<script>
var i = 0;
$( "div.overout" )
  .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
  })
  .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
    $( "p:last", this ).text( ++i );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
  })
  .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );
    $( "p:last", this ).text( ++n );
  });
</script>
 
</body>
</html>

Demo:


'DB' 카테고리의 다른 글

SQL Database Performance Tuning for Developers  (0) 2018.04.10
[MSSQL]sqlsrv_fetch_array  (0) 2018.02.05
[MSSQL]sqlsrv_execute  (0) 2018.02.05
mysqli_result::fetch_array  (0) 2018.01.14
mysqli::query  (0) 2018.01.14

+ Recent posts

티스토리툴바