I write the below code to a footer.php file. This works but is applied for all the pages. I want to apply page scroll in one page only.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('body').animate({scrollTop: +400}, 1000);
});
</script>
Can any one help me on how to do it.
Thanks
Add a contidional statemnent on the footer.php file to only execute the jquery code if it is in only in the current page you wish for.
something like this example below
<?php
global $post;
$target_pageid = 7654;
$current_pageid = $post->ID;
if (current_pageid == $target_pageid){
?>
jQuery(document).ready(function() {
jQuery('body').animate({scrollTop: +400}, 1000);
});
<?php
}
?>
Related
how can I load a specific js based on post ID into the head of the page. I came through wp_register_script and wp_enqueue_script which seems to be fine for external js files, but for inline js, I somehow cannot get it working.
// call the function that adds your current script
function customjs_load()
{
if (is_page(197))
{
wp_register_script( 'rechner',
<script type="text/javascript">
var _cmr = {
opti_pid: "partnernname",
opti_purl: "domain.com",
ga_medium: "affiliate",
ga_campaign: "link",
title_tab1: "Kreditrate berechnen",
title_tab2: "Finanzierungssumme berechnen",
maxwidth: "1200px",
tab: "no" //1, 2, no
}
</script>
<script src="https://www.url.com/rechner/calc.js" type="text/javascript"></script>
); // register your script
wp_enqueue_script( 'rechner' ); // enqueue it to be added in the head section
}
}
add_action('get_header', 'customjs_load');
You'll want to use the wp_head action to do this and place code outside of PHP. See below for an update of your code:
// call the function that adds your current script
function customjs_load()
{
if (is_page(197))
{
?>
<script type="text/javascript">
var _cmr = {
opti_pid: "partnernname",
opti_purl: "domain.com",
ga_medium: "affiliate",
ga_campaign: "link",
title_tab1: "Kreditrate berechnen",
title_tab2: "Finanzierungssumme berechnen",
maxwidth: "1200px",
tab: "no" //1, 2, no
}
</script>
<script src="https://www.url.com/rechner/calc.js" type="text/javascript"></script>
<?php
}
}
add_action('wp_head', 'customjs_load', 2);
It's used on the websites I use and work fine.
When inserting non-php code such as HTML tags etc. close the php tag with ?> and then use <?php to end HTML code.
Example:
<?php $somevar = "hi"; ?> HTML content <?php $another = "done"; ?>
My homepage loads pages with jquery ajax call. In the Pictures subpage there is 3 div, and each loads a php with ajax, too. I would like to include a gallery js to every sub-subpage. However, the js does not loads. Here is my code in the index.php for the subpages:
<script type="text/javascript">
$(function()
{
var actualmenu = 'fooldal.html';
$('#tartalom').load('fooldal.html');
$('.fooldal').click(function()
{
$('#tartalom').load('fooldal.html');
actualmenu = 'fooldal.html';
}
);
$('.kepek').click(function(){
$('#tartalom').load('kepek.php', function(){
$(document.body).on('click', 'a[rel=gallery_view]' ,function(){
$(this).KeViewer('gallery', {'percent' : 70});
return false;
});
});
actualmenu = 'kepek.php';
});
});
</script>
And there is my kepek.php page:
<script type="text/javascript">
$(function()
{
$('#galeria').load('kepek_csenge.php');
$('#csenge').click(function()
{
$('#galeria').load('kepek_csenge.php');
}
);
);
</script>
<div id="albums">
<div class="album" id="csenge">
Csenge
<br/>
<img src="albumok/csenge/01.jpg" alt="csenge"/>
</div>
</div>
<div style="clear:both;"></div>
<div id="galeria" width="500"></div>
Inside kepek_csenge.php there are rows like this, which should trigger the gallery:
<a class="thumb_wrapper" href="albumok/csenge/01.jpg" title="Első" rel="gallery_view"><img alt="" class="thumb" src="albumok/csenge/thumbs/01.jpg" /></a>
Unfortunately it just loads a new page with the selected picture. How can i use the galleryviewer js in this page?
It is important to understand that the document you are loading into was ready long before you load anything with ajax
This means that the code wrapped in $(function() in your ajax pages will fire as soon as it is encountered. If that code precedes the html it references then it won't find those elements since they don't exist yet.
Try moving all the script tags in the ajax loaded content to after the html.
It is generally easier to put all the scripts into one and wrap different parts in functions and then just call those functions in the success callback of load();
function loadPage(page){
var url = '...' +page;
$('#selector').load(url, function(){
initViewer();
});
}
I'm trying to create a 404.php page and would like to remove the "current state" class from a link, only on that page.
As of right now this is what I've got...
jQuery( function() {
if ( TEMPLATE_URI + '/404.php'.hasClass( '.current_page_parent' ) ) {
jQuery( '.menu' ).removeClass( '.current_page_parent' );
}
});
which does not seem to be working.
I am a beginner in the subject of jQuery so any help would be appreciated!
I think this should work :
if(window.location.href.indexOf('404.php') != -1){
jQuery('.current_page_parent').removeClass('current_page_parent')
}
Also, when using removeClass, you don't need to put the dot.
WordPress automatically uses the file 404.php to show 404 error pages. So you don't have to check for 404.php in your code.
Just put this Javascript code in the file 404.php, preferrably at the bottom:
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('.menu').removeClass('current_page_parent');
});
</script>
Otherwise, you can use the function is_404() in any template (PHP) file to see if the current page is a 404 error page. Something like this:
<?php if (is_404()): ?>
jQuery('.menu').removeClass('current_page_parent');
<?php endif; ?>
Thank you for the help #Christian Daven and #Karl-Andre Gagnon! Basically what I did was combine bits of both answers and got this (which I have placed in my 404 Template page)...
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery( '.current_page_parent' ).removeClass( 'current_page_parent' );
});
</script>
I'm developing a PHP class for pagination using $_GET. It is standart, found from the web.
Here it works good :
page.php :
<form method ="GET">
<?php
$pages = new Pagination();
echo "<br/>";
?>
</form>
I want to use this page.php in index.php with ajax / jquery and staying in the index.php
<!DOCTYPE html>
<body>
<div id ="result"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.post('./page.php',
function (data) {
$('#result').html(data);
}
);
});
</script>
</body>
</html>
Is this possible way ?
Is it possible that instead of using jquery's $.post, that you can replace $.post with $.get?
So instead of $.post as you said its looking for $_GET['page']
So you could do something like this:
<script>
$(document).ready(function(e) {
var page_num = 1;
$('.nextpage').on('click',function(e){
e.preventDefault(); // stop the link from going anywhere
$.get('./page.php',
{
page: page_num // this is the same as $_GET['page']
},
function (data) {
$('#result').html(data);
page_num++;
}
);
});
$('.nextpage').click(); // emulate the click to get the first page
});
</script>
and in your body something like this:
Next page
It's worth noting that on your page.php you don't need to have that form as i cannot see it's going to be doing much
UPDATE
So to have the pagination manipulated on the index.php from page.php you could have page.php return a hidden div called .hidden_pagination along with its full content.
<script>
$(document).ready(function(e) {
$('.pagination').on('click','a',function(e){
e.preventDefault(); // stop the link from going anywhere
var next_page = $(this).attr('data-id'); // get the next page from the link data-id attribute
$.get('./page.php',
{
page: next_page // this is the same as $_GET['page']
},
function (data) {
$('#result').html(data);
$('.pagination').html($('#result').children('.hidden_pagination').html()); // add the new pagination to the current pagination
}
);
});
$('.nextpage').click(); // emulate the click to get the first page
});
</script>
<div class="pagination">
Next page
</div>
<div id="result">
this will be replaced with the ajax response
</div>
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);
});