Execute jQuery Popup When Page Loads? - javascript

I'm using the Reveal modal plugin by Zurb.
http://www.zurb.com/playground/reveal-modal-plugin
Does anybody know how I can get the modal to execute (as in open the popup box) when my page has finished loading as opposed to when the handler is clicked?
I'd like to use it to display a simple message each time somebody opens my homepage.
I've dug through the code and tried a few things, but I'm a self confessed jQuery noob.
I was going to post the entire contents of the jQuery plugin itself, but it might just be easier to download it and take a look for yourself.
Thanks!
:)

$(function() {
$('#myModal').reveal();
});
OR
$(document).ready(function() {
$('#myModal').reveal();
});

Couldn't you just do the following after you instantiate your modal:
$(document).ready(function() {
// instantiate modal first
$('#myModal').reveal();
});

Something like this should work:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').reveal();
});
</script>

Hey had trouble getting this to work on a page using other .js libraries where JQuery NoConflict was being used -- in that case try this:
jQuery(document).ready(function($) {
$('#myModal').reveal();
});

Related

Have simple wordpress jquery script not working

Ok so i have a simple jquery script im trying to load into wordpress i have other scripts already working but for some reason this one is not working. I have it working just on a simple html page but right when i put in wordpress.
Could someone help me and let me know why i keep getting unknown syntax error
jQuery(document).ready(function ($) {
jQuery(".comb-7").hover(function () {
$(this).find('.background-hover').toggle();
}
});
thanks for any help
This cant Work, you're missing the cloosing the bracket for the hover method
You don't close the hover method. Should be:
jQuery(document).ready(function($) {
$(".comb-7").hover(
function () { $(this).find('.background-hover').toggle(); });
});

Load Un-clossable Jquery Modal on Page load

I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.
According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>
Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals
you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});

Initialize script

I need to learn how to initialize scripts. I have google it but dont dont really understand it.
Right now I have a toggle-script that is in a div, that entire div gets loaded in to another page. The toggle scripts work, but not when its loaded in.
$(".class").click(function () {
$(this).toggleClass("add_class");
});
If somebody have time, can you explain to me how to initialize this script?
Thanks.
You should put this script inside a document.ready call.
Eg.
$(document).ready(function() {
//Put your code here
});
If I misunderstood your question and what you actually mean is:
How do you execute the script after you load it in through an AJAX call.
Then see this question: executing script after jQuery Ajax Call
Are you calling it after the elements are loaded on the page?
You should be using on() with jQuery 1.7+
$(document).on("click", ".class", function () {
$(this).toggleClass("add_class");
});
If you want to keep your syntax, you would have to do it either after the elements are rendered, or do it on document.ready.
I figure you're using jquery.ajax to fetch the div?
If so, you should be able to add the listeners in the success-function of the jquery.ajax call:
$('#result').load('ajax/test.html', function() {
$("#result .class").click(function () {
$(this).toggleClass("add_class");
});
});
simple and best
$(function(){
//your code here...
$(".class").click(function () {
$(this).toggleClass("add_class");
});
});

I want to have a overlay using css but it's not working

I am trying to create a overlay dialog box using CSS . I wrote the css but I am not able to display the overlay dialog box. Any help would be greatly appreciated.
Check out my attempt here. Also this should work in IE9 and firefox.
http://jsfiddle.net/tGDKT
why not just use jQuery UI's dialog:
http://jsfiddle.net/maniator/tGDKT/15/
$(function() {
$('.clickme').click(function() {
$('iframe').dialog();
});
});
You could also attach the method in the javascript, unobtrusive style. Give the <a> an id or:
$('a').click(calculateEmbeddedWindowSize);
... would call the function for every link on the page.
I keep getting "calculateEmbeddedWindowSize is not defined" in the console. Your javascript does not seem to be there at all on the page.
Edit - Try this: http://jsfiddle.net/tGDKT/7/

prettyPhoto and Ajax-loaded content

I'm currently working on a little product display page that loads prettyPhoto-enabled galleries through ajax. The problem is, prettyPhoto doesn't work on the images added after the page loads initially. I understand that I need to re-initialize prettyPhoto after the new content loads, but how? I've tried adding prettyPhoto.init(); to the code that is returned to the page - that doesn't work.
Page I'm working on is here: http://turningpointpro.com/page.php?id=10
I ended up finding two solutions. The first and best was to put this whole bit:
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
into the ajax callback, not the prettyPhoto.init(); function I was calling before.
I also had some luck with using the API instead of re-loading prettyPhoto again.
Hope this helps someone.
If you are using ASP.NET with Ajax, the scriptmanager will allow you to use a function called pageLoad() that is called every time the page posts back (async or otherwise).
your code:
function pageLoad()
{
$("a[rel^='prettyPhoto']").prettyPhoto();
}
$(function() {
$('#navigation a.button').click(function(e) {
$.get( $(this).attr('href'), function(data) {
$('#portfolio').quicksand( $(data).find('li'), { adjustHeight: 'dynamic' }, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); } );
});
e.preventDefault();
});
});

Categories

Resources