What I have:
A standard log-in page (specifically, the default WordPress wp-login.php page).
Here are two live examples:
https://twentyfourteendemo.wordpress.com/wp-login.php
http://demo.opensourcecms.com/wordpress/wp-login.php
What I need:
I need to disable the auto-focusing of the first textbox in the form.
What I've tried:
I've attempted a hidden or off-screen positioned textbox to steal focus.
I've attempted setting the tabindex of all inputs to -1 (very unideal).
I've attempted using .blur() on the auto-focused textbox.
None of the approaches work.
For those coming from Google, there is now a hook for this in the core (correct from V5.2, could be earlier!).
wp-login.php:1149 enable_login_autofocus : Boolean
add_filter('enable_login_autofocus', '__return_false');
Will disable the autofocus javascript snippet
I've posted a few solutions on the WordPress SE here. Basically there are two ways around it (in WordPress 4.0) that don't involve changing the code itself. Kill the function altogether using a dirty hack:
add_action("login_form", "kill_wp_attempt_focus");
function kill_wp_attempt_focus() {
global $error;
$error = TRUE;
}
Or use Geeklab's solution to modify the HTML code through buffering, allowing you to specifically kill the autofocus. Good luck!
I've found a solution based on charlietfl's setTimeout function.
setTimeout(function() {
$( '<input type="text" id="focusfix" style="position:absolute; top:-1000px;"/>' ).insertBefore( "#loginform #user_login" );
$('#loginform #focusfix').focus();
$('#loginform #focusfix').select();
}, 205);
Related
I have a problem with FullPage JS, and I come to ask for help :)
My problem is: I want to disable FullPage for a single page of my Website.
FullPage is made for little page, but my website has 1 long page, where I want to disable FullPage.
The file has the .ejs extension, instead of .html extension. The pages are in different EJS file.
I searched on the FullPage's Github, and it indicates me the destroy('all') method, but I've found a lot of way to write it, I tried 3 methods, and I don't know why, it doesn't work.
Does any of you know how to disable FullPage JS on a single page of the Website ?
I tried 3 methods.
1st Method tried:
document.querySelector('#destroy').addEventListener('click', function(e){
e.preventDefault();
fullpage_api.destroy('all');
});
2nd Method:
$('#destroy').click(function () {
$.fn.fullpage.destroy('all');
});
3rd Method:
function DestroyFullPage() { //default is 700.
$.fn.fullpage.destroy('all');
}
As Alvaro suggested, I tried something like this:
<script>
window.onload = function() {
alert('Ready ?');
fullpage_api.destroy('all');
alert('Done');
}
</script>
The first alert works fine, but the second never appear on my screen, and FullPage isn't destroyed.
Am I wrong in my syntax ?
Thanks
PS: Excuse my English, I'm french, but at least, I try :D
If you wonder how to use the destroy function, you can check the demo provided on the fullPage.js docs:
https://codepen.io/alvarotrigo/pen/bdxBzv
Which basically uses fullpage.js version 3 (no jQuery required) to do so:
fullpage_api.destroy('all');
There's no difference at all between your 2nd method and the 3rd one. In fact, 3rd method won't work until you call the DestroyFullPage somewhere else.
And the 1st one should only be used when initialising fullPage.js with jQuery. So, using $('#fullpage').fullpage(options) instead of new fullpage('#fullpage', options);
Recently, I have seen an amazing issue in a SPA web page. When I write a code using chrome developer console, it works once. When I change filter interactions, that code does not work.
Here is site link: https://www.butlins.com/latest-offers/prices.aspx?start=08/2017
My simple testing code is given below:
Thanks, it works but this code is work twice. Why?
function updateChanges(){
$("a#whatsOnLink").css({"position": "absolute" ,"margin-top": "110px", "margin-left": "-50px"});
$("p.latest-type").append("<p class='someText'><b>2 Adults and 2 Children</b></p>");
$("p.someText").css({"font-size": "12px","margin-top": "10px"});
$("p.latest-type").css({"font-size": "16px"});
$("a.button.bookingEngine.button-red").css({"margin-top": "-10px"});
$('.latest-offer-price').each(function(el){
var data = $(this).text().substring(1);
$(this).text('£'+(data*4));
});
}
$(document).ajaxSuccess(function(){
setTimeout(updateChanges,30)
});
updateChanges();
When I write code in console and press enter, append and calculation is made twice.
Furthermore, I change filter interactions, DOM element flashes with violate colour. I don't know why it is caused.
So, What is the reason for behaviour it ?
Why does DOM element flash with violate colour when filter interaction ?
Have any solution to fix it ?
Try inserting a new <style> tag instead. If it is really an SPA then the rule should stay there after the filters are applied. If the page does a full reload you would need to run new code after each new page loads
let rule ='a.button.bookingEngine.button-red{background-color: blue}'
$('head').append($('<style>', {text:rule}))
The css rules for that page have very specific selectors.
An alternative is to hook into their jQuery ajax and use ajaxSuccess global which will fire after any ajax request succeeds
function updateBtns(){
$("a.button.bookingEngine.button-red").css({"background-color": "blue"})
}
$(document).ajaxSuccess(function(){
setTimeout(updateBtns,30)
});
updateBtns()
I notice a strange behavior when there are multiple timepickers in the same page.
After switching between the two timepickers, eventually one of them isn't removed/hidden, and will persist till we refresh the page.
I thought it was a problem with my code but then i did a test with a simple bootstrap example i found on google.
Fiddle bug example:
http://jsfiddle.net/kW3G7/282/
The only code that is used is:
`$('.timepicker').timepicker();
Thanks in advance.
Edit: i created a issue in there github project
Edit 2: It seems that the timepicker stops calling the document onclick event(code above)
$(document).on('mousedown.timepicker, touchend.timepicker', function (e) {
// This condition was inspired by bootstrap-datepicker.
// The element the timepicker is invoked on is the input but it has a sibling for addon/button.
if (!(self.$element.parent().find(e.target).length ||
self.$widget.is(e.target) ||
self.$widget.find(e.target).length)) {
self.hideWidget();
}
});
Solution, for now, remove the "touchend.timepicker" from the "on" event trigger.
I don't think it is the proper/final solution but it seams to work.
So I have an animated GIF that I only want to show when a user clicks a submit button, this way they think something is happening if it takes a while for a response.
The problem is in IE9 the GIF doesn't animate. I have tried adding it dynamically and adding it before hand and just having it off the page and neither seemed to work. I also tried adding a delay before adding the GIF but that didn't help either.
One other thing, I believe this may be related to the form doing a POST as opposed to a GET request (GET request experiences this problem), however I need to do a GET for reasons I would rather not get into.
Once you submit a form on a page all execution of the current page STOPS. You can use AJAX instead, or post your form to an Iframe.
Not sure about your specific IE9 issue but you can try doing this in jquery:
$(function(){
$('form#my-form').submit(function(e){
$('#my-animating-gif').show();
});
};
and just make the animated gif in the dom on page load with the attribute style="display:none;" (or a hidden class and the proper css in your stylesheet)
If that fails to do the trick you can see if you can prevent the regular form submission and do it yourself after you show the gif.... but I'm pretty sure doing this is identical to the previous version. Worth a try I guess.
$(function(){
$('form#my-form').submit(function(e){
e.preventDefault();
$('#my-animating-gif').show();
$(this).submit(); // <-- This might cause infinite recursion
// into this event handler. Probably a
// terrible idea. Go with the above version,
// or serialize the form data yourself and submit
// it as a separate form but that's outside
// of the scope of this answer.
});
};
That has been a problem with every version of IE. Unfortuntely most of the old workarounds don't work with IE9. One that still does is spin.js, if you're ok with a javascript-only solution. It's pretty simple and has no dependencies (although there is a jQuery plugin for it if you want it). The basic syntax is:
HTML:
<div id="spinner" style="width:24px; height:24px"></div>
JS:
var opts = {
lines: 12,
length: 7,
width: 4,
radius: 12,
color: '#000',
speed: 1,
trail: 54
};
var target = document.getElementById('spinner');
var spinner = new Spinner(opts).spin(target);
I'm using jQuery Mobile and Backbone JS for a project. It's mostly working, using jQuery Mobile's event 'pagebeforeshow' to trigger the correct Backbone View. In the Backbone View for that particular jQuery Mobile page, that's where it's doing all the dynamic things needed. Some of the things the views do is pull in certain bits using Underscore's templating system.
This is all great until where I pulling in form bits using the templating system. For example, a set of dynamic radio buttons (which are generated from a Backbone Collection). These radio buttons I want to style up using what jQuery Mobile has to offer. At the moment, jQuery Mobile is not picking up these dynamically injected radio buttons. I solved this issue previously when doing sliders by just calling the jQuery Mobile widget "slider()" method again and it seemed to refresh them... This doesn't seem to be the case with these radio buttons.
In the Backbone View, I tried calling the widget methods again:
$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();
I tried them the other way around too, but it seemed I need to do it this way for the grouping styling to work etc. But this just doesn't seem right! ...doing this also caused errors when I clicked on the radio buttons, saying: "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"?
It seems there should be a way in jQuery Mobile to re-initialize the page or something?! I noticed there is a 'page' widget in the source code.
How does jQuery Mobile handle forms/elements being injected into the DOM after the page is made? Is there a clean way of handling how it makes up the forms? There must be a clean way of calling on the forms to render 'the jQuery Mobile way' without it just relying on data attribute tags in the base HTML?
Any help or insight into this problem would be greatly appreciated... I'm very much on this quest of trying to get Backbone JS and jQuery Mobile to work nicely together.
Many thanks, James
update
Since jQueryMobile beta2 there is an event to do this. .trigger('create') on an element to cause everything inside it to be painted correctly.
Another question that is not a duplicate, but requires an answet I posted over 10 times :)
[old answer]
try .page()
More details in my faq:
http://jquerymobiledictionary.pl/faq.html
Refreshing the whole page worked for me:
$('#pageId').page('destroy').page();
I'm not sure if this helps but when adding dynamic elements I was using .page() in the sucess ajax call itself (example here and here) but I found that it was not working as expected. I found that in the ajax call it's better to refresh the element (if it's a form element) to use these documented methods:
Checkboxes:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type=range]").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
and for adding a non-form element use .page()
JQuery Mobile now supports .trigger("create"); which will resolve this for you
Try calling .trigger("create") on the element with the new content.
I needed a way to dynamically refresh a JQM page after it had been initialized. I found that if I removed the data attribute "page" during the "pagehide" event, the next time the JQM page was displayed it was re-initialzed.
$('#testing').live('pagehide', function (e) {
$.removeData(e.target, 'page');
});
$('#pageId').page('destroy').page();
works for entire control groups that are generated, let alone radio input children.
-Mike
It worked for me when I called .trigger('create') on the enclosing div element. See example below:
In .html file:
<div id="status-list" data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a"/>
<label for="checkbox-1a">Cheetos</label>
</fieldset>
</div>
in .js file:
$("#status-list").trigger('create');
For me only .page() worked (without the .page('destroy')).
E.g.:
$('my-control-group-id').page();
Amnon
I little bit off topic. I wanted to be able to stop jqm from creating first default page div on init as backbone wraps elements in divs anyway. I wanted to dynamically insert pages to the DOM and then call jqm to create its classes and widgets. I finally did this like this:
<head>
<script src="jquery-1.8.3.js"></script>
<script type='javascript'>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
}
</script>
<script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
....... dynamically add your content ..........
<script type='javascript'>
$.mobile.initializePage()
</script>
</body>
and my hole jqm config (which you put before jqm.js)
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.linkBindingEnabled = false; // delegating all the events to chaplin
$.mobile.changePage.defaults.changeHash = false;
$.mobile.defaultDialogTransition = "none";
$.mobile.defaultPageTransition = "slidedown";
$.mobile.page.prototype.options.degradeInputs.date = true;
$.mobile.page.prototype.options.domCache = false;
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled=true;
});
So far Backbone and JQM been working fine.
Try use enhanceWithin() method. This should be method of any jQuery object while using jQuery Mobile.