'Select' fields in form - problem with adding correct class
Hi everybody! I have simply form in jQuery and I wanted to add more 'select fields'. And I have little problem - I can't figure out how to use Class JUST ONLY AT ONE field - which is active (clicked). Now I have something like this: after click on each field, all fields are being active. But it should be active (new Class) just for this element (field) which is clicked. I tried to add "$this" in some part of code, but it still doesn't work... Any help? Here is DEMO
Any jquery library that takes care of viewports?
Hi, I created a website for a client that insisted on an image that is now causing problems on tablets. You can see the image at: www.zionism101.org. Its a temple, with one column on the left, one column on the right, and content in the center. So I put in a meta-viewport tag, and it is better, but people have to swipe their fingers together on some of the tablets to get everything to fit. Is there some jquery command or library that can figure out the zoom that is necessary given the tablet?
IE9 Ajax get issue with cookie and session
Hi all, I am having weird issue with IE 9 when making ajax get request using jQuery. I am using jQuery 1.11.4 Here is my get Request looks like. $.ajax({ url: 'AddressTypesListChange', type: "Get", xhrFields: { withCredentials: true }, data: { 'addressType': $("#AddressTypeslist").val(), 'addressId': modelObj, 'type': $('#AddOrEdit').val(), 'companyName': $('#hdncompanyName').val() },
changing the canvas element color on mouse over
hi team, I have a canvas element and i created one circle inside the canvas container, now on mouse over and mouseout i want to change the color of it. Instead of writing two functions for mouseout and mouseover is there any way like binding events(mouseover and mouseout). I have id of canvas container but not the circle id nor class of it. <!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function changeclr(){ var cnvs
MVC Jquery toggle elements when button is clicked
I want to show the album name and category element when the corresponding button is pressed for that song. How do I do this? This is the jquery I have at the moment. Thanks for any help. $('.song-list-btn').each(function(i, obj) { $(this).on('click', function () { }); }); foreach (var item in Model) { <button class="song-list-btn" type="button"> <span class="fa fa-bars" aria-label="Song Details Menu"></span> </button> @Html.EditorFor(model => item.AlbumName, new { htmlAttributes = new { @class =
Adding a checkmark to the selected radio button
Hi All... My front end app has a set of four radio buttons. I see that the shade of grey between the selected one and the unselected ones is fairly close and the change is subtle. I'm wondering if I can place a check mark icon on the selected one? Thanks...
More about putting a TE in a JQuery tabs widget tab
I have been pulling my hair out over this one. I can setup a JQuery Tabs widget and I can put a JQuery TE into each tab. I can also put a plain old boring TEXTAREA into each tab. Problem is, when I click a tab, I want it to give focus to the text editor instance in the tab. I have tried a variety of ways ot make this work with no luck. The code I have been playing with is pasted below. You can see in the javascript function that I have tried several different ways to approach it, all with no luck.
Problem with detecting click event on an internal layer
Hi, please, take a look to the next code: http://jsfiddle.net/mp3man/sn0gdsfa/1/ The problem with this code, is that when you click over the "green_layer", the "red_layer" click is catched too, and this is what to avoid. There's any way to do it, without changing the html context? Many thanks, Dani
Simple Setinterval Doesn't Work...
Without 'var lightdisplay_info', the function lightning_one works fine . But it doesn't work together with var lightdisplay_info', $(document).ready(function () { var int1; $('#start').click(function(){ var stage_status ='initial_stage'; var num = -1; start(stage_status, num); });//$('#start'). function start(stage_status, num){ int1 = setInterval(function() { //이하 영역은 계속 반복되는 영역임 num = num+1; lightning_one(stage_status,
jQuery mystery: the jQuery expando prop is added to the document object, and I want to know when & why
I've searched the jQuery source extensively for where or why something like jQuery214013829352706670761: 3 is added to the document object, but I can't figure it out. That propname matches the "expando" prop for a given jQuery load, which suggests that this has something to do with events, but I can't figure out where, when, or what the 3 means. I've searched uses of expando and also document in the jQuery source, but nothing looks quite on point. Why is this important? Because I've discovered,
Javascript Debugger - Apatana
I have been accustomed to Aptana Studio. Installing Firefox and Firebug, I ran the script on Firefox Web Browser. But the Firefox didn't detect an error in the following: ------------------ var s1; if ( (s1 > 4 ){ alert('hahha'); } What is the best and most precise method to debug Javascript without any failure. I tried JSLint but it couldn't.
How to assign background image of button to a variable using jquery css
Hi, I want to assign background image of button in a jquery variable with css.I have written code but it not work. var cmp1; var cmp2; var bg = $("#mq3").css('background-image'); var bg1 = $("#mq6").css('background-image'); var bg2 = $("#mq9").css('background-image'); $(document).ready(function() { $("#mq9").click(function() { // alert("Hello Welcome"); if ($("#mq9").css("background-image") === bg2) { $("#mq9").css("background-image", "url('images/bkv.png')");
How to add more than one image in a single box using drag and drop?
Given: 5 - images, (draggable) 3 - square boxes (dropzone) 3 - rectangle (display the "id" of an image drop in a box(dropzone)) can anyone know this? I want to drag multiple image in a single box(dropzone)..And every drop images "id" display in rectangle, working sample here; http://jsfiddle.net/Lz2dazLf/7/ html: <table> <tr> <td> <div id="rang1" class="DropZone"></div> <input type="text" value="" id="rang1input" name="rang1value" /> </td> <td> <div id="rang2" class="DropZone"></div> <input type="text"
Live search with JSON (Codeigniter)
Hi, I have a problem with $.getJSON function. I am using Codeigniter. My main problem is in view. In console, when typing in search input, I get error 403 forbiden, but variable $test is geting json parameters from database. I am a beginner in jquery. Main goal for this is to make a live search with json. Thanks in advance for any help. Controller code: class Test extends CI_Controller{ public function index() { $data['test'] = $this->Test_model->get('id', 'DESC', 10); $this->load->view('home/inc/header_view');
convert form value to json
Hi I have a complex form, I need to get form data and sent it in json. Is there a library who do that? thanks
jquery defragment method
Hey guys whats the most basic usecase of the jquery buildFragment method , its not quite obvious to me as to what are the possibe use cases of this method , can somebody explain ? i see this method used in other methods alot though . but thats the main purpose of this method in jquery ? Thank you.
Find width max width of a div and assign the width to all div's
Dear Sir I am using following code to display 'Period' Being dynamic (creading using do while loop of php using MYSQL database) , i dont know the width of the same I want to assign the max width of the div to all DIV's having class 'period <div style=" font-family: 'Arial', sans-serif; font-size:16px; color:#fff; font-weight:bold; background-color:#006699; width:100%; id='<?php echo 'period'.$rows['id'];?> "; class="period" ><?php echo $rows['period'];?></div> I tried $(document).ready(function()
Navigation Link Active State With changing URL
Actually what I am doing that when I click on the link so the active state of link goes to first element like my code is <ul> <li><a class="active" href="index.php">Home</a></li> <li><a href="about.php">About</a></li> </ul> when I clicked on about link the url changed as the page changed the class active stick with the first element. how to solve it I want when I click on about link the class add on the about link and remove from the first element
Create multiple dropdowns from a selection from the first dropdown
I am trying to create multiple dropdowns based on the number selected in the first dropdown. Please help. I am fairly new to jQuery. Here is the code: HTML CODE: <SELECT id="rooms"> <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> <option value="7">7</option> <option value="8">8</option>
Repeating each >
<ul class="steps"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> $('.steps li').not('.animation').each(function(i){ setTimeout(function(){ $('.steps li').hide().removeClass('animation'); $('.steps li').eq(i).addClass('animation').show(); }, 2050*i ); I just want to loop unlimited times this each. How can I do this? At the moment the loop is executed 1 time.
How to use Jquery with Bootstrap Toggle Switch/ In-Line Editing
I have a table with data entries that I want to be able to do in-line editing for while also being able to save it to the console. Additionally, how do I load stored values into the DOM as well as being able to be change and saved. http://jsfiddle.net/bicentennialman/xg5vm2ve/ Thanks
Help me summarize these huge switch statements
Hey guys, so im working on a JS script that basically just takes an ID and value, then disables/enables a bunch of inputs depending on the value type (using a switch statement), then executes another function doing something similar. It works fine, just really ugly. I figured theres gotta be a better way to do it... Heres the code, let me know if you guys have any ideas! syncAttributeSettings(1, 'string'); syncAttributeSettings(2, 'text'); syncAttributeSettings(3, 'select'); syncAttributeSettings(4,
ajax post to c# mvc controller
Hello First time I've tried this, I am trying to make this ajax call do something before the form is submitted. It seems to be working fine as far as it hits my breakpoint inside the AddPostalCode controller, but the postal code in the controller is null. (I'm not getting the value correctly) Any suggestions? Thanks Ajax Call: <script> $('#submitPayment').click(function (e) { // TODO: Validate input var billingAddress = { PostalCode: $('#PostalCode').val().trim()
newbie getting started with .ui-btn
Hi all, Just getting started and I have some links on a page working fine and each looks the same with the theme settings I have set up like: <a href="#" class="ui-btn" >Page1</a> <br /> <a href="#" class="ui-btn" >Page2</a> <br /> <a href="#" class="ui-btn" >Page3</a> <br /> <a href="#" class="ui-btn" >Page4</a> but I would like an alternate button UP - background-color for *every other one* - so I tried something like: <a href="#" class="ui-btn" >Page1</a> <br /> <a href="#" class="ui-btn" style="background-color:#CCCCCC">Page2</a>
Download builder give JS error
Hi, I tried to download a custom copy of JQM 1.4.5 but the builder gives a JS error as follow: XMLHttpRequest cannot load http://amd-builder.jquerymobile.com/v1/dependencies/jquery/jquery-mobile/1.4.5/?baseUrl=js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://jquerymobile.com' is therefore not allowed access. And nothing happens just the loader. Regards; Sam
Duallistbox won't return value ID for pre-selected items
Hello, I'm new to JQuery and Javascript. For a project I'm using the following JQuery Plugin for a Multi-Select Duallist Box . On my site it is implemented in the following way: Javascript: $('#id_groups').DualListBox(); HTML: <select id="id_groups" name="groups" multiple="multiple" data-title="Groups" data-source="/ajax/getGroups?maintid={{ object.id }}" data-value="id" data-text="name"></select> The data will be loaded via JSON. On one page I'm using the Duallistbox for chainging data, from looking
1.4.5 collapsible set scrolling bug
Hey all, I don't suppose anyone can help me out with what I believe to be a bug with the latest 1.4.5 JQuery Mobile version. I recently updated a project from 1.3.2 to 1.4.5 and have found that on iOS mobile devices (tablets are iPhones) that the native browser scroll feature does not work if I start by pressing on the accordion (open or closed). Any ideas on how to get back the 1.3.2 functionality (I cannot go back up the previous version). Thanks, Anthony.
Heaber back button issue/bug in IE
I have a Back button in my jQM app header. It had an issue not aligning with Header text in IE11 so I added some CSS style =" margin : .5em 0 ; " Now I test my app in Chrome and this code makes back button to move lower. If I remove it Chrome shows button correctly. < a data-role ="button" data-control-type ="panelbutton" class ="ui-btn-left" data-theme ="h" data-rel ="back" href ="#mainPage" data-icon ="arrow-l" data-inline ="true" data-iconpos ="notext" data-position ="left" style =" margin : .5em
Why are obtained incorrect css values, if load css via script?
Hello everyone! I am creating a website. I need to measure the width of the element. If I connect through the link , then everything works fine. If I connect via a script, it returns an incorrect value. Everything is good in ie, Google chrome returns 1333, on this example. In the example, the measured element el1 (elipse). Code: function load_style() { var window_width = $(window).width(); var window_height = $(window).height(); if (window_width > window_height) { $("head").append($("<link
Closing/Removing a Tab from the viewport, dynamically
I have 4 tabs on my viewport. Each tab has multiple widgets with hyperlinks, upon clicking the hyperlinks it opens tabs. If I click the hyperlink of a widget1 it will open a new tab (TabTemp) ( lets say in this case Tab 5). I can use $('#id').tabs('remove', 5); for this particular Tab(TabTemp). If I click the hyperlink of a widget2 it will open a new tab (TabTemp2) ( lets say in this case Tab 6). I can use $('#id').tabs('remove', 6); for this particular Tab(TabTemp2). What can I do in the scenario
Need help to create function of drag div or text in jquery.
Hi all, I am using jquery for draging a div. still it working on div id base but i want use as function like mydrag('div1'){ // } please help me.. <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Test File</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> <style type="text/css"> #canvas { width: 500px;
How would I append an array to the cells of a table?
var data = [ addStudentData("Nic B", "nicb1", "secret", "1", "en"), $("table.table tr td").append(data); Here is the copy of my JSFiddle thus far: http://jsfiddle.net/nicboutte/ac1yyjoq/1/ -Thanks
Wrap each matching element in DIV
I am trying to wrap each matching elment in a DIV. I.E every time an element in Group A matches an elemnt in Group B, wrap them both in a DIV. With the help of JΛ̊KE I was able find the matches but I can't find a way to wrap them. How Can I achieve this please. My code looks like below $(document).each(function() { var pMatch = $('.one li').map(function(){ return $(this).text() }) var sMatch = $('.two li').map(function() { return $(this).text() }) $.each(pMatch,function(i,h)
understanding shorthand document.ready
hello guys , i just have a simple jquery question , now look at the function below :: (function(){ console.log('hello'); })(); its a very simple IIFE now the jquery document.ready has a very simple and similar shorthand , like so :: $(function(){ console.log('hello'); })(); just the dollar in the beginning , now how does . $(document).ready(function(){}); ever turn into $(function(){ }); ? Thank you. Gautam.
JQuery Mobile multiple level (3 or 4 levels) Nested Listview with JSON Data
Can anyone provide me a simple demo of jQuery Mobile, 3 to 4 levels of dynamic nested listview/treeview that takes in list details from nested JSON data present in the same HTML file? Just 1 or 2 ul/li will do, I will try my best to figure the remaining myself! I am new to both JSON and jQuery. I have spent plenty of time going through several examples in order to get this done. These are a few links that I have tried to follow but failed as I do not know how to convert another version of jQuery
How to color each active tab a *different* color?
I've been struggling for days trying to get each tab itself (NOT the content panel) a different color when selected (but Tab0 I want to remain stock). Google has been no help, since every solution shows how to have each active tab THE SAME color as the others when selected; I need each tab to be a different color from all the others when selected. jQuery 1.11.2 and jQuery UI 1.11.4 and dotNet 3.5 ASPX in Chrome browser. Please someone help! HTML: <div id="tabs"> <ul> <li><a href="#tabs-0">Tab0</a></li>
jquery
using jquery , In a Grid view count the number of columns and rows and display
jQuery mobile page change and page position
I have a strange problem with jQuery mobile. I tried to search for it, but all the results are about how to scroll to somewhere. My scenario: On the main page, we have a bunch of products. This is a list of them, and these products are in divs. Nothing special. So, there are the header with logo and basket icon, some other things, like search, and then the list is coming. If I see the very top of the page, and see the first product, and click on the product's link, then everything is ok on the product
How to retain the dragged positions that is stored in the DB for the next visit
Hi, Below is my code for creating the tables dynamically with rows and columns and the unique number (3rd field) and applying dragging for it. When the tables are dragged the positions are stored in the DB of individual ones. So once i exit from the application and revisit the next time i want all the tables to show the newly dragged positions. Any help / suggestions on this will be appreciated. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>IP Dragging</title> <link
Search for element with matching content
Here is what I'm trying to achieve: For each li in .one , search for li's in .two that has matching content, and then wrap them both in div. Any Ideas on how I can achieve this? Below is my code so far. $(document).each(function() { var pMatch = $('.one li').contents(); var sMatch = $('.two li').contents(); if ($(pMatch === sMatch)) { $('.show-here').text('This is Working'); } else { $('.show-here').text('This is not Working'); } }); Here is a link to jsfiddle with
Next Page