Skip to main content

Posts

Showing posts from February 13, 2012

Is it possible to lazy load Jquery (not a plugin)?

I've got several JavaScript files that load along with many of my pages, costing valuable tens of kilobytes of data download. One of these is a version of jquery.min.js which although minified, is still 25kb or so. My issue is that a huge chunk of mobile phones don't support JavaScript so the downloading of this and other JS files is a waste of data. Is there anyway to lazy load the JQuery file by adding a <script> tag in the page that calls the JS file and would obviously only execute if a browser supports JavaScript, which would only then make sense to download it?

fetch the hidden text and put it within a div tag

When an anchor tag is clicked, "anotherDiv" is made visible. Using jQuery, I want to be able to fetch the description within each li onClick of the anchor tag and insert it into the "anotherDiv" area which is also visible onClick of an anchor tag. The description text is initially set to display none. <style> .desc{ display:none; } #anotherDiv{ display: none; } </style> <li style="overflow: hidden; float: none; width: 158px; height: 125px;"> <a onClick="return addPlayer(952541791001, 661361792001, 600, 320)" id="no8" class="video-pop"> <img width="132" height="75" alt="" src="image.jpg"> </a> <div class="label">The label goes here......</div> <div class="desc">The descripti

jquery supersized plugin - allow image to scroll with site

I'm developing a site and the client has requested we use the supersized plugin to display a gallery of images - which is fine, HOWEVER the have requested that the background image scrolls with the site rather than being fixed to the browser window. Something like this - http://www.surfcampinportugal.com/ . I've tried amending my CSS (changing position: fixed to absolute) but nothing seems to achieve this effect. Site is on my local server at the moment but I'm using supersized 3.2 with a fade transition - http://buildinternet.com/project/supersized/slideshow/3.2/demo.html Any pointers/ideas would be VERY welcome. Thanks

dynamic key in JSON file (used by backbone.js models for example&hellip;)

I am trying to create a backbone.js model with dynamic keys but can't seem to get it done right. Here's my model: window.MyModel = Backbone.Model.extend({ myDynamicVar : "country", urlRoot: "api/myModel", defaults: { "id": null, this.myDynamicVar : "USA", "country": { "route":"test/test/test", "class":".usa2", "txt":"USA 2" }, "region": "California", "year": "", "description": "", "picture": "" } }); Here I am trying to have myDynamicVar replaced by its content in my model. Any thought how I could get this done? Thanks in advance, Jimmy

Where can I find a very simple jQuery/AJAX Coldfusion tutorial? [closed]

Edit: After following a few tutorials I am stuck here I am new to jquery but have some experience with Coldfusion. I have been desperate for an easy tutorial that shows how jQuery/AJAX pulls a query from a ColdFusion9 CFC and displays it on the HTML calling page. I tried following this ben_tutorial but it is too complex for me. There is also a another tutorial , but I do not want to install a plugin. Where should I be looking? I am googling "jquery ajax coldfusion"

Running JQuery or Javascript on Facebook

I am trying to execute a simple bit of jQuery or JavaScript once logged in to my Facebook account. The end goal at this moment is to click on my custom feed once the element is visible, rather than having it default to the entire Facebook friend feed. On trying to code this using my Developer's Console in Chrome no JavaScript/jQuery seems to work at all. Even just a simple $('div'); returns null . Is it possible to run code on Facebook's page? What are they doing differently? I guess the end goal would be to click a div if the .val('give a waffle'); but just understanding why it has not worked until now would also be interesting. Any hints, tips or suggestions are more than welcome.

Input type=range does not update its value

I have the following: <input id="slider-min" type="range" min="0" max="55" value="0" step="5" onchange="sliderMinUpdate(this.value)">, <div id="min_input">0</div> <input id="slider-day" type="range" min="0" max="10" value="0" step="0.5" onchange="sliderDayUpdate(this.value)"> function sliderDayUpdate(value){ $('#slider-min').val(0); } function sliderMinUpdate(value){ $('#min_input').text(value); } When I focus in slider-min using keyboard and select keypad right or left it updates values in min_input correctly. When I change slider-day it fires onChange and updates the value from slider-min to 0 and I can see it working in my page (the slider returns to 0). The problem occurs when I select the first increment of slider-min , in this case 5. When the onChange from slider-day is cal

Trigger a form submit on a different page - Rails 3

So, I have a form on page 'A' which lets users type in the name of a band and see album covers and prices, courtesy of the Amazon API. <%= form_tag(amazon_path, :method => 'get') do %> <h3> Search for Albums </h3> <%= label_tag(:amazon_search_form, "by Band/Artist:") %> <%= text_field_tag(:amazon_search_form) %> <%= submit_tag("Search") %> <% end %> Users can also see all bands they are following on their profile page. From their profile page, they are able to select a band 'b' (perhaps by clicking on the band's img). After that, if they click on the link to go to page 'A', I would like the form to be automatically submitted with band 'b's name so that the user won't have to type in the name of band 'b' to see the albums for band 'b'. I can't tell if jQuery's .submit function can pass a parameter of the band's name to the form when

Can you bind two events to a handler with jQuery?

(By the way, a quick experiment indicates that the answer is "yes", but it might be "it doesn't work in every browser".) I am using a validator plugin that binds something to the submit event of a form. But I want to perform additional validation. It would seem that I can simply bind my additional validation to the submit event. HOWEVER, I worry that that might not work on every browser. Should I expect this to work or will I need to write more complex code?

First JQuery project&hellip; a little stuck

Last night someone on here really helped me out a lot with my first validation from scratch, i brought it alot further since last night. This is the first time I'm touching JQuery, I apologize for my crumby coding. Here's what I have that works fine and dandy for the validation UP until the last else statement: //VALIDATE FIRST REGISTER PAGE! $('#submit1').live('click', function() { check_value1(); }); function check_value1(){ var firstname = $('#firstname').val(); var lastname = $('#lastname').val(); var email = $('#email').val(); var password = $('#password').val(); var username = $('#username').val(); if(firstname =='' || firstname.length <2) $('#fnameError').fadeIn().fadeOut(5000); else if(lastname =='' || lastname.length <2) $('#lnameError').fadeIn().fadeOut(5000); else if(email =='' || email.length <5) $('#emailError').fadeIn().fadeOut(5000); else if(pass

How do you remove a class that matches a pattern from the class attribute, but retain the other classes?

I want to delete the classes that end with 'blue' from the class attribute on all tags sample html <p class="text_blue happy">this is blue text</p> <p class="text_red nothappy">this is red text</p> <img class="img_blue nothappy" /> This will give me all the elements with classes that end with 'blue' $('[class$=blue]'); how do I pop these matched classnames off of the class attribute?

Set element to Hidden when clicked

I'm putting together this basic script for a site: http://jsfiddle.net/mcgarriers/rVPnu/2/ It works great when I select the various numbers (it shows the relevant divs) but when I go back to click "Select" it still displays the <div> s. I'd like it if the user clicks "Select" that mySpecialElements is hidden again . Can someone show me how to achieve this? Many thanks for any pointers.

Infinite scroll new element

I'm trying to add a voting function to each new element within the Infinite Scroll. I managed to get the voting functions working but this doesn't work with new elements loaded when scrolling down the page. Pastebin URL: http://pastebin.com/0eNYDXrm I've attached my code below. Any help or advice would be appreciated...Many Thanks! <script type="text/javascript"> $('.protected-post-form').center(); $('#content').infinitescroll({ debug: false, loading: {}, state: { currPage: "1" }, nextSelector: "div.navigation a:first", navSelector: "div.navigation", contentSelector: "#content", itemSelector: "#content div.post", pathParse: ["<?php echo $_SERVER["HTTP_HOST "] . $_SERVER["REQUEST_URI "] ?>page/", "/"] }, function() { window.setTimeout(infinite_scroll_callback(), 1); }); function applyvote(elemen

How Can I add This jQuery Twice to the Same Page?

I am trying to add this code, generated by a WordPress plugin, to the same page twice - but it won't generate the countdown timer the second time.... Is there a simple change I could make to make it appear twice? THANKS! <script type="text/javascript"> <!-- jQuery(document).ready(function($){ var austDay = new Date("2012/02/11 00:00"); jQuery.countdown.regional["uji"] = { labels: ["Years", "Months", "Weeks", "Days", "Hours", "Minutes", "Seconds"], labels1: ["Year", "Month", "Week", "Day", "Hour", "Minute", "Second"], compactLabels: ["A", "L", "S", "Z"], whichLabels: null, timeSeparator: ':', isRTL: false }; jQuery.countdown.setDefaults(jQuery.countdown.regional["uji"]); jQuery(&

hiding and showing radio button and dropdown based on values

<select name="drop1" id='drop1'> <option value="" selected="selected"></option> <option value="data1">Data1</option> <option value="data2L">Data2</option> <select name="drop2" id='drop2'> <option value="" selected="selected"></option> <option value="data3">Data3</option> <option value="data4">Data4</option> When I select data1 and data3 from the two drop downs i need to display another dropdown below: <div id="show_drop"> <select name="drop3" id='drop3'> <option value="" selected="selected"></option> <option value="data5">Data5</option> </div> else display radio button: <div id="rbutton"> <input type="radio" nam

<script type=&hellip;></script> works but javascript_include_tag doesn"t

I put jquery.validate.js in my public/javascript folder and I called <%= javascript_include_tag 'jquery.validate' %> in the header but I get this in the chrome debugger: Uncaught TypeError: Object [object Object] has no method 'validate' I can see jquery.validate.js?1317943298 under javascripts/ in the chrome debugger. On the other hand, when I add this right before I call validate(), <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> it works. I see jquery.validate.js under jquery-validation/ as well as jquery.validate.js?1317943298 under javascripts/ in the chrome debugger. Both files are identical. What's going on here?

Chained drop down box value not showing in IE 7,8,9 or lower browser

Here is my javascript code::--- <script language="javascript" type="text/javascript"> //Browser Support Code function ajaxFunction(str){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server var url="../frontend/views/home/category.php" + "?value="+str; ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState

make jQuery load one in joomla

I'm creating a module for joomla that needs jQuery and some jQuery plugins. My problem is that if other plugins load jQuery too it rewrites mine and disables jQuery plugins! How can I make sure jQuery loads only once (And before my plugins) in page? thanks.

Fancybox Thumbnail Opacity

This may be obvious, but I can't find the answer anywhere after hours of searching. I just need the syntax to adjust the initial opacity of a Fancybox gallery. Not the overlay or anything like that - just the initial thumbnail opacity. I've tried changing every setting I can find in the fancybox js and tried overriding opacity in the css, but no matter what I do, they stay the same. Hmmm. I have no weird code, just a simple $("a.gallery").fancybox() call on a thumbnail image. I just want the opacity to be a bit more opaque!

How do you mitigate risk when introducing multivariate testing into a dynamic web application?

My company is engaging with a multivariate testing vendor (I can't disclose which one just yet), and I am being asked to integrate their system into our flagship B2C commerce site. Usually, the word "integrate" is a heavy-duty term. However, here it means to add a <script> tag on several views, and then be out of the loop from that point forward. The mulitvariate experiments will be set up by our marketing department (and/or the vendor). Our development team will not be involved in that, and may not even be aware when it's happening. Essentially, I am being told to deliberately add a JavaScript-injection attack vector to our flagship application... and hope for the best. My concerns are not so much with malicious code as they are with inadvertent screw-ups. Our CSS and basic page layout is a mess already, and I anticipate catiching the heat when someone else's multivariate experiment blows up the home page look-n-feel, etc. Much more importantly, ther

Why does JSON.stringify screw up my datetime object?

{ id: 1533, story_type_id: 1, content_id: 470, created_at: Sun, 05 Feb 2012 07:02:43 GMT, updated_at: Sun, 05 Feb 2012 07:02:43 GMT, type_name: 'post' } I have a JSON object with the "datetime" field like above. It's perfect. But when I stringify it (I want to store it in cache), I get this format: "created_at":"2012-02-05T07:02:43.000Z" This causes problems, because when I want to JSON.parse this, suddenly it's no longer datetime format and it's incompatible with my other format. What can I do to solve this problem? I have 'created_at' littered everywhere throughout my application. I don't want to manually change each one.

status box like twitter status box [closed]

I am a new PHP learner. I need a status box which just like twitter status box. I have tried many websites and i can not find the exact solution. What i exactly need is 1. Status box like twitter, when typing on the box it will increase its size automatically 2.If there is URL in the status, it should automatically highlight URL like twitter 3.After 500 characters user should not allowed to type in. I don't want to use any API. I think the code might be combination of HTML,ajax and javascript. Please someone help me. I am new in this area. So if it is possible give a little explanation of your code. I found a bit similar question in this website but the answer is not given there.

jQuery Select list, selected text value rather than the value

building on my last question jQuery getting values from multiple selects together I have the select list like: <select name="access" class="change" id="staff_off" runat="server"> <option value="8192">Off</option> <option value="8192">On</option> </select> And I basically want to add or subtract the value of the options if it's off, subtract if it's on add it. It's going to be stored in a cookie (it uses bitwise) The jquery I have is: <script> $(document).ready(function(){ var currentAccess = $.cookie("access"); }) $("select").change(function () { var currentText = $(this).text() var value = $(this).val() $.cookie("access", value, { expires: 24 }); alert(currentText); alert( $.cookie("access")

Problems with subsequent instances of a JS object in IE6

I got a little problem with IE6 which doesn't appear on Chrome or Safari or Firefox. All is working fine except one thing: my web app defines a constructor/prototype from which I create multiple instances like this: var app = {}; app.mapConceptFirst = new MapConcept("#first"); app.mapConceptSecond = new MapConcept("#second"); app.mapConceptThird = new MapConcept("#third"); Here's the constructor: function MapConcept(id) { this.currentNavigator = ""; this.start = 0; this.angle = 0; this.clientX = 0; this.clientY = 0; this.currentMenu = 2; this.h = 0; this.w = 0; this.itemList; this.firstRotation = 0; this.section = id; $(window).resize(function () { this.h = $(window).height(); this.w = $(window).width(); }); jQuery.preLoadImages("images/anneau.png", "images/anneau1.png", "images/anneau2.png", "images/anneau3.png", "imag

KnockoutJS calling methods with context in bindings

Here I have an example code: <div data-bind="foreach: someData1"> <a href="#" data-bind="click: myFunction"></a> </div> <div data-bind="foreach: someData2"> <a href="#" data-bind="click: myFunction"></a> </div> How inside myFuncion code to know when it's called: when foreaching someData or someData2?

Center point on html quadratic curve

I have a quadratic curve drawn on html canvas using context.quadraticCurveTo(controlX, controlY, endX, endY); . I have the control-point and the starting and end points, which are not necessarily level with each other horizontally. How can I find the centre point on the curve using these parameters? Actually I want to put a div tag on this center point. Is there any equation solving involved in this process?

How do I remove multiple href links via the ID with jquery?

I'm having issues removing several of my href links that all have the same ID. Here is my code snippet: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); $.getJSON("../ajax_blocked.php?op=delete&id="+id, function(data) { if (data) { $("#delblk_"+id).each(function() { $(this).remove(); }); } }); My HTML looks like this: <a href="sent.php" id="delblk_7" class="delblk" ><span class="label label-important">Unblock</span></a> <a href="sent.php" id="delblk_7" class="delblk" ><span class="label label-important">Unblock</span></a> <a href="sent.php" id="delblk_8" class="delblk" ><span class="label label-important">Unblock</span></a>

How to .load() just a specific div from a page into a a target div, not the whole page

I have the following script that loads a page into a div and not just the targeted div. This is most evident when going back to my index and my header and footer are jammed into the <div id="contentspace"></div> . I read on here somewhere that the div needs to be placed in it's own page prior to being displayed. Not sure which method would do that. Is this possible without hashtags Thanks for your help <script type="text/javascript"> $(function() { $('#header a').click(function() { $('#contentspace').empty(); $("#contentspace").load(this.href, function(response){ console.log($('#content', response).html()) event.preventDefault(); }); }); }); </script>

Firefox 10 - unclickable buttons?

Has anyone seen this behavior: I have a couple of HTML buttons used to drive a content rotator: <div id="rotatorControls" class="rotatorControls" runat="server"> <input name="previous" id="previous" type="button" value="&laquo;" /> &nbsp; <input name="next" id="next" type="button" value="&raquo;" /> </div> The buttons are activated with a little jQuery: $(document).ready(function() { mcarousel = $("#carouseldiv").msCarousel({ boxClass: 'div.box', height: 100, width: 450 }).data("msCarousel"); //add click event $("#next").click(function() { //calling next method mcarousel.next(); }); $("#previous").click(function() { //calling previous method mcarousel.pre

How do I determine if a string is date format?

I have some strings like this: 2012-02-05T07:42:47.000Z mixed with other strings. It is always in this format. (but the numbers are not the same, of course...the times are different) (not Sun, 05 Feb 2012 07:42:47 GMT ) I want to know whether a string matches that format. How can I determine that? It's so complicated with the colons and dots and stuff.

.color JQuery not working in Chrome/Safari

I have a piece of jquery which is working fine on firefox and ie but not working in chrome and safari here it is if (intCurrPortionId == intOldPortionId) { $('#' + portionCell + '').css("backgroundColor", "green"); } else { $('#' + portionCell + '').css("backgroundColor", "red"); } and this is not working.. m calling this jquery on checkbox onchange event EDIT: It is not executing the function in chrome and safari.. i added the alert in the code and found out that no alerts were popping... now how to tackle it

CSS3 transitions inconsistent across FF and Chrome

So I have created a CSS3 animation that does not behave consistently across the different browsers. Here is a quick and dirty overview, and I have included a JSFiddle link at the end. Here is the CSS: .cloned_object { position:absolute; background-color:white; width: 700px; height: 640px; margin: 0; /*for centering purposes*/ -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ; transition: width 1s, height 1s, top 1s, left 1s, margin 1s; } and the JS function: $('.content_cell').on('click', function(event) { // if the user is on a browser older then IE9 if ($.browser.msie && $.browser.version.substr(0,1)<10) { var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');

Removing the dreaded annonymous function event listener

I have a function I’m using to add my listeners to a page but I need a way to globally clear them. No matter how I try, I can’t give the functions a reference to later be emptied completely so they could be re-added later. proto.handlerFunc = {}; proto.addListener = function (evt, handler) { var self = this; this.handlerFunc = function () { handler.apply(self); } this.someObj.addEventListener(evt, this.handlerFunc, false); } proto.removeListener = function (evt) { var self = this; this.myVideo.removeEventListener(evt, this.handlerFunc, false); this.handlerFunc = null; }

How to check whether the user has a bookmark (iPhone)

For mobile web development: I am making a website which asks the user (on an iPhone or iPod Touch) to save the page as a bookmark on the homescreen. I do not want to show this message when the user already has a bookmark, so how can I check that (preferably using JavaScript, I don't know any other way). Any tips are welcome.

matching outputted Html buttons with outputted Php/MySQL data

public function dcr() { $query = $this->db->query("SELECT * FROM church_repo"); foreach ($query->result() as $row) { $data = array('churchName' => $row->church_name, 'streetAddress' => $row->street_address, 'locationalState' => $row->locational_state, 'locationalZIP' => $row->locational_zip, 'locationalCountry' => $row->locational_country, 'locationalCity' => $row->locational_city, 'overseerAccountId' => $row->overseer_account_id, 'taxExemptionNumber' => $row->tax_exemption_number, 'accountStatus' => $row->status, ); $this->load->view('admin-request', $data); } } I

processing.js change script source

I need to find a way where I can dynamically change the source of a processing script inside an HTML document. This is the embedded script which works fine: <script type='application/processing' src='sketch.txt' id="applet"> </script> Now I try to change the source: $('#applet').attr('src', 'sketch2.txt'); alert($('#applet').attr('src')); The alert shows that the source was changed to 'sketch2.txt' but the applet still remains the same. I think I need to refresh the script in some way. Thank you in advance for any help!

Maintaining dynamic textbox control values into an array in javascript onchange event

I need to maintain text box values into an array in javascript onchange event. The text box control is created dynammically in javascript function. I have used below code. But at the end the array contains current element only. Previous values are not maintaining. How can I maintain textbox value each time entered. <script type="text/javascript" language="javascript"> function DrawTextBox(j) { var imgElement = document.getElementById('myimage'); var imgCoord = imgElement.getBoundingClientRect(); var cl = imgCoord.left + 20; var x = x - cl; var y = y - imgCoord.top; var rect = document.getElementById(j); if (rect == null) { rect = document.createElement("div"); rect.id = j; var pElement = document.getElementById("imgDiv"); pElement.appendChild(rect); } if (w < 0) { w = 10; } if (h < 0) { h = 10; } var l = parseInt(document.get

How to get even on tab selection, and get the currently instead of previously selected tab?

I'm using this snippet to bind on select event: $("#myTabControl").tabs({ select: function(event, ui){ var selectedTabName = $("#myTabControl").find(".ui-tabs-selected").find("span").text(); // Do stuff with the selected tab name. } ... }); The problem is ... I'm getting the name of the tab that was previously selected, not the one that is currently being selected. Any advice on how to get the latter? Note - this question is either very similar or a dup ... but I'm not sure it is phrased well enough (I'm not even sure if it's a complete dup or not).

format cell in flexigrid to show value [closed]

Possible Duplicate: How can I format numbers as money in JavaScript? Does anybody know how I can format cell in flexigrid to show value in currency for example euro with separator "," and for cents "." I import value with JSON but don't know how to change look of that number to be like amount to pay. Thx...