this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.
In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?
Related
I'm using TinyMCE 6 and I've created a custom block insert using a <ul>, and for the most part this is working great. However, if I have several and position the cursor in front of one of the blocks and hit backspace, it then merges all the contained <li> into a single <ul>. I've tried using attributes like data-id, id, name etc but Tiny simply discards this data from one of the elements and does the merge anyway. If I use a random number as a class name, they do not merge so this is a workaround.
For reference, the blocks are set as noneditable (I have a double-click handler configured for a custom function), so I don't see why it would try and merge them anyway.
Any ideas?
Here's a snippet of HTML as it should be:
<ul id="123" class="leaders mceNonEditable">
<li class="item-en text_gold"><span>Mmm Cookies</span><span>$MONEY$$$$$$</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
<ul id="234" class="leaders mceNonEditable">
<li class="item-en"><span>Mmm Cookies</span><span>$495</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
And some that ended up:
<ul id="123" class="leaders mceNonEditable">
<li class="item-en text_gold"><span>Mmm Cookies</span><span>$MONEY$$$$$$</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
<li class="item-en"><span>Mmm Cookies</span><span>$495</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
TLDR: Can I force a column layout refresh after dynamically updating the 'css-column' css with javascript/jquery?
I have a navigation menu that I am using css columns for (I cannot work out how to use the Magento2 menu column functionality). I cannot really change the markup much. I want to stop 'widow' titles from happening (titles at the bottom of the column, with all the content on the next column - see 3rd pink title in screenshot below). It cannot be set with css as the nav items are dynamic and will change.
(I have tried "break-after:avoid" on the parent list, but this stops the list from breaking altogether - i.e. it should be able to break anywhere in the middle of the list).
I came up with a hacky solution that almost works - with javascript I am dynamically adding "break-before: column" to any list that has a widow title. (It checks the left offset of the title, compared with the offset of the first list child. If it is different then it means the title starts on the previous column).
This (sometimes) works BUT it (sometimes) does not update the columns until you resize the screen a bit.
I have been been trying out these kinds of solutions and many of these too. However none of them seem to work, for example I have tried:
console.log(elt.offsetHeight);
console.log(elt.getBoundingClientRect());
Tried 'elt' being all sorts, the parent elements, the whole body/doc wrapper etc. I thought maybe this was because the element in question is hidden until you hover over the nav link. But I forced it to be open using chrome devtools and ran the same 'reflow triggering' javascript and it still made no difference?
Is there a (preferably nice and not forcing reflow of the whole document every pageload??) way to force a recalculation of the css columns?
OR is a better solution possible using css grid / any other way?
Thanks!
In case it is relevant to another possible solution, the markup is like this:
<ul class="level0 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Title
</li>
<li class="level1 nav-3-1 category-item first parent">
<a href="">
<span>Sub Title</span>
</a>
<ul class="level1 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Sub Title
</li>
<li class="level2 nav-3-1-1 category-item first">
<a href="/">
<span>Lorem 1psum</span>
</a>
</li>
<li class="level2 nav-3-1-2 category-item">
<a href="/">
<span>Lorem 2psum</span>
</a>
</li>
</ul>
</li>
...
</ul>
I have a menu and I want an element with a class of active, parent element's sibling element to be clicked automatically on page load.
Here is my HTML:
<li class="level1">
<span class="level1 drop-down clicked">Oranges</span>
<ul class="level2" style="display: block;">
<li class="level2">Peel</li>
<li class="level2">Pips</li>
<li class="level2 active">Pegs</li>
</ul>
</li>
I've tried
jQuery('li.level2.active').parent('li.level1').children('span.level1.drop-down').click();
but it does not work. I'm not sure if I'm using the parent & children method's properly.
Although, jQuery("span.drop-down.level1").click(); does work, but it selects all the elements with that class which I would like to avoid.
Try this:
jQuery('li.active').closest('li.level1').find('span.level1.drop-down').trigger('click');
Because the li.level1 is two steps up, you need .parents(), which selects up multiple levels, instead of .parent(), which is only one.
jQuery('li.level2.active').parents('li.level1').children('span.level1.drop-down').click();
^^^^
Suppose I have a list menu:
<html>
<body>
<div id="menu">
<ul>
<li>News
<ul class="inner_menu">
<li>Hi</li>
</ul>
</li>
<li>Bumble
<ul class="inner_menu">
<li>Hellos</li>
</ul>
</li>
<li>Scratch</li>
<li>Snap</li>
</ul>
</div>
</body>
</html>
And I want all unordered lists be hidden but slidedown/up (jquery slideToggle()) if you hover above the 'li' element in which they are nested. I am having problems with selecting the right elements. E.g. I want to slideToggle() .inner_menu with 'Hi' when I hover above "News".
So far I have been able to slideToggle() all of the .inner_menus or get different unwanted results. I think I can just add bunch of different 'id's but that would be just so messy, considering two similar menus with a lot of inner_menus.
You could use hover in/out handler:
DEMO jsFiddle
$('li').hover(function(){
$(this).children('ul').slideToggle();
});
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE