Umbraco 4 Content Macro - macros

I have made a usercontrol which I use as a content macro in umbraco. All works fine on the development server but when I have deployed it to the staging server, the macro doesn't work.
For some reason the macro is having it's contents deleted by the wysiwyg - on the development server the macro html looks like this:
<div umb_buttontext="Download the case study >" umb_linkdocument="1581" umb_buttonimage="1585" umb_macroalias="DownloadButton" ismacro="true" onresizestart="return false;" umbversionid="573dbd37-24e3-4d67-80b6-84d915c38409" umbpageid="1215" title="This is rendered content from macro" class="umbMacroHolder">
<!-- startUmbMacro -->
<p class="downloadButton"><a id="DownloadButton_1_lnkButton" style="padding-left: 77px;" href="http://www.fmg.co.uk/results/highways-agency/highways-agency-download/" class="button">Download the case study ><span class="image" style="background-image: url('/media/38897/highwaysagency.png'); width: 57px; height: 69px;"> </span></a></p>
<!-- endUmbMacro -->
</div>
but on the staging server the part between the comments is deleted, even if I delete the macro and try to insert it from scratch:
<div umb_buttontext="Download the case study >" umb_linkdocument="1581" umb_buttonimage="1585" umb_macroalias="DownloadButton" ismacro="true" onresizestart="return false;" umbversionid="573dbd37-24e3-4d67-80b6-84d915c38409" umbpageid="1215" title="This is rendered content from macro" class="umbMacroHolder">
<!-- startUmbMacro -->
<!-- endUmbMacro -->
</div>
I have also tried copying and pasting the macro directly into the html of the wysiwyg and this works until I save and then the bit inside the comments is removed again.
Does anyone know why this happens as I have tried searching for an answer but could not find anything. Any help would be greatly appreciated

As it turns out, when I published the site, the dll didn't get updated properly and so the usercontrol for the macro was referencing something undefined or null causing the macro to break.
I think that whenever a macro is broken, it will clear the content in the wysiwyg area as described above. Once I fixed the usercontrol, the macro worked properly again. This also happened on a couple of other macros too but instead of trying to edit the page I fixed the usercontrol behind the macro and it seemed to solve those problems too.

Related

vim surrround ideavim - Surrounding visually selected text adds class attribute to end tag

I am using IdeaVim on pycharm with Vim surround plugin. The issue i am having is that when i try to surround a visually selected text inside html tag that has class as well, it adds the class attribute to the end tag as well. Here is the example code
<p>Hello</p>
So I want to wrap this line inside a div tag so I select the line visually and then hit `S and the result i see is as below
<div class="container"><p>Hello</p>
</div class="container">
This does not happen with normal vim surround plugin installed on my vim and here is the output from normal vim.
<div class="container">
<p>Hello txt</p>
</div>
So is it issue with Ideavim emulated plugin or am i missing something here ?
It's a bug in the vim-surround emulation in IdeaVim. Feel free to report it to the bug tracker.
You might also be interested in other issues related to the vim-surround emulation. See this query in the bug tracker.

jQuery Toggle in SharePoint using XSLT, but all the instances toggle not just the clicked one

I am having a problem with my XSLT, I am using SharePoint 2010 and I am building a custom front-end that will pull data from lists and render the data in a nice manner. I have figured out how to use XSLT with HTML to render a SharePoint list, I wasn't able to add an image of my news feeds because my rep is too low but I will get it up!
Now here is where my problem starts:
I am using jQuery toggle to show/hide the body paragraph of this news feed. The Continue Reading button is where my issue is, every time I click on the "Continue Reading" button in the lower right of each news post, it show/hides all the news items, not just the one I click on.
I have tried using Bootstrap collapse and now I am using jQuery Toggle() however I run into the same issue! Take a look at my XSLT code snippet to display thee body paragraph and the corresponding jQuery code snippet that actives the show/hide toggle:
XSLT:
<tr class="spacer">
<td valign="top" class="td-newscontent">
<div class="news content">
<!-- start excerpt -->
<xsl:value-of select="#BodyExcerpt" disable-output-escaping="yes" />
<div class="moving">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- end news excerpt -->
<!-- start continue reading link -->
<xsl:text disable-output-escaping="yes"><![CDATA[<br class="continue-br" />]]></xsl:text>
<a class="butt pull-right continue-right">Continue Reading</a><br /><br />
<!-- end continue reading link -->
</div>
</td>
</tr>
Javascript (jQuery)
$(".moving").hide();
$(".butt").click(function() {
$(".moving").toggle("slow", function() {
});
});
.moving is the actual #body being shown/hidden
.butt is the "continue reading" button (I know butt was a bad name to use)
I have read a few things on the net about "this" but I am not sure how to use it.
First time posting so I couldn't post any images, but when you click on "continue reading" all the body news articles expand then you click it again and all the body news items contract, what I would like it to do is open just the one I am clicking on!
I have a lot going on, everything is housed in SharePoint, using HTML5, Css3, jQuery and XSLT. I started by using IDs but I switched to classes, not sure if that was a good idea but it functions, but not as intended.
Any help would be appreciative, I have been researching this issue for almost 2 weeks so I finally decided to ask some experts :) (Feel free to ask any questions or ask for more information, I will answer with everything I got!)
You are close, so well done for getting this far! Your problem lies in your JavaScript. If you look at the rendered code using your browser's developer tools (F12), you will find that all of the different body texts have the same class (moving) and all of the buttons have the same JavaScript onclick, which is to toggle everything of class .moving.
Thus the solution you are looking for is to match each button with its respective body text. There are two main ways you can do this.
You can give each text div and each button a unique ID by assigning it to some unique feature of the list item (SharePoint list items already have a unique identifier as the field ID). Using xsl:value-of within HTML attributes would violate XML rules, so you can use something called an Attribute Value Template, which is the bit in the curly braces:
<div id="newstext_{#ID}">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- etc... -->
<a onclick="$('#newstext_{#ID}').toggle('slow', function() {});">Continue reading</a>
Modify just the JavaScript to target the parent of the button. The following code selects the parent DOM element of the button, which should be the div of class .news, then finds the child of class .moving, then applying your toggle:
$(".butt").click(function() {
$(this).parent().find(".moving").toggle("slow", function() {
});
});
The second method is easier but can get complicated if you end up running a lot of JavaScript. It is easier (and more efficient) to select elements by ID, so personally I think the extra effort is worth it. I haven't tested this code so let me know if it doesn't work. On some of your other points:
no, butt is not a good name for a class - remember, you can use element types in your jQuery selectors, so there is no need to duplicate the type as the class. For example, $('a') selects all the anchor tags on the page.
IDs should be used when elements need to be uniquely identified (e.g. for scripts), classes when you are grouping elements together (e.g. for styles).

GWT anchor to kick off new css class

Im building a nav menu and am struggling with something really simple here. In my UI binder i have this
<header class="{res.css.mainHeader}">
<a href="#{res.css.mainNav}" class="{res.css.openMenu}">
open
</a>
<a href="#" class="{res.css.closeMenu}">
close
</a>
<h1>new header</h1>
</header>
So when I write and test this in html, it works fine. you click on the word open, and everything animates, shows all the cool stuff, the world is a happy place. But i can't figure out how to translate this into GWT.
When I run the above code, I get this error
[WARN] [itrgwtprototype] - Escaping unsafe runtime String expression used for URI with UriUtils.fromString(). Use SafeUri instead: <a class='{res.css.openMenu}' href='#{res.css.mainNav}'> (:20)
But I have a sneaking suspicion that GWT has a better way to do it than SafeUri. How do i make this work? The CSS stuff is correct, but the anchor click is whats messed up.
thanks.
You are setting the anchor href property with a css value (href="#{res.css.mainNav}").
If you want to translate it entirely in GWT you should listen to ClickEvent on you open menu and then do something like open a panel or something else. In order to do so you can replace the anchor with a Label (or InlineLabel) and listen on click events on it.

Trying to right justify "Like Us On Facebook Code" in Header

So I am trying to add the following "Like Us On Facebook" code in the header of my website and have it be right justified, while the Title & Description remain left justified. Here is the FB code:
<div class="fb-like-box" data-href="http://www.facebook.com/HowToForiPad" data-width="292" data-show-faces="false" data-stream="false" data-header="false"></div>
I'm not the most knowledgeable about this type of thing so I'd prefer not to mess with the CSS and have been just trying to drop the code above into the appropriate place in my header.php file. The tricky part (for me) is making the Facebook Like right aligned while the site title and description remain left aligned.
Here is an example of what I want it to look like (ignore the underscores...had to do it to make it look right)
WELCOME TO WHATEVER SITE
The site does blah blah________________________________________Like us on facebook
Here is the relevant code from the header.php:
<!-- HEADER -->
<div id="header">
<div class="website-name"><?php bloginfo('name'); ?></div>
<div class="slogan"><?php bloginfo('description'); ?></div>
</div>
<!-- /HEADER -->
So basically I'd like the Facebook code to be in line with the site description but right justified (whereas the site description is left justified).
Greatly appreciate any help!
Using CSS is pretty much your only option.
You can change the slogan div to a span (or set a width on the div), add the fb like box below this span and float it right. That should do what you need.
If you REALLY don't want to touch your CSS file, you can add the styles inline, but I don't recommend this as it is not best practice.

html5 element repeating itself bug

I've been playing with html5 and I've noticed that sometimes the page displays my html differently in the dom (viewed through firebug) than it actually appears in my html files. The result is an element being replicated several times in different ways. I only notice this on nested elements.
For example:
<a href="#" class="block top-middle">
<h5 class="title-top">TITLE</h5>
<img src=""path/to/img.png" alt="TITLE" />
</a><!-- .top-middle -->
Is occasionally displaying as:
<a class="block top-middle" href="#"> </a>
<h5 class="title top">
<a class="block top-middle" _moz-rs-heading="" href="#">TITLE/a>
</h5>
<a class="block top-middle" href="#">
<img alt="TITLE" src="path/to/img.png">
</a>
I'm not really sure what the solution is but I wanted to know if anyone else has experienced glitches like this. I've sifted through every bit of my code and I can't find anything broken and the pages it happens on validate without any problems. It's especially frustrating because it only happens once in a while.
thanks!
**edit also, I know using anchor tags like this is not valid but as far as I have been able to tell with what I've read about html5 it is valid wrap content inside an anchor*
The browser/rendering engine was made before HTML 5 existed, so it is obeying the rule that anchors which are inline elements cannot contain h5s, which are block level.
This makes perfect sense. I don't think you can really do anything other than wait and see if the rendering engine adopts the HTML 5 rule that allows anchors to nest block levels such as h5s.
EDIT: I assume you are using the HTML 5 Doctype, although it probably won't have much bearing.
EDIT #2: This has been filed as a bug, even though I personally think it shouldn't be. A way around this seems to be wrapping the h5 in a div.