jQuery – codeBelt https://codebelt.github.io/blog/ Manage Your Code Snippets with codeBelt | Code Examples / Tutorials / Articles Sun, 26 May 2019 04:51:30 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.10 jQuery event Listener plugin https://codebelt.github.io/blog/jquery/jquery-event-listener-plugin/ https://codebelt.github.io/blog/jquery/jquery-event-listener-plugin/#respond Tue, 25 Feb 2014 01:33:54 +0000 https://codebelt.github.io/blog/?p=1516 When creating JavaScript classes you will run into an issue where you cannot remove event listeners once you’ve added them. To get this to work you typically need to assign your bind function call(s) to a property on the class. You can see this in the Example 1 below in the setupHandlers method.

The jQuery eventListener plugin makes it so you don’t need to do this. Basically you can do everything the on and off methods does in jQuery. You’ll just need to pass the class scope as the last argument. Check out the Example 2.

Also check out the EventListenerApp sample code. https://github.com/codeBelt/jquery-eventListener

Example 1 without plugin

var DemoView = function() {
    this.isEnabled = false;

    this.setupHandlers();
    this.enable();
};

DemoView.prototype.setupHandlers = function() {
    // Bind event handlers scope here
    this.onClickHandler = this.onClick.bind(this);
    this.onMouseEnterHandler = this.onMouseEnter.bind(this);
    this.onMouseLeaveHandler = this.onMouseLeave.bind(this);
};

DemoView.prototype.enable = function() {
    if (this.isEnabled === true) return this;
    this.isEnabled = true;

    this.$card.on('click', this.onClickHandler)
    this.$card.on('mouseenter', this.onMouseEnterHandler)
    this.$card.on('mouseleave', this.onMouseLeaveHandler);
};

DemoView.prototype.disable = function() {
    if (this.isEnabled === false) return this;
    this.isEnabled = false;

    this.$card.off('click', this.onClickHandler)
    this.$card.off('mouseenter', this.onMouseEnterHandler)
    this.$card.off('mouseleave', this.onMouseLeaveHandler);
};

DemoView.prototype.onClick = function(event) {};
DemoView.prototype.onMouseEnter = function(event) {};
DemoView.prototype.onMouseLeave = function(event) {};

Example 2 with plugin

var DemoView = function() {
    this.isEnabled = false;

    this.enable();
};

DemoView.prototype.enable = function() {
    if (this.isEnabled === true) return this;
    this.isEnabled = true;

    this.$card.addEventListener('click', this.onClickHandler, this)
    this.$card.addEventListener('mouseenter', this.onMouseEnterHandler, this)
    this.$card.addEventListener('mouseleave', this.onMouseLeaveHandler, this);
};

DemoView.prototype.disable = function() {
    if (this.isEnabled === false) return this;
    this.isEnabled = false;

    this.$card.removeEventListener('click', this.onClickHandler, this)
    this.$card.removeEventListener('mouseenter', this.onMouseEnterHandler, this)
    this.$card.removeEventListener('mouseleave', this.onMouseLeaveHandler, this);
};

DemoView.prototype.onClick = function(event) {};
DemoView.prototype.onMouseEnter = function(event) {};
DemoView.prototype.onMouseLeave = function(event) {};
]]> https://codebelt.github.io/blog/jquery/jquery-event-listener-plugin/feed/ 0 Open New Browser Window with jQuery (Custom Size) https://codebelt.github.io/blog/jquery/open-new-browser-window-with-jquery-custom-size/ https://codebelt.github.io/blog/jquery/open-new-browser-window-with-jquery-custom-size/#comments Sun, 29 Aug 2010 04:33:22 +0000 http://codebelt.com/?p=22

coldfusion actionscriptI sure this is nothing special but I thought I would share. I’ve been play around with jQuery and wanted to build an easy way to open a new browser window with a certain size for multiple links. Below is what I came up with. Click on the links below to see a simple demo.

click me 1 (fixed size)
click me 2 (fixed size w/ scrollbar)

 

Update : I have added a new and improved version at the end of this article.

Everything Together

First take a look at what the whole thing and later I will break it out.

<html>
    <head>
    	<title></title>

    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

        <script type="text/javascript">
            var windowSizeArray = [ "width=200,height=200",
									"width=300,height=400,scrollbars=yes" ];

            $(document).ready(function(){
                $('.newWindow').click(function (event){

                    var url = $(this).attr("href");
                    var windowName = "popUp";//$(this).attr("name");
                    var windowSize = windowSizeArray[$(this).attr("rel")];

                    window.open(url, windowName, windowSize);

                    event.preventDefault();

                });
            });
        </script>
    </head>

    <body>
        <a href="http://www.flashmn.com/" rel="0" class="newWindow" >click me</a>
        <a href="http://www.mnswf.com/" rel="1" class="newWindow" >click me</a>
    </body>
</html>

Add the HTML Links

Lets start with our links in the of our html. Notice I used the “rel” attribute to determine the array slot I would like to use. I will be using an array to hold on the link information.

<a href="http://www.flashmn.com/" rel="0" class="newWindow" >click me</a>
<a href="http://www.mnswf.com/" rel="1" class="newWindow" >click me</a>

Include the jQuery JavaScript library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

Include the jQuery Script

Place this script below the include of the jQuery library. Below I explain what each line does.

<script type="text/javascript">
	var windowSizeArray = [ "width=200,height=200",
							"width=300,height=400,scrollbars=yes" ];

	$(document).ready(function(){
		$('.newWindow').click(function (event){

			var url = $(this).attr("href");
			var windowName = "popUp";//$(this).attr("name");
			var windowSize = windowSizeArray[ $(this).attr("rel") ];

			window.open(url, windowName, windowSize);

			event.preventDefault();

		});
	});
</script>

The jQuery Script Explained

<script type="text/javascript">
	//Created an array to hold onto the desired info.
	var windowSizeArray = [ "width=200,height=200",
							"width=300,height=400,scrollbars=yes" ];

	$(document).ready(function(){
		//Links that has the ".newWindow" class will call this script.
		$('.newWindow').click(function (event){

			// Gets the URL from the clicked link.
			var url = $(this).attr("href");

			/*Gets the name from the clicked link. Currently I commented out the
			  jquery script and just put "popUp" for a default name because I didn't
              include the name in the links.*/
			var windowName = "popUp";//$(this).attr("name");

			/*Places the string from the array into the windowSize variable.
			  The array slot is determined by the "rel" number on the link.*/
			var windowSize = windowSizeArray[  $(this).attr("rel")  ];

			//This method opens a new browser window.
			window.open(url, windowName, windowSize);

			/*Prevents the browser from executing the default action and
			  allows us to use the "window.open" within our script.*/
			event.preventDefault();

		});
	});
</script>

New and Improved Version

Below I use the data attributes to set the size of the popup window. This way is more dynamic because you do not need to have extra logic in the JavaScript.

<html>
<head>
    <title></title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.js-newWindow').click(function (event) {
                event.preventDefault();

                var $this = $(this);

                var url = $this.attr("href");
                var windowName = "popUp";
                var windowSize = $this.data("popup");

                window.open(url, windowName, windowSize);
            });
        });
    </script>
</head>

<body>
    <a href="http://www.typescriptlang.org/" class="js-newWindow" data-popup="width=200,height=200">click me</a>
    <a href="http://nodejs.org/" class="js-newWindow" data-popup="width=300,height=500,scrollbars=yes">click me</a>
</body>
</html>
]]> https://codebelt.github.io/blog/jquery/open-new-browser-window-with-jquery-custom-size/feed/ 46