I would like to add an image that fades in and then fades out after a certain amount of time. I have tried to add the code below into index.php and it works but it throws everything off like alignments and spacings. Where would I put this so that it only loads when the homepage is first loaded?
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<img style="display: none; z-index: 9999;" id="book" src="images/test.jpg" alt="" width="100%" height="100%">
<script>
$( "#book" ).fadeIn ( 2500, function() {});
$( "#book" ).fadeOut( 1000, function() {});
</script>
use document on ready, it will fire a function when the document is loaded:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<img style="display: none; z-index: 9999;" id="book" src="images/test.jpg" alt="" width="100%" height="100%">
<script>
$(document).ready(function(){
$( "#book" ).fadeIn ( 2500, function() {});
$( "#book" ).fadeOut( 1000, function() {});
});
</script>
let me know if it works
run your functions after everything ready
$( document ).ready(function() {
//your code
});
it may work.
and have a look at
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Related
I would like to load jquery dialog after a delay of few seconds after page load. Here is my code so far.
<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
$(function () {
$("#dialog").dialog({
show: {
effect: 'drop',
direction : 'up',
distance: 1000,
duration: 2000,
},
});
});
}, 2000)
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
The problem is now that the popup animation of sliding from top is good for Chrome but in firefox it does not come to the center of the screen and for IE there is no popup at all.
http://jsfiddle.net/fakhruddin/x39Rr/9/
Please guide.
Use setTimeout() to delay.
$(document).ready(function() {
setTimeout(function(){
$("#dialog").dialog({
show: {
effect: 'fade',
duration: 800,
},
});
}, 2000)
});
Try this
$(function(){
$('yourDiv').dialog({
autoOpen: false
});
});
function openMyDialog(){
$('yourDiv').dialog('open');
}
$(document).ready(function(){
setTimeout(function(){
openMyDialog();}, 2000);
});
You can use the jquery slidedown/slideup: http://api.jquery.com/slideUp/
Let's say that in a document I have a div and a button that will show the div:
<div id="dvExternal" style="display: none;">
</div>
<button type="button" id="btnShow">
<span>Show</span>
</button>
and a jquery that commands it to show:
$("#btnShow").click(function(){
$("#dvExternal").css("display","block");
$("#dvExternal").load("whattheitsnotworking.php");
});
and that page contains jquery functions, php, iframe etc.
The problem is when it loads on the div the jquery on that page isn't working.
Thanks in advance :)
The page that I was trying to load in the div contains(for example):
<script type="text/javascript">
$(document).ready(function(e)){
$("#inputDate").val("<?php echo date("Y"); ?>");
});
</script>
This script doesn't load or work.
Try to use live function of jquery, it will help you...
$("#btnShow").live("click",function(){
$("#dvExternal").css("display","block");
$("#dvExternal").load("whattheitsnotworking.php");
});
Make sure you have
<script src="http://code.jquery.com/jquery-1.10.0.min.js">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
in the parent page head
I have it working # http://www.damienkeitel.com/pr.php
<script type="text/javascript">
$( document ).ready( function( e )){
$( "#inputDate" ).val( "<?php echo date('Y'); ?>" );
}
</script>
should be
<script type="text/javascript">
$( document ).ready( function( e ){
$( "#inputDate" ).val();
});
</script>
jQuery .val() is only to get a value of an element.
To set a value you can use this method.
$( "#inputDate" ).attr( "value", "<?php echo date('Y'); ?>" );
you had one to many ) after function(e) and also didnt close off the function with );
I am using a fullcalendar:-
http://arshaw.com/fullcalendar/
and I am using jquery .post to get a parameter back to the same page to generate some result, and this is working well.
At the same time, I wish to use jquery ui dialogue to hold the displayed contents. While pasting the sample codes from official site, the example works. However, when combining the .post output with dialogue, it was not successful.
I would like to seek help in combining the below 2 sets of scripts:-
//for generating .post output (working!)
<script>
function event_details(thevalue){
$.post('module/calendar/event_details.php',{
eid:thevalue},
function(output){
$('#theeventmsg').html(output);
});
}
</script>
<div id='theeventmsg'></div>
//jquery ui dialogue (working!)
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: true,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</div><!-- End demo -->
Can help??? Thanks a lot!!
Try something like this:
<script>
$.fx.speeds._default = 1000;
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$('#button').click(function () {
var data = { ... };
$.post('module/calendar/event_details.php', data, function (output) {
$('#dialog p').html(output);
$( "#dialog" ).dialog("open");
});
});
});
</script>
<div id="dialog">
<p>content</p>
</div>
<button id="button">button</button>
Or:
<script>
$(document).ready(function () {
function eventdetail(thevalue) {
$.post('event_details.php', { eid: thevalue }, function (output) {
$('#dialog p').html(output);
$("#dialog").dialog({ autoOpen: true });
});
}
$('#button').click(function () { eventdetail('value'); });
});
</script>
<div id="dialog">
<p>content</p>
</div>
<button id="button">button</button>
i have this code:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("supcont.php");
return false;
}
</script>
an i want to call this function when clicking on an img so i used this
<a href="#" onclick="doSomething();">
<img src="photo/suppc.png" width="295" height="36" href="" target="fenetreA"/>
</a>
but this doesn't work, is ther any one that can help me
$(function () {
$('img').live('click', function () {
$.ajax({
url:"supcont.php",
success:function (res) {
alert(res);
}
});
});
});
Put this anywhere:
<img id="img1" src="photo/suppc.png" width="295" height="36" href="" target="fenetreA"/>
Place this after you include JQuery.js
<script type="text/javascript">
$(document).ready(function () {
$("#img1").click(function(){
$.get("supcont.php");
});
});
</script>
More info here : http://api.jquery.com/click/
Check w3schools website. Much helpful to you regarding this.
I am building a jQuery dialog with tabs in a PHP script. The script uses the 'include' directive inside of a loop, iterating over the tabs and including the other scripts. Each of the included files has the data for the tab and a <script> tag with a jQuery document.ready() function in it. Without the loop, it essentially does this:
<div id="tabDialog">
<div id="tabs">
<ul>
<li><a href="#tab1'>Tab1</a></li>
<li><a href="#tab2'>Tab2</a></li>
</ul>
<div id="tabContainer">
<div id="tab1">
<?php include "tab1.php"; ?>
</div>
<div id="tab2">
<?php include "tab2.php"; ?>
</div>
</div>
</div>
</div>
and, for example, tab1.php might have something like:
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
});
</script>
The problem is, upon creating and opening the dialog using the <div id="dialog"> as the dialog's DIV, the document's ready function is called a second time. Here is the dialog code:
$("#tabDialog").dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
}).dialog ('open');
What is the cause of this and what would be the best way to remedy the situation? I'm trying to keep each tab's functionality in separate files because they can be used in multiple situations and I don't have to replicate the code associated to them.
Thanks for any help or advice.
I believe I've found the reason and created a reasonably good fix. When jQuery creates the dialog, it moves the DIV that contains the contents of the dialog around in the DOM (to the very end of the document) and surrounds that div with the necessary scaffolding that a dialog requires (probably by using the .append() function or something similar). Because the DIV which was being dynamically had Javascript contained within it, jQuery was calling the document.ready() function after the DIV was relocated in the DOM (i.e. a second time). Therefore, prior to building the dialog, I .remove() every script tag within the dialog's DIV like this:
$("#tabDialog").find ("script").remove ();
$("#tabDialog").dialog ({
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
});
Doing this removes the SCRIPT tag from the DIV which it was originally loaded in, but the SCRIPT itself still exists. I'm still researching this because I don't completely understand where the Javascript code that was dynamically loaded actually "lives," but I suspect it's located somewhere outside of the DOM. I verified this in Chrome, Firefox, and Exploder 8.
I verified that any scripts that were originally contained within the loaded DIVs still function as expected by putting a button in the DIV and assigning a .click() function. Here is a small test that demonstrates this:
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dialogContents" style="display: none;">
<div style="border: 1px solid black; height: 98%;">
<form id="testForm">
<input type="text">
</form>
<button id="testButton">Test</button>
<script type="text/javascript">
$(document).ready (function () {
alert ("ready");
$("#testButton").click (function () {
alert ('click');
});
});
</script>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready (function () {
//
// Remove all the scripts from any place in the dialog contents. If we
// do not remove the SCRIPT tags, the .ready functions are called a
// second time. Removing this next line of Javascript demonstrates this.
//
$("#dialogContents").find ("script").remove ();
$("#dialogContents").dialog ({
width: 300,
height: 300,
title: 'Testing...'
});
});
</script>
</html>
I appreciate the help people provided in this thread!
I haven't used .dialog() too much, but do you need to use jQuery's ready() method in your script?
Looks like .dialog() has callback options you could take advantage of.
Script in tab:
<script type="text/javascript">
function onOpen() { alert('tab1 loaded') };
</script>
dialog:
$(this).dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
open: function(event, ui) { onOpen(); } // call function in script
}).dialog ('open');
So I have to say that I am not 100% sure why it is happening even though I understand that the dialog does maintin it's own state so this might be one of the reasons. But I could be way off. But the way to get around it is to use something like this instead:
$(document).one('ready', function () {
alert ('tab1 loaded');
});
This will make sure that it only runs once when the page loads.
I also had this problem, but the cause in my case was something different. I had a self-closing div element inside of the div that was used as the dialog holder. When I replaced the self-closing element with a closing tag, the document ready function stopped firing twice and only fired once, as expected.
For example, this caused the document ready function to fire twice:
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar" />
</div>
Whereas this only fired the document ready function once:
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar"></div>
</div>
You probably don't need the .dialog('open') call; use the option autoOpen : true instead.
Here's the resulting text of the page. I did a view-source and then removed any extraneous stuff from the page to try and make it simpler.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tabDialog" style="position: relative; display: none;" title="Test Dialog">
<div id="tabs" style="position: absolute; top: 5px; bottom: 40px; left: 3px; right: 3px;">
<ul>
<li><a href='#tab1'>Tab #1</a></li><li><a href='#tab2'>Tab #2</a></li>
</ul>
<div class="tab_container" style="position: absolute; top: 35px; bottom: 0px; left: 1px; right: 1px; overflow: auto;">
<div id='tab1' class='tabPage ui-dialog-content'>
<form id="tab1Form">
More testing... <input class="keypressMonitor" type="text">
</form>
Testing...<br/>
Testing...<br/>
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
$("#tab1Form").bind ('save', function () {
alert ("in tab1Form.save ()");
});
});
</script>
</div>
<div id='tab2' class='tabPage ui-dialog-content'>
<form id="tab2Form">
<div style="position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px;">
Testing: <input class="keypressMonitor" type="text">
<textarea id="testArea" class="keypressMonitor tinymce" style="position: absolute; top: 30px; bottom: 2px; left: 2px; right: 2px;"></textarea>
</div>
</form>
<script type="text/javascript">
$(document).ready (function () {
$("#tab2Form").bind ('save', function () {
alert ("in tab2Form.save ()");
});
});
</script>
</div>
</div>
</div>
<div id="dialogButtons" style="position: absolute; bottom: 3px; left: 3px; right: 15px; text-align: right; height: 32px;">
<button class="applyButton" disabled>Apply</button>
<button class="okButton" disabled>Ok</button>
<button class="cancelButton">Cancel</button>
</div>
</div>
<script type="text/javascript">
$(document).ready (function () {
$("#tabs").tabs ();
$("button").button ();
/**
* Pressing the cancel button simply closes the dialog.
*/
$(".cancelButton").click (function () {
$("#tabDialog").dialog ("close");
});
$("#tabDialog").dialog ({
open: function () {
},
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
height: 'auto'
});
});
</script>
</body>
</html>
Puts your script into create method:
$.dialog({
<your parameters>
create: function() {
<your script>
}
}
With this method your script is called once only you create the dialog, not twice!