snippetbymatt

I posted about this not so long ago without using JQuery/Ajax, here is the link .This time, with different approach and much easier.All you need to do is create function in views.py then use it in urls.py and call the URL using Ajax.  HTML: <form action="/change_pw/" method="post" id="frmChangePW"> {% csrf_token %} <div class="form-group"> <label for="id_old_password">Old Password:</label> <input class="form-control" id="id_old_password" name="old_password" type="password" placeholder="Old Password" autofocus=""> </div> <div class="form-group"> <label for="id_new_password">New Password: <input class="form-control" id="id_new_password" name="new_password" placeholder="New Password" type="password"> </label> ...

This is actually just a simple CSS manipulation, you need to create your legend using an image editor. This won't generate automatically based on your styling. Demo <!--HTML--> <div id="map"> <div id="infoi"> <img src="https://b3218a0dcf0f0481f4a486b8229300982d8fe048-www.googledrive.com/host/0B0JBx-GczUoYUExkeENEQWFDb00"/> </div> </div> /*CSS*/ #map { width: 500px; height: 500px; position: relative; background: #343434 } #infoi { width: 100px; height: 100px; position: absolute; bottom: 35px; left: 10px; } #infoi { z-index:10000; }

Demo In this example we get the corresponding latest x-axis value of the max data in a y-axis series in Highcharts. Here's the code below with comments: $(function () { $('#container').highcharts({ xAxis: { categories: ['a', 'b', 'c', 'd', 'e', 'f'] }, series: [{ data: [5, 16, 10, 3, 12, 16] }, { data: [11, 18, 15, 16, 18, 11] }] }); $("#click").click(function () { var chart = $("#container").highcharts(), series, i = 0, arr = [], myIndex = [], //change the index of the series that you like to get s = chart.series[1], max = s.dataMax, len = s.data.length; //getting the index with max value in y-axis for (var j = 0; j < len; j++) { arr[j] = s.data[j].y; if (arr[j] =...

Demo The code below highlight the words in the paragraph if it matches on the inputted keywords or text from the user. Gets the value from the text box Split if the words are separated by space Store the values in an array Pass those values in the function and use  RegExp  to evaluate If found, replaces the text with added span tag for the highlight. $.fn.wrapInTag = function (opts) { var words = opts.words || [], regex = RegExp(words.join('|'), 'gi'), replacement = '<span class="highlight">$&</span>'; return this.html(function () { return $(this).text().replace(regex, replacement); }); }; $('#terms').keyup(function () { var keywords = []; keywords = $(this).val().split(" "); $('p#text-body').wrapInTag({ words: keywords }); }); Demo

Demo 1. Add these JavaScript inclusions in the head of your page <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script><script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> 2. Add the JavaScript to initialize the chart on document ready $(document).ready(function () { var options = { chart: { renderTo: 'container', type: 'line', width: 800, height: 450 }, title: { text: 'Cabadbaran, Agusan del Norte' }, subtitle: { text: 'Source:CSU Phil-LiDAR 1', x: -20 }, xAxis: { categories: [], minTickInterval: 15, TickInterval: 15, tickmarkPlacement: "on", labels: { padding: 10, ...

So to do that, you need a text file full of quotes. HAHAHA Separated by new line. DEMO $('#btn_modal').click(function () { var num = 0; $.ajax({ url: "https://dl.dropboxusercontent.com/u/75734877/taglines.txt", type: "GET", dataType: "text", beforeSend: function () { $('#kowts').show().html('<img src="http://www.feelol.com/Content/images/Loading.gif" />'); }, success: function (t) { var lines = t; var lineArr = lines.split('\n'); num = Math.floor(Math.random() * lineArr.length); $('#kowts').show().text(lineArr[num]); }, error: function(){ alert('Error') } }); }); Split the quotes from text file by "\n" (new line), then get its length and generate a random number between 0 to maximum length. Then use the generated number a...

Read the documentation of Bootstrap Multiselect  . Anyway, just include all the files in you html page (head section), you will need these following files (JS and CSS files): //ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js https://dl.dropboxusercontent.com/u/75734877/bootstrap-multiselect.css https://dl.dropboxusercontent.com/u/75734877/bootstrap-multiselect.js Copy and save the files if you want to serve it with your own, and use it like this in your template: <script type="text/javascript" src="{% static "js/bootstrap-multiselect.js" %}"></script> Then refer to this JSFiddle for demo.  Let's say you have this select element in your page with the id, "bldg_type" <select class="form-control" id="bldg_type" multiple="multiple">...

DEMO First, you need to include all the necessary files for this to work. Place these three files in the head section of your page.. jquery-1.10.2.min.js  bootstrap.min.js bootstrap3-typeahead.min.js Then, this script: $(document).ready(function () { var objects = []; var map = {}; $('#person').typeahead({ source: function (query, process) { $.ajax({ url: 'get_person.php', type: 'POST', dataType: 'JSON', async: true, success: function (data) { objects = []; //resets the objects map = {}; //to avoid duplication $.each(data, function (i, object) { map[object.full_name] = object; objects.push(object.full_name); }); process(objects); } }); }, //end source ...

Add this to your urls.py: url(r'^accounts/change-password/', 'django.contrib.auth.views.password_change', {'post_change_redirect' : '/accounts/password-changed/'}), url(r'^accounts/password-changed/', 'django.contrib.auth.views.password_change_done'), Just edit the links above. Then in you templates folder, create new folder and name it   registration .  . Then create this html file below: password_change_form.html {% extends "edit_profile.html" %} {% block head_title %}Change Password{% endblock %} {% block content %} <div class="jumbotron" style="width: 940px; margin: 80px auto; border-radius: 5px;"> <form method="post" action="."> {% if next %} <input type="hidden" name="next" value="{{ next }}" /> {% endif %} {{form.as_p}} <input type="submit" value=...

Let's say table rows are populated with information and you want the "input text" to be filled with those info. Here's how: Sample HTML code for table: <table id="viewOwnersInfo" class="table table-hover" border="1"> <tbody> <tr> <th>Last Name</th> <th>First Name</th> <th>Middle Name</th> <th>Address</th> <th>Contact No.</th> <th>Tin</th> </tr> <tr> <td>Bonotan</td> <td>Melbert</td> <td>Recto</td> <td>P3A Ampayon, Butuan City</td> <td>09488588371</td> <td>TIN-2392399-23293</td> </tr> <tr> <td>Morales</td> <td>Edsel Matt</td...

Here's the screenshot 'coz I'm not good at explaining. A pop up will show if the feature layer is found, it is also selected. Here's the link for displaying Popups. Here's the code below for reference: Supposed your Vector Layer name is "layer_agao" and your SelectFeature Control is "selectControl".

The body background changes at  12:01 am-6:00am (sunrise.jpg) , 6:01am to 12:00nn (day.jpg), 12:01pm - 6:00pm (sunset.jpg)  and 6:01pm to 12:00mn (night.jpg). Here's the code:

This is a simple application of "addClass", "removeClass", "show" and "hide" in JQuery. Here's the demo showing it: DEMO The trick is position the arrow on the object as shown in the demo then on click, display it.  Here's the code below:

Here's the demo showing it: Click Me The trick is create a separate image  for hover effect (in this case, glow). The hard part is getting the position right. We used, absolute positioning and here's the code below. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Clickable Parts of Image</title> <style type="text/css"> .bg { position: relative; margin: 20px 0 20px 40px; padding: 5px 0; height: 766px; width: 900px; background-image: url(kon.png); background-repeat: no-repeat; } #box-link1 { position: absolute; top: 0px; left: 0px; width: 384px; height: 575px; background-image: transparent; } #box-link1:hover{ background-ima...

Definition and Usage The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is used to separate content (or define a change) in an HTML page. Default hr tag is ugly. So, let's use CSS instead. :P

So far, this is the best(for me) smooth scrolling "piece of code" using JQuery. It will use ID as the destination. Here's the code for demo:

The easiest way to do it is to use "p" or the paragraph html tag because browsers automatically add some space (margin) before and after each <p> element which can be a replacement for table rows and  css property to style/define it.

The code below will generate unique name and id based on table's first row, paste it before </body> $(document).ready(function () { var rows = $("table tbody tr"); rows.each(function (i) { var inputs = $(this).find('input'); i++; inputs.eq(0).attr('id', 'txtTitle'+i ) .attr('name', 'txtTitle'+i ); inputs.eq(1).attr('id', 'txtLink'+i ) .attr('name', 'txtLink'+i ); }); }); Let's say for example you have this line of code in HTML: <table id="matt">     <tbody> <tr>         <td><input id="txtTitle" name="txtTitle" type="text" value="title" /></td>         <td><input id="txtLink" name="txtLink" type="text" value="link" /></td>     </tr> <tr>         <td>...

Before anything else, the interface is based on Facebook but it's on green. :D Anyway, I'm too lazy to post the codes here so I decided to just upload all the files and you can download it if you like.

What I mean about the easiest way, is no JavaScript , no sign-up, no PHP codes and it loads very fast. Nah, here's the demo showing it. Demo Well, I've been quite since I'm busy at school. This would be my last post in February. Let's do this: First,  from Dashboard > Template > Edit HTML then find, <data:post.body/> Then paste this code below or above it: <span class='post-counter'> Post Views: <img height='25' src='http://counters.branica.com/?i= 2 &amp; u=false &amp;ox=10&amp;oy=17&amp;c=000000&amp;b=transparent.png&amp;f=Terminator.ttf&amp; fn=false &amp;w=110&amp;h=25&amp;s=10' style='border: 0px; margin-bottom: -8px; margin-left: 0px; margin-top: -5px; padding: 0px;' width='110'/> </span> Then Save it. Customization: Post Views:  - change the text with your preference. 2  - change it with your preferred initial count, number...