<div id="menu">
<ul>
<li>Menu link</li>
</ul>
</div>
<div id="content">Dummy content</div>
I want to get the UL tag using parent id.
The condition is if the UL tag is missing, i need to apply new class for the Content Div.
script
document.observe("dom:loaded", function() {
if( --------)
{
$('content').removeClassName('fwidth');
}
else{
$('content').addClassName('fwidth');
}
Thanks
I don't really understand your question, but if you want to find out if <div id="content"> has ul elements, try
if ($('content').down("ul"))
Related
I wrote a plugin for CKEditor 4 that uses widget and dialog. My widget, simplifying a little bit, consists of a div with a nested ul and a number of li's. For some reason, when I switch from WYSIWYG mode to SOURCE mode, the ul is turned into a double nested ul.
I have defined which elements in the widget should be editables and I have defined which elements should be allowedContent for those editables.
My original structure in WYSIWYG mode (after the dialog closes and the widget is created) is like this:
<div class="mycustombox">
<div class="conditions-box">
<div class="conditions-services">
<span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
<ul class="services-list">
<li>an example list item</li>
<li>another example list item</li>
</ul>
</div>
</div>
</div>
I have double checked that this is the actual html by inspecting the source of the page in the Chrome Developer Console. But when I switch to SOURCE mode, the structure then becomes:
<div class="mycustombox">
<div class="conditions-box">
<div class="conditions-services">
<span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
<ul class="services-list">
<ul>
<li>an example list item</li>
<li>another example list item</li>
</ul>
</ul>
</div>
</div>
</div>
The original ul with the class I gave it is there, but there is an extra nested ul wrapping the li elements.
I have defined my allowed widget content in the plugin.js:
allowedContent: 'div(!mycustombox); div(!conditions-box); div(!conditions-services); span(!rwd-line); span(!rwd-line-title); ul(!services-list); li; p; div',
requiredContent: 'div(mycustombox)',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'mycustombox' );
},
And I have defined the ul element as an editable like so:
editables: {
priceincludes: {
selector: 'div.conditions-box div.conditions-services ul',
allowedContent: 'li em strong'
},
}
I have also allowed ul's to be editable by the general CKEditor instance as so:
CKEDITOR.dtd.$editable[ 'ul' ] = 1;
Is there some setting in the CKEditor configuration which could be causing this behaviour?
Well I don't know if this is the best solution, but it works.
Tell CKEDitor to stop trying to automatically wrap li elements with a ul tag. For some reason it's treating them as though they weren't already wrapped in a ul tag.
Using this at the beginning of my plugin.js fixes the problem:
delete CKEDITOR.dtd.$listItem['li'];
delete CKEDITOR.dtd.$intermediate['li'];
I got the idea from here:
http://margotskapacs.com/2014/11/ckeditor-stop-altering-elements/
Seems kind of hackish to me, but until I find a better solution I'll just use this.
I'm trying to separate this ul to be two columns splitting after "Lotus Notes Administration (this is for my resume) Can someone help me with the CSS?
<section>
<h4>Technical Expertise</h4>
<div id="skills">
<ul>
<li>HMTL5</li>
<li>SQL</li>
<li>XHTML</li>
<li>Networking</li>
<li>End User Training</li>
<li>Inventory Management</li>
<li>SDLC</li>
<li>Active Directory Administration</li>
<li>Lotus Notes Administration</li>
<li>XML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>SEO</li>
<li>Technical Support</li>
<li>Procurement</li>
<li>Software Testing</li>
<li>Project Management Best Practices</li>
<li>GPO</li>
</ul>
</div>
</section>
You could do something:
<div class="Skills>
<div style="float: left; width: 50%;"><ul>List A</ul></div>
<div style="float: left; width: 50%;"><ul>List B</ul></div>
</div>
I'm trying to do a vertical menu with dropdowns that can be activated by an arrow toggle, while still keeping the top level link active and clickable. I'm using a custom CMS so I have some constraints as far as how I can make this work.
HTML
<ul class="topnav">
<li class="tn_first">
<span></span><a class="topmenu" href="/default.asp">Home</a>
</li>
<li class="tn_mid">
<span></span><a class="topmenu" href="/listings.asp">My Listings</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Listing 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Listing 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Listing 3</a>
</li>
</ul>
</li>
<li class="tn_last">
<span></span><a class="topmenu" href="/links.asp">System Pages</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Page 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Page 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
So I've got a pretty straightforward UL LI menu system. I've added to the template of the top level nav a span tag, which I wanted to use as a toggle switch. The span can be changed to anything, it's just what I have in there currently.
The issue I've run into is that given this is a template system, I have the option of putting the span in, but don't have the option to show it conditionally based on whether ul.subnav exists in the same li. So I need some way of applying display:block to the ones that actually meet this condition, then I'll just display:none the other spans by default.
I tried using this solution and it did work to a point, but it doesn't work with multiple dropdowns, it only seems to work if you have a single instance of a dropdown in your menu structure.
jQuery Toggle Dropdown Menu
and
http://jsfiddle.net/hXNnD/1/
Javascript
jQuery(document).ready(function () {
var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");
subMenu.hide();
linkClick.click(function (e) {
e.preventDefault();
subMenu.slideToggle("fast");
});
});
I created another example that has 2 sub ULs so you can see where the code is falling down.
http://jsfiddle.net/BxsEX/
Hide with CSS your spans and go for: $('.topnav li:has(ul) span').show();
http://jsbin.com/ujoqek/1/edit
CSS:
.topnav li span{ display:none; }
jQ:
var arrow = ['▼','▲'];
$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();
$('.topnav span').click(function(){
$(this).closest('li').find('ul').slideToggle();
var arrw = $(this).data('a');
$(this).html( arrow[++arrw%2] ).data('a', arrw);
});
I think this is all you wanted. I may be wrong.
$('li').each(function(){
//if we can find a UL with the class of subnav within our LI
if($(this).find('ul.subnav').length){
//find the span within this LI and give it a display block
$(this).find('span').css('display', 'block')
}else{
//otherwise, hide the span.
$(this).find('span').css('display', 'none')
}
});
I am having left side ul and right side ul. When i am clicking left side li making an ajax call in that ajax call i am adding a dynamic li in right side ul. The content was coming but the jquery mobile design was missing. I searched i got a solution like add $("#ul_id").listview('refresh') but it's not working for me.
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
$('#right_ul').html(data);
$("#right_ul").listview('refresh');
});
In my unit_detail.erb i am having the following code
<li class="showDetails" style="list-style:none;" data-theme="b">
<a href="#">
<div class="ui-grid-b">
<div class="ui-block-a"><div><%= unit_detail.name %></div></div>
<div class="ui-block-b"><div><%= unit_detail.description %> </div></div>
<div class="ui-block-c"><div><%= unit_detail.accessories %> </div></div>
</div>
</a>
</li>
In some place i found first find the id of ul in div and refresh the list view
$("#rigth_pane_content_footer").find("#right_ul").listview('refresh');
I tried that also not working.
In my page i am having the following
<div id="rigth_pane_content_footer">
<ul data-role="listview" id="right_ul">
</ul>
</div>
Any suggestions?
try this
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
var container = document.getElementById('right_ul');
var new_element = document.createElement('li');
new_element.innerHTML =data;
container.appendChild(new_element);
$(container).listview("refresh");
});
When clicked the button I want to get change the name of the class of li under mycontent div. Is there a way to do that? my codes are below.
<div id="mycontent">
<ul id="sortable">
<li id="1" class="myclass">Item 1</li>
<li id="2" class="myclass2">Item 2</li>
<li id="3" class="myclass3">Item 3</li>
<li id="4" class="myclass4">Item 4</li>
</ul>
</div>
$(document).ready(function()
{
$("#submit_prog").click(
function()
{
$.ajax(
{
type: "POST",
url: "sort2.php",
});
});
});
I'm pretty sure the jQuery would be something like:
$("#mycontent li.myclass2").removeClass("myclass2").addClass("myOtherClass2");
...etc for each li element.
if you wanted to change the class of all of li the elements, use this:
$("#mycontent li").removeClass("myclass myclass2 myclass3 myclass4").addClass("myOtherClass2");
you would add that to a click event on the button (in this example with id myClassChangeButton):
$("#myClassChangeButton").click(function(){
$("#mycontent li.myclass").removeClass("myclass").addClass("myOtherClass");
$("#mycontent li.myclass2").removeClass("myclass2").addClass("myOtherClass2");
$("#mycontent li.myclass3").removeClass("myclass3").addClass("myOtherClass3");
$("#mycontent li.myclass4").removeClass("myclass4").addClass("myOtherClass4");
});
Use this to change the class myclass2 from a li element in the div with the id mycontent:
$('#button').click(function(){
$('#mycontent li.myclass2').removeClass().addClass('newClass');
});
Edit:
Code Jockey mentioned that this will remove all classes from the li element with .myclass2
That's right, so for future readers, this will only remove .myclass2:
$('#mycontent li.myclass2').removeClass('myclass2').addClass('newClass');
Yes. Try this:
$('.button').click(function(){
$('li#4') .removeClass();
$('li#4').addClass('your_class')
});
Something along this lines should work