I'm working on a site that another designer built: http://bigbolts.qa.aztekhq.com/. The products in the New Products and Recently Viewed areas on that page have two buttons with tooltips on them, and when they are clicked, they are supposed to trigger other link events: "More Information" goes to the detail page, "Add To Cart" triggers a modal. This works fine on desktops, but not on touch devices. On my iPhone and iPad, touching the links only triggers the tooltips and nothing else. I added data-options="disabled-for-touch:true" to the links, but it does not seem to be working.
foundation makes it easy to disable or enable on touch-enabled devices, just add class= "show-for-touch" or "hide-for-touch" to the element you want to disable. code example below.
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>
Ahem... according to the tooltips documentation, it is better to add data-options="disable_for_touch:true" to your link. Like this:
<span data-tooltip data-options="disable_for_touch:true" class="has-tip" title="Tooltips are awesome!">
Your Cart
</span>
Related
I am setting up a new trigger in GTM and I am having trouble tracking it. Normally I would check everything using the GTM debug window/console.
When I have this open and click on the button I wish to track nothing appears.
I am trying to track a button, not a link.
The button is:
<button id="trigger-onlineSizer" class="btn btn-default">Find your size</button>
However when I click on other links they are tracked, for example this link does show and is trackable.
<nav class="button-bar">
<a href="#" id="btn--bodyheight" class="button button--next-screen">
Next
</a>
</nav>
In GTM I have made sure that I have enabled, under the Variables config all items below, Pages, Utilities, Clicks and Forms.
Any guidance on how to track such a button in GTM would be much appreciated,
Thanks,
We have a sharing toolbox that defaults to 32x32 px but we also use the same toolbox code to display at 20x20 px in other parts of our site. The code below (including Drupal tokens) worked fine for a few months but last month it started showing the icons at 32x32 even though it has the class addthis_20x20_style. It also changed the behavior on another system outside Drupal that uses the same toolbox code.
<div addthis:title="[node:title]" addthis:url="[node:url]"
class="addthis_sharing_toolbox addthis_default_style addthis_20x20_style">
</div>
I tried changing addthis_sharing_toolbox to addthis_toolbox per the support page at http://www.addthis.com/academy/customizing-the-addthis-toolbox/, but then the buttons do not display at all. The AddThis support pages are incredibly disorganized and outdated and they seem to have abandoned their user forum. I don't even know where else to ask.
Here's a reply I received from AddThis support. Hopefully this will be of use to others:
JAN 07, 2016 | 03:26PM EST
Hi,
We recently made a change to our code that affected some of our older
buttons.
You will need to use our advanced configuration code in the locations
that you would like our buttons to appear in 20x20.
Replace the current code in these locations with the following:
<div class="addthis_toolbox addthis_default_style addthis_20x20_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
Additional advanced configuration code information can be found here:
http://www.addthis.com/academy/customizing-the-addthis-toolbox/
Please let me know if you need any additional help
Thanks,
Mike
I am having the same problem. It looks like they have removed support for 20x20 sized buttons, as it is no longer listed on the academy support page you provided. It is a shame because it is the only size that has a constant height for facebook, facebook_like, tweet, etc buttons.
The below css styles, while feeling a little hacky, go some distance in repairing the broken functionality:
.addthis_20x20_style .at-icon-wrapper,
.addthis_20x20_style .at-icon {
height:20px !important;
width:20px !important;
}
That didn't fix the size of the google_plusone button. I happen to be using drupal as well - the addthis module - and the below 'customize services' settings worked pretty well.
That's:
Service code: google_plusone
HTML classes: addthis_button_google_plusone
HTML attributes: g:plusone:size="medium"
(Re the addthis service, the phrase "you had one job!" comes to mind...)
Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done
In index.html I have an ion-nav-view
I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
My list page is an ion-side-menus while the other 2 are ion-view's
Now to my question
When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML
<ion-header-bar class="bar-dark">
<div class="buttons">
<button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
<h1 class="title">Item</h1>
</ion-header-bar>
How can I get transitions to work even though each page is its own ion-view?
EDIT
I solved the "transition back" using nav-direction="back"
Next problem is that transition only works ones from the list?
If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?
The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.
Then define an ion-side-menu with side="left" and include the list you want to show.
That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.
Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.
Regarding this:
EDIT I solved the "transition back" using nav-direction="back"
It worked because you explicitly told ionic that you want a nav-transition when going back.
Hope this helps a bit
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 am using an iPhone 3GS for development and my app consists of 5 pages (data-role="page") 2 of them are dialogues (data-rel="dialogue") and the rest are links on my footer's navbar.
What I am experiencing is very slow transitions when a link is tapped.
Javascript itself is running smoothly, performing it's operations as it should without delay (alerts are instant when bound on "touchsrart" event). The actual links though are incredibly slow.
Anyone experiencing similar problems and/or has found a way to tackle them?
Thanks in advance :)
EDIT: forgot to mention -> sometimes a link gets 'stuck' before getting resolved which results in 2 'active' links (which UI-wise is aweful) and you actually need to re-tap it to make it work.
EDIT 2: posting footer bar whos links are particularly slow:
<div class = "footer-wrapper">
<div data-role="footer" class="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><span>Option 1</span></li>
<li><span>Option 2</span></li>
<li><span>Information</span></li>
</ul>
</div>
</div>
</div>
Second option's button is the active one as I grabbed the code from page #2.