In SVG, you can use a URL reference, such as url(#id), to point to other SVG elements on a web page. For example:
<use filter="url(#my-filter)" ...></use>
But suppose that, by accident, I end up with a naming collision like this:
<svg>
<defs>
<filter id="my-filter" x="30">
</defs>
<use filter="url(#my-filter)"></use>
</svg>
<!-- somewhere else on my page --->
<svg>
<defs>
<filter id="my-filter" x="40">
</defs>
<use filter="url(#my-filter)"></use>
</svg>
Unfortunately it seems that these url() references are not scoped. When this page displays, both of them will use the same filter -- presumably the first element to match the selector #my-filter (as opposed to the <filter> located within the <svg> context of each).
Is there some way to add scoping so that each reference points to the intended place? Or do I just have to make sure that these ids are always globally unique on my web page?
No, id values must be unique on a page.
The (id) value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
Related
I'm using Tiny 4.9.10 to dynamically generate reports based on templates. Users can create templates which contain placeholders. These placeholders then get swapped out for their actual values when generating the actual report. The placeholders get their style (including font, which is the main issue here) from their enclosing <span>-tag.
When replacing the placeholder with their actual value, we use <br />-tags to insert new lines, since some of the placeholders are almost full reports on their own which need to be structured.
After the placeholders have all been replaced, we inject this dynamically generated content back into a Tiny editor, so as to allow users to make ad hoc changes to the content.
At this point however we noticed that the <span>-tag around a piece of generated content containing <br />-tags gets removed. This is a problem, because the style info that was enclosed in this tag gets removed as well, resulting in problems further down the line when generating a PDF.
What I've tried to work around this:
setting verify_html to false
adding +span[br]/+span[br /] to valid_children
setting forced_root_bloc to div
The first two options did nothing to help me, and while the last one looked promising, it didn't help, because even when using <div>, font info gets enclosed into a child <span>.
I know this is expected behavior, because <span> is an inline tag and so it shouldn't have <br /> tags as children, but I'm currently at a loss for a workaround which allows me to include <br /> tags into my dynamically generated content without losing the style (most importantly the font) of the parent tag.
So I solved this by replacing the <span> tags by <div> tags when we swap out the placeholders by using some regex looking for spans that enclose a <p>...<\p> or a <b />. This stops Tiny from throwing away the <span> tags when they contain either of these enclosed tags
TinyMCE considers the <span> <br /> </span> construct an empty space and deletes it in favor of optimization.
I may be late, but you can also try using this callback in the setup option to stop the editor from removing empty spans:
setup: function(editor) {
editor.on('PreInit', function() {
editor.schema.getElementRule('span').removeEmpty = false;
});
}
The website that I'm working on uses cooluri to format the urls. In the case of news, the "parameters" column of the "link_cache" table stores the parameters like this:
a:3:{s:5:"cHash";s:32:"eea2db734d63b661abaab43d86fd3bb5";s:2:"id";s:5:"15503";s:18:"tx_ttnews[tt_news]";s:6:"142085";}
, or in a more readable way:
{
"cHash":"eea2db734d63b661abaab43d86fd3bb5",
"id":"15503",
"tx_ttnews[tt_news]":"142085"
}
My problem is, that there are lots of pages where these urls are inserted in content elements like in the example below, and ofcourse the cHash parameters don't match.
website.com/news/some-title/431731b3f9d391a54c9ee48467ca4bb4.html
Now because of this I get the following error message on the news single view page:
no news_id given
Is there a clean way to solve this issue? I was told that changing the links in the backend is not an option. Also, the links are very old, and the option "oldlinksvalidfor" is set to 365.
Your configuration goes in the block. Here is a configuration for Ext:CoolUri. This working fine for me (with tt_news) this will remove cHash from the URL. You have an additional configuration for managing caching and all.
<predefinedparts>
<part>
<parameter>no_cache</parameter>
</part>
<part>
<parameter>cHash</parameter>
</part>
<!-- common patterns -->
<!-- parts defined this way will be removed from URL -->
<part>
<parameter>paramC</parameter>
</part>
<!-- this will prefix a value with "prefix-". Cannot be localized.
-->
<part key="prefix-(.*)" regexp="1">
<parameter>paramD</parameter>
</part>
<part key="page-(.*)" regexp="1">
<parameter>array[k5]</parameter>
</part>
<!-- if parameter matches value, key will be added to URL
with mutliple values, use valuemaps
-->
<part key="thisWillAppearInUrl">
<parameter>paramE</parameter>
<value>ifParamEMatcesThisValue</value>
</part>
</predefinedparts>
Hope this will helpful to you.
Greetings!
Umbraco newbie here. I've researched a tonne but can't seem to find what I' looking for.
I have a site with a slider on the homepage, the slider is sitting in a macro which is using a for-each (of a nodes children) with a final goal to display the 'heroImage' image from that doctype. I cant post images as a newbie to this site, but heres my content structure:
HOME
PORTFOLIO
- First Item
- Another Item
ABOUT
CONTACT US
Home, Portfolio, ABOUT and CONTACT US are "Landing Pages" document types, and the children under Portfolio (First Item and Another Item) are "Portfolio Entries" document types. Below is the code on "Landing Page" calling the Slideshow macro.
Portfolio Entry has fields:
heroImage
images
body
Slideshow macro obviously being the highlight there. Easy enough. Heres my macro code where you'll see I'm trying to display the heroImage of the node in question for each 'for-each'.
<xsl:template match="/">
<!-- slider -->
<div id="slideshow">
<div id="slider" class="nivoSlider">
<xsl:for-each select="umbraco.library:GetXmlNodeById(1081)/*[#isDoc and position() < 4]">
<xsl:variable name="mediaId" select="umbraco.library:GetMedia(#id, 'false')/data [#alias = 'umbracoFile']" />
<xsl:if test="$mediaId > 0">
<xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
<xsl:if test="count($mediaNode/data) > 0 and string($mediaNode/data[#alias='umbracoFile']) != ''">
<img src="{$mediaNode/data[#alias='umbracoFile']}" alt="[image]" />
</xsl:if>
</xsl:if>
</xsl:for-each>
</div>
</div>
<!-- data-transition="slideInLeft" -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</xsl:template>
I feel like im so close, and ran out of search queries as most of the solutions I found were dependant on the imageId being passed onto the macro from the other side of the macro which wouldn't work.
Hope Ive explained this enough and thanks in advance for your help!
First of all, it looks like you're hardcoding the parent node id. In the code you just provided, it seems to only be getting the children of the node with id 1081. From reading what you just posted, it would seem that on all landing pages, you want to display their individual portfolio entries.
Either way, I would stay away from hardcoding IDs. If the node id changes in any way(user deletes the node, it gets exported as a package to the live environment, etc), your code will stop working. I'd just use $currentPage instead.
Judging by your filter, I imagine you only want the first 3 items to show in the slider. The code seems correct, but you seem to be using the old schema and its associated xpath. If you're using a newer version of Umbraco, the way you reference node data in xslt would have changed. I would guess that you've found many code examples and tried merging them together, without realising they wouldn't call the same schema.
This wiki link will provide more information, and hopefully fix your problem if you're using the wrong xpath.
I am asking this question to test the validity of my HTML. I can very well try this out (and I have, and it's possible), but I'm simply curious whether or not this is allowed in HTML. If not, how can one simulate a div or span element inside a form? Using blockquote?
form is a block-level element in HTML. Typically, block-level elements allow both block-level and inline children. Both div and span are valid children of form.
There are a ton of resources online to learn more about this topic, for example:
http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
It may also benefit you to read about the box model, as this is one of the most fundamental concepts of web design/development.
http://www.w3.org/TR/CSS2/box.html
Yes, you can. And it is also "officially allowed" by the XHTML standard, if you look into the XHTML XSD, you will find
<xs:complexType name="form.content">
<xs:annotation>
<xs:documentation>
form uses "Block" excluding form
</xs:documentation>
</xs:annotation>
<xs:choice minOccurs="0" maxOccurs="unbounded">
<xs:group ref="block"/>
<xs:group ref="misc"/>
</xs:choice>
</xs:complexType>
"block" encompasses div and "misc" contains span. The "documentation" part points out one particular thing you are not allowed to do: nest a form within another one.
Yes it's valid and you can use any number of divs, spans or blockquotes inside a form. You can always use W3C Markup Validation Service to check your html.
Eg:
<body>
<form id="Form1">
<div id="wrap">
<div id="content-wrap" class="content-wrap-admin">
</div>
</div>
</form>
</body>
I must correct emboss' answer.
In the XHTML 1.0 Strict DTD that he quotes, the group misc does not refer to inline elements. Instead, it refers to the following 4 elements: noscript, ins, del and script.
<!ENTITY % misc.inline "ins | del | script">
<!ENTITY % misc "noscript | %misc.inline;">
So to answer the question, XHTML 1.0 Strict does not allow span elements inside form elements. You'll need to wrap them inside block elements such as p, dip or fieldset.
This is not the case with XHTML 1.0 Transitional, though. Indeed, the DTD indicates that inline elements are allowed inside form elements:
<!ENTITY % form.content "(#PCDATA | %block; | %inline; | %misc;)*">
For reference: XHTML 1.0 - DTDs
Yes.
Did you even try this yourself?
I have a question about GWT UIBinder. I'd like to create a simple web-page which presents movies on my streamer. I would like to have a simple list of the movies - like on the right side of youtube.
Problem is, that program doesn't know how many movies are in my database, so I cannot just put (for example) 5 movie elements (and 2 arrows) in panel when making MoviesList.ui.xml. I would like this number to be assigned when creating list of the movies - and to scroll to left (or right) when user pressed each arrow.
Here is my list UiBinder xml:
<ui:UiBinder
...
<g:HorizontalPanel ui:field="list">
<f:LeftArrow ui:field="itemLeft" />
<f:SamplesSmall ui:field="item1" />
<f:Divider ui:field="div1" />
<f:SamplesSmall ui:field="item2" />
<f:Divider ui:field="div2" />
<f:SamplesSmall ui:field="item3" />
<f:Divider ui:field="div3" />
<f:SamplesSmall ui:field="item4" />
<f:Divider ui:field="div4" />
<f:RightArrow ui:field="itemRight" />
</g:HorizontalPanel>
</ui:UiBinder>
How should I create this file, so number of items will create on-the-fly?
best
Thanks a lot - both of you.
I found a way to do with FlexTable.
z00bs - it'a great idea, but I'd like to make movie items to slide. In that case I cannot clear container nad create new items. I'll try to find a way to implement jquery.scrollTo.js to UiBinder.
best