How to Add array of Div to a content
Can you please let me know how we can add divs to body or other content based on an array size? for example if I have an array of var arr = [ "one", "two", "three", "four", "five" ] how I can add 5 div based on this into body?
How to trigger HTML5 play sound on Mobile Safari
<audio id="play" src="sound/some-sound.ogg" preload="auto"></audio> <button id="btn" value="play sound"></button> $(function() { $('#btn').on('click', function() { $('#play').trigger('play'); setTimeout(function() { $('#play').trigger('play'); }, 3000); }); }); This code works for most mobile browser but Apple Safari, few mobile browsers does not support play html5 format sound without click, therefore they will only hear
Jquery and chrome weird thing...
Ok well I've been trying to resolve this for days with no avail, worst thing is looking at the code there shouldn't be a problem, chrome just seems to find one.I'm using the code : if($("#chatscreen")[0].scrollHeight - $("#chatscreen").scrollTop() == $("#chatscreen").outerHeight()) { alert("work"); } to check if a div's scroll is at the bottom of the page and it works fine for firefox and internet explorer but not chrome. When I use this other code $("#chatscreen").scroll(function(){
how to bind another trigger to autocomplete
hi there, i'm kinda new to this and i'm using the autocomplete feature that works great using this : $(function() { var availableTags = []; $( "#tags" ).autocomplete({ source: availableTags }); }); when i type it's autocomplete. the question is how do i make it work when i'm using a virutal keyboard that i made from div's that add letters directlly to the tags inputtext ?
How to do text ???...Fly-To/Drag-To...??? Effect
Hello, Ive got an auto-suggest application. Im trying to develop (for lack of better description) a "Fly-To/Drag-To" effect from my auto-suggest list. Im trying to get the data from the list to the text fields using the effect. Where it appears that the data is moving/dragged across the screen from the list to to the text field. Does anyone know of any examples, or had any experience using a text moving/dragging method. Thanx in advance ...
abort a request in $.ajax
Hi! How its possible to abort a request in $.ajax. In "success" I get the request as data. I want only to display data without making a request. $.ajax({ type: 'POST', url: url, data: ({ajax_render:1}), success: function(data, status, jqXHR) { $('.c-left').html(data); }, })
Can't get the scrollbar to work!
Hi! I'm a totally beginner here. What I want is this scrollbar: http://jscrollpane.kelvinluck.com/#download This is what I wrote in the <head>: <!-- styles needed by jScrollPane --> <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <!-- latest jQuery direct from google's CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script> <!-- the mousewheel plugin - optional to provide mousewheel support
programming with html() or append()
I have a question about programming style. Which code is better and why? $("#testdiv").empty().append("<div>Test 123</div>");OR $("#testdiv").html("<div>Test 123</div>"); ? In my case i need to clear the node before i insert it, so i would like to know which code is better or faster?
[jQuery] .find() not working on <link> node in XML document
I've got a semantic XML document, for which I'm using $.get successfully to extract <title> and <description> nodes. The <link> node does not work, however. It returns blank. Strange, since I can see in Firebug that $(this) has 4 children, and link is in there. Here's the code: $(data).find('item').each(function() { var title = $(this).find('title').text(); var url = $(this).find('link').text(); var description = $(this).find('description').text(); }); Even stranger, when I change the node name from
Jquery form field masking with default value that doesn't match the mask?
Does anyone know of a form field masking plugin or script that allows the field to have a default value that doesn't match the mask? For example, a text field that says "Phone" initially. When you click in it, "Phone" disappears, and it says "(___)___-____", which fills in as you type, like "(123)456-7890". I've written a script that will show/clear the default value, and I've found plugins that will allow masking, but I'm not sure how to combine the two.
Odd behaviour: I can't use data from .get unless I put it in an alert first!
Argghh, I'm suffering from some odd problem in my code. I'm trying to grab a chunk of html from a shared folder within the domain, and insert it into a dialog box call that I'm building on-the-fly. I've got this code running: $('.helpfaq').live('click', function () { var pageContents = ''; var message = '<div style="display: block; width: 100%; font-family: arial,helvetica,sans-serif; font-weight: normal; font-size: 9pt; color:#212121;">'; $.get('shared/faq.htm', function
how do i refresh a page without actually reloading it-
hi everyone how do i refresh my page without actually reloading it. i have just built a 'login form' that logs a user in ,without actually reloading the page. The only problem is that i actaully need to refresh the page so that the 'USER Session Variables' can kick in. Is there a way to do that . i enclose below my login script $(".buttonb").click(function(e) { e.preventDefault(); // validate and process form // first hide any error messages
ie7, ie8 slideUp() problems
Did a quick search and couldn't find anything specific to my problem, it works in all browsers apart from ie7 and ie8 where it is not sliding, I can only imagine it has something to do with the div in question having its height set inline and not in a stylesheet. Any ideas on how to get around this or for the function to reconise the height it has been given?
Slide not working propertly
Hi, I am trying to use slider using JQuery, some how it works but not properly. On first click it moves very fast, but next click onwards it works perfectly. This is my HTML <div class="knowledge-slide-menu"> <ul> <li class="mainli active"> <div class="slide-menu-content"> <div class="slideMenuContent"> <ul> <li><a href="#">Procedures</a></li> <li><a href="#">Arrivals Procedures</a></li>
Get ajax response with extra space
I have write same jquery ajax function on two different pages. In one page I got "Hi" and another page " Hi". why this extra space before Hi? see my code below jQuery.ajax({ type:"POST", data:"pid="+pid, url:"mypage.php", success:function(html){ });In mypage.php page echo "Hi"; I don't understand what happened ? How to get rid of it ?
How to deal with multiple scripts in a single page web application
Am new to Web development and i started an application where i have index.php with a menu and a div called #content and i load all the different pages in to the div #content using load(); I need to load the respective java script files along with the files that are being loaded in to the div #content. Issue: Here in the HTML's that is loaded in to the div, i have some similar class names and id's so when i click on any menu item and perform some action there and go to another menu item and perform
Superfish IE9 problem
I’m having a nightmare with the Superfish menu in IE9..I’m using images for the top level navigation but I don’t see that being a problem because it all worked fine until recently (month or so ago) Some of the website pages look fine on my version of IE9 but for others it’s all over the place throughout the site with triple height navigation. Firefox etc is still fine. URL of the site is http://www.globalenvironmental.co.uk/index.html Would really appreciate some help..I’ve search forum after forum
Compare links and highlight them if they are matching
Hi, I have a table which has two columns (#colA and #colB) , each column contains links, I want to compare the links in #colA to #colB and highlight them in both columns if they are exactly matching links. So far I have done this but not really working, how can I correct this? $(document).ready(function() { $("#colA a").each(function() { var hreftofind = $(this).attr("href"); $('#colB a[href$="'+hreftofind+'"]').addClass('selected'); }); });
Ajax form submission in IE(8)
Sample Google form Related spreadsheetI customized the original form source code and created two forms: First form Second formThey work in all browsers except IE(8). What's wrong?
how to use jquery to play sound in web page
hi can i play a music in page with jquery ?? http://www.scripters.info
How do I make an object property increment?
Hi, been stuck with this for a few days... I have some groups of radio buttons, depending on which radio button is selected a list of possible strings should each get a point... For example, I need to end up with an object like this; var score = { point1 : 0, point2 : 0, point3: 0, point4: 0, point5: 0, point6: 0 } If first radio button in group 1 is selected, point 1 and point 6 should count up 1 (this will be different for each radio button in each group ) I've already
How to change Accordion Behaviour
Hello everyone, I have downloaded the Accordion widget from http://jqueryui.com/accordion/ and I have implemented it on a site I am working on. I do have a situation like this: I would like to change the accordion's behaviour. Basically, I do have 3 panes (if that's what you call them) on this page this page. Only the first pane is visible when loading the page, the other two are sent off screen. I would like to have the first pane closed and the last pane opened when the page loads like this:
toggleclass issue with overflow
Hi, I have a div with one line (css overflow hidden), which is clickable the onclick will load a css class that makes the height much bigger so the hidden info appears (somewhat like accordion), however this second class has overflow:auto because it can be scrollable. Now when I click and scroll down and then click again to close the div, I don't go back to the top of the div content. Is there a way so I can define that on closing and going back to the original css class with overflow:hidden the
Using not() to affect all but selected checkbox
I have a series of checkboxes that is generated by a CMS, so I have limited control over what the HTML looks like. Here's a chunk: <div id="topping_control"> <div class="multiSelect"> <div class="title"> Select Toppings </div> <div class="group"> <div> <div class="checkBox"> <input type="checkbox" name="toppings" class="PI P" value="N"> </div>Pineapple </div> <div> <div class="checkBox"> <input type="checkbox" name="toppings" class="XC C" value="X"> </div>Extra Cheese * </div> <div> <div
supersized (backgrounds) and fancybox
here is the site... http://174.132.79.98/~john4p3l/sample-page/ it's wordpress, and this page shows a supersized slide show then thumbs fade through each image, and the full sized image is linked to a page what i need to do is have the link from the full size image load the target in a fancybox i've hacked the supersize js so it adds the fancybox class to the links, but they are not loading in fancybox, just loading the page itself can anyone see what i'm doing wrong?
jquery datepicker, showing names of selected days
I try to insert the names of selected days from datepicker, to two input fields. My code looks like this: $("#date_from, #date_to").datepicker({ defaultDate: "+1d", minDate: "+1d", changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy", monthNamesShort: ["Sty", "Lut", "Mar", "Kwi", "Maj", "Cze", "Lip", "Sie", "Wrz", "Paz", "Lis", "Gru"], dayNamesMin: ["Nie", "Pon", "Wt", "Śr", "Czw", "Pt", "Sob"], numberOfMonths: 1, constrainInput: true, beforeShowDay:
How to image cropping and adjust in a box.?
Hi friends, I am working on image cropping facility. I have a image box in which an image is coming. What i want, 1- giving cropping facility. 2- image re-sizing facility or zoom in or zoom out facilty. Something like facebook time line in which we can upload and then fit image on that box after drag up or down, I am searching since long but haven't find anything related this. If any of you have any idea or any suggestion how i could create this then please share with me. Thanks
How to create facebook timeline?
Hi friends, I am finding some code to work on my image, that is something like facebook timeline effect. What i want is? 1- upload an image on box. 2- image adjust facility (re sizing) on that box after upload. 3- image crop facility. 4- if possible zoom in and zoom out on the same box. I have search lots of code but i couldnot find the code i looking for. If any of you have solution for this pls share with me. Thanks
JSON is SO CONFUSING...
http://mayacove.com/dev/json/rockbands.html why does it print both band names in console but not in div? also have same prob I had here: http://forum.jquery.com/topic/error-in-core-jquery namely error in CORE jQuery when add more fn's to print more JSON info... http://mayacove.com/dev/json/rockbands2.html JSON is so confusing, now I have to deal with an undocumented bug in CORE jQuery???? don't know what I'm missing.. always run into probs with JSON :-( documentation here http://api.jquery.com/jQuery.getJSON/
How would i abstract this code to block clicks while any animation is active?
I am using #cover to cover up the clickable divs while an animation is active. Using $("#cover").hide(); / $("#cover").show(); It is working. But I would like to do this for any animation that plays. Is there a way to abstract this code for any animated div? $(".clsStartUpNode").click(function() { $("#StartUpPosition div").not("#StartUpMainNode, #" + $divID).fadeOut(300); // fade out all starting nodes except center (CES) node $("#StartUpMainNode").stop().animate( {left:22}, function()
HELP PLEASE FOR NOT USE CSS WITH JQUERY
Hello colleagues. I need avoid use of css for arrow on each button: CSS: #arrow_r1-c1-sC0 { margin-left:35px;}, #arrow_r1-c2-sC0 { margin-left:14px;},etc... Can you correct this with jquery? See project working: http://jsfiddle.net/nDmMq/31/ js: $('#button li:first-child').addClass('active');// first tab activated $('span#arrow_r1-c1-sC0').show();//show arrow first tab $('ul#button > li').click(function () { var idButton = $(this).attr('id').substr(10);//extract id attribute $(this).closest('ul#button').children('li').removeClass('active');//remove
error in CORE jQuery....
getting very weird error here, in CORE jQuery.. http://mayacove.com/dev/json/rockbands.html a is undefined... WTF??? (this is in jQuery 1.7.. was also getting with 1.4..) thank you...
Hide column from dynamic table
I have created a table using some codebehind logic. When a button is clicked on the page the table is shown. What i would like to do is hide certain columns. So far using the code <script type="text/javascript"> $(document).ready(function () { $('#<%= btnHide.ClientID %>').click(function () { $('table#tblName td:nth-child(1)').hide(); }); }); </script> hides the columns as required when i have the table created at design time but using
contactable.js (theodin) dont send email
hello, i have on my new site the contactable from http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html the problem is i get no email, when i check it with fiddler i see status 200. the server that i user is windows server 2012. have any one a idea what the problem is?? thx
How to make tool tip appear over my div rectangle?
I have 2 rectangles and a paragraph with text on my page. I need to make a tool tip appear when the mouse is over each of them. I have got this to work for the p but not the rectangles. I am guessing because I can't add my css tooltip class to my div rectangles? #rectangle1{ css for my div id rectangle one position:absolute; border:1px solid #333; padding:2px 5px; background-color:red; top: 100px; right: 100px; height: 100px;
jQuery ajax callback issue
When sending ajax request to my JSON Service method, the method inserts the data into backend and runs return true/false. Sometimes the success callback function is not being called after returning from JSON Service method without exception. I am unable to reproduce this in my development and qa environments. But it is happening to 1 or 2 users for every 1000 users in Production. If that users retry, it works with no issues. Below is how I am sending ajax request $.ajax( { type: "POST", url:
Need help in writing selector
Hello , i have a structure like this... <ul> <li class="xxx"><a href="#">Title 1</a> <ul> <li><a href="#">Sub Title 1</a></li> <li><a href="#">Sub Title 2</a></li> <li><a href="#">Sub Title 3</a></li> </ul> </li> <li class="xxx"><a href="#">Title 2</a> <ul> <li><a href="#">Sub Title 1</a></li> <li><a href="#">Sub Title 2</a></li> <li><a
Tiny Cirple Slider issue in wordpress
I want to use this slider from http://www.baijs.nl/tinycircleslider/ on my website to view different images and for some reason it doesn't work with my wordpress showing this error: TypeError: $("#rotatescroll1").tinycircleslider is not a function $('#rotatescroll1').tinycircleslider(); That's how it should look and work: http://www.itsepic.co.uk/wp-content/themes/itsepic/branding/index.html Any ideas what's wrong ??
Why is my events only working on internet explorer 9 and why is my mouse enter/leave events not fully working?
I have a page of events here with two boxes a red and yellow box. The red box shows the events i.e. the x coordinates, when the mouse is clicked and double clicked. It also says mouse enter when the mouse enters the yellow box and is supposed to say mouse leave when it leaves. None of this works with chrome and I don't know why half works with firefox and all of it works with I.E 9. Another problem is the mouse enter only shows the pixel it hits the yellow box then goes back to showing x coordinates.
Tab type jQuery image holder/slider
Hi All, I am looking for a image holder which has 2 tabs with up/down to move images next and previous. An example image is given below. Can you please advice me a way to do this?
Next Page