Overlay pop up box using jquery1.6.1..? - javascript

I had a script for overlay popup box using jquery1.4.1 using modal, which returns some function in my page getting not working which are used by jquery1.6.1..
So, when I add jQuery 1.4.1 script for displaying pop up box.. the functions working through jQuery 1.6.1 got interrupted..
How can I get popup box using jQuery 1.6.1?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal.1.4.min.js"></script>
<script type="text/javascript">
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal();
}
function hideModal() {
$.modal.close();
}
</script>

Your problems may be
1) Certain functions in jquery 1.4.1 have been deprecated in 1.6.1
One solutions is , please upgrade the plugin to newer version , it may solve your problem
Otherwise you need to edit the plugin to accommodate the new functions ,its risky

jQuery latest is 1.7.1. Are you sure your page is loading 1.6.1? That's beside the point, though: what may be happening here is that your scripts are firing before the document is ready. No idea why it worked for 1.4.1 since that's so long ago (as duke mentions, deprecated functions?), but you should wrap this in a document ready function to see if it works:
$(document).ready( function() {
// your existing code
});

The code looks fine for versions 1.4+, so I don't think you've got a deprecation issue.
As Greg said, you haven't invoked the document ready method. You also haven't invoked the modalTest() function, so the simplemodal $('').modal method won't fire.
$(document).ready(function(){
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal({ /* Pass simplemodal config here*/ });
}
function hideModal() {
$.modal.close();
}
modalTest();
});

Related

.on('click') function not working after updating to jQuery 3.3.1

first of all I'm sorry if this was already answered here, but none of the solutions I saw worked for me.
I'm updating an old website and after updating jQuery to version 3.3.1 my function stopped working and I can't wrap my head arround the problem.
here is my script:
(function(){
$("a").on('click', function(e) {
if (this.hash !== "") {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1500, function(){
window.location.hash = hash;
});
}
});
});
and the order I'm loading my script files:
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.easing.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
The page jumps to the anchor established instantly. Has there been some function deprecation I've overlooked? It worked fine with 2.2.4.
Thanks in advance for your advice!
EDIT: Removed initial claim that .on() function wasn't being recognized.
Your wrapping function is never invoked
(function(){
//code here
});
It should be
(function(){
//code here
})();
Maybe you meant:
$(function(){
//code here
});
which is a jQuery shorthand for invoking the function when the DOM is ready
If your JavaScript code get execute before DOM ready or there is no anchor tag when your JavaScript get execute.
Try the following code i hope this will work for you.
$('body').on('click','a',function(e){
//IMPLEMENT YOUR LOGIC HERE
});
NOTE:- Make it sure that your JQuery library file include before your JavaScript code

Javascript not working on page refresh

So I have this block of code:
$(document).ready(function() {
planSelectionForm.init($("form#new_account"));
});
And when I link to this page it works as expected. But when I refresh from the browser it doesn't get triggered. This seems like a common problem. Just for the record I'm using turbolinks. Any help on why this is happening would be great!
The only solution I could find after getting this problem was wrapping my script with:
document.addEventListener("turbolinks:load", function() {
planSelectionForm.init($("form#new_account"));
});
Wrap your .onready() functions into a function called initialize. The point, is to seperate the event-driven function calls such that the event driven function call calls a global function.
In there, add to your body or another element that supports onload.
$(document).ready(function() {
initialize();
});
function initialize()
{
}
<body onload="initialize(); return;"> </body>
Also, for Caleb, in my experiance, I believe jQuery ready events only get executed on either a fresh load, or a ctrl+f5 cache reload.

Magento and Jquery (jquery not firing events)

we are working on a magento site that has jquery loading, version 1.8.2
we have added this
var jlbJs = jQuery.noConflict();
and added this in the page
if (typeof jlbJs != 'undefined') {
// jQuery is loaded => print the version
alert(jlbJs.fn.jquery);
}
just to verify that jquery is available, it also shows the version using jQuery as well.
However once we use
jlbJs(document).ready(function () {
alert('++++++++++++++++++++++++++');
jlbJs.reject(); // Default Settings
return false;
});
or
jQuery(document).ready(function () {
alert('++++++++++++++++++++++++++');
jQuery.reject(); // Default Settings
return false;
});
or
jQuery(document).ready(function () {
alert('++++++++++++++++++++++++++');
});
or any other jquery items in the page it never fires or alerts, no errors, nothing.
anyone have any ideas on what it could be?
In my opinion is because of javascript conflict.
Try this post: jQuery conflict .The idea is FIRST load the jQuery,then the noConflict script and then the prototype.
Hope it helps.
Cheers!

jQuery not rendering properly

I'm using this jQuery to render a text box onClick. But, It's not rendering... Also, on a side note I'm using Drupal 7. I have the jQuery in the Head tags of the html.php.
<script type="text/javascript">
$(document).ready(function() {
$("#front-background").hide();
$(window).load(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
});
</script>
This may also be because of how Drupal handles compatibility with other JavaScript libraries.
You can wrap your jQuery function in:
(function ($) {
//your existing code
})(jQuery);
or if you're comfortable theming using the template.php file, you can add the JS through the function drupal_add_js().
See http://drupal.org/node/171213 for more details.
You dont need window load event if you are already using $(document).ready method. Try this.
$(document).ready(function() {
$("#front-background").hide();
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
I didn't see any onClick functionality there. This should work:
CSS:
#front-background {
display:none;
}
JQuery hover replacement. Fade in on hover, fadeout on leave
$(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
},function(){
$('#front-background').fadeOut(2000)
});
});

jquery tabs ajax problem

This my javascript :-
<script type ="text/javascript">
$(function()
{
$("#tabs").tabs({ cache: true ,fx: { opacity: 'toggle' }});
});
</script>
And this is my html which loads php file using ajax :-
<ul>
<li>General</li>
<li>Messages</li>
<li>Pics</li>
<li>Facilities</li>
</ul>
The question i want to know is when Messages.php is loaded does the javascript onload event fire? I want to know because i want to take my textarea and convert it into editor. However i am not able to capture window.onload event :-
window.onload = function(){
alert('hello');
}
and further if i write something in :-
$(function(){
}
It works in Opera and IE but sometimes doesn't work sometimes. To sum, how do i capture window.onload in the above situation?
EDIT
Looks like $(function(){ } seems to be working, the problem is with fx: { opacity: 'toggle' }. When i remove effect, it works fine.
Thanks in advance :)
The window.onload event will not fire, in the document you're loading into it already fired earlier.
You should be able to use document.ready, e.g. $(function() { }); in the page you're fetching and it work, provided you're on at least jQuery 1.4.2+. Several issues were fixed with events in the 1.4.2 release, including one around this being inconsistent, if you're using 1.4.1 or below, I can't promise it being 100% consistent.
Alternatively, you can have the code in the main page instead of inside Messages.php and run the code in the load event of the tabs, like this:
$("#tabs").bind("tabsload", function(event, ui) {
$('.myEditorClass', ui.panel).myEditorPlugin();
});
I've noticed in some browsers that if you use display:none it won't render anything inside that tag, it just ignores whatever's in there because it's not being displayed. I'm not sure if that fx setting is using .hide(), but that could part of the issue.
Also why not set up a function on the loaded pages called "init", then have ajax do a callback to trigger it?

Categories