background preloader

Slide Elements in Different Directions

Slide Elements in Different Directions
Although jQuery has a nice set of slide methods — .slideDown(), .slideUp(), and .slideToggle() — sometimes we may want to slide an element in a different direction. Fortunately, it's pretty easy to do. Reverse the Slide Direction With the built-in slide methods, elements are shown by sliding them down and into view. <div id="slidebottom" class="slide"> <button>slide it</button> <div class="inner">Slide from bottom</div></div> To get the inner div to slide up, we'll anchor its bottom edge to the bottom of the bottom of the nearest positioned ancestor (in this case, the #slidebottom div): Other properties such as width, padding, margin, and background-color have been set for these elements, but only the essential properties for modifying the slide behavior are shown above. Note: I'll be using the term positioned to refer to elements that have the CSS position property set to something other than "static." Now, we can write the jQuery the same way we would with a traditional slide effect:

Responsive Mobile Menu 12 Wesbite to Learn jQuery Jquery is a great way to get a lot of cool things to happen on your website. You must take the time to learn it, in this post I give you 12 Wesbites to Learn jQuery. This is just to get your feet wet its always best to take a class or pick up a book. jquery-mix.com jqueryfordesigners.com 15daysofjquery.com jqueryking.com addyosmani.com docs.jquery.com tutorialzine.com visualjquery.com jquerystock.com developphp.com jquerystyle.com marcgrabanski.com

7 Best Websites to Step-by-Step Learn jQuery jQuery has recently become the most popular and flexible Javascript Library that have added a lot of ease and efficiency for web developers and web designers. With it’s growing popularity it has become inevitable for everyone developer to learn this very language. jQuery is a fast, concise and easy to comprehend javascript library that simplifies complex task like HTML document traversing, Ajax interactions, animating, and event handling. It eases client-side HTML scripting. jQuery was released in January 2006 by John Resig with an Open Source license. jQuery is being used by 43% of the top 10,000 sites and thus you can estimate the growing popularity among developers. jQuery Understanding jQuery shouldn’t be much of a hassle for the web developers who are already into the business and have successfully created projects using css and html but for beginners this task can seem to be a tedious job, especially when they don’t know where to start from and what are the reliable resources.

Custom Selectors - jQuery Select all elements that are in the progress of an animation at the time the selector is run. Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Selects elements that have the specified attribute with a value containing the a given substring. Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. Selects elements that have the specified attribute with a value ending exactly with a given string. Selects elements that have the specified attribute with a value exactly equal to a certain value. Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value. Selects elements that have the specified attribute with a value beginning exactly with a given string. Selects all button elements and elements of type button. Selects all elements of type checkbox.

How to Get IE8 to Support HTML5 Tags and Web Fonts - tatiyants.com Internet Explorer has long been the bane of web developer’s existence, largely due to its limited and buggy support for standards. Though things improved some in IE9, it doesn’t yet have the market share that would allow you to ignore its older siblings. And while it’s debatable whether you need to worry about IE7 (I don’t), IE8 is popular enough to demand attention. The good news is that it’s possible to get IE8 to do decent things with modern web technologies. In this post, I’ll focus on two: HTML5 tags and Web Fonts. HTML5 Elements HTML5 has a whole bunch of new elements for adding semantic meaning to your pages. Since IE8 doesn’t know anything about these, it won’t recognize styles applied to them via CSS. Another important thing to point out is that HTML5 elements are displayed as block by default, but IE8 doesn’t know that either. Note that if you’re using an HTML5 aware reset stylesheet (like this one), this is probably already taken care of for you. Web Fonts References: tagged with:

CSS selectors jQuery Select all elements that are in the progress of an animation at the time the selector is run. Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Selects elements that have the specified attribute with a value containing the a given substring. Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. Selects elements that have the specified attribute with a value ending exactly with a given string. Selects elements that have the specified attribute with a value exactly equal to a certain value. Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value. Selects elements that have the specified attribute with a value beginning exactly with a given string. Selects all button elements and elements of type button. Selects all elements of type checkbox.

10 Powerful jQuery Full-Screen Slider - XDesigns If you are a designers or artists who wants to showcase an online portfolio on your website, then you will need a powerful tool that can maximize visibility of your works, one of which is a fullscreen slider. This is the best way for showcasing your artwork in creative way, especially for photographic work. There are many available jQuery slider plugins, either free or premium that have full-screen or full-width feature. To help you find the best one, in today’s post we present some of them. 1. Superslides is a full-screen slider plugin for jQuery. Demo | Download 2. A tutorial on how to create a fullscreen slideshow with unique slide transitions using jQuery and CSS. Demo | Download 3. FFSlider is first Fullscreen Slider resizable with unique transitions and configuration. Demo | Download 4. Fancy Thumbnail Slider is a Fullscreen carousel slider with lot of features and settings. Demo | Download 5. Full Width Slider is easy to use jQuery image slider that has responsive design. Demo | Download

3 Simple Things to Make Your jQuery Code Awesome jQuery is one of the most popular (if not the most) JavaScript libraries in existence and a great number of people use it to do some amazing things. Personally, jQuery is what got me excited for learning JavaScript. The problem is that a lot of programmers don't understand that with all that power massive amounts of CPU cycles are used. As much as jQuery engineers try to optimize jQuery, they are always limited in how fast they can make it go. There are a few things that you, as a user of jQuery, can do to make your jQuery code faster. 1 - jQuery Object Caching Caching your jQuery objects may possibly be the best thing you can do to cut your code down to run leaner and meaner. In all of these cases, you could save some DOM searching trips by assigning the jQuery object to a variable (generally prefixed with a dollar sign to distinguish it as a jQuery object), like so: 2 – Selector Optimization The following selectors are ranked from fastest to slowest. 3 – Delegating Events About the Author

Responsive Web Design using CSS3 Smartphone revolution brings new features to the web development, it is time to change your website design into a responsive design instead of maintaining a separate mobile version . Responsive design will automatically adjust itself based on the screen size of the media devices. This post explain you how to use CSS 3 @media property and working with Internet Explorer using Modernizr. Download Script Live Demo Try live demo with different screen resolutions. Step 1 Web layout divided into three horizontal parts are Hearder, Main and Footer. HTML Code header">1 Header <div id="logo">logo</div> <div id="nav">links</div> </div> <div id="main">2 Main <div id="article">article</div> <div id="sidebar">sidebar</div> </div> <div id="footer">3 Footer </div> Wireframe Step 2 Now working with an unorder list <ul> tag. <div id="nav"><ul><li>link</li><li>link</li><li>link</li>........ Step 3 - @media 768px Working with screen media resolution minimum width at 768px Wireframe @media 768px CSS @media 768px Modernizr <!

Related: