I want to hide a div from a Wordpress theme, when a stop word appear in the post title.
<?php if (in_category('10')) { ?>
<div id="adsense-top">the adsense code</div>
<?php }else { ?>
<?php } ?>
+
<div id="adsense-bottom">the adsense code</div> - this is manually inserted
Basically, I need to remove the two divs from the post when the certain word is present in the title.
Here is a simple way to acheive this in Javascript.
<script type="text/javascript">
var title = document.title; //title of the page is returned
if(title.indexOf('stop') !== -1) { //If not found, it will return -1
document.getElementById('adsense-bottom').style.display = 'none';
}
</script>
But in php, you need to do like
<?php if (in_category('10')) { ?>
<div id="adsense-top">the adsense code</div>
<?php }else { ?>
<script type="text/javascript">
var title = document.title;
if(title.indexOf('stop') !== -1) {
document.getElementById('adsense-bottom').style.display = 'none';
}
</script>
<?php } ?>
Hope like this you need to add. I'm not sure this is the right place.
Related
I want to leave out a div from my template.html that is displayed when someone clicks on the sidebar or navigation bar. When a category is navigation_bar I want it to leave out something like a Facebook comment box. Because it is only needed on the sidebar pages.
an URL example index.php?catagory=navigation_bar&subject=contact
I was thinking about something like this:
<php?
if (isset($_GET['catagory']))
{
$catagory = $_GET['categorie'];
if $catagory = navigatie_bar
{
//here something that says: then don't display <div class="fb-comments'></div>
}
}
?>
can someone help me out ?
is this what you are looking for-
<?php
if (isset($_GET['catagory']))
{
$catagory = $_GET['categorie'];
if $catagory = navigatie_bar
{
//here something that says: then don't display <div class="fb-comments'></div>
}
}
?>
<input type="hidden" value="<?php echo $category?>" id="tohide"/>
<div id="comment">comments....</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready({
var id=$("tohide").val();
$("#"+id).hide();
});
</script>
Your tried seems correct just bit correction,
//This condition says show fb comment on all pages but navigation_bar
if(isset($_GET['catagory']) && $_GET['catagory'] != "navigatie_bar")
{
echo " <div class='fb-comments'></div>";
//Your code goes here
}
I have a foreach loop in php that searches through a directory, finds any other directories, and then using hide/show in javascript, the subdirectories names are made into links that drop down to reveal the files inside of that specific subdirectory. I hope that makes sense. The problem I have is that because I am using a loop to find any present subdirectories, I can’t give each of the subdirectories a different id. As a result, all of the links have the id of the first link and when any of them are clicked, the first link always drops down. Do I need to use JQuery for this?
<!--Code for the javascript part:-->
<?php
<script language="javascript">
function showOrHide(){
var div = document.getElementById("showOrHideDiv");
if (div.style.display == "block"){
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
?>
<!-- A subdirectory has been found and is called $subDir -->
<!-- Below is the show/hide part of my html/php code -->
<?php echo $subDir;?>
<div id="showOrHideDiv" style="display: none">
<!-- The rest of the code that prints the files from the subdirectory -->
</div>
One approach would be to use a counter and use that to vary the IDs:
<?php echo $subDir;?>
<div id="showOrHideDiv_<?php echo $counter;?>" style="display: none">
Then your javascript changes:
<script language="javascript">
function showOrHide(num){
var div = document.getElementById("showOrHideDiv_" + num);
if (div.style.display == "block"){
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.
I'm reading up all I can on jQuery, but this week I like(need) to finish a website and I could find a solution to this problem in the last eight hours.
Setting
I'm using a ajaxed wp theme which I'm customising to my own liking.
Problem
I've wrote a simple function to change the header image and the header text when you click on the main navigation links.
The function does work in the header.php but doesn't work in a custom front page (main_navp.php) I've included in index.php.
On navp.php there's an image when onclicked should do the same changes as a click on the nav bar.
index.php
<?php get_header(); ?>
<div id="main-content"><div id="inside">
<?php get_template_part('main_navp'); ?>
<?php if// HERE IS THE WP LOOP (not used so left out) //?>
<div class="pagination">
<span class="older"><?php next_posts_link('« Older Entries') ?></span>
<span class="newer"><?php previous_posts_link('Newer Entries »') ?></span>
</div>``
<?php else : ?>
<h1>no posts...</h1>
<?php endif; ?>
</div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The function is included in the header.php in the ..head>
<script type="text/javascript">
$(document).ready(function()
{
$("a[title='Gigs']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/gig_header_flip.png)");
$("a#nav_text").html("Gigs");
});
$("a[title='Bio']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/play_header.png)");
$("a#nav_text").html("Biography");
});
$("a[title='Gitaarles']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("li[id='homew']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/header_arty.png)");
$("a#nav_text").html("Home");
});
});
</script>
In the main_navp.php (included in index.php afther the header.php) the function does not work on this item. But it should be triggered by $("p[id='les_mp']").live("click", function() as seen above.
<div id="boxred_b">
<div class=head_box><a>Gitaarles</a></div>
<p class="homeles" id="les_mp">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/les_mp.jpg" />
</p>
The main jquery is caled in the header.php
<script src='<?php bloginfo('template_directory'); ?>/js/jjquery-1.5.2.min.js'></script>
In the footer.php are all of the rest of the jquery functions.
<!-- http://benalman.com/projects/jquery-urlinternal-plugin/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.ba-urlinternal.min.js'></script>
<!-- http://www.asual.com/jquery/address/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.address-1.3.2.min.js'></script>
<script>
// Original JavaScript by Chris Coyier
// Updated October 2010 by Stewart Heckenberg & Chris Coyier
$(".home li.home").removeClass("home").addClass("current_page_item");
$("#column-wrap").append("<img src='<?php bloginfo('template_directory'); ?>/images/ajax-loader.png' id='ajax-loader' />");
$("#s").focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
}
});
if ($(".widget_categories li").length%2 != 0) {
$(".widget_categories ul").append("<li><a> </a></li>");
}
if ($(".widget_tag_cloud a").length%2 != 0) {
$(".widget_tag_cloud").append("<a> </a>");
}
// The reason this JavaScript is in footer.php instead of its own file is basically the next line.
var base = '<?php bloginfo('url'); ?>',
$mainContent = $("#main-content"),
$ajaxSpinner = $("#ajax-loader"),
$searchInput = $("#s"),
$allLinks = $("a"),
$el;
$('a:urlInternal').live('click', function(e) {
$el = $(this);
if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {
var path = $(this).attr('href').replace(base, '');
$.address.value(path);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
$el.addClass("current_link").parent().addClass("current_page_item");
return false;
}
// Default action (go to link) prevented for comment-related links (which use onclick attributes)
e.preventDefault();
});
$('#searchform').submit(function() {
var s = $searchInput.val();
if (s) {
var query = '/?s=' + s;
$.address.value(query);
}
return false;
});
$.address.change(function(event) {
if (event.value) {
$ajaxSpinner.fadeIn();
$mainContent
.empty()
.load(base + event.value + ' #inside', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
}
var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
var diff = current.replace(base);
location = base + '/#' + diff;
}
});
</script>
</div>
I've tried to keep things as short as possible. If you like any more information please ask.
-update
using the live function in the header doesn't seem to solve the problem.
I'm using XAMPP to run the website locally. If it helps I could make an online wp installation or could provide the webside (html/java) source.
Because you are Ajax-ing your page, the events are not subscribed to your new elements. Try using the .live() command.
Also, is this ok?
$("p[id='les_mp']").click(, function()...
Don't know for sure about that comma.
I've tried using the live function in the code like this.
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
in the
$(document).ready(function()
{ .... }
in header.php
Still it doesn't work when be onclicked in main_nav.php
When I put the code out of the main_nav in to the header.php
it works.
You may want to use the method in the link below to refactor the ajax stuff to a separate file. Not sure if it helps with the original problem, but i've seen things work after doing that http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/#js-global
basically you get your url into a variable that is being printed and your scripts have access to using wp_localize_script