I'm trying to have two social buttons (facebook & twitter) on my website using EmberJS. I'm binding the URL of those buttons to an attribute url (for example).
The problem is that the attribute url is changing, and the buttons are not reloading.
I did a spin-off of this article on the EmberJS: http://emberjs.com/guides/cookbook/helpers_and_components/creating_reusable_social_share_buttons/
Updated to the last EmberJS version (1.3.1), and added a "change text" button. Try changing the text for the text button, and you'll see that the button is not reloading.
Link to the jsbin: http://emberjs.jsbin.com/izOtIYi/1/edit (watch the console too)
I think it's because Twitter is messing with the Metamorph system. How can I bypass this? I'm sure someone faced this before.
The strangest thing is that it's working well with facebook like button.
Thanks !
The issue is that when you load the twitter widget it parses the <a> and then replaces it with an <iframe>. So even when you update the text property it doesnt reload the button.
One way to work around it would be to rerender the view when the text changes this would cause the iframe to be removed and a new a tag to be added.
I fixed up the jsbin to update the button when the text changes http://emberjs.jsbin.com/izOtIYi/8/edit
I got put the logic which rerenders the button into the component to make it more reusable.
The button will flash whenever the text is changed because its actually removing the existing button and creating a new button each time the text changes.
Related
I'm using a script to change a post's taxonomy in the dashboard, but my changes aren't visible until I click the 'Blocks' tab, and then the 'Post' tab. Can I refresh/re-render the taxonomy area without user input?
This is within a custom post_type, 'contributor', and using a custom taxonomy, 'topic'.
If I make this call
wp.data.dispatch( 'core' ).editEntityRecord( 'postType', 'contributor', currentPost.id, { 'topic': [ term_id ] } );
Nothing visually changes on the page until either I save and reload, or if I toggle to the 'Blocks' tab and back. The taxonomy value is set appropriately, but there is no visual indication it happened. Can I re-render this field (it's in the sidebar).
Just after posting I realized I needed to also update the Content field. When I do that, it changes to the 'Block' tab automatically. I don't really want that (I wanted the editor on the Post/Contributor sidebar, not the Block sidebar), so after everything has finished I trigger a click on the Contributor button which effectively solves my problem. I'd still love to know if there is a more elegant way to re-render, but my particular issue is solved.
This should be a fairly obvious thing to be able to do. I have a plugin that has a modal newsletter signup form. I am very happy with the plugin and it has a number of options for the way it launches (after x seconds, when user reaches bottom of screen etc) it also has a manual launch option which gives me these following codes.
My theme uses Visual Composer. I want to launch the popup manually when a site user clicks a button on the homepage. I thought this would be simple but apparently not. The options I have with the standard VC button is shown below; I have tried numerous options of adding classes to the button but I cannot add a shortcode or class to any of the fields to launch the modal. I know there is a javascript onClick function but I'm not very good with Javascript. There must be a simple way to click a button and open a modal, maybe I am overlooking something completely obvious.
OK after reading back my question I thought about adding a custom css class to the button field Extra Class Name and it works. I thought that the extra class name here was for styling the button itself and did not realise that this would also trigger the pop-up as well. Guess I should have checked that first.
I am trying to recreate a feature where you click on something like a login (shown as JOIN/SIGN-IN in the below pictures from Cozymeal.com, can't post images sorry) and a popdown menu comes, to which you connect using GitHub. I am attempting to do this in Angular, and I had a theory as to how to do this and how this works.
Say I am on index.html, I should create an anchor tag (styled to look like a button that says sign-in) that contains a function for ng-click, and upon clicking, it will pull down a modal (using ng-show/hide for the display, and ng-animate for the pulldown effect) that will contain another anchor-tag that links to authentication via GitHub.
Is this a good way to proceed in building this functionality? I set up my routes in Angular, but coming up with this pulldown effect is certainly confusing me.
(http://i.imgur.com/nhEcRLi.png)
(http://i.imgur.com/QMiFlTP.png)
It's possible to do it like you just stated, it's also possible to use CSS3 styling in stead of ng-animation and adding the style on click with ng-class and adding a seperate class for closing the menu.
http://www.w3schools.com/css/css3_transitions.asp
I have a LiveCycle form in Designer that has a flowable menu page with checkboxes. When a checkbox is checked, certain pages are 'shown' in the document. The pages are subforms containing an image.
This functionality works fine. What I want to do is add a button to the front page that will remove the front page, open a 'saveas' window and then close. I can get the saveas and the close function to work but the front page gets cleared and is left blank in the document. If there is nothing on the page then surely it should realise it is not required as per the workflow?
Any workarounds would be greatly appreciated, this has been doing my head in for weeks! I know I can't delete the page using the acrobat model as there aren't the correct permissions. I'm hoping a bit of javascript on the button will do the trick.
At the moment I have:
this.resolveNode ("indexSub").presence = "hidden"; //indexSub is the subform
app.execMenuItem("SaveAs");
app.execMenuItem("Close");
I will look at forcing a filename at save another time!
Thanks
It is quite strange behaviour. I've checked that you can set presence either to invisible or inactive and it works fine then.
this.resolveNode ("indexSub").presence = "invisible"; // or "inactive"
Differences between invisible and inactive you can fnd here: http://blogs.adobe.com/formfeed/2009/03/xfa_30_presenceinactive.html
Actually "inactive" did play a part in the solution, not entirely sure if it was intentional!
The main change was to alter the first page from flowable to positioned. When the button was pressed, the page cleared, the SaveAs dialogue opened and then the document closed. When the saved document was reopened the menu page had disappeared as required. I'll add a comment to this if anything changes. Thanks all.
I'm using JavaScript to customize radio buttons. I added labels for each of the buttons and when I click the labels, it seems to be updating the selected radio properly, but not when I click the radio button graphic. (only the background position changes)
Is there anyway I can make it so I can view the changes when to each of the radio button input elements in firebug when clicking on them?
If you'd like to see an example of what I'm talking about, go here, inspect one of the radio button elements and click on them and you'll see the code never changes (i.e. checked="checked").
When you change the DOM via Javascript, you're changing the in-memory version. The source of the DOM is never modified by your Javascript.
See: Firefox Live DOM.
If you right click on the element and select "Inspect Element" it will show you the HTML for this element in memory and will reflect changes to that as you interact with the page.
Also if you select the "Script" tab you can find your javascript and set break points to allow you to step through the script and debug any issues that may be occurring.