When user chooses "add to homescreen" option from mobile Safari she sees a dialog where she can enter title for that shortcut. The text field is already filled with some default title.
The question is: there this title is taken from?
In my code I have following header for one of my pages (all pages in single html file):
<div data-role="header" class="toolbar">
<h1 id="someHeader" class="exampleHeader">Example Header</h1>
Other
</div>
I'm changing this title dynamically by using
var someDifferentTitle = ...
$('.exampleHeader').html(someDifferentTitle).trigger('create');
The title updates just fine but when I tap "add to homescreen" the system still uses original "Example Header" hint!
How to fix this? Any ideas?
Answer here: https://stackoverflow.com/a/11569043/275754
Short answer:
<meta name="apple-mobile-web-app-title" content="Short name">
OK, it turned out to be very simple, one just needs to change document's title:
document.title = someDifferentTitle
I still have no idea why the hint is truncated after several characters, but that is kind of enough for me.
I think however that there is slight inconsistency in jQM implementation. If setting toolbar's header in h1 using code changes the document title then dynamic change of header via .html() method should change the title as well.
Related
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).
I have a blog theme which does not include captions in photo posts. I have been successful with plugging in {block:Caption} {Caption} {/block:Caption} before {/block:Photo}, but the caption seems to be floating on the background and not inside the post box as seen below:
How do I include the caption to be apart of the same box as the date?
Any help is appreciated!
It would be much easier if you posted the relevant code here. I don't know what theme you are using but if you take a look at this site http://www.tumblr.com/docs/en/custom_themes you'll see that dates are rendered by {block:Date} {/block:Date}, {Timestamp}, {DayOfYear} etc. Take a look and see which one suits you theme. When you have found it, simply Ctrl + F in you code and find where in your HTML code the date box is rendered and then put the {block:Caption} {Caption} {/block:Caption} inside.
I've just recently implemented the 'Magnific Popup' and the popup comes up fine, however when I click an input box the entire popup disappears back to the parent page. On the examples shown on the plugin website, the entire dialog box is clickable until you click outside of that box.
I'm hoping its just something extremely simple I've missed, but it's still doing my head in.
I really appreciate any help I can get!
Thanks :)
If you're using "ajax" content type, you need to make sure that you've got only one root node.
http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type
E.g., this is correct contents of ajax file:
<div>
html content
<script src="something.js"></script>
</div>
Incorrect:
<script src="something.js"></script>
<div>
html content
</div>
Incorrect:
<div>
html content
</div>
<div>Another content</div>
Also make sure that closeOnContentClick is set to false http://dimsemenov.com/plugins/magnific-popup/documentation.html#closeoncontentclick
If, for whatever reason, you can't change the contents of ajax file, you may parse content in parseAjax callback, like described here (so the mfpResponse.data contains only one root node).
I can't reply yet (too low rep..) so adding it like this:
seems that this also counts for type: 'inline'. Safe to always wrap content by a div..
$.magnificPopup.open({
items: {
src: '<div>'+ html +'</div>'
},
type: 'inline',
closeOnContentClick: false
}, 0);
I had the same error.
Turned out to be a dumb mistake from my side, i had the same class on my opener and my inline div.
Open
<div id="popup" class="dialog mfp-hide"></div>
Of course they needed to be different classes like so:
Open
<div id="popup" class="dialog-box mfp-hide"></div>
Dmitry explains the problem here https://github.com/dimsemenov/Magnific-Popup/issues/34
Add modal:true in the magnificPopup:
$('.your_class').magnificPopup({
type: 'ajax',
modal:true
});
The example Tumblr gives is
<html>
<head>
<!-- DEFAULTS -->
<meta name="if:Show people I follow" content="1"/>
<meta name="if:Reverse pagination" content="0"/>
</head>
<body>
{block:IfNotReversePagination}
Previous Next
{/block:IfNotReversePagination}
{block:IfReversePagination}
Next Previous
{/block:IfReversePagination}
{block:IfShowPeopleIFollow}
<div id="following">...</div>
{/block:IfShowPeopleIFollow}
</body>
</html>
For these meta-if tags, when I change content="1" to content="0" or content="" nothing seems to happen to the appearance of my tumblr.
I don't understand what these meta-if tags do.
According to Tumblr: By including the special meta-if tags in your theme, users can easily toggle options you define. This is useful for showing or hiding different widgets or design elements.
I understood this as you can show/hide different design elements by changing the content value ie. content="0", content="1", content="". But nothing seems to happen to the design if I do this.
I googled this and I can't find any explanation elaborating on what Tumblr says. Can someone please explain?
Tumblr uses meta tags to save preferences of the theme. Meta if will cause that user gets a new checkbox on the Appearance menu. If its checked than the
<div id="following">...</div>
will be shown on your page.
So there should be new div element in the page source and three dots displayed on the page.
What Bojan Dević said is correct. Although, I would like to address the other half of your question, as well. content="1" automatically sets the element to be shown, or as content="0" makes it hidden.
is it possible to create simple Like button for fan page? When I create official Like button, insert my fan page URL in form, it always generate button with image and page title as it is Like box not Like button. I just want simple Like button only with "Like" label and users count.
Is this an issue or default behavior, or just my misunderstanding?
Thanks for advice
Tomas Teicher
Did you mean you want this button?
http://developers.facebook.com/docs/reference/plugins/like
Alternatively, you may use AddThis widget - They even provide analytics for you.
http://www.addthis.com/
I use the widget on this website: http://muamalat.com.my/consumer-banking/financing/mortgage/
I must have misread your question. In that case I've only come across this: http://developers.facebook.com/docs/reference/plugins/like-box/
Uncheck show faces, stream and header; that's the cleanest you could get. Is this what you're looking for?
I don't think AddThis has that feature you speak of. :)
One way to only show the like button by itself is to hide the top part of the button by setting the iframe dimensions to the size of the button: 60x20.
<iframe src="http://www.facebook.com/plugins/like.php?&href=&send=false&layout=button_count&width=60&height=20&show_faces=false&action=like&colosheme=light"
allowtransparency="true" frameborder="0" scrolling="no"
style="width: 60px; height: 20px;">
</iframe>
If you are using Iframe you need to place an http or https: because >iframe starts as
<iframe src="//www.facebook.com/plugins/likebox.php?href= ................></iframe>
and you need to place
<iframe src="**http:**//www.facebook.com/plugins/likebox.php?href= ................></iframe>
The above answer did help me in finding that out.
If i read this correct, then it is definitely possible:
https://developers.facebook.com/docs/reference/plugins/like/
Put in your Page URL, for example: https://www.facebook.com/bladauhu
(that is my own page)
Uncheck Send Button, use Layout Style "button_count", uncheck Show Faces. Leave the rest as it is and click on the "Get code" button. Use the HTML5 or XFBML Version.
For me, this works just like every other Website and it shows the correct number of likes from the Facebook Page. No additional Images, just the plain and simple Like button.
Adding data-layout='button_count' to the HTML5 version worked for me:
<div class="fb-like" data-href="http://facebook.com/wewantoo" data-send="false" data-width="90" data-show-faces="false" data-layout='button_count'></div>