This is a bit tricky. I want to create an anchor that scrolls to a specific section in a section.
Say it scrolls to the last section, this section would have the normal scrolling effect because I have the scrollOverflow set to true. But I want to auto scroll to ONE SPECIFIC SECTION in the last section.
So essentially, it should involve two times scrolling:
1st: Scroll to the last section
2nd: Go to that specific section in the last section.
<div class="section section__2">
Scroll to specific section
</div>
<div class="section section__3">
// Inserting some content so that the page is long enough to see the normal scroll effect
<div>Some content</div>
<div>Some content</div>
<div>Some content</div>
<div>Some content</div>
<div>Some content</div>
<div>Some content</div>
<div data-anchor="specific-section">Content to auto-scrolled to</div>
</div>
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 beginning with AsciiDoctor and I want to output HTML. I've been trying to figure out how to create custom class in divisions, I searched google, manuals etc. and couldn't find a solution. What I want to do is simply write something like this:
Type the word [userinput]#asciidoc# into the search bar.
Which generates HTML
<span class="userinput">asciidoc</span>
but I want to have div tags instead of span. Is there any way to do it or should I just use something like
+++<div class="userinput">asciidoc</span>+++ ?
I think what you need is called "role" in Asciidoctor.
This example:
This is some text.
[.userinput]
Type the word asciidoc into the search bar.
This is some text.
Produces:
<div class="paragraph">
<p>This is some text.</p>
</div>
<div class="paragraph userinput">
<p>Type the word asciidoc into the search bar.</p>
</div>
<div class="paragraph">
<p>This is some text.</p>
</div>
You have now a css selector div.userinput for the concerned div.
See 13.5. Setting attributes on an element in the Asciidoctor User Manual (you can also search for "role").
You may want to use an open block for that purpose:
Type the following commands:
[.userinput]
--
command1
command1
--
Producing:
<div class="paragraph">
<p>Type the following commands:</p>
</div>
<div class="openblock userinput">
<div class="content">
<div class="paragraph">
<p>command1</p>
</div>
<div class="paragraph">
<p>command1</p>
</div>
</div>
</div>
The advantage is it can wrap any other block and is not limited to only one paragraph like the other answer.
For slightly different use cases, you may also consider defining a custom style.
I would be set a differente height of viewport of the slides that are contained in a section.
Example:
I have:
<div class="section fp-auto-height">
<div class="slide" id="slide1"> CONTENT </div>
<div class="slide" id="slide2"> CONTENT</div>
<div class="slide" id="slide3"> CONTENT</div>
</div><!-- end section-0-->
The content of the slide1 is too long, and I have used the class fp-auto-height for see all the content on mobile, but when I go to the slide2 (that have pour text), I see the height to big because fullpage.js have set the same height of slide1 to slide2.
Can I resolve?
Thank you
Best regards
Mario
What you are asking for doesn't make much sense from the design perspective.
You can not slide a bigger section to a smaller one. The slides form the slider has to have the same height.
I have question regarding screen reader. I have div tag that will get focus on button click. I am expecting screen reader to read automatically each and every words in that div tag once div tag get focus. Some how screen reader is not reading any thing on focus. If I will do the reverse tab meaning that on that page there are couple of more div tags. So if I will come on that div tag after reverse tab (Shift + tab) then screen reader will read every thing. Any comments for this missing words ??
This is my HTML code for that page. From previous page button click I will redirect tho this page and "information" div will get focus. So I am expecting screen reader to read everything when this div tag get focused but it is not reading. If I will tab again and go to back button again then if I will come to "information" div tag after do the reverse tabbing then screen reader will read everything automatically.
<body>
<div id="dialog" class="dialog" style="">
<div id="information" tabindex="0">
<span id="label">Where isRecord Number ?</span><br>
<span id="text1">You'll find this number on a card.It's the number used when making appointments.</span><br>
<span id="text2">If you are in America don't include when entering the number.</span><br></div>
<div><button class="button i18n" id="back_button" role="button"><b>BACK</b>
</button></div>
</div>
</body>
You are putting a hard break at the end of every sentence (<br>) so that causes the screen reader to pause as if you had a new paragraph.
You can get the same visual styling (one sentence on each line) if you use a style for your <span> instead of <br>.
To fix your example, remove the <br> at the end of the line and put a class= on each span and use display:block for your span. Something like this:
<style>
span.myspan {display:block}
</style>
<div id="dialog" class="dialog" style="">
<div id="information" tabindex="0">
<span class='myspan' id="label">Where isRecord Number ?</span>
<span class='myspan' id="text1">You'll find this number on a card.It's the number used when making appointments.</span>
<span class='myspan' id="text2">If you are in America don't include when entering the number.</span><br></div>
<div><button class="button i18n" id="back_button" role="button"><b>BACK</b>
</button></div>
</div>
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.