Posted
Filed under jquery

[원문] : http://blog.bits.kr/90

$(document).ready(function(){
  var $doc           = $(document);
  var position       = 0;
  var top = $doc.scrollTop(); //현재 스크롤바 위치
  var screenSize     = 0;        // 화면크기
  var halfScreenSize = 0;    // 화면의 반

  /*사용자 설정 값 시작*/
  var pageWidth      = 1000; // 페이지 폭, 단위:px
  var leftOffet      = 409;  // 중앙에서의 폭(왼쪽 -, 오른쪽 +), 단위:px
  var leftMargin     = 909; // 페이지 폭보다 화면이 작을때 옵셋, 단위:px, leftOffet과 pageWidth의 반만큼 차이가 난다.
  var speed          = 1500;     // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)
  var easing         = 'swing'; // 따라다니는 방법 기본 두가지 linear, swing
  var $layer         = $('#floating'); // 레이어 셀렉팅
  var layerTopOffset = 188;   // 레이어 높이 상한선, 단위:px
  $layer.css('z-index', 10);   // 레이어 z-인덱스
  /*사용자 설정 값 끝*/

  //좌우 값을 설정하기 위한 함수
  function resetXPosition()
  {
    $screenSize = $('body').width();// 화면크기
    halfScreenSize = $screenSize/2;// 화면의 반
    xPosition = halfScreenSize + leftOffet;
    if ($screenSize < pageWidth)
      xPosition = leftMargin;
    $layer.css('left', xPosition);
  }

  // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해
  if (top > 0 )
    $doc.scrollTop(layerTopOffset+top);
  else
    $doc.scrollTop(0);

  // 최초 레이어가 있을 자리 세팅
  $layer.css('top',layerTopOffset);
  resetXPosition();

  //윈도우 크기 변경 이벤트가 발생하면
  $(window).resize(resetXPosition);

  //스크롤이벤트가 발생하면
  $(window).scroll(function(){
    yPosition = $doc.scrollTop()+layerTopOffset;
    $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
  });
});
//레이어 HTML 마크업은 아주 간단하게. ID만 주는정도로 끝..(position:absolute는 줘야 합니다..)
<div id="floating"  style="position:absolute;" >
  레이어 내용
</div>

2014/02/18 13:55 2014/02/18 13:55
Posted
Filed under jquery
[원문] : http://www.kevinmusselman.com/2009/10/scrolling-text-jquery-animate/


Scroll Text Up
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Scroll Text to Left mouseover to stop the animation
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. +++Lorem ipsum dolor sit amet, consectetur adipiscing elit.

A client of mine recently wanted the option to have scrolling text for breaking news type items. For the most part I think that scrolling text isn’t the greatest thing to use but there are certain situations where its good. The real simple and fast way to do it is to simply use a <marquee> tag like this <marquee width=”100%;” behavior=”SCROLL” direction=”left” scrollamount=”10″> Lorem ipsum doler </marquee>

The problem with this is it doesn’t do a continuous loop. What I mean by this is that it doesn’t start over till the text has completely finished scrolling. This means you see a lot of white space. Also jQuery seems to be a smoother animation. I knew jQuery had the animate function, so I used that. I found some plugins and examples where they had images being repeated but said they couldn’t do text cause they didn’t know the width. I guess they didn’t know css. So lets start with the css/html part of it.

Scrolling Text to the Left

The first thing we need to do is to get the width of the text that is being scrolled. So we need to create a div wrapper and set the width to be really big. This way the text wont be wrapped because of parent elements. We also set the display to none and visibility to hidden. This is done so that we don’t ever see this text. The display none keeps the browser from rendering the div in the browser, otherwise with just the visibility set to hidden we would see a big white space. Then we add another element inside with the text.


<div id="textwrapper" style="width:5000px; display:none; visibility:hidden;">
  <span id="textwidth" style="disply:none;">
    +++Lorem ipsum dolor sit amet,  consectetur adipiscing elit.
    Sed magna  ligula, tempus feugiat pellentesque et,pulvinar
    eu tellus. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </span>
</div>
;

Now the html for the actual text being scrolled. We have a scrollwrapper element which contains the width of the the text being scrolled. We also need to set the position to relative so that the text being scrolled will be absolutely positioned relative to this element and not the page. The next element is used to make sure the text doesn’t wrap just like we did previously, we set the width to an arbitrarily large number. Then we have the scrollcontent element. This is the element that is going to be moving. This is positioned absolutely and we set the left position to the width of the scrollwrapper element to make sure it starts on the far right. Then we need one more wrapper inside.


<div id="scrollwrapper" style="overflow:hidden; border:1px solid #004F72;
      position:relative; width:500px; height:20px;">
  <div style="width:5000px;">
     <span id="scrollcontent" style="position:absolute; left:500px;">
       <span id="firstcontent" style="float:left; text-align:left;">
             +++Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Sed magna ligula, tempus feugiat pellentesque et, pulvinar
             eu tellus.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       </span>
    </span>
  </div>
</div>

Here is the javascript but first let me explain how I am using the jquery animation function. The first object passed to it is what I’m animating. I am changing the property “left” to go to the negative of the scrollwidth. The next thing I pass to it is an object of some of the properties. The first property I am setting is “step”. This is a function that will get called everytime the animation runs. The next property is “duration” which is the amount of time it will take to finish the animation in milliseconds. The next is “easing” which is the equation used to do the animation. jQuery comes with 2 equations: linear and swing. Default is swing but we’ll set it to linear. The last property we’ll set is “complete” which is a function that’ll be called when the animation is done.


$("#textwrapper").css({"display":"block"});
var scrollwidth = $("#textwidth").width();
$("#textwrapper").remove();

var scrollwrapperwidth = $("#scrollwrapper").width();
if(scrollwidth < scrollwrapperwidth) scrollwidth = scrollwrapperwidth;
$("#scrollcontent").css({"width":scrollwidth});
$("#firstcontent").css({"width":scrollwidth});

var appending = scrollwrapperwidth-scrollwidth;
var noappend = 0;

function animatetext(rate){
  var dist = scrollwidth+parseFloat($("#scrollcontent").css("left"));
  if(!rate)rate = 1;
  var duration = Math.abs(dist/(rate/100));
  $("#scrollcontent").animate({"left":"-"+scrollwidth},{
    step: function() {
      if(parseFloat($("#scrollcontent").css("left"))< parseFloat(appending)
          && !noappend){
          noappend = 1;
          $("#scrollcontent").css({"width":scrollwidth+scrollwidth});
          $("#scrollcontent").append("<span style='float:left; text-align:left;
               width:"+scrollwidth+"px;'>"
               +$("#scrollcontent").children(":first").html()+"</span>");
      }
    },
    duration: duration,
    easing: "linear",
    complete:function(){
      $("#scrollcontent").children(":first").remove();
      $("#scrollcontent").css({"left":0});
      $("#scrollcontent").css({"width":scrollwidth});
      noappend=0;
      animatetext(6);
    }
  });
}
$("#scrollcontent").mouseover(function(e){
	$("#scrollcontent").stop();
});
$("#scrollcontent").mouseout(function(e){
	animatetext(6);
});

$(document).ready(function(){
	animatetext(6);
});

First in the javascript we will get the width of the text. We first need to set the css of the textwrapper to "block" so that it will render the child elements width. Then we will get the width of the inner element "textwidth" and then delete the textwrapper element.
If the javascript variable "scrollwidth" is less than the width that we want it to scroll we need to set it. Then we set 2 variables, appending and noappend. These variables are used in the "step" function. So when the position of the scrolling text is less than the position "appending" and we haven't already appended text (the noappend flag), then we'll set the width of the scrollcontent to double the width since we are appending the same text in there again. Then when the animation is completed we will remove the first element, change the left position to 0, change the width of the scrolling content back to the scrollwidth and then call this function again. Also if we want to stop the animation on mouseover as I have it, we simply call the .stop().

NOTE: since the .animate function takes a duration and not a speed, to keep the same speed we need to calculate the duration. That way if you are dynamically changing the text the speed wont change just because you have more or less text. To do this it is pretty straight forward. Since we are using linear as our easing property, the equation is simply d=rt, where d is the distance we need to travel and r is the rate and t is the time. So we get the distance by taking the scrollwidth and adding it to the current left position of the scrollcontent. Then we simple pass in a rate of 1- whatever and calcuate the time in milliseconds.

Scrolling Text Up

Scolling text up is even easier. The html looks like this. We need a wrapper with position relative and height equal to whatever you want. Then we need the child element which will be the element being moved. Then we need at least one element inside that to contain the text but can have more if you want. Also the line-height needs to be set to whatever the height is of the outerwrapper.


<div id="scrolltextup" style="border:1px ridge #004F72; overflow:hidden;
     position:relative; width:500px; height:20px;">
  <div id="textup" style="text-align:center; position:absolute; top:0;
      left:0; width:500px;">
    <div style="line-height:20px;">
      +++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      +++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

Here is the javascript to do it. We get height of the entire thing. This time we are change the "top" property. Since the distance to animate will always be the same we don't need to calculate duration and can just pass in the duration.


var scrollheight = $("#textup").height();

function scrolltextup(dur){
  $("#textup").animate({"top":"-=20"},{
    duration: dur,
    easing: "linear",
    complete:function(){
      $("#textup").children(":last").after("<div style='line-height:20px;'>"+
          $("#textup").children(":first").html()+"</div>");
      if($("#textup").children(":first").height() <=
           (parseInt($("#textup").css("top"))*-1)){
        $("#textup").children(":first").remove();
        $("#textup").css({"top":0});
      }
      setTimeout("scrolltextup(3000)", 500);
    }
  });
}

2012/12/24 10:01 2012/12/24 10:01
Posted
Filed under jquery

32 jQuery and CSS Drop Down Menu Examples and Tutorial

1diggdigg
email

Beautiful and professional drop down menus remain hot choice for the develops, blogger, web designers and programmers. So today, i am going to concentrate on perfect and comprehensive programming article about jQuery and CSS based drop down menus. This post is for you, if you are interested to to build jQuery and CSS based simple or multi-level drop down menu by these professional and perfect tutorials.

1. “Outside the Box” Navigation with jQuery

Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity.

View TutorialView Demo

2. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

View TutorialView Demo

3. Designing the Digg Header: How To & Download

The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big.

View TutorialView Demo

4. Create The Fanciest Dropdown Menu You Ever Saw

Recently he has changed his website design and the layout, but this tutorial is sweet, and one amazing navigation! Here is a bit about Brian

View TutorialView Demo

5. A Circular Menu with Sub Menus

A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.

View TutorialView Demo

6. A Different Top Navigation

In this tutorial, we will be doing precisely that. We will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

View TutorialView Demo

7. Perfect Signin Dropdown Box Likes Twitter with jQuery

Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery.

View TutorialView Demo

8. Sliding Jquery Menu Tutorial

Hi there welcome to another tutorial, in this tutorial il show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

View TutorialView Demo

9. Fancy Sliding Menu for Mootools

Due to the popularity of the script.aculo.us version of the Fancy Sliding Menu I decided a Mootools version was now in order. It looks exactly the same as the the script.aculo.us, it works exactly the same as the script.aculo.us version, the only difference is it runs on Mootools.

View TutorialView Demo

10. Create Vimeo Like Top Navigation

The base for this tutorial is simple CSS drop down menu based on unordered list.

View TutorialView Demo

11. Dynamic PHP CSS Menu

PHP menu that will allow me to play with lots of options and situations. My application required some special code because it’s based on member groups and so, my menu was supposed to reflect the permissions attached to each group in part.

View TutorialView Demo

12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

One of the designers on our UI team requested a screen mockup with a page layout that is similar to your typical email client. The page is divided vertically into 2 panes. The left pane contains a 2 level hierarchy of categories and subcategories. As the user selects different subcategories the designer wants the right pane’s content to be updated with the corresponding information. Just like Outlook, the designer wants the subcategories to be displayed within expanding and collapsing panels.

View TutorialView Demo

13. Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

View TutorialView Demo

14. Make a Mega Drop-Down Menu with jQuery

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

View TutorialView Demo

15. A Cross-Browser Drop Down Cascading Validating Menu

If you love this you will be over the moon about the Mk.3 version.

View TutorialView Demo

16. Drop-Down Menus, Horizontal Style

Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer.

View TutorialView Demo

17. Superfish jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

View TutorialView Demo

18. JavaScript Dropdown Menu with Multi Levels

View TutorialView Demo

19. jQuery (mb) Menu 2.7

View TutorialView Demo

20. Menumatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

View TutorialView Demo

21. Smooth Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that’s a good thing given the important role of this element in any site. The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

View TutorialView Demo

22. Longed-For Multi-Level Drop-Down Menu Script

The main feature of this menu is the clear separation between the HTML code, software code and visual appearance. No more onmouseover or onmouseout or, worse, multidimensional array of elements in a .js file. The HTML code of the menu is a simple treelike unordered list:

View TutorialView Demo

23. jQuery & CSS Example – Dropdown Menu

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit.

View TutorialView Demo

24. Reinventing a Drop Down with CSS and jQuery

For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).

View Tutorial - View Demo

25. Simple jQuery Dropdowns

There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed.

View TutorialView Demo

26. jQuery iPod-style Drilldown Menu

We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.

View TutorialView Demo

27. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

View TutorialView Demo

28. mcDropdown jQuery Plug-in

While the list of requirements was not long, we knew there would be substantial technical obstacles to overcome. The biggest obstacle to solve would be how to ensure that the menu and all of its submenus remain on the screen at all times.

View DemoView Tutorial

29. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI. The menu also manages to sneak in a little CSS3, making use of the “border-radius” property to give each link within the sub ULs rounded edges when the mouse hovers over them..

View TutorialView Demo

30. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

View TutorialView Demo

31. Professional Dropdown

View TutorialView Demo

32. Drop Down Menu with Nested Submenus

Drop down menus are among the coolest things on the web. Beside that they are also very good for creating navigations that contain many elements. The main problems of creating drop down menus lies in the Internet Explorer’s inappropriate way of displaying :hover pseudo class (not recognized anywhere except in A tag), and the problem in calculating the z-index when an element is positioned absolutely inside a relatively positioned element.

View TutorialView Demo

2011/11/11 09:01 2011/11/11 09:01
Posted
Filed under jquery

jQuery Tabs Tutorial: 18 Exceptional Techniques

1diggdigg
email

Tabs are very useful for web designers and developers to present a lot of information professionally without losing usability. I am also using tabs on my blog to present classes, plugins, themes, scripts and more. Popularity of tabs is increasing day by day and lot of blogs are using tabbed content to manage their data without compromising layout.

1. Create a Slick Tabbed Content Area Using CSS & jQuery

This is an excellent tutorial by tutplus. They have build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.

Slick Tabbed Content Area

View TutorialView Demo

2. Create a Tabbed Interface Using jQuery

This is another beautiful tutorial by the same site. This tutorial can be utilized to create completely unique interfaces without having to be a coding God – using only one line of code!

Create A Tabbed Interface

View TutorialView Demo

3. Simple Tabs w/ CSS & jQuery

This is a nice tutorial that can be easy to understand even for a beginner.

Simple Tabs

View TutorialView Demo

4. jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect.

jQuery Tabbed Interface

View TutorialView Demo

5. Playing with jQuery Tabs

According to author, Creating tabs is as simple as setting up some simple HTML and “enabling” it with a line of JavaScript code.

Playing with jQuery Tabs

View TutorialView Demo

6. Slide Tabbed Box Using jQuery

There are so many kinds of tabbed menu nowadays. Still I really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust me it only takes a few minutes.

Slide Tabbed Box Using jQuery

View TutorialView Demo

7. Javascript: jQuery Tabs

In modern web applications you often need to make something visually appealing and without using something like Flash, the best thing for this is Javascript. This is the first of a series of articles showing how to use these frameworks to make your application a better place – Tabs using JQuery.

JQuery Tabs

View TutorialView Demo

8. Create Flipping Content Tabs Using jQuery

Content Tabs have become more popular lately with more and more websites and blogs using them to show more content in lesser space. This tutorial is going to show you how to create content tabs with nice flipping effect.

Flipping Content Tabs Using jQuery

View TutorialView Demo

9. Ultra Simple jQuery Tabs

Tabs are perhaps one of the most popular layouts used in web design today – particular in sidebars. In this tutorial we’ll be using the jQuery library to build an ultra simple tabbed layout in less than 20 lines of JavaScript!

Ultra simple jQuery tabs

View TutorialView Demo

10. jQuery Tabs Made Easy

This beautiful tutorial is about small jQuery dependant code to create amazing tabs widget with useful functionality.

jQuery Tabs made easy

View TutorialView Demo

11. Animated Tabbed Content with jQuery

This tutorial is about a container which has the ability to switch content through tabs, but with an animation. This tutorial will show you how to create your own tabbed content step by step.

Tabbed content with jQuery

View TutorialView Demo

12. jQuery to Fade Effects Tabs

In this JQuery tutorial we will develop a program to make Fade Effect tab

jQuery To Fade Effects tabs

View TutorialView Demo

13. jQuery Tab Container Theme with Tab Transition Animations

It is an easy to understand tutorial to create a tab container with transition animations.

JQuery TabContainer Theme with Tab Transition Animations

View TutorialView Demo

14. jQuery Sliding Tab Menu for Sidebar Tutorial

Learn how to create a sliding tab menu for your sidebar by using jQuery and jQuery.scrollTo. With this simple tutorial, you’ll able to create a slick and attractive sidebar. It’s so simple and fully customizable.

jQuery Sliding Tab Menu for Sidebar Tutorial

View TutorialView Demo

15. jQuery Tabs

Tabbing has been common place on the Internet for some time now. Today web sites will make use of tabbing without the page having to reload with the addition of JavaScript.

jQuery Tabs

View TutorialView Demo

16. Create a Smooth Tabbed Menu in jQuery

In this tutorial, you will learn how to create a smooth tabbed menu with our lovely jQuery library. With simple and clean layout we can have a great tabbed menu for our websites.

Create a smooth tabbed menu in jQuery

View TutorialView Demo

17. Sweet AJAX Tabs with jQuery 1.4 & CSS3

This tutorial is going to make an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.

Sweet AJAX Tabs With jQuery

View TutorialView Demo

18. Flowplayer Tabs

There are many other ways of using this tool than the demos provided above. Here is a generic form for constructing tabs.

Flowplayer Tabs

View TutorialView Demo

2011/11/10 08:45 2011/11/10 08:45
Posted
Filed under jquery

Usage of Jquery is comparatively simple for input type text, button, file, reset etc. because these controls generally hold data but not state like on and off. Check box and radio buttons are two controls which are generally used for state data like option is on/off, one is selected from a group of options etc.

Using jquery is little but different here because you have to use little more that just ID selectors:

Check Box:

 
<input type="checkbox" name="chkBox" id="chkBox"></input>
 

Handling click and Change Events :

 
/* Using Name for selector */
$("input[@name='chkBox']").click(function(){
   // your code here 
});
 
/* Using ID for selector */
$("#chkBox").change(function(){
   // your code here 
});
 

Radio Button:

 
<input type="radio" name="rdio" value="a" checked="checked" />
<input type="radio" name="rdio" value="b" />
<input type="radio" name="rdio" value="c" />
 

Handling change event for Radio buttons:
Click event can be handled similarly. ID can not be used here because Radio buttons are used for single selection from a group where all input fields of group should have same name.

 
$("input[@name='rdio']").change(function(){
    if ($("input[@name='rdio']:checked").val() == 'a')
        // Code for handling value 'a'
    else if ($("input[@name='rdio']:checked").val() == 'b')
        // Code for handling value 'b'
    else
        // Code for handling 'c'
});

[원문] - http://www.techiegyan.com/2008/07/09/using-jquery-check-boxes-and-radio-buttons/
2011/03/12 08:14 2011/03/12 08:14
Posted
Filed under jquery

[원문]   http://jqueryfordesigners.com/image-loading/
            http://translate.google.co.kr/translate?hl=ko&langpair=en%7Cko&u=http://jqueryfordesigners.com/image-loading/

Basic Version

In our basic version, we will have a single div containing a loading spinner and once our large image is loaded (in the background) we will remove the spinner and insert our image.

There’s a few ways to approach the loading screen, two of which are:

  1. Use a background image on the holder div, this way we can easily centre align horizontally and vertically using CSS, rather than adding extra markup.
  2. Adding a styled div in our holder div, then remove the entire block of markup when the image loads.

I’ve provided a screencast explaining how to achieve this (though it is based on the CSS version, also shows how to do this with a separate loading div).

Watch the jQuery basic image load screencast (alternative flash version)

View the demo and source code used in the screencast

Note that in the demonstration as I am simulating loading a slow to load image by including a script tag at the bottom of the markup. In your real world version, you obviously would not include it.

HTML Markup

The markup (segment) that we’re using is extremely simple. Note, however, I’ve included a ‘loading’ class on the div. This will be manipulated in our jQuery once the image has loaded behind the scenes:

<div id="loader" class="loading"></div>

CSS

For the demo, I’ve set the height and width of the empty div, but also included a background image which indicates something is loading.

You can use any kind of image - I’ve seen applications use much larger animated gifs to simulate a loading message box.

DIV#loader {
  border
: 1px solid #ccc;
  width
: 500px;
  height
: 500px;
}

/**
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */

DIV
#loader.loading {
  background
: url(images/spinner.gif) no-repeat center center;
}

jQuery

The jQuery’s job is to:

  1. Load the image in the background
  2. Hook a load event
  3. Once the image has loaded, strip the loading class and insert the image
// when the DOM is ready
$
(function () {
 
var img = new Image();
 
 
// wrap our new image in jQuery, then:
  $
(img)
   
// once the image has loaded, execute this code
   
.load(function () {
     
// set the image hidden by default    
      $
(this).hide();
   
     
// with the holding div #loader, apply:
      $
('#loader')
       
// remove the loading class (so no background spinner),
       
.removeClass('loading')
       
// then insert our image
       
.append(this);
   
     
// fade our image in to create a nice effect
      $
(this).fadeIn();
   
})
   
   
// if there was an error loading the image, react accordingly
   
.error(function () {
     
// notify the user that the image could not be loaded
   
})
   
   
// *finally*, set the src attribute of the new image to our image
   
.attr('src', 'images/headshot.jpg');
});

Added Functionality

The jQuery code used is the constructs of our load function. If we wanted to style the image in any way, add classes or run an Ajax request before showing the image, it would go inside the .load() function.

This functionality could also be placed inside of a .click() event handler or anything else if you wanted to trigger the image loading.

For example, if you had a particular image map linked to this image that you wanted to request via Ajax the contents of the load function would be this:

$(img)
 
.load(function () {
    $
(this).hide();
   
   
// our bespoke ajax hit that's required with the image
   
// it will return the HTML for the <map> element and
   
// linked <area> element.
    $
.ajax({
      url
: 'image-map.php',
      data
: 'img=' + i.src, // the image url links up in our fake database
      dataType
: 'html',
      success
: function (html) {
       
// because we're inside of the success function, we must refer
       
// to the image as 'img' (defined originally), rather than 'this'
        $
('#loader')
         
.removeClass('loading')
         
.append(img)
         
.append(html);
         
       
// now show the image
        $
(img).fadeIn();
     
}
   
});
 
})
 
// code continues as before

Related screencasts

2011/02/24 22:01 2011/02/24 22:01
Posted
Filed under jquery

[원문] : http://ultteky.egloos.com/10420749

option 추가 하려면
var list = $("#selectList");
$
.each(items, function(index, item) {
  list
.append(new Option(item.text, item.value));
});





jQuery로 선택된 값 읽기
$("#select_box option:selected").val();
$("select[name=name]").val();

jQuery로 선택된 내용 읽기
$("#select_box option:selected").text();

선택된 위치
var index = $("#test option").index($("#test option:selected"));

-------------------------------------------------------------------

// Add options to the end of a select
$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");

// Add options to the start of a select
$("#myselect").prepend("<option value='0'>Before Apples</option>");

// Replace all the options with new options
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");

// Replace items at a certain index
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

// Set the element at index 2 to be selected
$("#myselect option:eq(2)").attr("selected", "selected");

// Set the selected element by text
$("#myselect").val("Some oranges").attr("selected", "selected");

// Set the selected element by value
$("#myselect").val("2");

// Remove an item at a particular index
$("#myselect option:eq(0)").remove();

// Remove first item
$("#myselect option:first").remove();

// Remove last item
$("#myselect option:last").remove();

// Get the text of the selected item
alert($("#myselect option:selected").text());

// Get the value of the selected item
alert($("#myselect option:selected").val());

// Get the index of the selected item
alert($("#myselect option").index($("#myselect option:selected")));

// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());

// Insert an item in after a particular position
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");

// Insert an item in before a particular position
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");

// Getting values when item is selected
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});
2011/01/25 09:41 2011/01/25 09:41
Posted
Filed under jquery
[출처] - http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/

Just a simple script I use to automate image rollovers that may be of use to others. Just include this javascript:


UPDATED

I felt motivated to simplify this even more according to many of the comments below. This takes advantage of html5 data attributes instead of a custom one, and eliminates the need for a special hover css class. It also eliminates the need for a temporary variable to store the current image in by using a ‘tmp’ attribute, and then removing it when finished. It also preloads the images for the rollover.

$(function() {
    $('img[data-hover]').hover(function() {
        $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
    }).each(function() {
        $('<img />').attr('src', $(this).attr('data-hover'));
    });;
});

This should be used with an img element as follows:

<img src="first.gif" data-hover="second.gif" />

Original code
$(function() {
    $('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });
});

This will pick up an image that looks as follows, and setup the rollover image:

<img src="first.gif" hover="second.gif"  class="rollover"/>
2011/01/25 02:43 2011/01/25 02:43
Posted
Filed under jquery
jQuery(window).ready(function() {
         todo
});
2010/12/27 12:43 2010/12/27 12:43
Posted
Filed under jquery

[출처] - http://blog.naearu.com/2983060

JQuery 사용해보기.

프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세? 가벼우면서 막강한 JQuery를 사용해보자.

각 포털사이트에서 JQuery를 검색해보면 JQuery는 홈페이지에서 다운로드 할 수 있다.

 

해당 엘리먼트 접근하기

일반 : document.getElementById("id");

JQuery : $("#id");

   - 엘리먼트의 ID 접근시 #, class 접근시 .


해당 엘리먼트의 값 접근하기

일반 : document.getElementById("id").value;

JQuery : $("#id").val();

   - 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");

 

해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드

일반 : document.getElementById("id").checked;

JQuery : $("#id").is(':checked');

   - 체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환

   - $("#id").is(".orange, .blue, lightblue");  id의 class 속성중 orange, blue, lightblue 가 하나라도 있으면 true

 

해당 엘리먼트의 CSS 속성 부여하기

일반 : document.getElementById("id").style.border = "4px solid yellow");

JQuery : $("#id").css("border", "4px solid yellow");

    - 첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다.

 

해당 엘리먼트의 display 속성 부여하기

일반 : document.getElementById("id").style.display = "none";

JQuery : $("#id").hide(); , $("#id").show();

    - hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로 보임숨김의 속도를 조절 할 수 있다.

    - 아니면 수치로 1000분의 1초로 할 수 있음. show(950)

 

체크박스의 전체선택 / 해제

일반

function selectAll() {
    var blnChecked = document.getElementById("allCheck").checked;      // 전체선택 체크박스의 상태
    checkBoxes = document.getElementsByName('delCheck');                // 태그이름중 delCheck인 엘리먼트를 배열로 얻음

 

    for(var i=0; i<checkBoxes.length; i++) {
     objCheck = checkBoxes[i];
        if (objCheck) {
            objCheck.checked = blnChecked;
  }
    }
}

 

JQuery

$(document).ready(function() {                    
  $('#allCheck').click(function() {                    // 전체선택 체크박스 선택 이벤트
    if($('#allCheck').is(':checked')){                // 전체선택 체크박스 체크상태
      $('.delCheck').each(function(){                // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴
        $(this).attr('checked', 'checked');           // 가져온 체크박스를 checked
        });
     }else{                                                     // 전체선택 체크박스 미체크상태
       $('.delCheck').each(function(){
       $(this).attr('checked','');                         // 가져온 체크박스를 미체크상태로
       });
     }
   }); 
});

 

엘리먼트의 존재여부를 체크하기

JQuery : if($("#id").length > 0)     

    - 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 JQuery는.. 객체의 길이를 체크해서 존재여부를 체크한다

2010/12/02 11:27 2010/12/02 11:27