class equals variable name

I have the following code:var theclass="class1";$("#div0").append('<div class=theclass id="div1"></div>');I want the class of div1 to be equal to the variable, but that isn't working.The problem is class=theclass, I don't know why this isn't working. Please help, thanks. $("#div0").append('<div class="'+ theclass +'" id="div1"></div>');This is the easiest way. An alternative:var $div = $('<div/>').prop({ 'class': theclass, 'id': 'div1' });$('#div0').append($div);Or even in a one-liner: $('<div/>').prop({ 'class': theclass, 'id': 'div1'...

Click on dynamically loaded content iterates event

I load dynamical content like this:$('.cPopUpOverlay').fadeIn('fast');$('.cPopUpOverlay').append('<div class=\'cPopUpContent\'></div>');$('.cPopUpContent').load('popups/popup_1.php');$('.cPopUpContent').fadeIn('fast');The popup_1.php has some data + a simple button.<input type='button' id='btn_action_add' action='add' value='add'>Again, from the page where I executed the first 4 lines of code there is this:$('.cPopUpOverlay').on('click', 'input[type=\'button\']', function() { console.log('clicked'); $('.cPopUpOverlay').fadeOut(); $('.cPopUpOverlay...

jQuery splitter issue div not resizing

I am using a jQuery plugin for splitters at http://methvin.com/splitter/4psplitter.html. In my case I need two columns vertically split and inside of those two rows horizontally split. In other posts I have seen people mention using different plugins to achieve this, unfortunately, the decision was made by others to move forward with this plugin. All of the splitters appear and are draggable, the vertical one works perfectly, however, the horizontal ones are draggable but they do not resize. Instead, the lower divs drag up and down, on top of the top div or creating a gap b...

Scaling an html5 canvas and div overlay

I've found a lot of useful information already here for this particular problem, but as yet can't quite solve it. As the title suggests, the issue is scaling an html5 canvas, and a div overlaying that canvas, while maintaining aspect ratio for both. The div in this case being a UI on top of the canvas.Currently, the canvas scaling seems fine. However, scaling the UI proportionally has proven troublesome. The following appears to work in a few tests on Chrome, Android, and Safari on iPad. It's not so effective on Firefox, IE or Opera. In essence, I'm using a canvas scaling a...

How to set Kendo Combo Box width as auto?

I am trying with var remoteDropDown = $("#ddl1").data("kendoComboBox"); remoteDropDown.list.width("auto");But it is not applying.When kendo Combo Box is near to bottom of the page screen is shaking.Can anyone help me how to fix this issue?Thanks. You can set the autoWidth proeprty of the Combobox widget. [XXX]

What are the drawbacks of using synchronous ajax call?

This question could surely be applied to jQuery but in this case I am referring to Prototype. In the Prototype doc it says, Since synchronous usage is rather unsettling, and usually bad taste, you should avoid changing this. Seriously.I'm not sure what the drawbacks of using a synchronous ajax call. It seems that there are many instances where you must wait for the call to return (without using the specific callback functions). For example I currently use Prototype's onSuccess, onFailure and onComplete to handle the rest of the code.However, the web services I use (all i...

Jquery Vector Maps replace cookie onClick

Im using jQuery Vector Maps v1.5.0 in my application. The idea is to display a Map and when people click on a country an application cookie with country name is created.At this moment I create the following code: <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#vmap').vectorMap( { map: 'world_en', onRegionClick: function (element,code,region,event) { if ( code == "AF" || code == "AL" || co...

jQuery posting valid json in request body

So according to the jQuery Ajax docs, it serializes data in the form of a query string when sending requests, but setting processData:false should allow me to send actual JSON in the body. Unfortunately I'm having a hard time determining first, if this is happening and 2nd what the object looks like that is being sent to the server. All I know is that the server is not parsing what I'm sending.When using http client to post an object literal {someKey:'someData'}, it works. But when using jQuery with data: {someKey:'someData'}, it fails. Unfortunately when I analyze the r...

How to access prop from $(selector).each()

Here's the HTML fragment<select multiple> <option value="1">Option 1</option> <option value="2" selected>Option 2</option> <option value="3" selected>Option 3</option></select>Here's the script$('select option').each(function(index, elem) { if (elem.prop('selected')) { // Find a checkbox somewhere in the page that correspond with the option // and then check it. }});This however throws elem.prop is not a function.Even a simple console.log(elem.prop('selected')) is not working.How can I go about thi...

AJAX POST with CORS to API Gateway does not work, although can POST with CURL

So I am trying to submit data to an API endpoint using a $.ajax() call. I have verified that I can POST using a curl command, in the format of the following:curl -X POST -H "Content-Type: application/json" -d "{\"uname\":\"myusername2\",\"emailAddr\":\"user2@ex.com\"}" <url to my API endpoint>That curl command returns an empty JSON response (looks like {}), and my data gets put into the DB (which is what I configured the API Gateway endpoint to do).However, when I try to do this using a $.ajax() command, which is programmed to fire on a button being clicked after form...

Fire event when jQuery Splitter drag stops

I am using jQuery Splitter plugin from https://github.com/jcubic/jquery.splitter. Splitter works fine. I need to know how can I fire some event as soon as I stop drag of splitter. I need to preserve new splitter left position in back-end and use it next time. mouseup, mousemove events are not working as desired. Below is the method which I tried. It only works when mouse is clicked on splitter without dragging it (Mouse click at same position). Once you drag splitter, this do not work. jQuery('.vspliter').on("mouseup", function (e) { alert('Mouse is release...

CSS: How to use blend-mode and filter at once

I've got a image style I need to accomplish by taking a full color photo and:Making it greyscaleReducing black level (can be done by decreased opacity or brightness)Applying "multiply" blend mode on top of blue colorSo far I've only been able to do one of the other (multiply and greyscale OR opacity/levels)Any idea how I could both of these on either an img element or background image?Codepen: http://codepen.io/jeremypbeasley/pen/vENBqOCurrent CSS:body { margin:50px;}.test:parent { overflow:auto; background:#0c98f2; width:500px; height:320px;}.test { backg...

jQuery: animate element until page loaded

I want to create the impression of a preloader for my site. I have <div class="loading"> that should fade in and out until the contents of <div id=page-wrap> are loaded.Right now i'm using a time-based solution to guess, but of course it isn't accurate:<script type="text/javascript">// fade site in when loaded$("#page-wrap").css("display", "none");$(window).bind("load",function(){ $("#page-wrap").fadeIn(2000);});// blink markers$(".loading").hide();$(".loading").fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeO...

Jquery - If/else statement with iteration works only once/ after the div is removed and prepended again it does not work

https://jsfiddle.net/9harsfb6/In jsFiddle file which I provided when you hover over menu item the red underlining appears ...then when you hover off and try to hover on again the red line does not appear....I want 1. the red line to appear under the given item each time I hover over it 2. after the hover to be able to animate smoothly from one element to the next which can also be seen in my jsfiddle demo I provided...BUT the thing is the whole thing works only on the first hover.CSS: <ul id="menu"> <li class="slider1"><a id="omnie" ...

How to resize jqGrid on splitter drag

I have some problems with implementing jqGrid with jQuery layouts. The problem is with resizing the grid on browser window resize. The height is working correctly but my problem is width. The grid width won't refresh sometimes. Also, if I close the left pane, the grid doesn't recognize the new width and it keeps the old.To be short, I need th egrid width to be 100% of window width.I tried to implement this code to see where my problem was, but the same thing happened.Here are pictures of my problem:Basic load and Splitter activated. something like:$(window).bind('resize'...

Change CSS class properties with jQuery

Is there a way to change the properties of a CSS class, not the element properties, using jQuery?This is a practical example:I have a div with class red.red {background: red;}I want to change class red background property, not elements that have class red background assigned.If I do it with jQuery .css() method:$('.red').css('background','green');it will affect the elements that right now have class red. Up to here everything is fine.But if I make an Ajax call, and insert more divs with red class, those won't have a green background, they will have the initial red backgroun...

Page 1 of 377  |  Show More Pages:  Top Prev Next Last