I am trying to reorder my list items using jquery UI sortable. i have a Div(a container div which holds
several div's having class "section") and a List on right( the "li" on the list has the same name of the
Section inside my container Div )
the Container Can have a number of Div with class Section
like
<div class="container">
<div class="section" id="section1" />
<div class="section" id="section2" />
<div class="section" id="section3" />
</div>
and each of these Div(section) can have a number of blocks
like
<div class="section" id="section1">
<div class="dynamic" id="block-1" />
<div class="dynamic" id="block-2" />
<div class="dynamic" id="block-3" />
</div>
inside each block i am having text area with CKEDITOR with it (ie : there can be multiple textarea's inside of a section DIV)
and these blocks are Sortable, i had an issue with CKEDITOR before, ie : when i sort the Blocks the CKEDITOR went uneditable and lost the Contents in it ,some How i have fixed it and its working fine now.
But the New issue is
on my right side of this div i have an UL with li having Section Names as Text
So that on Clicking each li i will show each sections at a time (works like tab)
these li's are Sortable and on sorting these li's the section's inside my container also gets sorted accordingly.
ie: say i got 3 Sections
<div class="container">
<div class="section" id="section1" />
<div class="section" id="section2" />
<div class="section" id="section3" />
</div>
and li like this
<ul class="sortableul">
<li class="sectionlist">My Section 1</li>
<li class="sectionlist">My Section 2</li>
<li class="sectionlist">My Section 3</li>
</ul>
each li indicates sections
if i sort the My Section 3 and move it to the top it will be like this
<li class="sectionlist">My Section 3</li>
<li class="sectionlist">My Section 1</li>
<li class="sectionlist">My Section 2</li>
and as a result the div's also gets reordered like
<div class="container">
<div class="section" id="section3" />
<div class="section" id="section1" />
<div class="section" id="section2" />
</div>
Text area's with ckeditor inside the div (section3) is getting uneditable and no content is displayed but text area's with ckeditor inside the rest of the sections are working fine
in short the text area's inside of the Div which get dragged is becoming uneditable and no content is Displayed.
Don't know what's happening ...
The classic type of editor (one that's based on iframe) will be always lost when it's moved or detached from DOM. You will find more details about why it happens and how to deal with that in a general situation here – CKEditor loses content when removed from DOM and added again.
As I explained in the other answer, you will have two options – either you'll need to reinitialise editor after user moved it or you can use the divarea plugin.
Related
My issue is similar to the one here: paper-menu-button's dropdown (paper-menu) not overlaying other iron-list items, but no adequate solution is proposed there.
The problem is that I have a <paper-dropdown-menu>, which opens up correctly inside the <iron-list> item it is in, but goes underneath the following <iron-list> items:
I have a simple <paper-dropdown-menu> like this:
<paper-dropdown-menu-light class="custom" label="Languages" no-label-float>
<paper-listbox class="dropdown-content" selected="1">
<paper-item>Spanish</paper-item>
<paper-item>English</paper-item>
<paper-item>French</paper-item>
<paper-item>Sinhala</paper-item>
</paper-listbox>
</paper-dropdown-menu-light>
which is inserted into another element with an <iron-list> (which loads a JSON file with <iron-ajax>):
<iron-list id="list" items="[[bookList.books]]" as="item">
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" style="z-index: 1;">
<div class="avatar">[[item.id]]</div>
<div class="pad">
<div class="primary">[[item.titleen]]</div>
<div class="shortText">[[item.slug]]</div>
<div class="longText">[[item.blurb]]</div>
<div class="languagedrop">
<language-drop></language-drop>
</div>
</div>
</div>
</div>
</template>
</iron-list>
I tried setting the z-index for each <iron-list> item to 1, but that did not work. I tried working with <iron-overlay>, but I did not manage to get that done. I'm very new to Polymer, so if anybody has a solution or workaround that would be great.
That's because iron-list is using transform: translate3d for each list item.
The workaround that I have found is working is to add z-indexto the current list item (<div class="item"></div>) on which you have the dropdown expanded, or to all items from top to bottom in descending order, programatically.
I am trying to find the xpath for only the parent of a navigation bar. The path which I am trying at the moment is `//a[#class='unselectable'] from this peace of HTML.
`<div class="PrimaryNavigationContainer">
<div class="PrimaryNavigation">
<div class="Menu">
<div>
<a href="http://www.blah.co.uk/brands.aspx" class="unselectable"><span>
Brands</span></a>
<div class="navCol">
<div>
<a class="NoLink unselectable"><span>Shop by Brand</span></a>
<div class="navCol subMenus">
div>
<a href="http://www.blah.co.uk/blah/catlist_bd4.htm" class="unselectable"><span>
blah</span></a>
The xpath seem to be bringing up both the top level cats and sub categories and I am because it is in both but not sure how to single of the parent from the chld. Thanks for any help which you can provide
How about //div[#class="Menu"]/div/a[#class='unselectable']? This way you avoid selecting the a in the subMenus div.
I've recently decided to update a website by adding rich snippets - microdata.
The thing is I'm a newbie to this kind of things and I'm having a small question about this.
I'm trying to define the Organization as you can see from the code below:
<div class="block-content" itemscope itemtype="http://schema.org/Organization">
<p itemprop="name">SOME ORGANIZATION</p>
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Manufacture Street no 4</span>,
<span itemprop="PostalCode">4556210</span><br />
<span itemprop="addressLocality">CityVille</span>,
<span itemprop="addressCountry">SnippetsLand</span></p>
<hr>
<p itemprop="telephone">0444 330 226</p>
<hr>
<p>info#snippets.com</p>
</div>
Now, my problems consists in the following: I'd like to also tag the LOGO in order to make a complete Organization profile, but the logo stands in the header of my page, and the div I've posted above stands in the footer and the style/layout of the page doesnt permit me to add the logo in here and also make it visible.
So, how can I solve this thing? What's the best solution?
Thanks.
You can use the itemref attribute.
Give your logo in the header an id and add the corresponding itemprop:
<img src="acme-logo.png" alt="ACME Inc." itemprop="logo" id="logo" />
Now add itemref="logo" to your div in the footer:
<div class="block-content" itemscope itemtype="http://schema.org/Organization" itemref="logo">
…
</div>
If this is not possible in your case, you could "duplicate" the logo so that it’s included in your div, but not visible. Microdata allows meta and link elements in the body for this case. You should use the link element, as http://schema.org/Organization expects an URL for the logo property. (Alternatively, add it via meta as a separate ImageObject).
<div class="block-content" itemscope itemtype="http://schema.org/Organization">
…
<link itemprop="logo" src="logo.png" />
…
</div>
Side note: I don’t think that you are using the hr element correctly in your example. If you simply want to display a horizontal line, you should use CSS (e.g. border-top on the p) instead.
Dan, you could simply add in the logo schema with this code:
<img itemprop="logo" src="http://www.example.com/logo.png" />
So in your example, you could simply tag it as:
<div class="block-content" itemscope itemtype="http://schema.org/Organization">
<p itemprop="name">SOME ORGANIZATION</p>
<img itemprop="logo" src="http://www.example.com/logo.png" />
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Manufacture Street no 4</span>,
<span itemprop="PostalCode">4556210</span><br />
<span itemprop="addressLocality">CityVille</span>,
<span itemprop="addressCountry">SnippetsLand</span></p>
<hr>
<p itemprop="telephone">0444 330 226</p>
<hr>
<p>info#snippets.com</p>
</div>
I believe that should work for your particular case and it won't actually show the logo and you wouldn't have to mark up the logo separately. Hope that helps.
I've looked around and tried the suggestions to center an image, and it usually works just fine, but I've got a situation where something isn't right.
If you go to the test page:
http://www.503rephotography.com/_temp/ - you will see the image is pushed to the right a little bit, and if you increase or decrease the size of your screen, you will see it may shift a little further away from the center position.
I'm new to CSS and may have something messed up that is making this not work; I used some tips on here to make the div with the content on the page be somewhat centered. Now I'm just trying to center an image within that div box. Any help is much appreciated!!
You have to create a div container with margin-left:auto: and margin-right:auto; to center the content.
<div id="container">
<div id="header">
<h1 id="logo">
<a href="http://www.503rephotography.com">
<img src="images/logo.png" alt="503 rephotography">
</a>
</h1>
<ul class="navbar">
<li class="button">SERVICES</li>
<li class="button">PORTFOLIO</li>
<li class="button">CONTACT 503</li>
</ul>
</div>
<div id="topbar"></div>
<div id="content">
<img src="http://www.503rephotography.com/_temp/slides/1.jpg">
<div class="sub">
<p>Content will go here....why can't I get this div box to be centered???</p>
</div>
</div>
</div>
Try this fiddle see if it's what you need: http://jsfiddle.net/ftPa3/
I've got the following piece of jsf 1.2 and richface 3.3.3
<s:div id="tree_nav" styleClass="unit size4of5">
<ul id="ul">
<li>< <a:form>
<a:commandLink value="test" reRender="tree_nav"
action="#{menuItemHome.setMenuValue(ldcMenu.id)}" />
</a:form>
</li
</ul>
when the page is first loaded it generates this html:
<div id="main_nav" class="line">
<div id="tree_nav" class="unit size4of5">
<ul id="ul">
<span id="menu:0:j_id36">
<li>
when i do a rerender it generates the following:
<div id="main_nav" class="line">
<div id="tree_nav" class="unit size4of5">
<div id="ul" style="margin-left: 2em">
<span id="menu:0:j_id36">
<li>
Anyonne know why it genereates a div instead of ul after a rerender?
Maybe its because you are using s:decorate or include or something similar that renders a div.