I am using organictabs plugin, which I initiate in every page load in this form:
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
The tabs work fine in all browsers, and then I perform an ajax call which regenerates the tabs with the following code:
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText,'page-wrap');
$(function() {
$("#example-two").organicTabs({
"speed": 200
});
});
}
Again, the tabs are regenerated properly and everything works fine in all browsers EXCEPT in IE, when I try to switch tabs it doesn't work. I am initiating the jquery code onreadystate change, and i really can't figure out what can the problem be with IE?
Any help will be greatly appreciated.
All the best
The problem was with how IE handles the ("a.sample_class").attr("href") attribute. In Chrome/FF the relative path is returned(in this case just the anchor #tag), whereas in IE, after I was calling an ajax page, the absolute path was being returned(http://www.mysite.com/#tag), hence trying to find the entire anchor(string) in the current page.
More information regarding this issue you can read in this article: http://www.glennjones.net/2006/02/getattribute-href-bug/
Hope this is of help to someone, as it really took a few days of my time
Related
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 have a WordPress site and problems with anchors. i have a page with several anchors which are linked to in the main menu. when i am on the page itself, all anchors work fine, but if I'am on any other page, they don't work, at least not in all browsers and the anchors are ignored.
As being informed it is a chrome bug, ive found this solution:
<script type="text/javascript">
jQuery(window).load(function(){
var hashNum = 0;
if (window.location.hash != ''){
hashNum = window.location.hash.replace("#oneofmanyanchors", "");
console.log('hashNum: ' + hashNum);
};
hashMenu = jQuery('[data-q_id="#oneofmanyanchors"]').offset().top;
jQuery('html,body').animate({
scrollTop: hashMenu
}, 0);
});
</script>
above code is working and fixes the issues i had in chrome and ff.
however i need this added functionality: At the moment it is addressing only one specific anchor, but i need it to work with any anchors in the page url, not just the one above (anchors are referenced with the data-q_id attribute).
so the code needs to be updated that it grabs any given anchor from the page URL and go to / scroll to that anchor (once) via jquery after first page load.
How do i achieve this?
Thanks in advance!
PS: The problem is caused by theme incompatibility with a certain plugin i need...
I think this should work in every browser - what happens to be the problem?
In order to achieve this in jquery you should scroll to the element/anchor with javascript as soon as the document is loaded.
So like this:
$(function() {
location.hash = "#" + hash;
});
I still think you should find out what went wrong and why the linken from another page doesn't work in some browser before using a workaround for the problem. Your code will just ged more and more messy like that.
How to scroll HTML page to given anchor using jQuery or Javascript?
and here
$(document).ready shorthand
I am currently trying to implement the WordPress Contact Form 7 Plugin into a WordPress-site I created. The theme uses jQuery to overwrite the default link behaviour and AJAX to load the requested page without actually reloading the whole page.
The problem is: The contact form works perfectly when the page where it is used on is loaded directly. However, if the page is loaded via AJAX, there are two strange behaviours: The Google reCAPTCHA widget is not showing up and after submit, instead of showing the div with the success-message, I am redirected to the themes "404" page. The mail gets sent successfully though. I use the plugin/contact-form in AJAX mode - so it makes an AJAX call itself to submit the data and handle the response without page refresh.
I am a bit overwhelmed where to start to solve this problem. Just for testing, I tried to hardcode all scripts from the direct pageload to the theme, so that they are also there when the contact-page is loaded via AJAX. Unfortunately, this didn't have any effect at all. I also tried to call the wpcf7InitForm() function of the plugin, as it was suggested in another question here - also with no success.
This is my ajaxload-script:
jQuery(document).ready(function($) {
// Targeting all internal links
$(document).on('click', 'a[href^="http://' + top.location.host.toString() + '"]:not([href*="wp-admin"])', function(event) {
event.preventDefault();
var url = $(this).attr('href');
$.ajax(url, {
beforeSend: function() {
if ($('#ajax-loader').length == 0) { $('body').append('<div id="ajax-loader"></div>'); }
$('#ajax-loader').fadeIn();
// Dimming static elements during loading
$('#mainbar').animate( { opacity: '0.5' } );
},
success: function(data) {
var data = $('<div />').html(data);
window.history.pushState('...', '...', url);
document.title = $(data).find('title').text();
$('#mainbar').html($(data).find('#mainbar > *'));
// Undoing design modifications to static elements
$('#mainbar').animate( { opacity: '1' }, 150 );
$('body').triggerHandler('reflow');
},
});
});
});
Help on this topic would be really appreciated and thanks in advance!
Couple ideas after reading through some stuff:
Might be a bug with the recaptcha - looks like the latest version specifically fixes recaptcha problems (not sure if they are yours though): http://contactform7.com/2015/11/23/contact-form-7-431/#more-16357
The div not showing up should be easy to debug by using absolute paths. In Wordpress, I usually use the bloginfo(); function. Try putting something like this in your form submit success callback to test path visibility between the AJAX and non-AJAX pages:
<?php
$pathCheck = bloginfo('template_directory');
echo $pathCheck;
?>
The problem with the div not showing up could also be how you are structuring the callback. From this question, it appears that the plugin has specific callback hooks you have to use that aren't in the documentation:
$(".your-form-class").on('wpcf7:mailsent', function(event){
// Show success div code would go in here
});
Great question btw. You used proper english and clearly explained your problem, pretty rare on S.O. Hope some of this gets you going.
I would first like to state that I started learning HTML 5 days ago, and therefore I am very new to everything.
I am trying to implement the code given here: http://jsfiddle.net/NFXzn/9/.
But for some reason the dropdown menu is blank. I have uploaded my code here: http://gbrowse2014.biology.gatech.edu/viru.html
Since I did not make the code, I am assuming the problems lies with how I implemented the code (specifically the javascript). I have narrowed the problem down to one particular function:
$.each(g_Vehicle, function(index) {
var iYear = g_Vehicle[index].Year;
if ($.inArray(iYear, g_YearsArray) == -1) {
g_YearsArray.push(iYear);
}
});
I am using firefox, and I have gone through www.w3schools.com to look for implementation tips, but I have not corrected the problem.
On a sidenote, does anyone know how to change the code to use the dropdown-checkboxes instead of the dropboxes?
That loop is working fine. The problem is that you're running the code before your select is loaded, so nothing is being appended to the page. Either wrap your code in $(document).ready( function() { ... });, or move your <script> blocks to the bottom of the page (after the HTML has completely loaded).
http://learn.jquery.com/using-jquery-core/document-ready/
(On the top-left corner of the jsFiddle page, you'll see a dropdown which displays onLoad -- which is automatically doing that job for you. Your page as it stands is the equivalent of No wrap - in <head> -- not what you want.)
The following code is used as a visual filter on an application I'm building. Basically, when a user types something into the textbox with id 'filter', the code below runs to hide those that match.
$('#filter').keyup(function() {
delay(function(){
$(".patient:not(:contains('" + $('#filter').val() + "'))").fadeOut();
$(".patient:contains('" + $('#filter').val() + "')").fadeIn();
}, 300 );
});
The code works fine in Firefox and Chrome, but in IE7 two things happen that I don't like:-
1) The selected divs dont fadeOut/In - they just appear..
2) Occasionally, I get an error from IE that the script is taking too long and may become unresponsive.
In terms of problem 2 I've read that returning control to the browser (again maybe using a timeout) might prevent the issue but I'm not sure if this is possible using my code or how to do it.
Can you guys help?
(PS - for the record, I HAVE to use IE7 in my organisation. Bad, I know, but I can do nothing about this, just in case your solutions involve changing browser :))
I managed to fix it and prevent the errors. Maybe I was just asking too much of the browser, so I changed the code as follows:-
$('#filter').keyup(function() {
delay(function(){
$(".patient").hide();
$(".patient:contains('" + $('#filter').val() + "')").fadeIn();
}, 300 );
});
This now works pretty much perfectly.