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();
});
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 want to show html code in textarea and then user can clink view resut.
code:
<textarea id="html" cols="50" rows="10"><html>
<body>
<p>
This text will appear on your webpage.
</p>
<!--
the text within these comment tags will not appear on the web page
-->
</body>
</html>
</textarea>
<div>
<button onclick="view()">View Results</button>
</div>
<script type="text/javascript">
function view()
{
var result = window.open("", "", "height=400,left=" + ((screen.width) ? (screen.width-400)/2 : 0) + ",top=" + ((screen.height) ? (screen.height-400)/2 : 0) + ",width=400");
var tmp = result.document;
tmp.write(document.getElementById('html').value);
tmp.close();
return false;
}
</script>
i try post it on wordpress post, but not working.
WordPress strips out HTML tags by default. An easy way to begin with would be to use a plugin such as https://wordpress.org/plugins/wp-coder/ to paste your code into and then use a shortcode to run it. Ideally you want to look into building your own plugins, but as a quick fix this will be ideal for you :)
I want to open a default Wordpress gallery in a lightbox with a button or link and hide the gallery thumbnails on the page. How can I achieve that?
Gallery shortcode: [gallery ids="55,67"]
Thanks in advance.
You can try like this.
<style>
.hiddengallery{
display:none;
}
</style>
<button class="showgallery" >click here</button>
<div class="hiddengallery">
// add lightbox code here
<?php echo do_shortcode('[gallery ids="55,67"]');?>
</div>
<script>
jQuery(document).on("click",".showgallery", function (){
jQuery(".hiddengallery").show();
});
</script>
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.
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.