I have several facebook "like" buttons on the same page which link to anchors of that page. They're specified like this:
<div class="fb">
<fb:like href="<?php echo $share_url; ?>"
send="false" layout="button_count"
width="90" show_faces="false"
font="lucida grande"></fb:like>
</div>
where $share_url is like http://mikaelareuben.com/food/#some-anchor. The majority of the like buttons work fine, however some of them get the #some-anchor part stripped off, so the like button just links to /food.
Some of the fragments that get dropped are:
#kale-arugula-pine-nut-salad
#cumin-coleslaw
#roasted-red-pepper-and-avocado-salad
etc. There is nothing that I can see that is different from ones that aren't lost:
#green-gazpacho-with-avocado-cream
#butternut-squash-soup
etc. The examples of missing fragments I listed are the first three like buttons rendered on the page, but there are others which come after like buttons which work properly.
I've tried replacing the # with %23 to no avail.
This issue can be replicated straight on the page that gives you like button codes: just enter mikaelareuben.com/food/#cumin-coleslaw and note that when clicking the button it shows mikaelareuben.com/food in the flyout. Then enter mikaelareuben.com/food/#butternut-squash-soup and notice how it works properly.
What the heck is going on here?
Edit
#butternut-squash-soup no longer works! It's like there's some kind of blacklist at play here? I have no clue.
Related
grails v 3.3.9, fields plugin
fighting with fields plgin and theres a problem when rendering domain objects and using bootstrap
i've got a sample here from a simple standalone page to show the problem
<p>f:display category </p>
<f:display bean="maintenanceAgreement" >
</f:display>
<hr />
<p>f:field category</p>
<f:field bean="${this.pageScope.maintenanceAgreement}" property="category">
<g:render template="/_fields/map/displayWidget" ></g:render>
</f:field>
<hr />
in essenence i have added a template in "/_fields/map/displayWidget" that renders a drop right table on a button
when you render a map field directly from your Domain object the sample table opens and you get all of the table
however when you
you can see the differences between using f.display (has clipping problem), f.field ( which seems to work) and f.all that ignores my _fields/map/_displayWidget.gsp
I dont want to have not use the fields plugin but its not working with bootstrap templating
has any one come up with a fix for this problem?
the project demo page is here
github standalone page to show rendering problem
the attached shows the output as you try each and select category property
well goldarn it another 2 days down the pan - but i have it !
I thought at first it was something to do with fields plugin processing. so i hacked a clone of plugin project locally and added some bits so i could watch it/debug step through it
in doing so i noted that my dummy web domain class page i'd cut across to the plugin didnt have the clipping problem. but the styles were not the same so i copied main.css and grails.css from ordinary project back into the plugin, then re rendered in the browser - and the clipping happened again.
so its in the css!. some very careful watching of browser and looking at the browser 'inspect' indicated that the clipping seemed to be enabled very early on in the journey.
so in my dummy page i just used
I then spent a day wandering round the various bits of fields plugin as its not that well explained anywhere.
if you look at the plugins taglib display method, by default that triggers the /templates/fields/_list.gsp. naming is a little odd but its the gsp that renders the domains persistent attributes as an ordered list - the plugins default _list.gsp looks like this
<ol class="property-list ${domainClass.decapitalizedName}">
<g:each in="${domainProperties}" var="p">
<li class="fieldcontain">
<span id="${p.name}-label" class="property-label"><g:message code="${domainClass.decapitalizedName}.${p.name}.label" default="${p.defaultLabel}" /></span>
<div class="property-value" aria-labelledby="${p.name}-label">${body(p)}</div>
</li>
</g:each>
</ol>
so after much exploration coming up through templates, from the bottom I ended up right at the top with the '
so nearly there now. back into main.css that i'd copied in. if you edit that, down around line 215 you get this style. If you comment out the overflow property - its all fixed !
.property-list .fieldcontain {
list-style: none;
/*overflow: hidden; */
zoom: 1;
}
I tried auto, scroll, and visible but that seems to much about with too much of the page so best to just comment it out.
once you do that - the rest of the rendering of your forms starts to work !! blimey one line of css for all that pain. Attached is the page using
Lastly through out all this, id ended up digging through /tracing fields plugin. What a nest that is. Not really finished here, but basically
with no body just renders a label and no content. So you either need to provide provide a body tag, say to get the value field displayed.
as
if no widget template has been defined then the renderDefaultDisplay is called which again has very limited options for controlling the rendering by falling through a 'switch (prop.type)' and basically calls either g.format (bool), g.formatDate (but no LocalDateTime/LocalDate Support) or g.fieldValue, non of which are bootstrap enabled.
if you call
these two diagrams are not beautiful but just high level pseudo code walk through for what the core tags are trying to do. One day i'll try and pretty that up but it might help you if you get stuck
I'll raise a bug for the main.css clipping directly to the grails team and see what happens, but you can comment the line out yourself if you fall foul of it.
situation:
form1.html has a button
clicking that button calls $.mobile.changePage('../site3/form2.html');
no problem here. all is as expected and the page is loaded. let's call that form2.html
form2.html has 2 sections:
(1) #SiteForm and
(2) #SiteSearched
clicking a button on #SiteForm should call $.mobile.changePage('../site3/form2.html#SiteSearched');
now here's the weird part.
if I load the page form2.html directly and press the button, it works and I see #SiteSearched JQM page.
but, if I start from form1.html, click the button to get to form2.html#SiteForm, then click the button, everything in the attached function executes, except the line calling $.mobile.changePage('../site3/form2.html#SiteSearched');
I know that part is loaded by AJAX by wouldn't the changePage command work?
(note: Form1 may have data filled into the form that I don't want to lose. Form2.html was meant to do a search and throw back the result to Form1 somehow, which is why I am doing things this way.)
You should read official jQuery Mobile documentation before posting here, everything is explained there, but let me give you a short explanation.
jQuery Mobile has two template solutions, one is multi page and second one is multi html. You already know that because you are mixing them. But, what you don't know is (from the perspective of AJAX page handling):
Only first HTML page is fully loaded into the DOM, everything is loaded, including the HEAD content. So if initial HTML page has several data-role="page" <div> containers, every one will load into the DOM.
But, every subsequent page is loaded only partially. Basically if you second, third ... page has more then one data-role="page" div containers only first one will load into the <DOM>. jQuery Mobile will discard everything else.
So in your case, if form2.html has:
(1) #SiteForm and
(2) #SiteSearched
jQuery Mobile will load only #SiteForm, #SiteSearched will get discarded.
Basically this line will not work:
$.mobile.changePage('../site3/form2.html#SiteSearched');
You can't nit pick specific pages in subsequent pages, as I told you. You can only use this:
$.mobile.changePage('../site3/form2.html');
And jQuery Mobile will show you first data-role="page" occurrence inside form2.html page.
Read more about this here and here.
I am a new coder/web designer and i am trying to add a the youtube logo that when clicked confirm subscription to the users channel
i have a php file with the following coding within...
<div id="youtube">
<img src="/images/YouTube.png />
</div>
this links to confirm subscription and the image directory is correct
however the problem is that whenever i add this into the coding it stuffs everything up!
if you go to any page and right click and go 'inspect element' you will see that the like box for facebook has a box around it which has the room for the youtube picture link
but it doesnt work, as said, when i add it in everything just clumps up together and/or the menu clumps up and goes all weird
You had two problems by the looks of things. The first issue was your include filename was wrong and the second was that you missed the closing inverted comma "
This was on the img src= tag
Try to change your id to something else - like <div id="youtube-confirm">
The youtube id might be reserved in FB script and it messes up your and their stuff
I'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.
I have a problem in IE. Hitting enter when the focus is on the last input control sends the focus to the "Next" button. This submits the form. So far, so good.
The code in my base class WizardController looks to see if the Next submit button is null, as follows:
protected string NextButton
{
get
{
return ControllerContext.HttpContext.Request.Params["NextButton"];Nex
}
}
However, despite the form submitting, this property returns null unless the user explicitly clicks on the button with his mouse.
This is blatantly wrong, but I have no idea why it is happening.
EDITED TO SPECIFY THE PRECISE PROBLEM:
The problem only occurs IF there is ONLY one TEXT input control in the HTML form that gets rendered to the browser.
END EDIT
Andrew
I have finally found an explanation for my problem:
It seems to be a bug in IE, whereby if there is a single text input in the rendered HTML form, then IE will not submit the form properly. The issue is described (briefly) at:
Form Submit via Enter Key when using IE
In the above link, no description is given as to why the bug occurs, or since what version of IE, so a blanket solution is better.
The workaround suggested in the article is to add a css hidden text input (with conditionals for IE):
<!--[if IE]>
<input type="text" style="display: none;" disabled="disabled" size="1" />
<![endif]-->
This worked for me, so issue solved.
The following is included to document the issue as I experienced it:
Unlike the problem described in the article, my form did submit. However, when I tried to check which button had been accessed by hitting tab or enter key, no submit button was in the HttpContext.Request.Params collection. So the behaviour I saw was slightly different.
What the above article did identify is that this behaviour is only seen WHEN there is ONLY one text input control. A single check box, for example, does not cause the problem.
I hope that this documents the problem adequately... and that MS will one day correct the bug.
A simple work around might be to use a hidden form element and depend on that rather than the button.
<input type='hidden' name='action' value='next' />
If you have multiple buttons you can always use JavaScript to change the value of the action element just before submitting.