Category Archives: JavsScript

Is object in viewport?

I can’t remember if I posted this before, so I am posting again. This fun little script checks to see if a particular object is in the viewport. http://codepen.io/TroyThib/pen/PPOzyv

Posted in JavsScript, jQuery | Tagged , , | Comments Off on Is object in viewport?

Change URL hash with JavaScript using location.hash

This fun little function will change the hash (#) in the URL. In this example, I have an input element and it’s contents will populate the hash. On the “keyup” event the “location.hash” function creates or changes the hash to … Continue reading

Posted in JavsScript, jQuery | Tagged , , , , | Comments Off on Change URL hash with JavaScript using location.hash

Javascript Query Strings – get URL variables

Nice sweet and clean function for grabbing URL variable from CSS-Tricks.com. Get URL Variables

Posted in JavsScript | Tagged , , , | Comments Off on Javascript Query Strings – get URL variables

Create a JavaScript array and loop through it

Create a JavaScript array and loop through it: var theBeatles = [ “John Lennon”, “Paul McCartney”, “George Harrison”, “Ringo Starr” ]; for (i = 0; i < theBeatles.length; i++) { $(‘#myDiv’).append(theBeatles[i]+’ ‘); }

Posted in JavsScript, jQuery | Tagged , , , , | Comments Off on Create a JavaScript array and loop through it

Scroll to ID – JavaScript and jQuery

When you have internal page links (anchor links) and you want a nice scroll effect instead the harshness of just the immediate jump-to that internal links give you, use some fun jQuery to get er done. // scroll to ID … Continue reading

Posted in JavsScript, jQuery | Tagged , , , | Comments Off on Scroll to ID – JavaScript and jQuery

5 nifty JavaScript tricks that you may not know

I like the first one the most from this post, so I am posting it here, but the others are cool too.  1. A compact string comparision Let’s say you want to check if a string value is present in … Continue reading

Posted in JavsScript | Comments Off on 5 nifty JavaScript tricks that you may not know

How to Create a Basic jQuery Plugin

This is one of the best “to the point” jQuery plugin tutorials I have seen. http://learn.jquery.com/plugins/basic-plugin-creation/

Posted in JavsScript, jQuery | Comments Off on How to Create a Basic jQuery Plugin

6 Practical Examples For Building Parallax Websites

http://tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/

Posted in JavsScript, jQuery, Parallax | Comments Off on 6 Practical Examples For Building Parallax Websites

7 Essential JavaScript Functions

More mad knowledge from David Walsh. http://davidwalsh.name/essential-javascript-functions

Posted in JavsScript | Tagged , , , , , , , | Comments Off on 7 Essential JavaScript Functions

Use preventDefault() to stop a link from trying to open URL

This comes into play when using anchor links to trigger JS functions. For example, you might have a link that jumps you to a section of the same page, but the click even also triggers some other functions, like animating … Continue reading

Posted in JavsScript, jQuery | Tagged , , , | Comments Off on Use preventDefault() to stop a link from trying to open URL

HTML5 Techniques for Optimizing Mobile Performance

This article discusses the bare minimum of what it takes to create a mobile HTML5 web app. http://www.html5rocks.com/en/mobile/optimization-and-performance/

Posted in CSS3, JavsScript, Mobile | Comments Off on HTML5 Techniques for Optimizing Mobile Performance

show hide side menu – hamburger

Simple slide in/out menu. This script expands the menu width. You could easily have it truly slide in and out. This is really expand and collapse menu. <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>Untitled Document</title> <style> body, html, … Continue reading

Posted in HTML/CSS, JavsScript, jQuery | Comments Off on show hide side menu – hamburger

Vertically Align contents of DIV

I first put the contents in a DIV inside the parent DIV.  I used jQuery to get the height of both the main wrapper and the nested content DIV. Then, subtract to height of the content DIV from the height of … Continue reading

Posted in HTML/CSS, HTML5, JavsScript, jQuery | Comments Off on Vertically Align contents of DIV

Event Propagation

Event PropagationThis is when a triggered event not only fires the intened event, but also fires events for parent and child DOM nodes (event bubbling and event capturing). Event BubblingThis happens when an event bubbles up to the parent nodes. … Continue reading

Posted in JavsScript, jQuery | Tagged , , , , , , | Comments Off on Event Propagation

Yes, I did reinvent the wheel. I spend about 3 hours creating a Captcha type form validation script.

I had a custom form in a WordPress page that submitted to PHP form handler. I needed some type of Captcha style validation function. All the plugins I found used form plugins, and all the PHP scripts I found required … Continue reading

Posted in JavsScript, jQuery, PHP/MySQL, Web Dev | Comments Off on Yes, I did reinvent the wheel. I spend about 3 hours creating a Captcha type form validation script.

JavaScript include

Med size static site (50+ pages) needs nav update. Really? jQuery take me way. 50+ static pages. They were originally done using Dreamweaver templates, so technically they weren’t static, but the who knows where the template files are now. I’m … Continue reading

Posted in JavsScript, jQuery | Comments Off on JavaScript include

A Step-by-Step Guide to Your First AngularJS App

http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app

Posted in JavsScript | Comments Off on A Step-by-Step Guide to Your First AngularJS App

Cannot target inline elements an apply jQuery Hover in IE 7-8?

  The code below only seems to work for the block-level elements only, with the acceptation of input. $(“a, span, strong, div, p, input”).hover(function(){ $(this).stop().fadeTo(100,0.4); },function(){ $(this).stop().fadeTo(100,1); }); I get the same results using css(opacity), animate(opacity) BTW. Animate works, but … Continue reading

Posted in JavsScript, jQuery | Leave a comment

Interviewing a front-end developer

Interesting questions, and insightful into what some are looking for in a front-end dev. http://blog.sourcing.io/interview-questions

Posted in JavsScript, Web Dev | Leave a comment

Another good JSON/jQuery tut – A Beginner’s Guide To jQuery-Based JSON API Clients

A Beginner’s Guide To jQuery-Based JSON API Clientshttp://coding.smashingmagazine.com/2012/02/09/beginners-guide-jquery-based-json-api-clients/

Posted in JavsScript, jQuery, JSON | Leave a comment

Simple jQuery Parallax effect

This simple example will scroll the images inside the “box” DIV at a slower rate than the container. $(document).ready(function() { $(“#box”).scroll(function() { s = $(“#box”).scrollTop(); $(“#box img”).css(“-webkit-transform”,”translateY(” + (s/3) + “px)”); $(“#box img”).css(“-moz-transform”,”translateY(” + (s/3) + “px)”); $(“#box img”).css(“-ms-transform”,”translateY(” + … Continue reading

Posted in CSS3, JavsScript, jQuery | Tagged , , , | Leave a comment

JavaScript replace – Chrome not liking JS replace without using a RegEx.

I was trying to removed a parentheses character from a string. Was that why? Also, you must must rap ) in []. does not work in Chrome galleryDiv_bg = galleryDiv_bg.replace(‘)’,”); does work in chrome galleryDiv_bg = galleryDiv_bg.replace(/[)]/g,”);

Posted in JavsScript | Tagged , , , | Leave a comment

onmouseover not working in IE9

I had an image inside a DIV that had a rollover applied to it in an external JS doc. It worked in everything but IE9. IE7-8, FF, Chrome, all worked. I tried applying some inline JS using onMouseover and it … Continue reading

Posted in JavsScript | Tagged , , , | Leave a comment

Javascript – creating element

Adding elements to the DOM Create new element var NewImg = document.createElement(“img”); // creates an image element Add attributes to an element NewImg.setAttribute(‘src’, ‘https://www.google.com/images/srpr/logo3w.png’); Add new element to the page document.getElementById(“container”).appendChild(NewImg);   To set the ‘class’ attribute, you must do … Continue reading

Posted in JavsScript | Tagged , , | Leave a comment

JavaScript – get child attribute

I needed the links parent element to also point to the same href. <ul> <li onclick=”window.location=this.firstChild.href”> <a href=”index.php”>HOME</a> </li> </ul>

Posted in JavsScript | Leave a comment

JavaScript Arrays

var Beatles = []; Beatles[0] = “John”; Beatles[1] = ‘Paul’; Beatles[2] = ‘George’; Beatles[3] = ‘Ringo’; var Kiss = [‘Paul’,’Gene’,’Ace’,’Peter’]; for (var i=0, ArrLen=Beatles.length; i < ArrLen; i++) { alert(Beatles[i]); } for (var i=0, ArrLen=Kiss.length; i < ArrLen; i++) { … Continue reading

Posted in JavsScript | Leave a comment

JavaScript – get URL query string

This script first checks to see that the URL does in fact have a query sting. if(document.location.search.length) This script grabs a query string like “?id=Troy.Thibodeaux”. [split] It grabs the string after “id=” and before “&”. [split] Then it looks for … Continue reading

Posted in JavsScript | Leave a comment

Center horizonal scroll using JS and jQuery

I had a project that had a large amount of horizontal content that would be wider than most screens (1500 pixels wide) and the need was for the scroll bar to be in center so you would see the center … Continue reading

Posted in JavsScript, jQuery | Leave a comment

window.onload

function Hello() { alert(‘Hello World!”); } window.onload=Hello; // DO NOT put the parenthesis next to the function name.

Posted in JavsScript | Leave a comment

setAttribute(“class”……) does not work in IE9

This does not work in IE9: var button_div_container = document.createElement(‘div’); button_div_container.setAttribute(‘class’, ‘button’); You must do it this way: var button_div_container = document.createElement(‘div’); button_div_container.className = ‘button’; WTF?

Posted in JavsScript | Tagged , , , | Leave a comment

Change CSS with JavaScript

This is a simple script that will change the CSS of any object. You send the function the ID, the CSS attribute you want to change, and the value.. I actually struggled a bit with this as using dot syntax … Continue reading

Posted in JavsScript | Tagged , | Leave a comment

Alternative to inline JavaScript events

window.onload = function() { document.getElementById(‘div1′).onclick=readPage; } function readPage() { alert(‘test’); } As opposed to putting an “onclick” JS script call inline, here is a way (outside of jQuery) to do just that. When you click on the “div1” object it … Continue reading

Posted in JavsScript | Tagged | Leave a comment

focus() in Firefox

You have to set a little delay in the focusing of the field. setTimeout(function(){field.focus()}, 10); I found this from at http://www.codingforums.com from a user post.

Posted in JavsScript | Tagged , , | Leave a comment