I'm considering the use of the <span> tag for grouping a set of arbitrary elements together, but I don't want it to have any visual impact in the structure of the document whatsoever.
I want to use that tag for later manipulating the set of elements within it with JavaScript in some way, such as e.g. detecting whether the mouse entered or left the region, etc.
My question is whether there are cases when the presence of the span tag will disrupt the flow of the document, making the elements within it or the elements around it behave differently from when it's absent.
Of course, I'm aware the presence of an additional node on the DOM can disrupt some CSS selectors which are not expecting the span, and I'm also aware that styling the span can cause the layout to change (e.g. if I added a border I could cause elements to wrap to the next line, etc.). But aside from that, is the span tag neutral? If not, how should I go about figuring in what cases it is not?
Thanks in advance!
-- edit --
I tend to forget that it's wrong to put block-level elements inside inline elements like span, so I can't use span to wrap just everything the way I intended.
So, in case one or more of the elements I'm grouping is block-level, should I use a div instead?
The <span> element is defined to be an inline (text-level) element. Otherwise, it is semantically empty and layout-neutral.
By HTML syntax, the <span> element must not contain block elements, such as <div>. If you violate this, there is no specification of what browsers should no. It sounds pointless to play with that, when you can use the <div> element. It is defined to be a block element, which means that in rendering it by default starts on a new line and any content after it starts on a new line (but no empty lines are generated by this behavior). Otherwise, it is semantically empty and layout-neutral.
Directly of http://www.w3.org/wiki/HTML/Elements/span
The element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.
Related
How do I change the size and position of buttons or other UI elements in a GUI created with the threepenny-gui package?
The documentation of Graphics.UI.Threepenny.Attributes lists some functions which are probably useful, such as coords :: WriteAttr Element String. However, I don't understand how to use them. Specifically, I don't understand what the String argument is supposed to be.
Thanks
I think my misunderstanding that I had was that my problem was not actually related to threepenny-gui but is instead a question about HTML. This link helped my find the answer I was looking for: https://www.geeksforgeeks.org/html-attributes/
Just in case anyone else is struggling with this as well, this line (mostly) solves it:
# set UI.style [("text-align", "center"),("color","red"),("font-size","30px")]
(The UI in UI.style comes from: import qualified Graphics.UI.Threepenny as UI)
Threepenny UI element combinators translate more or less directly to HTML, and so you should think in terms of HTML when doing layout with it:
The attributes from Graphics.UI.Threepenny.Attributes you mention are HTML attributes. Modifying them while defining your initial layout is typically done with set. (By the way, if you need a reference for looking up what things like HTML attributes do, you can't do wrong with MDN.)
For CSS styling, you can use the (#.) combinator.
As for layout, the basic tools are (#+) to nest HTML elements, and grid, row and column to arrange div-based grids.
This is my xpath "//div[#class='city']/h4[text()='Newyork']"
xpaths I can use in Geb but I want to write similar expression in CSS or better Groovy-ish, Gebish locator.
I have tried
.city>h4:'Newyork'
.city>h4:contains('Newyork')
but none worked.
I have referred https://sqa.stackexchange.com/questions/362/a-way-to-match-on-text-using-css-locators
Geb has an ability to further filter down the elements matched using a CSS selector by passing a map of element attributes to its methods together with that selector. It also introduces a special attribute for matching text of a node. Your selector would look like this:
$('div.city > h4', text: 'Newyork')
Please note that this works by fetching text for every matched element and checking it against the provided value, that is it does the work on the JVM side and not in the browser, which means that you want your css selector to be as specific as possible and match as little elements as possible otherwise the selector will be very slow.
I am new to svg, as far as I saw everywhere they using svg elements within g tag, is there any particular reason for using svg elements within g tag other than applying transformation for whole set of elements?
That's a pretty important and useful reason. But other reasons you might do it are so you can:
apply the same styling (eg. fill="blue") to a set of elements,
reference to the group of objects from a use.
Not to mention the simple organisational reasons.
http://tutorials.jenkov.com/svg/g-element.html says:
The <g> element is used to group SVG shapes together. Once grouped you can transform the whole group of shapes as if it was a single shape. This is an advantage compared to a nested <svg> element which cannot be the target of transformation by itself.
First off, a caveat ... I am brand new to Stash. I've heard a lot about it but this is my first time actually playing with it. I get the concept, but am having a hard time figuring this one thing out.
I have a main "wrapper" file and everything within that wrapper stays the same. I would like the option however, to be able to toggle the sidebar on and off if I need to.
I wouldn't think I would need a totally separate layout wrapper would I?
Is there a way to use a boolean variable within stash? (e.g. 2col=TRUE) or am I thinking about it wrong?
Thanks in advance for your help!
Generally what I'd do here is setup multiple Stash gets within the wrapper. Then in your individual templates you can set both the sidebar and the main content area. For parts where you might be repeating content, like the opening and closing divs of a sidebar, you can always drop some snippets inside the stash.
You can also use exp:stash:not_empty [docs] to wrap around the div or container for your sidebar within the wrapper.
I usually use one wrapper for every template. It'll contain an {exp:stash:get name="content"} tag, like yours, which contains the only variable content within.
In my individual templates, I embed the wrapper at the beginning using a regular EE embed ie. {embed="includes/wrapper"}.
Then I stash the content to be inserted into the wrapper using the {exp:stash:set name="content"} tag.
This seems like what you're doing anyway.
If I want to conditionally show a sidebar, I might just pass a variable into the embed.
eg. {embed="includes/wrapper" show_sidebar="yes"}
In my wrapper I would do this:
{if embed:show_sidebar}
Sidebar stuff.
{/if}
I have a HTML document where the body contains dozens of divs, all listed sequentially. (It's a layout of small screenshots.)
The appearance and layout of each div is handled by CSS.
I wish to selectively hide some divs, depending on some state values. A javascript function "hideSomeDivs()" has been create to do this. (The function iterates over all divs, setting each element's style.display property to "none" as required.)
The problem: calling hideSomeDivs() function from will be too late: the page is already loaded and the visual changes will not be displayed. The original layout is maintained.
Q. how/where can I call this function such that the affected divs will be hidden, and all layout adjusted accordingly? Thanks.
Further information:
apart from javascript interactivity, the page is static (i.e. there's no server-side processing available).
also, I'm trying to avoid any "pop" where elements are shown/hidden after the page is loaded and drawn to the window.
also, I need for the layout to be re-evaluated and re-drawn. e.g. if I hide divs 1 to 4, but show div 5, then div 5 should appear at the top of the page.
Think about it the other way round - hide all your divs by default, and then use the javascript to show them as needed.
Of course you could just eliminate the need for the javascript if you have a server side language (i.e. PHP, ASP.NET) that is constructing the page, then you can just set their hidden state correctly to begin with.
In your HTML code put in a style code that hides the div by default. This will be evaluated much earlier than the Javascript.
Do you possibly want to maybe call the "hideSomeDivs()" function on the onload event of the body element.