I need a header that sticks to the top while scrolling down the page. Am using the following jquery function
<script type="text/javascript">
google.load("jquery", "1");
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('stick')
else
$('#sticky').removeClass('stick');
}
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
but the sliders already present in the page not functioning! Please help me to solve this issue.
I have added $.noConflict();above the function the slider works properly and sticky div is not working!
And have made following changes to the code // Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
both the slider and sticky div not working!
Related
Is it possible to change this to display an element loaded later on in the document:
function tracksinfox_{$page_trackid}()
{
document.getElementById('tracksinfoxshow_{$page_trackid}').innerHTML = 'get stuff here';
}
In the place of "get stuff here", I would like to display a div by id, but the div is created later in the page load using PHP.
with jQuery's on(), you can add event handlers to elements which are added later to the document. http://api.jquery.com/on/
you can make the function perform after document ready by document.onreadystatechange:
document.onreadystatechange=function() {
if(document.readyState == 'complete'){
tracksinfox_{$page_trackid}();
}
}
or just use window.onload event simply;
window.onload = tracksinfox_{$page_trackid};
but there's one more thing you have to know, if you like to perform two or more function after document ready, you can do it like this:
run_after_document_ready( tracksinfox_{$page_trackid} );
run_after_document_ready( somethingelse );
run_after_document_ready( somethingelse2 );
function run_after_document_ready( callback ) {
callback_saver = window.onload;
window.onload = function (){
if ( typeof callback_saver == "function" ){
callback_saver();
}
callback();
}
}
or just use the jQuery
$(document).ready(tracksinfox_{$page_trackid});
$(document).ready(somethiselse);
$(document).ready(somethiselse2);
NOTICE: window.onload has a little different with document.ready, for more information, you should to find the documents about window.onload, document.onreadystatechange and the jquery document ready.
How about using jQuery and doing something like the following. It establishes a callback method that will be called when a new element with id="info" is added to the DOM, then it adds a new DIV with id="info", which causes the callback function to be executed. The callback function unregisters itself (thus it will only ever be called once), then sets the update-me DIV's text based on the new DIV.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="update-me">I will be updated.</div>
<script language="javascript">
jQuery(function ($) {
$("body").on("DOMNodeInserted", "#info", function(e){
$("body").off("DOMNodeInserted", "#info");
$("#update-me").text( $(e.target).text() );
});
$("body").append("<div id='info'>I have changed.</div>");
});
</script>
</body>
</html>
I am attempting to submit a form contained in a parent window from a child iframe using jQuery without much luck.
In the child window I have the following validation function:
<script type="text/javascript" src="templates/js/jquery.js"></script>
<script type="text/javascript" src="templates/js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#form_invoice_item").validate({
submitHandler: function (form) {
// Check if main invoice already saved
if ($('#invoice_id').val() == "") {
// Change target to processing iframe
try {
parent.$('#invoice_form').ajaxSubmit();
} catch(e) { //debug
alert ("Error:" + e);
}
} else {
alert ("Saving invoice " + $('#invoice_id').val() + ' items'); }
//form.submit(); //debug
}
});
});
</script>
<form method="post" id="form_invoice_item" name="form_invoice_item" action="index.php" target="invoice_items">
The error that occurs at parent.$('#invoice_form').ajaxSubmit(); is
Error:TypeError: Object [object Object] has no method 'ajaxSubmit'
If I use the following snippet which is just in plain Javascript, there is no problem(Obviously this isn't jQuery but it gets the job done). How do i do this in jQuery:
parent.document.getElementById('invoice_form').target='process';
parent.document.getElementById('invoice_form').submit();
parent.document.getElementById('invoice_form').target='';
I have a hidden iframe called process which has its display property set to hidden.
If you are in a popup and you want to access the opening window, use window.opener.
Try this:
window.opener.$('#invoice_form').ajaxSubmit();
Instead of this:
parent.$('#invoice_form').ajaxSubmit();
Also see this post.
-------EDIT-----
Don't forget to load jQuery form plugin in those window in which you call it:
<script src="http://malsup.github.com/jquery.form.js"></script>
Just use the parent selector:
$('#invoice_form',window.parent.document)
This should work:
$(parent).find('#invoice_form').submit();
try this..
$(parent).find('#invoice_form').submit();
The problem is upon load of website, width of .mCSB_container class is ok, but when i click on a link, for example "projects" link, which fires an ajax function, width of .mCSB_container does not change even if contents are not that much. Web page will not load upon click on the link. I tried using the "update" function, but seems like it is not working.
ok I use this plugin and i had te same problem but check this:
<script type="text/javascript">
$(function() {
$("#content").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize: true // <- the solution
}
});
// get ajax link
$('.Link').click(function(){
$.get(this.href, function(data) {
$("#content .mCSB_container").html(data); // fill .mCSB_container
$("#content").mCustomScrollbar("update");
$("#content").mCustomScrollbar(
"scrollTo"
,"top"
,{scrollInertia:200}
); // go to Top content
});
return false;
});
});
</script>
Below code is jquery function
$(document).ready(function () {
$('#access').accordion({
create: function (event, ui) {
$('div#access> div').each(function () {
var id = $(this).attr('id');
$(this).load(id+'.html', function () {
$('#access').accordion('resize');
});
});
}
});
});
where access is the div id i have used for menu items in header.
below code is header.php page code
<div id="access" >
<ul>
<?php wp_list_pages('depth=1&title_li=');?>
</ul>
</div>
what i want is onclick of the menu item the javascript function should be called..
how to call function from php file?
You don't call the JavaScript function from PHP. The PHP merely enables you to build the HTML page dynamically. Once the page is ready, the JavaScript is called and it starts binding the events to the appropriate elements.
What you need to do is look at the generated code using the 'view source' or firebug and explore the structure of the generated HTML and then you can bind the event to the requested element.
I am new to jQuery. Basically I have a main page (with jQuery) and I want to include in a div another page that also has jQuery.
What I do is write in that particular div this code:
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/ong/new/index.php";
include_once($path);
?>
If I do this the jQuery in the child page stops working. The jQuery functions in the main page also stops working, but if I remove this link
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
from the child page it works in the main page.
So, what am I doing wrong? How should you include a jQuery page in another?
It is because you are including jQuery multiple times. You could make small script to check if jQuery is present on the page, and only if is not present, load it:
// 'load-jquery.js'
window.onload = function () {
if (window.jQuery === undefined) {
var script = document.createElement('script');
script.src = 'path/to/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script); // load jQuery
}
};
html
<div id="result"></div>
js
$('#result').load('<?php echo $path; ?>', function(data) {
$(this).append(data);
});