I have in my menu a current menu item. How can I make that a page that is not in the menu, be marked as the current menu item of another page?
My idea is maybe to do it with Javascript and change the class. In that case where do you put that function?
Thanks
First of all I put the class "pricing" to the tab that I wanted to mark. Then I inserted my html with the Gutember editor and put the following Javascript code:
<script type="text/javascript">
let pricing = document.querySelector('.pricing');
document.addEventListener("DOMContentLoaded", evt => {
const current_pricing = () => {
pricing.classList.add('current-menu-item');
}
}
current_pricing()
</script>
Related
I have this little snippet of code that works great in JSFiddle and in a Chrome extension. On clicking "button" it blurs the ID "content".
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
I've been through quite a few of the similar question that say to add $(document).ready(function(){
before and this });`
at the end giving this
$(document).ready(function(){
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
});
That has worked for me before but not helping with this little ditty of code.
When I add the second set of code I get "$ is not a function error"
Thanks in advance for the help.
***** ANSWER (since I can't post answers for some reason) ******
This is a Wordpress site and Wordpress uses jQuery.noConflict();
So, in Wordpress, $ is undefined ergo the message "$ is not a function error"
Instead of
$(document).ready(function(){
in Wordpress you need to use
jQuery(document).ready(function($) {
What worked is putting it in the child-themes funtion.php like this:
function load_dimmer_script(){
?>
<script>
jQuery(document).ready(function($) {
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
});
</script>
<?php
}
add_action( 'wp_footer', 'load_dimmer_script' );
What this does is this: If the menu toggle is defined as a button, when the menu is clicked the content of the page (#content) gets blurred. Click menu toggle again, it goes unblurred.
See nova-energy.net
Here's the one piece of CSS needed:
#content.alt {
filter: blur(4px) !important;
}
You have to wrap the JS code:
jQuery(document).ready(function($) {
// your code
)};
In wordpress, when using a theme, how can I prevent a click event from happening on a custom link. I am thinking of adding the following:
onClick="return false"
I am trying to prevent the page from scrolling down unexpectedly, when clicked.
do you have access to the theme edition? If so, you can try to use something like the code below, it's
add in footer.php
if you do not have access, but the theme has some custom field.
<script>
//JQUERY
(function ($) {
$('a[href=#]').click(function (e) {
e.preventDefault();
})
})(jQuery)
//JS PURE
document.querySelectorAll('a[href="#"]').forEach(function(ele, i){
ele.addEventListener('click', function (e) {
e.preventDefault();
})
})
</script>
I have a multi-page gravity form. I've echoed it using do_shortcode within the theme template.
I have content on the same page below the gravity form (which resides inside the wp editor (the_content() wrapped in a div with its own class) ).
Is there a way for me to hide this content on page 2 or later of the gravity form? I would still like it to appear on page 1 of the gf form.
Here was the final code that worked for me:
<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(event, form_id, current_page){
jQuery('.page-content').toggle(current_page == 1);
});
</script>
I placed this in header.php
Lets say the class name of the div that is wrapping the_content() is "entry-content" and you want to hide it when the form is on second page. Add the following jQuery code to your theme and It will hide that div when someone goes to 2nd page. If they return back to 1st page of the form. It will show the content again.
<script type="text/javascript">// <![CDATA[
jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
if(current_page == "1"){
jQuery('.entry-content').show();
} else {
jQuery('.entry-content').hide();
}
});
// ]]></script>
If you donot want to show the content even if they come back to page 1, then you can use the following code.
<script type="text/javascript">// <![CDATA[
jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
jQuery('.entry-content').hide();
});
// ]]></script>
Documentation : https://www.gravityhelp.com/documentation/article/gform_page_loaded/
I have joomla website that is one page template. On the main page when user logs in for the very first time, it looks like there is no more content Downward.
I want to indicate on the top saying the message that "Please scroll down for more content".
Is there any way to indicate that msg is shown on top and when user scrolls down, it gets hidden????
There are all sorts of ways of doing this, here's one possibility: http://jsfiddle.net/panchroma/79mwymc5/
Good luck!
HTML
<div class="scroll-down">Please scroll down for more content</div>
JS
(function ($) {
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we hide message
if ($(this).scrollTop() < 100) {
$('.scroll-down').fadeIn();
} else {
$('.scroll-down').fadeOut();
}
});
});
});
}(jQuery));
We are in se same situation as question Make Twitter Bootstrap navbar link active, but in our case we are using ASP.net and MasterPages...
The thing is the navbar is defined at the masterpage and when you click a menuitem you are redirected to the corresponding child page so how would you do to change the navbar active item consecuently without replicating the logic in each child page? (Preferably without session variables and javascript only at master page)
We solved it with the following function at Master Page:
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
var substr = url.split('/');
var urlaspx = substr[substr.length-1];
$('.nav').find('.active').removeClass('active');
$('.nav li a').each(function () {
if (this.href.indexOf(urlaspx) >= 0) {
$(this).parent().addClass('active');
}
});
});
</script>
Here is what I have used in Razor:
<li class="#(Model.PageName == "DataEntryForms" ? "active" : "")">
<a href="DataEntryForms">
Data Entry Forms
</a>
</li>
<li class="#(Model.PageName == "UserAdmin" ? "active" : "")">
<a href="UserAdmin">
User Administration
</a>
</li>
Just define the name of the page as property in the model, then complete the test for each li that you have.
<script type="text/javascript">
$(document).ready(function () {
var url = window.location;
$('ul.nav li a').each(function () {
if (this.href == url) {
$("ul.nav li").each(function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
}
});
$(this).parent().parent().parent().addClass('active');
$(this).parent().addClass('active');
}
});
});
</script>
Assuming that the active class is set correctly by ASP.net, I would recommend an easier solution:
// Add the class to the parent li element of the active a element:
$('#NavigationMenu ul li a.active').parent().addClass('active');
// Remove the active class from the a element:
$('#NavigationMenu ul li a.active').removeClass('active');
Using ASP.net routing, this solution works smoothly in my current project.
And if you want to manipulate the active item of the menu, I would recommend to use the MenuItemDataBound of the menu control in code behind instead. But in my case, this was not necessary.
Solution by "sujit kinage" worked best for me, however I had to change one line:
var url = window.location.origin + window.location.pathname;