Showing posts with label jquery. Show all posts

get head content of page with jquery

You can use this code:
With Jquery


$("head")
//for example:
alert($("head").html());

With JS:


var headContent = document.getElementsByTagName("head")[0].innerHTML;

Best Lightweight and Responsive Front-End Frameworks

by Unknown in css , css3 , html5 , jquery 0

With fast processing websites in huge demand, developers have switched their preferences. From adding new functionality, to make their responsive frameworks lightweight while ensuring seamless and fast processing across all devices. Having a lightweight and responsive website is the need of the hour as visitors usually don’t prefer sites that take time to load.
In this era of speed, all you need is a lightweight and solid base to build your responsive website. Here are a few lightweight front-end frameworks that can aid you in your work.

How to style the first occurrence of an element inside of another element?

by Unknown in css , jquery 0

Here's my problem.

HTML

<div id="content">
    <h1>Headline</h1>
    <p>First paragraph that needs to be yellow.</p>
    <p>Second paragraph that need not change. :) </p>
    <p>Third paragraph that need not change. :) </p>
</div>

If I use #content p:first-child {color:yellow; } it doesn't work because p isn't the first-child of content... h1 is the first born.

How can I do this without touching the HTML code?

jQuery javascript regex Replace br tag with \n

by Unknown in javascript , jquery , Tutorial 0

var str = document.getElementById('mydiv').innerHTML;
document.getElementById('mytextarea').innerHTML = str.replace(/<br\s*[\/]?>/gi, "\n");

or using jQuery:

var str = $("#mydiv").html();
var regex = /<br\s*[\/]?>/gi;
$("#mydiv").html(str.replace(regex, "\n"));

example

edit: added i flag

edit2: you can use /<br[^>]*>/gi wich will match anything between the br and slash if you have for example <br />

Source:

jQuery javascript regex Replace <br> with \n

disable selected options by jQuery

by Unknown in javascript , jquery 0

This will disable/enable the options when you select/remove them, respectively.

$("#theSelect").change(function(){          
    var value = $(this).val();
    if (value === '') return;
    var theDiv = $(".is" + value);

    var option = $("option[value='" + value + "']", this);
    option.attr("disabled","disabled");

    theDiv.slideDown().removeClass("hidden");
    theDiv.find('a').data("option",option);
});


$("div a.remove").click(function () {     
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
    $(this).data("option").removeAttr('disabled');
});

Source:

jQuery - disable selected options

How to Get all attributes of an element using jQuery

by Unknown in jquery , Tutorial 0

I am trying to go through an element and get all the attributes of that element to output them, for example an tag may have 3 or more attributes, unknown to me and I need to get the names and values of these attributes. I was thinking something along the lines of:

6 jQuery Responsive Layout for mobile

by Unknown in jquery 0

1. app-UI

app-UI may be helpful to mobile and web developers for developing interactive mobile or web applications using HTML and JavaScript. The animations are hardware accelerated and are rendered using CSS3 translate3d.

Best 20 FlipBook responsive jQuery

by Unknown in html5 , jquery 0

1. WowBook, create ebooks with page flip

With WowBook, you can easily crate an online publication with two flipping effects. This plugin doesn’t need flash and supports all the major browsers. It also has zoom functionality, keyboard navigation and mousewheel navigation.

jquery disable form submit on enter

by Unknown in javascript , jquery 0

You can disable button on Submit but user can Enter to submit.

So you i use this code:

I have the following javascript in my page which does not seem to be working.

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

I'd like to disable submitting the form on enter, or better yet, to call my ajax form submit. Either solution is acceptable but the code I'm including above does not prevent the form from submitting.

Solution:

jquery disable form submit on enter

Usually form is submitted on Enter when you have focus on input elements.

We can disable Enter press on input elements within a form:

$("form :input").on("keypress", function(e) {
    return e.keyCode != 13;
});

Simple Responsive Drop Down Menu jQuery CSS3

by Unknown in css3 , jquery 0

A beauty drop down responsive menu that shows its sub menus with icon symbol using open symbol fonts that allowing you to add more icons as you want. With my previous tutorial, i also show how to create Creating 3-Level Responsive Drop Down Navigation Menu with jQuery and CSS3 as well.

Today we would like to show an experimental drop-down menu with jquery and css3 using beautiful symbol fonts. The main idea is to help you to save time for creating menus for website, it have a lot of content and sub-levels. Some sub-level in this menu will be shown in its context and icons. The menu is best use in professional web design that it can be used easily in a responsive layout.
This Responsive Drop Down Navigation Menu using plugin such as:

Rotating Image Slideshow Jquery

by Unknown in Brighten Up , jquery 0

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

Multi-Step Signup Form With CSS3 and jQuery

by Unknown in Brighten Up , css3 , jquery 0

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.

You can take a look at the working demo if you click on the image below:

We will create four steps in our form:
1. username and password fields
2. first and last name and email address
3. age, gender and country
4. summary

Download Code

Create a nice CSS3 Progress bar without any images | Brighten up by Css series

by Unknown in Brighten Up , css3 , jquery 0

As I’ve shown you in some of my recent posts, the new features introduced in CSS3 allows developers to create stunning visual effects. Today, let’s create a fancy progress bar using CSS3 and jQuery, but no Flash or even images.

Please note: The original CSS3 progress bar shown in this tutorial has been created by Ivan Vanderbyl, which hereby gave me the right to reproduce and document his work.
The following tutorial and the demo works best on Chrome and Safari, correctly on Firefox and very badly in Internet Explorer (eh…I’m sure you hadn’t guessed that).

The Demo

Change highlight color with JQuery

by Unknown in jquery 0

jQuery's highlight method will highlight any div with a yellow background.
How do I specify what color to use instead of yellow for highlight?

Answer:


$(this).effect("highlight", {color: 'blue'}, 3000);

difference between jQuery .val() and .attr('value')?

by Unknown in jquery 0

.val() works on all input type elements in a useful way, including <select>...even in the cases of <select multiple>, checkboxes, and radio buttons (in which .val() gets or sets an array of selected values not just a string).
So basically they serve different purposes, even though .attr('value') behaves the same in some situations, like textboxes. The preferred method is .val() to get consistent behavior everywhere.
Just for kicks, here's a lesser-known example for checkboxes that makes .val() handy:

<input name="mytest" type="checkbox" value="1">
<input name="mytest" type="checkbox" value="2">
<input name="mytest" type="checkbox" value="3">
<input name="mytest" type="checkbox" value="4">

You can do this:

$("input[name='mytest']").val([1, 2, 3]);

....which will check the first 3 boxes.

Tutorial Working with Attributes

by Unknown in jquery , Tutorial 0

Setting Single Attribute

$("img").attr("src", "http://cdn.css-tricks.com/images/banner.jpg");

Setting Single Attribute (with function)

$("div").attr("id", function (arr) {
    return "div-id" + arr;
})

Setting Multiple Attributes

$("img").attr({
       src: "http://cdn.css-tricks.com/images/banner.jpg",
       title: "banner",
       alt: "banner"
});

Getting Attribute

var $source = $("img").attr("src");

Reference URL

Tutorial Window load event with minimum delay

by Unknown in jquery , Tutorial 0

window.load can fire super duper fast if the page is cached. If you want to use that event but make sure a minimum amount of time has passed until it does...

(function fn() {

  fn.now = +new Date;

  $(window).load(function() {

     if (+new Date - fn.now < 500) setTimeout(fn, 500);
     
		 // Do something

  });

})();

Tutorial Validate Age

by Unknown in jquery , Tutorial 0

This snippet presupposed an HTML form with and ID of "age-form" and three inputs (text or select) with the IDs "day", "month", and "year" respectively.

$("#age-form").submit(function(){
	var day = $("#day").val();
	var month = $("#month").val();
	var year = $("#year").val();
	var age = 18;
	var mydate = new Date();
	mydate.setFullYear(year, month-1, day);

	var currdate = new Date();
	currdate.setFullYear(currdate.getFullYear() - age);
	if ((currdate - mydate) < 0){
		alert("Sorry, only persons over the age of " + age + " may enter this site");
		return false;
	}
	return true;
});

You may wish to do something more elegant than an alert, and should also probably validate the form with server side code or else this protection only works for users with JavaScript enabled.

Tutorial Underline Individual Words

by Unknown in jquery , Tutorial 0

There is no CSS for applying an underline (text-decoration: underline;) only to individual words in a multiple-word element. The best way would be to wrap each word in a span (not the spaces, just the words) in spans and apply underline to those spans. Here's jQuery to do that to h1 elements.

$('h1').each(function() {

	var words = $(this).text().split(' ');

	$(this).empty().html(function() {

		for (i = 0; i < words.length; i++) {
			if (i == 0) {
				$(this).append('<span>' + words[i] + '</span>');
			} else {
				$(this).append(' <span>' + words[i] + '</span>');
			}
		}
	
	});

});

Then you could do:

h1 span {
  text-decoration: underline;
}

Similar and slightly more robust solution: Lettering.js

Reference URL

Tutorial Triple Click Event

by Unknown in jquery , Tutorial 0

$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
        clicks += 1;
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";
            
            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
        }
        $elem.data('clicks', clicks);
    }
    
};

Usage

$("#whatever").bind("tripleclick", function() {
   // do something
}

Reference URL

HOT CSS

Free Beautiful Css templates, Web designer tricks from expert

Showing posts with label jquery. Show all posts

get head content of page with jquery

Best Lightweight and Responsive Front-End Frameworks

How to style the first occurrence of an element inside of another element?

jQuery javascript regex Replace br tag with \n

jQuery javascript regex Replace <br> with \n

disable selected options by jQuery

How to Get all attributes of an element using jQuery

6 jQuery Responsive Layout for mobile

1. app-UI

Best 20 FlipBook responsive jQuery

1. WowBook, create ebooks with page flip

jquery disable form submit on enter

jquery disable form submit on enter

Simple Responsive Drop Down Menu jQuery CSS3

Rotating Image Slideshow Jquery

Multi-Step Signup Form With CSS3 and jQuery

Download Code

Create a nice CSS3 Progress bar without any images | Brighten up by Css series

The Demo

Change highlight color with JQuery

difference between jQuery .val() and .attr('value')?

Tutorial Working with Attributes

Setting Single Attribute

Setting Single Attribute (with function)

Setting Multiple Attributes

Getting Attribute

Tutorial Window load event with minimum delay

Tutorial Validate Age

Tutorial Underline Individual Words

Tutorial Triple Click Event

Usage