I am making a fairly complex front page that in essence is a threaded discussion forum. At present all is functional but I want to replace the links after the message that allow one to delete, reply, archive and other functions. At present the links are all text. I can use small images and make them look nicer. However on a busy front page with lots of messages and threads a whole bunch of images will make the whole page look overwhelming.
The way it works for now is each iteration of the call to function that reads a message from db will start a ul and this allows me to nicely pad the child messages and the depth.
Here is what I want to do - create a small popup menu that will show up when someone hovers over the actual message. Because my current way of showing threaded messages using ul and li when I tried to use jqueryui menu widget it wrecks the formatting.
Sorry about all the rambling but is there a way to show a slim line of links above a message when someone hovers over it and each message in the page will obviously need to have different links [to allow blah.php?messageid=...].
I have been looking at jqueryui and learnt it to a tiny extent and still reading the tutorial. Is there a way of doing what I asked above!
Thanks
Your looking for tooltip, Jquery UI has a tooltip
first you initialize the tooltip, this example initialize it for the whole document.
<script>
$(function() {
$( document ).tooltip();
});
</script>
Then you add your tags and use the title attribute to specify what you wish to have for tooltip.
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
a simple way to do this is as follows:
given markup
<div class="menu-pop">
<div class="menu-label">Menu Label</div>
<div class="menu-items">
<div class="menu-item">menu choice</div>
<div class="menu-item">menu choice</div>
<div class="menu-item">menu choice</div>
<div class="menu-item">menu choice</div>
<div class="menu-item">menu choice</div>
</div>
</div>
provide css:
.menu-pop {
position: relative;
}
.menu-pop .menu-items {
display: none;
position: absolute;
}
.menu-pop.dropped .menu-items {
display:inherit;
}
and a simple jquery function:
$(".menu-pop").hover(
function() { $(this).addClass("dropped"); },
function() { $(this).removeClass("dropped" ); }
);
then ... well ... make it pretty.
see the jsfiddle here: http://jsfiddle.net/DomDay/rmSHc/
Related
I'm new in the php language, I have to create some buttons that have to filter / show some posts of certain categories but without the page being reloaded. So I know it's possible to use a function with php and ajax but I don't understand how to call ajax and what to write.The result should be this
So with php you can only send requests to the server to filter the posts causing a reload of the page. What you want is an instant filter, that gets all the data first and then, for example with javascript, filter this already loaded posts by category / taxonomy.
Doing this with Vue.js is pretty easy. Why use Vue js? You can simply add it with one line of code to your wordpress page.
I assume, you are now in your archive.php inside of the folder of your theme.
Put this code below the get_header() ?> and make vue available on your page:
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
You can find the production code here: https://v2.vuejs.org/v2/guide/ If you don't need the console warnings for debugging.
I now give you the code and will explain after that. With the follwing code in your archive.php (in the main container of your archive page), you put a link which toggles a div container with the filter buttons. The buttons are all your categories, if you click them, the posts will be filtered:
<div id="filtered_posts">
<span class="filter_button" v-on:click="isHidden = !isHidden">Filter by Category</span>
<div class="filters" v-if="!isHidden">
<span class="filter" :class="{ active: currentFilter === '' }" v-on:click="setFilter('')">All</span>
<span class="filter" :class="{ active: currentFilter === category.id }" v-on:click="setFilter(category.id)" v-for="category in categories">{{ category.name }}</span>
</div>
<transition-group id="archive" class="categories" name="categories" >
<div v-if="currentFilter === post.categories['0'] || currentFilter === ''" v-bind:key="post.title.rendered" v-for="post in posts">
<a v-bind:href="post.link"><img v-bind:src="post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url"></a>
<a v-bind:href="post.link"><h4 v-html="post.name"></h4></a>
<p class="smaller" v-html="post.title.rendered"></p>
</div>
</transition-group>
</div>
<script src="<?php echo get_template_directory_uri(); ?>/js/filter.js"></script>
So what we are doing here is we make an container (#filtered_posts) and put the link to toggle the filter buttons. After that there are the filter buttons inside of the div with the .filters class. The first span is for resetting to all posts, the second span circles through your categories (done by vue js for you) the call the setFilter() function on click.
The transition-group is used for a nice transition animation we add later. Here you check your current set filter in the if and circle through your posts, done by v-for="post in posts", as we did it with the categories before. We output some values by using the wp rest api fields, calling them with a dot followed by the name.
At the end we include a javascript file. And there we get the data to be displayed.
Please now create a folder in your theme folder called "js" and put an empty filter.js file in it.
You get now the code for the filter.js file, which you are getting in the archive.php file with the script tag.
new Vue({
el: '#filtered_posts',
data: {
currentFilter: '',
categories: [],
posts: [],
isHidden: true,
},
mounted() {
fetch("https://yourWordpressURLhere.com/wp-json/wp/v2/categories")
.then(response => response.json())
.then((data) => {
this.categories = data;
})
fetch("https://yourWordpressURLhere.com/wp-json/wp/v2/posts?per_page=20&_embed=wp:term,wp:featuredmedia")
.then(response => response.json())
.then((data => {
this.posts= data;
}))
},
methods: {
setFilter: function (filter) {
this.currentFilter = filter;
}
}
});
We are creating a vue instance and set it to the element with the id "filtered_posts", so its the container wrapping our code from before.
We now create some data objects to save data in it for the categories, the posts, the current filter and an isHidden for the toggle of the filter buttons.
We mount some data via api from wordpress. Please use the URL of your wordpress page. Make sure you have https to make it work. We are saving the recieved data into our "categories" and "posts" objects.
The setFilter function gets the current filter via parameter and sets it for this element.
We only have to set some CSS now, please add to your style.css of your theme:
.categories {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.categories-enter {
-webkit-transform: scale(0.5) translatey(-80px);
transform: scale(0.5) translatey(-80px);
opacity: 0;
}
.categories-leave-to {
-webkit-transform: translatey(30px);
transform: translatey(30px);
opacity: 0;
}
.categories-leave-active {
position: absolute;
z-index: -1;
}
With this CSS code, you have nice transitions when clicking your filter buttons.
You are now all set up, should get your categories in clickable buttons, which filter the output underneath.
There is a lot more to explain about this code, but I think the post is already long enough. If you ask in the comments, I will add more information if needed.
Hope this gives you a smooth and easy starting point for filtering posts with vue js with no reload.
Check out my site; http://sequoiasystems.org.
I included a a privacy alert because of new EU Regulation, but the alert goes behind some of my website components like other DIVs and Revolution slider...
I have tried some CSS, but nothing seems to work.
You can probably fix it by giving it a high z-index. You can do it two ways.
1.) Use inline style attribute:
<div id="myDiv" style="z-index:100;">This is my privacy warning</div>
2.) Use CSS with a class:
.myclass {
z-index: 100;
}
<div id="myDiv" class="myClass">This is my privacy warning</div>
I have a plugin that uses 3 completely identical divs on the page, using the same classes.
<div class="my-class">
<div class="my-class">
<div class="my-class">
I would like to edit the code of the plugin and add an id to each div, so I can work with it
later using css.
But I don't want to touch the parent code due to the later update issues.
Is there a way to add the id tag to a div using just functions placed in functions.php file ??
Guys, also 1 additional question following the 1 above.
You have downvoted this question -2. I have recently received a message from administrator about my account restriction due to this.
I don't think I asked a stupid question and I'm not a coder my self so maybe it was stupid, but obviously I'm just trying to understand why you didn't take it very well and what type of questions should I avoid in the future.
Your comment would be really appreciated, specially the one who gave it a downvote. Cheers.
You can differ them using CSS, without need to add them ID attribute.
<div class="my-class"></div>
<div class="my-class"></div>
<div class="my-class"></div>
<style>
.my-class {width: 200px; height: 100px; background: red;} /* rules for all .my-class elements, eg. width&height, whatever */
.my-class:nth-child(2) {background: green}
.my-class:nth-child(3) {background: blue}
</style>
http://jsfiddle.net/fwy38om7/
You can refer them using Jquery like
$(".my-class").each(function() {
})
Add below javascript to add id to your div
i=0;
$(".my-class").each(function() {
$(this).attr('id', 'constanttext' + i);
i++;
})
I have been reading around about how to make the navigation link stay active, when inside a post[ single page ]. I haven't found any solutions so i created a mix of jquery and php, But i don't think this is the right way dough it work.
So I was thinking of how to optimize the code much more. Any ides ?
<?php
if (in_category('news')){ ?>
<script>
$(".menu-item-46 a").css("border-bottom","#000 5px solid");
$(".menu-item-46 a").css("padding-bottom","11px");
</script>
<?php }elseif (in_category('network')){ ?>
<script>
$(".menu-item-47 a").css("border-bottom","#000 5px solid");
$(".menu-item-47 a").css("padding-bottom","11px");
</script>
<?php } ?>
One way to tackle the problem is to take advantage of CSS.
Have a class called "active", and append this to the parent element holding the menu you wish to show.
Example:
<div class="active">
<div class="menu-item-46"><a>My Nav</a></div>
</div>
Then in your css file:
.active .menu-item-46{
border-bottom:#000 5px solid;
padding-bottom:11px;
}
Another suggestion would be to give the menu items, a generic class, "menu-item", as well as an id "menu-item-##". So you css can simply be ".active .menu-item"
I am trying to reproduce the lock function on posts on facebook with jquery and php/mysql.
Below is an image showing the different actions it does when clicked on.
I think you would do somehing like on hover, show a hidden div with a tooltip, on hover off remove it. On click event show another hidden div but somehow has to change the button's colors as well. When the menu div is clicked open it has a menu and if any of these are clicked it needs to send the result to backend script with ajax. After clicking an option or clicking outside of the divs it will hide all the divs, maybe it is just a click anywhere closes it so maybe a toggle can be used?
Can anyone clarify I am going in the right direction. I havent used jquery very much or javascript. Any examples of something like this or help would be greatly appreciated.
fb http://img2.pict.com/ed/9a/3a/2341412/0/screenshot2b166.png
You don't need JavaScript for the hover. Make an element that serves as your tooltip and position it above your dropdown button. Then make a parent <div> for both. Your HTML should look something like this:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
</div>
Once you've done that, you can use CSS to position the tooltip and show it when necessary.
#container {
/* All child elements should be positioned relative to this one. */
position: relative;
}
#container #tooltip {
/* Hide by default. */
display: none;
/* Place the tooltip 2px above the button. */
position: absolute;
bottom: 2px;
right: 0px;
}
#container #button:hover + #tooltip {
/* Show it when someone's hovering over the button. */
display: block;
}
To show the drop-down box, you probably will need JavaScript. Add another element to the container:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
<ul id="selection">
<li>Something</li>
<li>Something Else</li>
<li>A Third Thing</li>
</ul>
</div>
Position it as you like using position: absolute and hide it using display: none. Then show it when we click on the button:
$('#button').click(function() {
$('#selection').show();
});
You can then make your sub-items do whatever they like, as long as they also hide #selection.
$('#selection li').click(function() {
// do something
$('#selection').hide();
});
Finally, you want to change the background and text colours upon hover. That's easy enough:
#selection li {
background-color: #ccc;
color: black;
}
#selection li:hover {
background-color: black;
color: white;
}
This won't work perfectly in IE 6 or (I believe) 7 - you'll need to investigate alternative solutions for that. Either use JavaScript or check out IE7.js and IE8.js.
Here is the approach I would take:
For hovering check out jQuery's hover event to change the different image states
For the tooltip there are several jQuery plugins such as qTip that you can achieve something like this
For clicking, jQuery's click event will do the trick
The dropdown will be a little trickier. You will need to use a combination of ajax methods and selector methods to change the page (i.e. the bullet)
Finally you will have to do a request of some sort when the page initially loads to find out which setting is selected, then display the selection. This could be done either with php as the page loads, or an ajax request as mentioned above.