Below is my code. Not sure why this isn't working. I know it's not because when I use firebug on different pages that aren't page 39, it's saying fitvids() is not a function. So it's loading on every other page.
<?php if (is_page ( 39 )){?>
<script src="../js/jquery.fitvids.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#content-wrapper").fitVids();
});
</script>
<?php } ?>
Related
How can I display the dynamic content of PHP with bootstrap pagination.The result is displaying using ajax call in div id 'msrResult', how to use that div in bootstrap pagination code. Here my code:
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master /lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<div id="content2">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
$('#page-selection').bootpag({
total: 23,
page: 1,
maxVisible: 10
}).on('page', function(event, num){
$("#content2").html("Page " + num); // or some ajax content loading...
});
</script>
</body>
</html>
<div id=msrResult></div>
First of all the "space" in the GitHub URL could produce 404 responses. You should delete it to get the script working ;)
Basically (as you can see at the authors website) clicking the page-buttons (they are showing up in #page-selection once the script is initialized correctly) triggers bootpag to toggle the content. In the .on() function you have the chance to place new content right before it shows up again.
In the script you've provided you write "Page X" in #content2 before it shows up. But in your case you want to load dynamic content in this div so you could do something like this:
$.ajax({
url: "source.php?site="+num
}).done(function(data) {
$( "#content2" ).html( data );
});
in the .on() function to load the dynamic php content in your #content2 div
Also see this JS fiddle for a demo: http://jsfiddle.net/628zL/3/
U can easily do that by this way-
$('#show_paginator').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
If u like to use customised version, then u can try this-
$('#show_paginator').bootpag({
total: 53,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '←',
last: '→',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
If u like to use more customization, u can try this options-
Warning
Here I am using a CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js) for showing content. But it is not recommanded.
Hardly recommendation is to download this file and put it locally.
Because there is no official CDN for bootpeg.
Even more can be found from here.
I think u have your complete answer.
I have a div block that I only want to display on the first page. I mean, if the user is on
http://mywebsite.com/
it displays the div. But if he navigates to the second page of the posts
http://mywebsite.com/page/2
it hides that div. I am using Datalife Engine.
Div example:
<div class="example"> This is a test </div>
Can this be done?
follow this and all be worked fine.
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if( $('#mainPage').length > 0 ) {
$("#hideMe").css({"display": "block"});
} else {
$("#hideMe").css({"display": "none"});
}
});//end doc ready function
</script>
</head>
<body>
<div id="mainPage"> </div>
<div id="hideMe">lorem ipsum</div>
</body>
hope it helps you
example http://jsfiddle.net/viktorino/56ea5/
For datalife engine, display just on the first page we use:
[page-count=1]Content goes here[/page-count]
I am trying to load a table dynamically in a div in a php page. I want to load the tables using buttons or links on the same page.
I tried this:
<button id="fcluns" type="button" onclick="loadpage(this.id)">FC LUNs</button>
<div id="Table"></div>
<script type="text/javascript">
function loadpage(clicked_id){
if (clicked_id =="fcluns"){
$("Table").html('loadingImage.gif').load('getfcLuns.php?name=<?php $Host=$_GET['name']; echo $Host;?>');
}
}
</script>
i am generating the table from a php page getfcLuns.php where mysql queries are executed to get the details from database. And i am getting the $host in this php and passing it to the helper php to generate the table.
Any other efficient way is welcome. But I want to keep the page php based only.
<script src="ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; type="text/javascript"> </script>
<button id="fcluns" type="button" onclick="loadpage(this.id)">FC LUNs</button>
<div id="Table"></div>
<script type="text/javascript">
function loadpage(clicked_id){
if (clicked_id =="fcluns"){
$("Table").load("getfcLuns.php?name=<?php $Host=$_GET['name']; echo $Host; ?>");
}
}
</script>
This above script Worked.
Try
$("#Table").css({'background-image':'loadingImage.gif'}).load(
'getfcLuns.php?name=<?php echo $_GET[name];?>',
function() {
$(this).css({'background-image':'none'});
}
);
Read the Documentation http://api.jquery.com/load/
I want to .load the php script every 10 seconds. The load code is not a problem, but in Wordpress all plugins use their own Jquery libraries, and if I just add the jquery google link:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
the other plugins will crash.
I have the following code in my footer:
<?php
if ( is_user_logged_in() ) {
include 'completed.php';
}
?>
I want to include a jquery script so I can execute the following code:
<?php
if ( is_user_logged_in() ) { ?>
<div id="completed">
<script>
$(function(){
setInterval(function(){
$("#completed").load("completed.php");
}, 10 * 1000);
});
</script>
</div>
<?php } ?>
Do you think you can help me out?
Load the jquery from google ajax library in footer
function my_init() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', false, '1.3.2', true);
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
But why won't you do use the built in jQuery in no-conflict mode so that nothing crashes.
<?php
if ( is_user_logged_in() ) { ?>
<div id="completed">
<script>
jQuery(function(){
setInterval(function(){
jQuery("#completed").load("completed.php");
}, 10 * 1000);
});
</script>
</div>
<?php } ?>
I am using a menu collapsing javascript in my wesite in which when i click in the title called member the list of members must be shown down the member as accordion.In firefox and chrome it is working quite well but when i tested with IE8 all the members are showing before clicking the member title.Can some one help me is this a browser compatibility issue or something else.Hope i will get the answer soon.
This is the function which is in the js page.
//menu-collapsed.js
<script type="text/javascript">
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>
and the html page is:
<html>
<head>
<script src="includes/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="includes/menu-collapsed.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var page={};
$(function() {
new FrontPage().init();
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li>
<?php
$mvo=new menuVO();
$mdao=new menuDAO();
$menus=$mdao->fetchAll('onlypublished');
foreach($menus as $menu)
{
if($menu->menu_type=='Member')
{
echo "$menu->name";
}
}
$mvo=new membersVO();
$mdao=new membersDAO();
$list=$mdao->fetchAll('onlypublished');
echo "<ul>";
foreach($list as $members)
{
echo "<li><span>$members->name</span></li>";
}
echo "</ul>";
?>
</li>
</ul>
</body>
</html>
Put up your code. You may also find your answer trying to learn how to make one.