Defining custom breakpoints/steps in a range slider
Hello all - I'm not terribly experienced with JQuery so I thought I'd ask for help. I need to create a range slider with a min and max slider. Common stuff. The slider in this example is for Income. I can define steps or break points of $10k easily enough so that the slider breaks at every $10k interval. However, I need to define custom, non "linear" breakpoints for the slider. In my scenario, I need to acquire income levels anywhere from $0 to $250,000 and I need the break points to be:
How do I find the offset of the bottom of my screen?
How do I find the offset of the bottom of my screen? Suppose I sometimes display a DIV with a high z-index that overlays part of my screen. And suppose sometimes part of this DIV is too low, and so can't be seen. I want to scroll the main page lower, so that the overlaying div can be seen in its entirety. To do that, I need to know 2 numbers - the current y-position of the bottom of the main page, and the current (hidden) y-position of the bottom of the overlaying div. What properties would I
Div over another div
Is there a solution: if a fixed Div comes over another div, for example, that the fixed Div I give a different color.
reading content from a additionel file with div id
Hello, I've twoo files. The first one is here. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Inhalte per Ajax nachladen</title> <style type="text/css"> div { border: 1px solid #ccc; padding: 25px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> function kb_source_2_target() { $.get('source.html', function(data) { $('#target').html(data); }) } </script> </head> <body> <h1>Inhalte
Add background color to ul li
hello i have a ul <ul> <li><a class="facebook" href="javascript:void(0);"><i class="fa fa-facebook"></i></a></li> <li><a class="twitter" href="javascript:void(0);"><i class="fa fa-twitter"></i></a></li> <li><a class="linkedin" href="javascript:void(0);"><i class="fa fa-linkedin"></i></a></li> <li><a class="googleplus" href="javascript:void(0);"><i class="fa fa-google-plus"></i></a></li> <li><a class="pinterest" href="javascript:void(0);"><i class="fa fa-pinterest-p"></i></a></li>
How to limit JQuery selectable-helper's range?
I have a Table with JQuery's selectable feature.My Table was selectable each **td** which are in the same column. Below is my full html <html> <head> <link href="/css/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="/css/schedulerGrid.css" rel="stylesheet" type="text/css"> <script src="/js/jquery-ui.js" type="text/javascript"> <script src="/js/jquery.js" type="text/javascript"> <script src="/js/schedulerGrid.js"
Facing problem with jQuery AJAX
JSPPage_1: <form id="myForm"> <select id="sub" name="sub"> <option val="1">1</option> <option val="2">2</option> <option val="3">3</option> </select> <select id="month" name="month"> <option val="JAN">JAN</option> <option val="FEB">FEB</option> <option val="MAR">MAR</option> </select> <input type="button" type="submit" id="go"/> </form> <script type="text/javascript"> $(document).ready(function(){
countdown plugin
hey guys im trying to use the jquery countdown plugin but it's not displaying correctly. timestamp : 2015-09-06 04:00:00 and it shows: 0 Days 03 Hours 11 Minutes and 40 Seconds remaining can anyone tell me why please? $('#timestamp').countdown({
until: $(this).text(),
compact: true,
layout: '{dn} Days {hnn} Hours',
description: ' remaining',
onTick: function(periods) {
$(this).countdown('option', 'layout', periods[3] > 2 ? '{dn} Days {hnn} Hours'
Uncaught TypeError: $.widget.extend is not a function when using JQuery UI 1.11.4
I am going to upgrade JQuery UI to 1.11.4 from 1.8.17 in my project. But I got the error when loading page: Uncaught TypeError: $.widget.extend is not a function I saw this error in Chrome -> Console. In original page, JQuyer 1.6.4 and JQuery UI 1.8.17 are used. After upgrading JQuery UI to 1.11.4, I got the error in $.Widget.prototype. Please refer to picture below. Is JQuery UI 1.11.4 compatible with JQuery 1.6.4? Any other coding or configuration needed to fix this problem? Thanks.
Need help with simple syntax issue
This works to display a number in an input box... $("#tang1").val(TANGwidth.toFixed(2)); But I need to add text before and after the displayed number but can't figure out the syntax. No examples anywhere I looked. I can't even get it to display text alone. I need something like this... $("#tang1").val("some text" + TANGwidth.toFixed(2) + "more text"); To display this: "The width of the fin tang is 2.25 inches" Please help. Thanks, ---Frank
Autocomplete retrieve label value
Hi, I have a form like this : <form action="ecrire.php" method="post" enctype="application/x-www-form-urlencoded"> <input type="text" name="destinataire" id="destinataire" /> <input type="hidden" name="id_destinataire" id="id_destinataire" /> </form> <script type="text/javascript"> $("input#destinataire").autocomplete({ source : function(request, callback) { var data = {nom : request.term}; $.ajax({ url : "saisie_contact.php", data : data, complete : function(xhr, result) {
Match all elements between 2 other specific elements
Hey guy, as title says..how can achieve this? For example, in the code below, when the last column of each row is clicked, I want to operate on every element with that class (column) but only those on the same row <div class="row" id="959666844"> <div class="column">Lorem Ipsum</div> <div class="column">Simply dummy text</div> <div class="column">Lorem Ipsum</div> <div class="column">Lorem Ipsum</div> <div class="column">Simply dummy text</div> <div class="column">Click me</div>
How to get val from selection?
I have a selection element: <select id="selvisatype" title="Please select a visa type"> <option value="pleaseselect">Please Select</option> <option value="notapplicable">Not Applicable</option> <option value="a1">A-1</option> <option value="a2">A-2</option> <option value="b1">B-1</option> . . . </select> I want to retrieve the value the user has selected (or "Please Select" if they've
How to update a number input with changed values of other number inputs based on their class?
I have several input type="number" elements which, when they change, should update a "total" element of the same type. I gave all the input elements which should contribute to the total the class "payments" like so: <input class="payments" type="number" step="0.01" min="0" id="airfare" /> . . . <input type="number" step="0.01" min="0" id="paymenttotal" /> ...and then thought I could respond to a change in any element with this class like so: 'change .payments' : function(event){ var
JQuery UI Render Problem on Windows 8 Desktop App
I try to develop an application for Windows 8.1 OS. I use jquery mobile and backbone.js together with MVC model. Everything is seem ok on the mobile side (Android, iOS and WP8) however some pages does not render the css appropriately i.e tabs, buttons etc. When I use recreate the body not effected the page. How can I solve this problem? Or there ara any stable format for Windows Desktop application thanks for helps.
Motorcycle configurator
Hello, I just started to study jquery and i would like if someone could help me with my problem, at least check if it is possible. I have to make a motorcycle configurator where a customer can change color, change type of wheel, change exhaust, apply some stickers on it and 360° right-left and 360° up down view. Like a car configurators with prices and then save a pdf or send configuration to you email. I think that I need to use php and jquery but I'm not coder just know modify some codes. Thanks
How to get element from php array in jquery
HI, I have a js script that checks the datas inserted in a form. I have a PHP array containing some error message : This array is available for different languages : en, it, fr. When a user fills a field with a wrong value, I should be able to send en_lang : <?php $myArray = array( 'wrong_password' => 'Wrong password' 'wrong_phone_number ' => 'This is not a phone number' } it_lang : <?php $myArray = array( 'wrong_password' => 'Password sbagliata' 'wrong_phone_number ' => 'Numero di
button into a column on a HTML Table problem
hi i am working on create a HTML table with some columns, in 1 column i have a button(1 button for each row) with the class="verDetalle" in this thread: https://forum.jquery.com/topic/not-execute-a-click-event#14737000006421925 i have solved part of my problem (detect the click event). $(document).on('click', '.verDetalle', function () { console.log($(this).text()); alert(this.rowIndex); var widsala = $("#xcombsalas option:selected").val(); var $wRenglon = $(this).closest("tr"); var
combine spriterollover.js with spritesequencer.js question?
hi all - i am trying to workout how to combine the two methods of animating a sprite sheet using two different scripts... here is what i would like to do: on rollover to the sprite it plays and reverses when rolled out... but i also want the same spritesheet to animate when a button/link is rolled over too... the attached scripts do both these things - but not as a combined thing - one will play and reverse on rollover of the sprite - but nothing when you try it with the button/link. and vice versa
Cannot set background color
Hello! I cannot set the background color of the page. Use <style> .ui-page { background-color: red; !important} </style>but color is not changed.
problem w/ getting max heigth of child elements (esp. p-tags)
Hello, we have a parent div-container and we would like to detect the maximum height of 3 p tags (see linked jsfiddle). We used the following comment to get the bottom of each children element in the div container: $(window).scrollTop() + offsetTop + element.outerHeight( true ); If you make the windows smaller, you will get a wrong maximum height of the p-tags. If you look up for the values in the Firebug they will be different. (Were using jQuery 1.9.1 .). http://jsfiddle.net/9dchr44z/17/
create an image dynamically with an event handler
I'm trying to have my jquery/javascript code do the following: 1. create an image, 2. add it to a div, 3. add an ONCLICK event handler, and 4 do it again multiple times, at different positions in the div. The images are actually red dots, and I'm trying to mark various vertical spots in the webpage as worthy of emphasis, using these red dots. So to do this I assume the position of the images have to be 'absolute' and that I can find where they should go knowing where the outer div is - in other
select menu was not load in ajax
HI, I'm create two select menu in jqm page, and load option value in ajax,but first select menu will load second menu was not loading ,if I refresh a page two select menu has loading correctly, please help me <!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
Counting Rows
i have fetch rows from database but i want to set their sr # like 1 2 3 according to the number of rows. i have attached snap so that you can understand better.
Youtube video breaks transitions
Hi everybody I'm working on a phonegap app based on jquery mobile. On a touch on listview I populate a page2 wit ajax then I slide from page1 to page2. Everything is fine except that in Android when I have a youtube video embedded in page2 the transition doesn't work. I'm using slide animations. The transition works fine on iOS and when there are no Youtube videos in page2 on Android. Do you know what can I do to let the animation work also when there is a video in page2? Thanks.
Using icons as only icons
In http://demos.jquerymobile.com/1.4.4/icons/index.html#&ui-state=dialog under "Example of the class being applied to a wrapper." an example is giving with black icons. What should I use in HTML and CSS to show only the black icons? That is, the black ui-btn-icon without the link element and without the border-radius. If some could post a working example would be great.
Creating an elastic grid
Hi, Does anyone know of a good tutorial where I can do an elastic grid like this http://demo.phapsu.com/jquery.elastic_grid/index.php#demo I've downloaded the plugin to view it, but they hard code the image path in the jquery file to display the images and when I try to create a loop in php it doesn't work. So I'm looking for different tutorials that does the same thing
This seems so simple but...
Sorry folks, total newbie to JS and jQuery but I'm learning! I'm stuck on getting this syntax right. I want to use code like this to identify if my image is visible........ <img src="images/fin-1.jpg" id="hid1" alt="" title="01" style="display: none;"> <img src="images/fin-2.jpg" id="hid2" alt="" title="02" style="display: inline-block;"> <img src="images/fin-3.jpg" id="hid3" alt="" title="03" style="display: none;"> if $("#hid1").style= ("display: inline-block"); {
Some progress
<link rel="stylesheet" type="text/css" href="main.css" /> <ul style="position:absolute;z-index:9999;"> <li><a href="index.html">Home</a></li> <li>Links <ul> <li><a href="Corvette%20Links.html">Corvette Links</a></li> <li><a href="Tire%20Links.html">Tire Links</a></li> <li><a href="Oil%20Filters.html">Oil Links</a></li> <li><a href="Magazine%20Links.html">Magazine Links</a></li> <li><a href="Racing%20Links.html">Racing Links</a></li> <li><a href="Miscellaneous%20Links.html">Miscellaneous Links</a></li>
UI Accordion icons not showing up
I can't figure out why icons are not showing up. I have searched for the last week but have not found a solution. Please help. <script> $(function() { $( "#accordion" ).accordion({ heightStyle: "content" }); $("#accordion").accordion("option", "icons", { 'header': 'ui-icon-triangle-1-e', 'activeHeader': 'ui-icon-triangle-1-s' }); }); </script> __________________ <tr> <td><div id="accordion"> <h3 class="ui-accordion-header">Prevent Unemployment
Responsive pages in jquerymobile
Hi i'm using jquerymobile, html , css and phonegap to build an app for android. i have a problem : when i run it on small devices for example 3.5 inch, everything is ok but when i run it on bigger devices the page will not sterech and fit to device's height and width... And on even bigger screens like tablets i have alot of white space so what should i do to fit my app to every device to width and hieght??
How to multiply values in two different select lists
Hi guys, I have two different select lists, for selecting the number of riders in a bicycle race and the tour they're participating in. When a selected field is updated, I want to display the total price. http://jsfiddle.net/v4dfa3um/1/ HTML code <select> <option selected="" value="">Select Riders</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option>
how to add a row to a table dinamically
Hi friends, i explain my scenario: i have a table: myTable c1 type 64 1 64 2 72 1 128 2 80 1 145 3 in Master page the user choose the type, suppose the user choose the type=1, with a select statment: select * from myTable where type=1 i get this rows: c1 type 66 1 88 1 138 1 with this rows i need create (in this case) 3 input texts and create a table with 3 columns
How to render new lines for placeholder in Firefox?
A textarea with a placeholder with new lines renders new lines correctly in Chrome/Chromium but not in Firefox 40. Here https://stackoverflow.com/questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea is some background information on it but I was wondering if jQuery Mobile offers functionality to force the new lines. Is there and how can that be used? Or is this a feature request?
jQuery UI - drag an item from drop area and drop it back to same drop area - drop event doesn't fired
I have number of drop areas $('.drophere') and a storage of draggables $('.dragme'). Each drop area can contain just one dropped item. You can drop new item over dropped one (replace). You can drag an item from one drop area to other. You can drop the dragged item outside of drop area - and "forget" it - no need to revert. If you start drag an item from drop area and decided drop it back to same area - drop event is not fired, thus the dragged item is lost. Is it some kind of restriction in jQuery
How to reference an SVG drawing primitive with Keith Woods SVG Plugin
Hi folks, here's a code snippet that will generate a nice Lissajous figure using Keith Wood's SVG plugin. I can't figure out how I can change the points in the polyline primitive once it has been instantiated. I would think that I need to change line 12 to something like var mypolyline = svg.polyline(myarray, .....); and then later change the point array with svg.change(mypolyline, {points: newarray}); but this is bombing out. Here's a fiddle with the working code: https://jsfiddle.net/782386ec/
[SOLVED] Adding Widgets to a Header in an Accordion
What I would like to do is have my accordion headers include a progress bar and maybe another label. So the idea would be like this: Header 1 =====----- Label 1 Header 2 ==-------- Label 2 I've seen techniques to add images to headers like this: <div data-role="header"> <div id="header1_progress" ></div> <h3>Header 1</h3> </div> <div>Header 1 Content</div> Is this the correct way to approach this problem? It feels a little hacky because the documentation mentions that the content div
online chat box
hi i want to create online chat box you have seen on many websites there is a section of live chat in corner like that i want to create live chat box can any one help me?
not loading css style when first time page load
HI , I am new for Jquery mobile ,and i am creating new application in this , i am using jquery mobile and here I'm using spring controller for navigating pages,so it will navigate correctly,but some contants in the page will not loaded correctly(example radio button). So if I refresh the page it wil loaded correctly. and another problem is if I go back for previous page it'll also same, css styles not loading correctly,but refresh the page it work correctly Please help me Thanking you, Guruprasad
how important is it to know sizzle ?
I have often seen some jQuery experts mostly in online post/articles point out how understanding sizzle.js is important , has anybody of you ever spent time going through sizzle.js ? Is it a handy thing to know how the jquery selectors work internally ?
Next Page