시간과 공간 그리고 진실의 방

망보드 소개

망보드 WP는 워드프레스 플러그인 형태로 제공되는 프로그램으로 자료실, 갤러리, 캘린더, 회원관리, 쇼핑몰, 소셜 로그인, 소셜공유, 검색엔진최적화 등의 다양한 기능을 제공합니다.

망보드는 웹에서 모바일앱까지 한번에 제작할 수 있도록 개발되어 필요에 따라 회원관리(비즈니스 패키지), 쇼핑몰(커머스 패키지), 모바일앱(모바일 패키지) 등의 기능을 추가해서 사용할 수 있고, 모든 기능이 하나의 플러그인으로 통합되어 빠른 속도로 동작합니다.

망보드의 장점

• 빠르게 변화하는 기술, 플랫폼에 보다 쉽게 대응할 수 있다
• 커스트마이징을 위한 게시판으로 구조를 쉽게 변형할 수 있다
• 데스크탑, 태블릿, 모바일 등 다양한 디바이스에 맞는 반응형웹 구축이 가능하다
• 플러그인 기능을 통해 다양한 기능을 추가할 수 있다
• 다국어 기능 및 보안 인증서(SSL) 기능을 지원한다

망보드 버젼별 특징

베이직 : MB-BASIC

• 기능: 자료실, 갤러리, 캘린더, 웹진, 문의하기, 자주묻는질문 게시판
• 특징: 다양한 확장 기능들이 모듈로 분리되어 있어 언제든지 쉽고 빠르게 원하는 기능을 추가해서 사용하실 수 있습니다
• 다운로드: https://www.mangboard.com/download/

비즈니스(회원관리) 패키지 : MB-BUSINESS

• 기능: 소셜 로그인, 소셜 공유, 검색 최적화 기능(SEO), 회원 관리(로그인, 회원가입, 회원정보 등)
• 특징: 망보드 소셜로그인 기능은 중간에 다른 서버를 거치지 않기 때문에 보다 안전하게 이용하실 수 있습니다
• 다운로드: https://www.mangboard.com/store/?vid=91
• 다운로드(소셜): https://www.mangboard.com/store/?vid=9

커머스(쇼핑몰) 패키지 : MB-COMMERCE

• 기능: 상품관리, 카트, 관심상품, 결제, 주문관리 기능 등
• 특징: 망보드 기반으로 개발되어 다른 워드프레스 쇼핑몰에 비해 가볍고 빠른 속도로 동작합니다
• 다운로드: https://www.mangboard.com/store/?vid=10

테마 패키지 : MB-THEME

• 특징: 망보드를 이용한 커뮤니티 또는 고급 사이트 제작을 위해 가볍게 제작만들어진 테마
• 샘플주소: http://demo.mangboard.com/
• 다운로드: https://www.mangboard.com/store/?vid=103

모바일 패키지 : MB-MOBILE

• 기능: 망보드에서 제공하는 게시판,회원관리,쇼핑몰 기능을 하이브리드 모바일앱으로 제공
• 특징: 모바일 패키지는 주문제작 형태로만 지원(안드로이드, IOS)
• 제작문의: https://www.mangboard.com/order/?idx=4

에디터 패키지 : MB-EDITOR

• 기능: HTML5 Canvas 기반의 문서편집 에디터로 파워포인트와 유사한 온라인 편집 기능 제공
• 특징: 스마트 에디터 및 CK 에디터와 연동해서 사용가능, 에디터로 작성된 내용을 이미지로 생성
• 샘플주소: http://demo.mangboard.com/hometory-editor2/
• 제작문의: https://www.mangboard.com/order/?idx=8

망보드 게시판 무료 스킨

자료실 게시판

갤러리 게시판

캘린더 게시판

웹진 게시판

문의하기 게시판

자주묻는질문 게시판

망보드 게시판 설치하기

1. 망보드 플러그인 설치파일을 워드프레스 "/wp-content/plugins" 폴더에 업로드 합니다

  (워드프레스 플러그인 검색에서 "mangboard"로 검색해서 설치도 가능합니다)

2. 관리자 화면에서 "플러그인>설치된 플러그인" 목록에서 "MangBoard WP" 플러그인을 찾아 활성화 버튼을 클릭합니다

3. 망보드 플러그인에서 비활성화 버튼이 보이면 정상적으로 플러그인 활성화 됩니다.

4. 망보드에서 파일 업로드를 하기 위해서는 wp-content 폴더의 권한을 757로 설정하셔야 합니다

망보드 게시판 추가하기

1. MangBoard 메뉴에서 게시판 관리 메뉴를 클릭합니다

2. 우측하단에 게시판 추가 버튼을 클릭해 게시판 추가화면으로 이동합니다

3. 게시판 이름을 board1로 입력하고, 나머지 설정을 입력한 후 확인 버튼을 클릭해 게시판을 추가합니다

4. 추가된 게시판 목록에서 [mb_board name="board1" style=""]  Shortcode를 복사합니다

 - 자료실 게시판 숏코드 [mb_board name="board1" style=""]

 - 갤러리 게시판 숏코드 [mb_board name="board1" list_type="gallery" style=""]

 - 캘린더 게시판 숏코드 [mb_board name="board1" list_type="calendar" style=""]

 - 웹진 게시판: 자료실 게시판 숏코드 - webzine 모델 설정

 - 문의하기 게시판: 자료실 게시판 숏코드 - form 모델 설정(문의내용 작성시 관리자 메일로 전송)

 - 자주 묻는 질문 게시판: 자료실 게시판 숏코드 - faq 모델 설정

5. 관리자 메뉴에서 페이지>새 페이지 추가 메뉴를 클릭해서 새 페이지 추가 화면으로 이동합니다
  에디터에 게시판 Shortcode를 붙여 넣고, 공개하기 버튼을 클릭해 망보드 게시판과 페이지를 연결합니다.

6. 관리자 메뉴에서 외모>메뉴 메뉴를 클릭해 메뉴 편집 화면으로 이동합니다

  새로 추가한 자료실 게시판을 선택하고 메뉴에 추가 버튼을 클릭해 메인 메뉴에 추가한 다음 메뉴 저장 버튼을 클릭합니다

7. 홈페이지에서 추가한 자료실 게시판 메뉴를 클릭하고, 자료실 게시판이 보이면 정상적으로 게시판 추가가 완료되었습니다

설치방법 및 게시판 추가 동영상

2076

580

I have this input element:

<input type="text" class="textfield" value="" id="subject" name="subject">

Then I have some other elements, like other text inputs, textareas, etc.

When the user clicks on that input with #subject, the page should scroll to the last element of the page with a nice animation. It should be a scroll to bottom and not to top.

The last item of the page is a submit button with #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

The animation should not be too fast and should be fluid.

I am running the latest jQuery version. I prefer to not install any plugin but to use the default jQuery features to achieve this.

javascript jquery

shareimprove this question

edited Sep 26 '17 at 12:18

Maistrenko Vitalii

9441613

asked Jul 13 '11 at 9:49

DiegoP.

18.6k2881100

•  

  developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView – Christophe Roussy Dec 9 '18 at 13:25

add a comment

28 Answers

activeoldestvotes

3739

Assuming you have a button with the id button, try this example:

$("#button").click(function() { $([document.documentElement, document.body]).animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); });

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(document).ready(function (){ $("#click").click(function (){ $('html, body').animate({ scrollTop: $("#div1").offset().top }, 2000); }); }); </script> <div id="div1" style="height: 1000px; width 100px"> Test </div> <br/> <div id="div2" style="height: 1000px; width 100px"> Test 2 </div> <button id="click">Click me</button> </html>

 Run code snippet

Expand snippet

shareimprove this answer

edited Jul 8 '18 at 14:48

php_nub_qq

7,350144397

answered Jul 13 '11 at 9:52

Steve

42k42637

• 21

  This will not work in all cases. See stackoverflow.com/questions/2905867/… – Jānis Elmeris Apr 25 '12 at 14:43

• 6

  @BarryChapman not exactly. After googling I've found this, so both tags are needed if you don't want to have extra logic per browser type. – s3m3n May 10 '13 at 0:01 

• 69

  If you don't want animation, and instead want to jump instantly to the element, use .scrollTop(…) instead of .animate({scrollTop: …}, …). – Rory O'Kane Sep 20 '13 at 19:53 

• 9

  In addition to you're solution (which works great), you can add an on complete function that adds the hashtag to the url. In this case it won't scroll, because the scrollTo already scrolled to the right position, and if a user copies the URL it will automatically snap to the right place on the page. – Sander Jan 23 '14 at 8:09

• 7

  if you use a callback to run when the animation is complete and notice the callback fires twice with this solution, try using "$('html body').animate(..." instead of "$('html, body').animate(..." the comma created two animate events. one for html, one for body. you really just want one for the html body Thanks @T.J. Crowder stackoverflow.com/questions/8790752/… – BoatCode Mar 20 '15 at 16:17 

show 19 more comments

Adding custom scripts to Divi

Let’s say you’ve found a JavaScript (or jQuery, which is the “Write Less, Do More” JavaScript library) code snippet and you’d like to include it in your Divi website. There is a few ways you can go about doing it. One of options would be to use the Code Module.

Option 1 – Code Module

You need to make sure your code is wrapped in <script> </script> tags. Simply paste your code in the Code Module, like this:

This is the code used in the example above:

<script> jQuery(function($){ alert('Hi! This is working!'); }); </script>

Using Code Module is a good option if you want your code to run only on one specific page. But if you want your code to run on every page, it would be better to add it to the <head> tag of your website via Theme Options.

Option 2 – Divi Theme Options

To add a code to every page navigate to Divi Theme Options > Integration tab.  Make sure the “Enable header code” option is checked, and paste your code below.

You can also place your code in a file with JS extension (e.g. my-scripts.js) and use this method to include it. You would need to login to your WordPress site via FTP or cPanel, whichever method you prefer. If you’re using cPanel, go to File Manager to access your site’s files. Locate your child theme folder and create a js folder in it and upload your file inside of this folder. The url for your file will look something like this: http://yoursite.com/wp-content/themes/yourchildtheme/js/my-scripts.js

To get your site to load external JS file (e.g. your own code or some jQuery plugin) add a code like this with modified url source.

<script src="http://yoursite.com/wp-content/themes/yourchildtheme/js/my-scripts.js"></script>

The last method is a bit more advanced, but it is the approach recommended by WordPress.

Option 3 – Enqueuing scripts via functions.php

With this example I’m assuming you are using a Divi Child Theme and you uploaded your scripts file to “js” folder inside your child theme files. You can add the code below to your functions.php file:

function mycustomscript_enqueue() { wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/my-scripts.js' ); } add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );

If your script relies on jQuery library you can modify it like this to make sure jQuery will be loaded as well:

function mycustomscript_enqueue() { wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/my-scripts.js', array( 'jquery' )); } add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );

Just don’t forget to change this code to match your file name.

And that’s it – you’ve successfully loaded custom JavaScript to your divi website 🙂

UPDATE xe_documents SET content=REPLACE(content, "바꿀내용에 쌍따옴표가", "가능할까요?");

바꿀내용에 쌍따옴표가 있는데 검색이 될까요?

감사합니다.

 0좋은질문

댓글 9

• 

  • 

    DoubleU
  • 2016.10.25 10:06:22
   
  • #comment_406641

  \를 이용해보세요.

  좋은답변1

• 

  

  • 고양이
   
  • 질문자
  • 2016.10.25 10:09:46
   
  • #comment_406651

  \n은 엔터인데 따옴표는 어떤것일까요?

• 

  • 고양이
   
  • 질문자
  • 2016.10.25 10:14:47
   
  • #comment_406656

  \"로 해야되는거죠? ㅎ

• 

  

  • 

    DoubleU
  • 2016.10.25 10:16:45
   
  • #comment_406664

  엔터로 쓰이는 n이 특별한 경우에요.
  
  \뒤에 오는 문자는 어떠한 역할을 하지 말고 문자 그대로 써라 그런 의미이거든요.
  
  그래서 따옴표를 넣고 싶으면 \" 이렇게 하면 되요.
  
  예를 들면
  \\\"
  이렇게 하면
  \"가 되는 거구요.
  
  첫번째 \는 문자를 문자 그대로 표기하라는 명령, 두번째 \는 첫번째 \에 의해서 \로 인식되구요
  세번째 \는 문자를 문자 그대로 표기하라는 명령, 네번째 "는 첫번째 \에 의해서 "로 인식되죠.
  
  설명이 어려울려나요..-0-;;;

  좋은답변1

• 

  

  • 고양이
   
  • 질문자
  • 2016.10.25 10:24:02
   
  • #comment_406694

  감사합니다.
  
  frameborder="0" scrolling="no" width="170" height="170"
  는
  
  frameborder=\"0\" scrolling=\"no\" width=\"170\" height=\"170\"
  로 표시하면 되는거죠? db 다보니 조심스럽네요 ㅠ

• 

  • 라엘
  • 2016.10.25 10:19:38
   
  • #comment_406674

  UPDATE xe_documents SET content=REPLACE(content, '바꿀내용에 쌍따옴표가', '가능할까요?');

• 

  

  • 고양이
   
  • 질문자
  • 2016.10.25 10:27:18
   
  • #comment_406708

  작은 따옴표로 하는것도 방법이긴 하겠네요.

• ?
  • SimpleCode
  • 2016.10.25 10:23:00
   
  • #comment_406690

  UPDATE xe_documents SET content=REPLACE(content, "바꿀내용에 \"쌍따옴표\"가", "가능할까요?");
  
  이런 식으로 하면 됩니다.
  
  원래 SQL 문에서 "는 문자열을 묶어서 표시할 때 사용하는데, 실제 쌍따옴표(")라는 문자열을 그대로 사용해야할 경우 원래 의미와 중복되어서 의미가 모호하게 됩니다. 백슬래시(\)라는 기호를 앞에 넣어서 이건 쌍따옴표 문자 그대로 해석하라는 의미입니다.

  좋은답변1

• 

  • 고양이
   
  • 질문자
  • 2016.10.25 10:26:57
   
  • #comment_406704

  완전 잘됩니다 모두들 너무 감사드립니다. ^^