jQuery Forum

Hi,

In jquery variable, how can I have variable like below

1. opts.[dynamic name]+'Func'

opts is an object variable inside function

1. var opts = $.extend( options );

I can access with passed in variable name but in one of my case, I will be getting a [dynamic name] from another variable and I would like to check or access it.

1. /* name "mobile" cannot be fixed as below statements will be checked within .each loop. Therefore "mobile" need to be dynamic. Got other name(s) may appear in the loop. */
   
2. if (opts.mobileFunc) {
         console.log('match function ');
3.       /* will be executing statement below */
   
4.       opts.mobileFunc.call(this);
   }
   

I'm wondering How or is it possible to have such dynamic variable? This would allow me to create a more flexible function.

Thanks for any help and suggestions.

I have been tried for whole day and still can't find a solution to my jquery multiple post request problem.

When I fast click Button-A then Button-B to trigger ajax call, the result on success: $(ID).append(data) completely goes wrongly into different target ID.

I tried set async:false but it is deprecated. I'm using jquery ver 1.11.2.

Thank you in advance for any help.

Hi,

I would like to create a responsive Popup where eg Desktop view, width=400px, Mobile view, width=100%. But I can't get it to work especially width=100%.

I prefer not using CSS media, instead I prefer using CSS Name, or by jquery function control according to my own specified breakpoint.

There got to be something I do not know. Something to do with rendering before popup open?

I'm aware of using CSS #<id>-popup { }, but that can only take effect on load.

Anyone can help point out where or which part I should look into would be very much appreciated.

Thank you.

If for some reason, I have a specific DIV content inside data-role=header, How I can position it like usually we do for css position:absolute ?

I tried but it appear only as relative to header. I would like to make it position anywhere in the page.

Anyone know how I can do this?

Hi,

I'm using default JQM NAVBAR, however I would like to add a custom sub-level menu list but somehow it inherit JQM styling even I added <div></div>.

1. <div id="nav1" data-role="navbar">
   <ul>
   <li><a href="#" class="ui-btn">Menu-1</a></li>
   
   <li><a href="#" class="ui-btn">Menu-2</a>
   <div>
   <ul>
   <li><a href="#" class="ui-btn">Sub-1</a></li>
   <li><a href="#" class="ui-btn">Sub-2</a></li>
   </ul>
   </div>
   </li>
   
   <li><a href="#" class="ui-btn">Menu-3</a></li>
   </ul>
   </div>

I would like to "remove" default JQM styling so I can customize my own styling. The sub menus block will be position:absolute. As I am unable to get the styling right, so

I also tried added data-role="none" and data-enhance="false" but none seems to work.

Also I tried to move sub menus block to be outside of main menu's UL within DIV NAVBAR, still same thing.

Any solutions? Thanks for advance.

Hi,

I'm not sure if I am using the correct terms for the question I am asking.

In page content, I click a button/link to open a Panel it can be in any data-display value. When the panel appear, I would like to caller page content to be gray out or technically cover it with gray overlay.

How I can do that? Is there any existing built-in attribute I can set or I will need to do this with my own js/jquery?

Hope my explanation is clear enough.

Thanks.


Hi Sir,

I wonder is it possible to override at some point the color of svg icon set in css data url format? I'm not looking for changing original CSS value. Can be dynamically or inline.

I tried many options such as fill but can't get it to work. I think I am doing it wrongly or maybe it is not possible?

When looked into jquery mobile css, one of the svg icon data uri is something like

1. .ui-icon-action:after {
       background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20style%3D%22fill%3A%23FFFFFF%3B%22%20d%3D%22M9%2C5v3l5-4L9%2C0v3c0%2C0-5%2C0-5%2C7C6%2C5%2C9%2C5%2C9%2C5z%20M11%2C12H2V5h1l2-2H0v11h13V7l-2%2C2V12z%22%2F%3E%3C%2Fsvg%3E");
   }

Within the css code, I can manually modify the color value of FFFFFF. But I do not want to apply all of the icon color.

Any suggestions?

Example of HTML codes are:

1. <a href="#" class="ui-btn ui-icon-action ui-corner-all ui-btn-inline ui-nodisc-icon ui-btn-icon-notext" style="border:0;">action</a>

Attempt use CSS override but not success:

1. .ui-icon-action:hover {
     fill: red;
   }

1. .ui-icon-action:after {
     fill: red;
   }

Hi,

I'm using standard JQM POPUP to create a dialog thru ajax call.

Inside ajax call I can easily execute $.mobile.loading( 'show' ); to show overlay and loader before my popup dialog show up.

However, when I execute again $.mobile.loading( 'show' ); on ajax call (button click) on same popup dialog page, only loader appear over the popup page. The overlay is not. This causes problem as I still are able to click any buttons on popup page.

My current only solutions is before I call ajax, I will close the popup $('#popup').popup('close'); and on ajax success, the popup will appear properly. This doesn't look nice as the popup disappeared while waiting ajax.

Is there a way for me to have overlay over popup?

I'm not looking for Page Dialog solutions unless there are no other choices for this popup dialog.

Many thanks in advance.

Hi,

I would like to make standard ui-checkbox icon (ui-checkbox-off / ui-checkbox-on) inside label to be vertical align same as label text. Require this because currently if there are long label text, the icon would appear in vertical-middle.

I am able to use CSS to make changes to ui-checkbox > input top:0px but the icon still remain in same.

I have tried all possible method and inspected each code but still to no avail.

Here is my JQM checkbox code. It is nothing fancy. You may need to resize your browser to smaller so the label text would make at least more than 2 lines height (heigher than icon's height).

1. <input id="agree" name="agree" type="checkbox" value="1" data-mini="true">
   <label for="agree" style="border:0; background-color:#ffffff; margin-top:-5px; ">Some long label text here. Some long label text here. Some long label text here. Some long label text here. Some long label text here. Some long label text here. Some long label text here.</label>

Any suggestion are very much appreciated. Thanks.

When I remove data-role, I am unable to refresh/create the styling. Using simple example below,

1. <ul id="lv1" class="" data-role="listview" data-icon="false">
   <li><a>item-1</a></li>
   <li><a>item-2</a></li>
   <li><a>item-3</a></li>
   </ul>
2. <div onClick="$('#lv1').removeAttr('data-role'); $(#lv1').listview('refresh');">Remove class</div>

I think the code $(#lv1').listview('refresh') should not apply as the data-role=listview already being removed.

I also tried using $('#IdOfYourPage').page('destroy').page(); as suggested on (https://forum.jquery.com/topic/how-to-refresh-style-and-layout-of-radio-buttons-after-add-remove), it also doesn't works for me.

My actual need does not apply to listview only, I will need to apply it to specific DIV which may contain listview, selectoption etc. Therefore if can refresh/create that specific container would be perfect.

I'm using latest version of JQM and used FireFox to inspect. Based on my inspection, removing data-role is not enough as JQM automatically added several more classes and inner container.

Hope my explanation is clear enough. Any help / suggestion are very much appreciated. Thanks.

Hi,

I need some help on how to direct call/trigger my jquery function. I'm still new in JQuery.

Function:

1. (function ( $ ) {
   
   $.fn.ajaxcall = function( options ) {
   
   var opts = $.extend( {}, $.fn.ajaxcall.defaults, options );
   
   this.click(function(){
   /* DO SOMETHING HERE.... */
   }); /* onclick */
   }
   
   $.fn.ajaxcall.defaults = {
   /* SOME DEFAULT VARs*/
   };
   
   }( jQuery ));

My normal function trigger/call

1. $('.ajaxclick').ajaxcall({id:'#id1'});

Inside ajaxcall, it will check for 'click' and do some processing.

In certain situation, I would like to trigger it directly/on page load (direct trigger click) if I explained this correctly. I do not know how to call my ajaxcall in this situation.

Any help are very much appreciated. Thanks.