I am looking for an alternative solution to HTML Framesets and from what I have read so far, I can use DIVs with CSS to create column contents. Basically, I want my images in one column on the left and when clicked should call details.php (tagged as id=details) in the column on the right.
I have started off with the following; unfortunately, clicking links in the left column is not calling anything in the right column:
<div class="col1">
<a href="details.php?PersonID=<?php echo $PersonID; ?>" target=details> <?php echo $row['FamilyName']; ?> <?php echo $row['FirstName']; ?> </a>
</div>
<div class="col2" id="details">
<?php $file = file_get_contents('./details.php', true); ?>
</div>
I will appreciate any advise to make this work.
You can combine HTML & CSS with jQuery or any javascript libraries to load the content (details.php) asynchronously using AJAX.
$('a').on('click', function(e) {
var contentUrl = $(this).attr('href');
$('#details').load(contentUrl, function() {
console.log('the content has been loaded is appended into the div');
});
});
For more reference you can go to jQuery API - load.
Related
I am trying to show .gif banner on a posts only within specific category after first paragraph in wordpress, so I my code in loop-single.php looks like:
<?php if(in_category('my_category')){ ?>
<script>
const par = document.querySelector('p');
par.insertAdjacentHTML('afterend', '<div><img src="some_gif" alt="" class=""></div>')
</script>
<?php } ?>
But it doesn't work as expected. Anyone have an idea? Or may be some other solution that not recquires installing additional plugins (not that I don't want to, most of them just slow the site down).
Thank you
edit: 'after first paragraph' added
So, I found a way, firstly I needed to check if the post is in wanted category, than create a function and call it afterwards. The code is set in single-loop.php file in my template:
<?php if(in_category('my-category')){ ?>
<script type="text/javascript">
function krasAd() {
const par = document.querySelector("p");
par.insertAdjacentHTML('afterend', '<div><img src="my-gif" alt="" class=""></div>')
};
krasAd();
</script>
<?php } ?>
There was also one way to check if you have a string in URL that only recquires JS. But it recquires you to have properly created URL structure, for example: domain.com/category/post
If I had category in my posts URL I would use code below, the code is set before closing footer tag in my single-loop.php template file:
<script type="text/javascript">
if (window.location.href.indexOf("my-string") > -1) {
const par = document.querySelector("p");
par.insertAdjacentHTML('afterend', '<div><img src="my-gif" alt="" class=""></div>')
}
</script>
I have a HTML code:
<div class="content">
blablabla
</div>
Show hidden content
Hide content
I need Jquery code to show or hide div "content", but i need that code to work with <?php the_ID (); ?> its will be used in posts loop so i need unicue ID's.
Ex.: <div class="content-<?php the_ID (); ?>">
Any ideas?
Try this:
$('.show').click( function(){
$('.content-<?php the_ID (); ?>').show();
});
$('.hide').click( function(){
$('.content-<?php the_ID (); ?>').hide();
});
I came across this site: http://www.jfletcherdesign.com.
I want to replicate how the home page shows the featured image of all of his posts and that when you click on the image you drill down into in the specific post. I also want to replicate how you are able to click forward and next with an image to the corresponding post within a category.
Can someone please point me in the right direction for setting up this functionality?
Bonus points if you can point me to the jQuery plugin that is being used for the rollover effect on his category page.
Thanks!
That site is based on the Imbalance theme by WPShower. It's a free theme so you can download it and check out all the source code. That should answer your first question.
To get images that act as pagination to the previous and next posts all you need to do is use the get_adjacent_post function. You can use something like the code below to set it up to link an image. Stick it in the bottom of your single.php or wherever you want the pagination to appear.
<?php
$prev_post = get_adjacent_post(true, '', true);
$next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
<a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
<a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>
Now for the jQuery rollover, it is pretty simple:
$(document).ready(function() {
$('.article').mouseenter(function() {
$(this).find('.article-over').show();
});
$('.article').mouseleave(function() {
$(this).find('.article-over').hide();
});
$('.article').hover(
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 0.3);
},
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 1);
}
);
});
Which acts on the following HTML markup generated by the theme:
<li class="article li_col1" id="post-1234">
<div class="preview">
<img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post">
</div>
<div class="article-over">
<h2>Cool Post</h2>
<div class="the-excerpt">
<p>Blah blah blah this is a post excerpt...</p>
</div>
</div>
</li>
So basically when you first go to the site, for all the items except the first, all you see is the .preview div that holds the category image. The .article-over div is absolutely positioned over the .preview div but has a style of display:none so that you can't see it.
When the mouseenter event is fired, the .article-over div is displayed via show(), and the image inside .preview fades out to an opacity of 0.3 allowing you to see the .preview div's black background behind it. When the mouse leaves, .article-over is hidden, and the .preview image fades back to fully opaque.
If you're still stuck let me know and I'll try to explain further.
I am trying to add a .clearfix class to my footer region in a Drupal 7. Is there a way to do this?
I am currently using the following to print my footer region:
<?php print render($page['footer']); ?>
Which outputs:
<div class="region region-footer">
<div id="block-1>....</div>
<div id="block-2>....</div>
</div>
Here's the code snippet:
function MY_THEME_NAME_preprocess_region(&$variables, $hook) {
if($variables['region'] == "MY_REGION_NAME"){
$variables['classes_array'][] = 'MY_CLASS_NAME';
}
}
Or if you'd rather insert the class into all of the regions:
function MY_THEME_NAME_preprocess_region(&$variables, $hook) {
$variables['classes_array'][] = 'MY_CLASS_NAME';
}
Copy region.tpl.php (found in modules/system directory) to your theme directory. Then copy everything inside it and create a new file. Paste into that file and make any changes you like to the template. Once finished, save it as region--footer.tpl.php and clear the cache on your site to see the changes.
The region.tpl.php contains (along with a lot of comments explaining possible variables):
<?php if ($content): ?>
<div class="<?php print $classes; ?>">
<?php print $content; ?>
</div>
<?php endif; ?>
So all you would need to do is add a class on that DIV.
It is even better if you use a hook, you can use template_preprocess_region.
Try adding the include to the footer.php.tpl file. You may have to create it.
I want to add a static text (some sort of explanation/welcome text) on the very top of a view (over the filter) in Drupal 6.x with Views "2". I want this text appear only when the view is not filtered (i.e. on initial load of the page).
My problem is that the only place I figure out to make it work partially is in the views-exposed-form--MYVIEW.tpl.php. The problem is that when I place the code in this template, I don't know if the view is filtered or not, so the text appear on every single page! I don't have access to this info in that template so the only place this is available ($rows or $empty variables for example) is in views-view--MYVIEW.tpl.php.
But there I got an another problem. The order in witch it seams the variables are output are not the same as the order in witch they appeared in the file. For example, the $exposed variable content is render always on top, then $admin_links, $header and so forth.
<?php if ($header): ?>
<div class="view-header">
<?php print $header; ?>
</div>
<?php endif; ?>
<?php if (!$rows): ?>
<h3>This static text appear AFTER $exposed !!!</h3>
<?php endif; ?>
<?php if ($exposed): ?>
<div class="view-filters">
<?php print $exposed; ?>
</div>
<?php endif; ?>
<?php if ($attachment_before): ?>
<div class="attachment attachment-before">
<?php print $attachment_before; ?>
</div>
<?php endif; ?>
So even if I place my static content before this code, the filter form always appear on top!
I found the reason why is doing this: the exposed filter form is rendered as a part of the content-top <div></div>, but not the result (and $header, $footer, etc).
So is this by design? Do I miss something? How can I get my static text on the very top of the content-top!?
Well, after some tweaking and lecture on preprocess function in the theming system, I found a solution to my problem. I share it with you and if you find a more elegante approach; let me know!
What I did is this...
1) In the template.php file of the theme, I add two fonctions:
function YOURTHEME_preprocess_views_view__MYVIEW(&$variables) {
if ($variables['rows'] || $variables['empty']) {
$GLOBALS['dont_show_static_text'] = TRUE;
}
}
function YOURTHEME_preprocess_views_exposed_form__MYVIEW(&$variables) {
if ($GLOBALS['dont_show_static_text']) {
$variables['custom_flag1'] = TRUE;
}
}
So, if my views is showing some results ($row) or a blank result ($empty), then I set a flag to be use in the template file....
2) In my views-exposed-form--MYVIEW.tpl.php
...
<?php if (!$custom_flag1): ?>
<h2>Some static text here</h2>
<?php endif; ?>
...
And voilà! My static text is showing up only on the initial load of the view and it shows on TOP of the filter (not under!).
Hope this help someone else!