Twitter share with back button using Ruby on Rails - ios

I'm not much experienced in Rails. I'm trying to implement Twitter sharing in my project.
<li class="twitter">
<a onclick="window.open('https://twitter.com/share?text=<%= tweet_text %>&url=','sharer','toolbar=0,status=0,width=548,height=325');" class="popup" href="javascript: void(0)"></a>
</li>
and this will open up a tweet page in a new window in case of browsers. But in case of iPad or iPhone this thing loads in the same tab and the user will be stuck at that page if he or she thinks not to tweet when it loads.
So what I want is that I need a tweet page that comes with a back button or cancel button or something similar to that which can solve this.

I know this post has been here for one year but I am answering it anyway. I believe you are looking for this
<a onclick="window.open('http://twitter.com/share?text=<%= #post.title %> by #yourname- &url=<%= url_for([#post,{only_path: false}])%>','_blank','width=800,height=500,top=200,left=300');void(0);" >
<i class="fa fa-twitter"></i>

Related

Rails href with hash value not updating url

I'm using Materialize Tabs and have everything working fine, except the fact that my URL doesn't update when I click a tab link. I have the following two links:
<ul id="db-tabs" class="tabs">
<li class="tab col s3"><a class="tab-text active" href="#activegroups">Active Groups</a></li>
<li class="tab col s3"><a class="tab-text" href="#submittedgroups">Submitted Groups</a></li>
</ul>
Yet when I click one of these links, the URL remains unchanged. I would have expected the URL to change to something like /admin#submittedgroups, yet is just remains /admin.
If I manually enter the url /admin#submittedgroups, i'll get taken to the correct tab but otherwise the URL never changes.
Any ideas of what i'm doing wrong?
The javascript library you're using is preventing the default action, including the default browser navigation. You'll need to manually update the URL with javascript if this is your desired behavior, or use a different library.

Foundation top-bar breaks when loading another page

I am currently building a small website using ruby on rails and foundation as the css framework. I implemented a top bar for navigation with 2 items being nested drop downs.
Here is the code of the top-bar that is inside my layout/application.html.erb:
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Logo</li>
<li>Home</li>
<li>Statistics</li>
<li>News</li>
<li>Items
<ul class="menu">
<li>Infected items</li>
<li>Detective items</li>
</ul>
</li>
<li>Guides
<ul class="menu">
<li>Lore</li>
<li>Beginner tutorial</li>
<li>Mod rules</li>
<li>Strategy guide</li>
<li>How to be a good detective?</li>
</ul>
</li>
</ul>
</div>
</div>
As shown in the following picture:
The code behaves as intended until I open the statistics page right next to home, as shown in this one:
If I enter the stats page manually, I get no problems until I switch back to home. This happens anytime I click a link of the top bar that is not the same page that I currently am at.
I currently have no custom javascript or jQuery listeners implemented at all and I'm using a fresh foundation installation using foundation-rails.
Why is this happening and how can I solve it? Is it related to rails?
Thank you
This was due to a conflict between foundation and turbolinks.
For anyone running into this kind of apparently random issues, I solved this by following the approach suggested here:
http://foundation.zurb.com/forum/posts/2348-foundation-5-topbar-menu-not-responding-on-rails4

iPhone tel link not working - Sencha Framework

I am adding a call button to a mobile site
<div class = "button page1"
<div class = "phone-button">
<a href = "tel:8885555555">
<span class = "button">
<span class = "phone-img"></span>
<span class = "button-text">Call</span>
</span>
</a>
</div>
</div>
Other than some minor css differences, the call button div's are the same throughout the site. The button works fine on one page, but for all other instances, when the call button is clicked the number pops up for just a second and then disappears bringing up the html in the 'cancel/call' pop-up instead of the phone number. The button works properly on other phones, so does anyone know why it's not working in mobile safari?
UPDATE: the site uses Sencha Touch framework, and I found some old forum posts about a bug there (http://www.sencha.com/forum/showthread.php?153341-tel-link-does-not-work-on-iOS-with-ST-2.x!), but I can't find anything recent.
Solution: there is a bug in Sencha's framework, so I ended up deleting Sencha's phone-number routing function, and the above code worked fine.

rails infinite scroll ajax actions on page > 1 items

Let me first state that this is an instance of using a lot of other peoples' code and not completely understanding what's going on and how to fix my issue.
I followed the Railscast for infinite scroll using will_paginate, and have that working fine.
I load 12 items per page, each in it's own partial. Each item is an object that a user can 'like' by clicking a 'thumbs up' button.
I ajax-ified this button, and reload the partial for the item that is 'liked'.
This works fine on items 1-12 (the first page).
When a user clicks the thumbs up button on an item that is loaded via infinite scroll, the ajax call executes, but doesn't find the object again, and the partial simply goes blank.
Here's my code-
##messages partial
<div class="span3 well" style="height:360px;" id="message-<%=message.id%>">
<div class="thumbnail">
<%= image_tag message.gif.url %>
<div class="caption">
<h5><%=link_to message.sender, "/profile/#{User.find_by_username(message.sender).id}"%></h5>
<h5><%=message.chain.subject %></h5>
<p><em>"<%= message.content %>"</em></p>
<p><a href="/upvote/<%=message.id%>" data-remote="true" class="btn btn-success"><%=message.up_votes%>
<i class="icon-thumbs-up"></i> Nice Work</a>
</div>
</div>
</div>
# js.coffee (from railscast)
jQuery ->
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').text('Loading more gifs...')
$.getScript(url)
# vote.js -- js executed by ajax call
$("#message-<%=params[:id]%>").load(location.href+" #message-<%=params[:id]%>>*", "");
I'm pretty certain the problem is in the vote.js. the .load(location.href+" #message-<%=params[:id]%>>*", ""); seems to not be able to find the objects on the 2nd, 3rd, 4th, etc. pages because it uses location.href which, as the current url, only supplies the first 12 objects. I think I need to somehow put the page in that url, but I'm not sure how to accomplish that.
EDIT-
Alternatively, maybe I should have an endpoint for all messages that isn't paginated, and call that url instead of location.href + ?
This issue seems to have resolved itself.
It's funny it didn't seem to work locally, but is working on Heroku.
If anyone has an explanation for this I'd love to hear, but otherwise this is solved!

box email addresses like hotmail

I don't know what this is called hence having a hard time finding any reference on the net for this. On hotmail when you enter an email it boxes the email into a rectange block one by one on the same line with options to edit and delete the email. What is this and are there any sample code/frameworks to implement something similar?
Thanks.
It's normally a UL, and inside it you have LI which are either elements styled to have a box around them (emails, in your case), or a borderless INPUT box which blends into the surrounding UL of the same background. JavaScript code handles deletion and insertion of box LIs according to keyboard input. I am not aware of framework support for it, but it may exist.
EDIT: It exists. http://plugins.jquery.com/plugin-tags/tags for jQuery options.
I was looking for the same thing, and upon looking at the source code for it. It seems that they are using a UL like Amadan said, but its set up like this:
<div id="container">
<ul id="email_list">
<li class="email_token valid" id="a#a.com" email="a#a.com">
<p>a#a.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_token valid" id="b#b.com" email="b#b.com">
<p>b#b.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_input_container">
<textarea class="email_input_field"></textarea>
</li>
</ul>
</div>
EDIT: I ended up implementing it and it runs wonderfully!
Try to use Firefox+Firebug to inspect the elements in hotmail. It'll help you to find out yourself.

Resources