Footer not sitting correctly - footer

Can anyone help me rectify the problem of a website footer not sitting correctly?
I've had an answer but I'm not sure what to do.
I'm seeing a validation error:
Line 569, Column 6: end tag for element "div" which is not open
Also, there's a problem with the double use of an ID. You have 2 ID's with the same name footer:
Line 551, Column 12: ID "footer" first defined here
Line 563, Column 12: ID "footer" already defined
Try to solve these problems.
The website is www.planestrainsautomobiles.co.uk

In line 542 you close one too many </div>, just before:
<div class="cute_profiles_sprite">
So your footer is outside your main container. Remove the </div>, and it will work. That is why, by the way, you have an extra </div> in line 569.
Also you are not supposed to have 2 elements with the same ID. An ID should be unique. If you need to reuse it, make it a class, so try:
<div class="footer">
instead of:
<div id="footer">
In that case, you'd have to change your #footer CSS rule to .footer

Related

adding tooltip to zendesk home_page.hbs

I want to add tooltips for some "Categories" box in Zendesk, so when the user hang over one box then I can show a tooltip with more information about the "Category".
Problem is that I'm trying to use IF statement like this:
{{#if href == '/hc/en-us/categories/360001117812-Cow-Traffic' }}
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
{{#if href == 'url_to_compare' }}
<a class="tooltiptext">tooltip_text</a>
{{/if}}
<span class="blocks-item-title">{{name}}</span>
<span class="blocks-item-description">{{excerpt description}}</span>
As this IF is inside of a {{#if}} of the categories I want to select in this example only one link using the href to see if the mouse is over or not the box.
I already tried to add a helper in the script.js file but looks like it's not working, I remember that there was a way to use this IF and IS to be able to solve it.
Thanks!
I get a lot of help on this, at the end I found that the better way to solve this is using a {{#is}} statement, So it's possible to use {{#is name "Category Name"}} {{/is}}
And this option will do a comparation between the name of the Category and the name you are looking for, if the value it's equal then you can do something inside, if not then you can use an {{else}} between and do another thing over there.
{{#is name "Category Name"}}
<div class="tooltip1">{{name}}<span class="tooltiptext">{{excerpt description}}</span></div>
{{else}}
<span class="blocks-item-title">{{name}}</span>
{{/is}}
I used the "Excerpt description" to add the value of the tooltip inside Zendesk, and no need to add it manually in the home_page.hbs code.
I added 3 different tooltips and working fine now. Thank you all!

Placeholder text doesn't display in textarea

I'm just working on a form and having some issues with the placeholder not displaying inside the textarea.
If I do backspace twice it appears. Tried lots of different suggestions after trolling this site but haven't been able to resolve the issue yet. Happens in all browsers.
<div class="form-group">
<label>Description:</label>
<textarea placeholder= "Describe yourself" style="height:200px;
width:300px; font-size:12pt; align-top: "name= "profile_description"
class="form-control" required></textarea>
</div>
The above lines work well on their own despite the CSS align-top being incomplete.
The issue is with one of your custom class names. Please remove them one at a time to isolate the problem.
Update:
On troubleshooting further with #ljean we found that there were whitespaces in the textarea tag leading to this behaviour.
Update:
And so here is the code with the whitespaces which were causing the issue removed.
<div>
<b class="text-white" style="float:right">Already a member? <a
href="../login/index.html" class="text-white" style="text-
decoration:underline;">Sign in</b></a>
<br>
</div>

How to fill in input field that is the child of an element that sits next to an element with given text

Inside a capybara test, I need to fill in a text field that doesn't have a unique id or class attribute.
The text field (the field called title in this case) can appear anywhere on the page. The only thing we know is that the text field is wrapped in a div and this div sits immediately after an h3 tag which has the content "Title"
<h3>Title</h3>
<div class="input-row clear">
<input id="ember5046" class="ember-view ember-text-field" type="text">
</div>
<h3>Work Location</h3>
<div class="input-row clear">
<input id="ember5048" class="ember-view ember-text-field" type="text">
</div>
How can I do it?
We are not allowed to use xpath (company policy)
We are not allowed to do index based selectors like all("input")[0]
I think it should be possible with the css adjacent siblings combinator selector. Something like:
h3[text=Title] + div
This gives you the next element matching the thing after the +. If you rather want everything that matches you could use the ~ operator instead. These siblings selector can only help you to find things after a certain node. Going backwards is not possible as far as I know.

How can I get a field?

I'm trying to create a partial view macro that list all items (blog entries). I can read its name, but not the entry field like it's content:
#foreach (var page in CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"))
{
<div class="article">
<div class="articletitle">#page.Name</div>
<div class="articlepreview">
#Umbraco.Truncate(#page.Field("pageContent"),100)
Read More..
</div>
</div>
<hr/>
}
All pages are defined as a ContentPage (document type) where I've added Page Content (pageContent), type: Richtext editor as a Tab: Content element.
Do I need to cast the page or something to Contentpage?
What Im trying to do Is to give a 100 char long preview of the content on my main page so the users can read a short excerpt before clicking on the item.
Technically they are Properties of a doctype, not Fields.
So I believe this is what you are looking for:
#page.GetProperty("pageContent").Value
And truncate...
#Library.Truncate(#page.GetProperty("pageContent").Value,100)
However in this context you should be able to simply use…
#page.pageContent
So...
#Library.Truncate(#page.pageContent,100)
…should work!
I think this will give you the text you are looking for (I think your problem was just that extra #):
#Umbraco.Truncate(page.Field("pageContent"),100)
If you are running on umbraco 7+, try this:
#Umbraco.Truncate(page.AsDynamic().pageContent, 100)
Hope this helps!

jQueryUI nested accordion only working on first sub-list

I'm working on a site that has a dynamically generated FAQ and I'm trying to get nested accordions working. The problem is, only the first collection of questions take on the ui-accordion class.
Here's my code:
http://jsfiddle.net/SmFdt/
(I just copied the source of the page and stripped out most of the text)
What am I doing wrong?
You've got the same id assigned to multiple divs. Try the following instead:
HTML
<h1>Frequently Asked Questions</h1>
<div id="faqs-container" class="accordian">
<h3>One</h3>
<div class="accordian">
<h3>A</h3>
<div>AAAAAAAAAA</div>
<h3>B</h3>
<div>BBBBBBBBBB</div>
</div>
<h3>Two</h3>
<div class="accordian">
<h3>A2</h3>
<div>AAAAAAAAAA2</div>
<h3>B2</h3>
<div>BBBBBBBBBB2</div>
</div>
</div>
JavaScript
$("div.accordian").accordion({
autoHeight: false,
collapsible: true,
active: false
});
Link to example: http://jsfiddle.net/SmFdt/1/
Try this http://jsfiddle.net/SmFdt/3/
The reason it was not working was you were using the same id for multiple divs. I have changed the ids to classes.
On a side note, you have lot of code to display the accordion. You may possibly want to consider reducing some code. (e.g. no need of <p> inside <div>. You can control the spacing using CSS margin and padding properties.)

Resources