I have built a basic WordPress theme which has a primary and secondary navigation. Dev site here: http://website-test-lab.com/sites/weaver/
If you narrow your screen until the mobile menu's kick in, and click on either menu, they both display the primary navigation.
How can I alter this so that the menu that is clicked shows up? Here is my jQuery:
;(function($) {
// DOM ready
$(function() {
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav ul li').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
// Click to reveal the nav
$('.nav-mobile').click(function(){
$('.nav-list').toggle();
});
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
// Toggle the nested nav
$(this).siblings('.nav .sub-menu').toggle();
// Toggle the arrow using CSS3 transforms
$(this).children('.nav-arrow').toggleClass('nav-rotate');
});
});
})(jQuery);
Thanks in advance
I ended up editing this piece of JS:
// Click to reveal the nav
$('.nav-mobile').click(function(){
//$('.nav-list').toggle();
$(this).parent().children(".nav-list").toggle();
});
Related
When placing a TinyMCE editor inside a bootstrap modal, the editor is visible and functioning, however when clicking a menu item the menu doesn't show up.
Add the folowing css
.tox-tinymce-aux {
z-index: 999999!important;
}
Bootstrap blocks all focusin calls from elements outside the dialog. To render TinyMCE instances inside a Bootstrap dialog, add the following code:
// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});
Here is an example: http://fiddle.tinymce.com/gRgaab
On my site I have a menu on the right. When I scroll down the menu and I come down, the background page scrolls too.
I would like the page in the background does not scroll. How to do this ?
Here is a page of my site, click on the menu on the right:
https://www.s1biose.com/recette
You can disable scrolling in many ways:
With CSS:
$('html, body').css({
overflow: 'hidden',
height: '100%'
});
This will disable scrolling and bring you to the top of the page.
Alternatively, you can use JavaScript (jQuery) to:
$(document).ready(function(){
$(".navbar-toggle-second[aria-expanded='false']").click(function(e) {
e.preventDefault();
$("body").css("overflow", "hidden");
});
$(".navbar-toggle-second[aria-expanded='true']").click(function(e) {
e.preventDefault();
$("body").css("overflow", "auto");
});
});
For more information, see this:
How to programmatically disable page scrolling with jQuery
i am working on this Wordpress website and as you can see is a one scroll landing page. Every section as an id and this class id is connected to the navigation points like this
Example:
http://ergon.nowcommu.myhostpoint.ch/home/#idee
What i need is to highlight the active navigation point when you scroll with the mouse on the sections and when you click on the navigation on the relative link.
How can i do it?
Your website has already been built with functionality that changes the class of the menu item once it's content/counterpart is in the viewport of the end user.
If you inspect the element, you will notice that the a tags in your menu receive a class .mPS2id-highlight when their content counterparts are in view.
Thusly, you can simply add a CSS rule to achieve your goal.
I've tested the rule below in firebug on your website and it seems to work fine (the !important was necessary):
.mPS2id-highlight {
color: #b51339 !important;
}
If you would like to keep your border functionality, you can use the following rules instead:
.cssmenu > ul.menu > li:hover {
border-bottom: 0 solid;
}
.mPS2id-highlight {
border-color: #b51339 !important;
color: #b51339 !important;
}
You need declare the highlight with javascript particularly you do with jquery in custom code de your wordpress with something like this:
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
also you look at the console of the browser because it have an error in your page
I'd like to use TinyMCE 4.1.7 in inline mode. When the user right-clicks a DIV and selects Edit, indicating they want to edit the DIV, I execute
var id= g.currentElement$.attr('id');
tinymce.init({
selector: "div#"+id,
inline:true,
});
This adds a TinyMCE editor (I know because I catch an AddEditor event) but it doesn't seem to append the editor elements to the DOM (I can't see them in Chrome DevTools Elements tab). For the editor to appear I have to click inside the DIV.
I want to change this behavior so that when the user right-clicks the DIV and selects Edit, my handler will also trigger whatever is triggered now by clicking in the DIV. So after I've launched the editor, as above, I need to call some other method that will append the editor to the DOM and make it visible, so clicking Edit in the context menu is all I need to bring up the TinyMCE editor.
Could someone tell me what I need to do to accomplish this?
(The reason I can't just click the DIV to bring up the editor is that a click already means something else. A single click selects the DIV, where it can be deleted, duplicated, nudged, etc. A drag on the DIV moves it. And a drag on a DIV corner resizes the DIV. A right-click with an Edit option is all I have left.)
Thanks for your help.
Steve
I got this working as follows.
I first run the tinymce init:
var id= g.currentElement$.attr('id');
tinymce.init({
selector: "div#"+id,
inline:true,
});
That creates an editor for the element but doesn't render or show it. Rendering and showing the editor normally requires a mousedown on the element.
After stepping through a lot of tinymce code I realized that firing a focusin event on the editor instance is what gets the editor rendered and displayed. So I created a callback for AddEditor. The AddEditor event comes in early in the editor create process, though, and I didn't want to fire focusin until the editor was complete, so at the AddEditor event I get the editor instance and create a callback for "NodeChange," which happens at the end of the editor create.
When NodeCreate comes in I fire a "focusin" on the editor and that renders and displays the editor, as I wanted. A single click, now, runs tinymce init and leaves an inline editor displayed and ready on top of the element.
The total code is:
tinymce.on('AddEditor', function(e) {
e.editor.on('NodeChange', function(e) { // now that we know the editor set a callback at "NodeChange."
e.target.fire("focusin"); // NodeChange is at the end of editor create. Fire focusin to render and show it
});
});
If anyone sees anything wrong with this I'd be very grateful for any comments.
Thanks
tinymce.init({
selector: "div#"+id,
inline:true,
setup: function (ed) {
ed.on('init', function(e) {
e.target.fire("focusin");
});
}
});
This will do the trick for the initiating editor instance. Better then globally firing for every single NodeChange event for every single editor instance on the page. (Assuming there multiple editors but also works with single editor.)
BUT WAIT...
There is a better practice using JS Promises. tinymce.init returns a Promise Object.
let tinyMcePromise= tinymce.init({
selector: "div#"+id,
inline:true
});
tinyMcePromise.then(function(editors){
editors[0].focus();
});
Official documentation: https://www.tinymce.com/docs/api/tinymce/root_tinymce/#init
Beware: Some older versions of tinyMce have a bug about init Promise.
**Please first add jquery and tinymce library..**
<script src="latestjquery.js" type="text/javascript" charset="utf-8"></script>
<script src="tinymce.min.js"></script>
<form method="post">
<textarea>here firstly onlciki will show menu and when edit will be selcted then it will be converted into ediotr</textarea>
</form>
<ul class='custom-menu'>
<li data-action = "first">First thing</li>
<li data-action = "second">Second thing</li>
<li data-action = "third">Third thing</li>
</ul>
<script>
//Trigger action when the contexmenu is about to be shown
$("textarea").bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$("textarea").bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
tinymce.init({
selector: "textarea"
});
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "editor": alert("editor will appear");
break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
</script>
<style>
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
</style>
I am using the woocommerce product category widget on my sidebar and footer widget area.
I have 2 parent categories. I would like these to be displayed, but not be clickable links.
You can see the page here http://www.terrykirkwood.co.uk/w
Can anyone advise what css to add to stop these links being clickable?
Thanks
Here's the code from the first occurrence:
<li class="cat-item cat-item-47 cat-parent">Original Paintings<ul class="children">
CSS only controls style, so there is no CSS you can use to disable a hyperlink. You could change the CSS to not change cursors, so it doesn't "look" like a link.
.cat-parent a {
cursor: default;
text-decoration: none;
}
.cat-parent .children a {
cursor: pointer;
text-decoration: underline;
}
And then use some jQuery to actually disable the click function:
$('.cat-parent').click(function(e) {
e.preventDefault();
});
If you were bold you could probably also modify the widget to not print an <a> link for parents, but I can't check on that right now.
Edit
You can either add the script to one of your theme's scripts, load a new external script file or drop the following into your themes' functions.php:
function so_add_this_script_footer(){
if( !is_admin() ) { ?>
<script>
jQuery(document).ready(function($) {
$('.cat-parent > a').click(function(e) {
e.preventDefault();
});
});
</script>
<?php }
}
add_action('wp_print_footer_scripts', 'so_add_this_script_footer');
All parent classes have a 'cat-parent' class, so you can either add a condition - 'javascript: void(0)' - in widget for anchor tag 'href'.
Alternatively , you can add the below jquery code,
jQuery('.footer-widget').find('.product-categories li.cat-parent').each(function(){
if(jQuery(this).find('ul.children').length == 1){
jQuery(this).find('a').attr('href','javascript: void(0)');
}
});
This will reset all parent category links that have child categories. Now, If user clicks on parent category, it will not do anything.
This will also make sure, that if parent categories don't have child categories, then it will not be reset.