I have this anchor link in my index.php:
<a name="blog"></a>
I would like this anchor link to work When next_posts_link and previous_posts_link are clicked on so it doesn't go all the way to the top of the page. I have no idea how to go about doing this for WordPress pagination though.
Here is my code for the pagination:
<div class="pagenavi">
<?php if( function_exists( 'wp_pagenavi ' ) ) {
wp_pagenavi();
} else {
next_posts_link ('<div class="arrow-back"></div>'); }
previous_posts_link('<div class="arrow-forward"></div>') ; }
Solution 2:
Adding anchor tag #blog to the prev/next links in a blogpost using jQuery
<script type="text/javascript">
$(document).ready(function() {
$('.pagenavi a').each(function(i,a){$(a).attr('href',$(a).attr('href')+'#blog')});
});
</script>
Demo:
http://jsfiddle.net/mfeldheim/EkMfP/12/
unfortunately the wp_pagenavi function seems to encapsulate the complete link building.
If you can't configure a generic postfix in your wordpress or plugin configuration I don't recommend to change Wordpress code.
Instead you could execute a small JavaScript which moves the browser page to the anchor on load.
This example uses jQuery. Paste it into a bottom location of your template.
<script type="text/javascript">
$(document).ready(function() {
$('html, body').scrollTop(
$('[name="blog"]').offset().top
);
});
</script>
Couldn't test this but should work. Even simple scripts are the hell to write on a iPhone keyboard..
EDIT:
Works like a charm, check this out for a demo
http://jsfiddle.net/mfeldheim/EkMfP/7/
Related
I'm developing a Wordpress video plugin. I want the video to start loading AFTER the rest of the page has loaded. I have:
Created videosplash.php which contains code to create a div #video-splash.
Created videosplash-video.php which contains code for loading the video itself. This code works perfectly when it is included directly within the above DIV.
Attempted to use jquery bind the second PHP file to div #video-splash with directions for this to happen AFTER the rest of the page has loaded.
Both PHP files are within the same plugin directory.
I've tried the following ways of doing this with no luck; and I can't find any clarification of the matter by searching online.
Attempted Method 1
As a JS script normally calls things from whatever directory it is running from, I would have thought this should work - but it doesn't:
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load('videosplash-video.php');
});
</script>
Attempted Method 2
I've also tried this way to load the file dynamically, but I don't think the plugins_url is a valid means of calling the file in javascript:
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load( plugins_url('/assets/php/videosplash-video.php',__FILE__ ) );
});
</script>
and
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load( plugins_url('/videosplash-video.php',__FILE__ ) );
});
</script>
What am I missing folks? And thank you in advance
You cannot include wordpress plugins url via javascript,
one thing you can do, first hide the video div by giving the style="display:none", then on load you can make it display:block using javascript
for example consider this following is your video div,
<div id="video-splash" style="display:none;">
some video content inside
</div>
then use javascript to enable it after page load like this,
$(document).on("load", function() {
$('#video-splash').show();
});
I want to display the products via shortcode IE: [product_category category="test" per_page="12"] In a carousel.
I have Flexslider setup, What I have tried is adding this to loop-start.php
<link rel="stylesheet" href="https://googledrive.com/host/0B4TRd-vaKaSkWUFRVkRiM1g2eGs" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
selector : ".products > li",
animation : "slide",
controlsContainer : ".flex-container"
});
});
</script>
<div class="flexslider">
<ul class="products">
and closing the div after ul on loop-end.php
Though I'm not having any luck with it at all :/ It works on a test html file just fine.
The reason I want it like this and not just use some plugin is I have overlay popup that wont work with any Carousel plugin Ive tried and I also want to display multiple categories this way.
Thanks for any help
Initially I thought your markup didn't match, but then I saw that you've modified the loop. Though I think the jQuery selector ul.products would work. Because it should be container and its direct children as slides.
I would advise you to look in your browsers developer console to see what kind of script errors you are getting. But I suspect you are seeing something along the lines of function not defined since you aren't using no conflict wrappers. You have no idea how much this frustrated me in the beginning.
Your script should therefore look something like (though I think you should add it to the footer:
function so_28486348_print_footer(){ ?>
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
$('ul.products').flexslider({
selector : "li.product",
animation : "slide",
controlsContainer : ".flex-container"
});
});
</script>
<?php }
add_action( 'wp_print_footer_scripts', 'so_28486348_print_footer
I would also advise loading all your scripts (at least the external scripts) via wp_enqueue_script (see the codex link above)
function my_scripts_method() {
wp_enqueue_script(
'custom-script', 'https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE' ,
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
I am loading a view using iframe.Now i wants to hide a div inside the iFrame using jQuery. But it shows $ is not defined.jQuery file is already included there.How can i do this?
<script type="text/javascript">
$(function(){
$("#wrap").hide();
});
</script>
jQuery has some major issues with iframes. You'll have to include a script inside your iframe and go from there.
What are you trying to use as a trigger to hide the div?
If it's at all possible I would suggest not using iframes for your website. Iframes come in handy when you're trying to embed a youtube video or something.
I'm trying to write a site with content loaded into a div at runtime using PJAX. The PHP files that i request with the PJAX all include a header and footer, which only produce content if isset($_SERVER['X-PJAX'])
However, when i use the PJAX to load the PHP file, the entire page refreshes. I would assume it's something wrong with my PJAX code, but loading a plain HTML file works fine.
EDIT: In case it is of help, i'm currently running all this on WAMP Server 2.2 running on localhost. It's what i do all my dev stuff in.
for reference, here's the JS i'm using to load the content, and an example of a php page
JS:
if ( $.support.pjax ) {
//disable <a> tabs, store value of href so pjax can use it
$('header a').each(function () {
$(this)
.attr('pjax', $(this).attr('href'))
.removeAttr('href')
.css('cursor','pointer')
})
//link up the pjax
.live('click', function () {
var link = $(this)
$('#content').animate({opacity:0}, {duration:500, complete:function(){
$.pjax({
url: link.attr('pjax'),
container: '#content',
complete: function() {
$('#content').animate({opacity:1}, 500);
}
});
}});
});
}
PHP:
//header.php
<?php
//If we are loading with pjax, ignore the header
if (!isset($_SERVER['X-PJAX'])) {
?>
<!-- head section, opening body tags, etc -->
<div role="main" id="content">
<?php } ?>
//foo.php
<?php include 'header.php'; ?>
<p>sample content</p>
<?php include 'footer.php'; ?>
//footer.php
<?php
if (!isset($_SERVER['X-PJAX'])) {
?>
</div>
<!-- load scripts, etc-->
<?php } ?>
i always have more luck with just using
$_SERVER["HTTP_X_PJAX"]
Here is the github repo i made of a fully functional PJAX php example, for those that need all the source code to look at to get up and running, and may help anyone else out there searching for PJAX php inplementation
https://github.com/Jrizzi1/pjaxphp
I've searched for a way to do this, but since i'm not fluent in PHP, nothing i've tried seems to work. I have a general idea of how it should work, and it seems simple enough, but I can't get it to work the way I want it to.
Basically, I have two links on my site - each one of them links to a different style sheet, which is part of a JS style switcher. The style switcher works fine, except for one thing - I want the links to be conditional. For example, right now, my links look like this:
Make it Dark (alternate stylesheet)
Light it up (main stylesheet)
They both appear at once.
I'd like it to work this way: when the page loads, only the "Make it Dark" link shows. Then when it's on "Make it Dark", only a link to the Main style sheet shows.
This can be seen on the last.fm page at the very top right: http://www.last.fm/
There's two themes there: "Paint it Black" and "Simply Red". Only one link shows at a time so that you can switch between them. How would I be able to do that?
I'd appreciate any help with this. Thanks.
Would it work if in each of your stylesheets you gave one of your links display:none?
You can specify a class on both off them and than add a display: none in the opposite stylesheet to hide it for the user. So you have:
Make it dark
Light it up
And in the two stylesheets you have in the dark one:
.lighten { display: none; }
And in the light one:
.darken { display: none; }
Personally I'd use a session variable and not a cookie.
Something like this should work:
<?php
session_start(); // add to the top of your page
if (!isset($_SESSION['dark_theme'])) {
$_SESSION['dark_theme']==false;
}
if ($_GET['changetheme']!='') {
if ($_GET['changetheme']=='dark') {
$_SESSION['dark_theme']=true;
} else {
$_SESSION['dark_theme']=false;
}
}
?>
This bit, place where you want the link:
<?php
if(!$_SESSION['dark_theme']){
?>
Make it Dark
<?
}else{
?>
Make it Light
<?
}
?>
Or do it using CSS+JavaScript:
The HTML:
Make it Dark
Make it Light
The CSS:
In your "dark" stylesheet:
#darken {
display:none;
}
In your "light" stylesheet:
#lighten {
display:none;
}
JavaScript (note, I'm using JQuery as it's much easier to write than normal JS - just you'll need to include JQuery if it's not already on the site):
(function($, undefined)
{
$('#darken').click(function() {
$(this).preventDefault(); // stops the link from functioning as a link
chooseStyle('none', 60); //call your change stylesheet function
$('#darken').hide(); //hide the dark link
$('#lighten').show(); // show the light link
})
$('#lighten').click(function() {
$(this).preventDefault(); // stops the link from functioning as a link
chooseStyle('none', 60); //call your change stylesheet function
$('#lighten').hide(); //hide the light link
$('#darken').show(); // show the dark link
})
})(jQuery);
if($_COOKIES['dark_theme']){
$show_dark = true;
}else{
$show_dark = false;
}
if($show_dark){
echo "<link rel="stylesheet" href="/css/dark.css"...";
}else{
echo "<link rel="stylesheet" href="/css/light.css"...";
}
When you click "make it dark", just reload the page and modify the cookie.
Or you can tell php to do this in one line, you just need to set cookie when user is switching to another stylesheet change below cookie name according to your need.
echo (isset($_COOKIE['dark_theme'])) ? '<link rel="stylesheet" href="/css/dark.css">' : '<link rel="stylesheet" href="/css/light.css">';