I am trying to get Fancybox to close and jump to a specific section anchor when when link is clicked within the fancybox ajax content. I have been trying several variations on this:
<a onclick="$.fancybox.close(); href="pricing">See pricing</a>
But every time I click the link it returns to the section anchor where it was initiated. Am I missing something really obvious here?
I Found the answer supplied by Avinash at how to prevent scrolling of page behind fancybox-2
I would thank him in comments but don't have enough points yet. If he reads this - Thanks :)
Related
I coded a website, and am currently in the process of re-coding it. On my contact page, I have a form for questions, comments, etc. On the original website, the page works fine - however on the recode, the form breaks the page. I was wondering if someone could help me figure out why.
Original page found here: http://path-to-truth.org/contact/
Recode found here: http://path-to-truth.org/Recode/contact/
ul#nav has a margin-right of 7% in your style.css file. When I remove that, it looks normal. The margin is added to the right of the navigation. Because that make the block too large for the header, it moves down. Because you have float:right on that element also, it is put to the right of the h1.
Another option would be to remove the float: right on the navigation and put float: left on the image (or the a tag). At the bottom of your div#header, insert (inside the div) a new div with clear: both to pull the header region down.
If your look at this screenshot: http://cl.ly/image/1J3m2e2x1G1z, you'll notice that the facebook iframe element overwrites the Karma comment bubble. Could anybody help me with either removing the bubble alltogether of with removing the facebook element?
thanks
This can probably be fixed pretty easily with css. If you have a link to the site I can take a look at it and tell you what you need to add to your stylesheet. Also, t.thielemans is right, it would be best set up a child theme (Not nearly as complicated as it sounds) which would prevent the changes from going away if you update your theme.
Ok, so I'm using the suggested window-scrollTo method and it's working just swimmingly everywhere except for one little sticking point.
When Safari decides to show the "Reader" button figuring I might want to save my page for later reading, it keeps the address bar up for a full 5 seconds before finally hiding it like I asked. Kind of an eternity in UX time.
Is this an iOS 6 thing or did it also do this in iOS 5? (I don't have a 5 device to test it on at the moment.) Also, is there any way to get around it?
I've looked around quite a bit and there doesn't appear to be any way to disable the reader button. The only possible solution I found was to make your site less "readable" so Safari doesn't add the reader button. Exactly what makes a site "readable" is pretty murky.
Here's some research on what makes something "readable": http://mathiasbynens.be/notes/safari-reader
Here's a method to make it less readable by putting your content in CSS: http://askmike.org/2012/12/a-hacky-way-to-remove-the-reader-button-in-ios-safari/
The bottom line seems to be that there is no solution. Hopefully Apple will add a meta tag to disable it or at least let us hide the address bar faster.
Here is what worked for me:
I placed all content inside an ol tag.
<ol style = "padding:0;margin:0">
my content
</ol>
From what I read elsewhere, the reader is partly triggered by the number of words on a page, but does not count words inside an ol.
You can disable the reader button by hiding the content that triggers it.
And then displaying that content 1s after the page loads.
For instance, hide all your <p> elements if they are triggering the reader button.
I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)
I am able to put a Facebook like button on my website, but how do I make it to be right-aligned within the div/iframe it is in?
I tried applying various CSS properties, but I could not get anything to move in the iframe.
I think this link could help too:
http://shades-of-orange.com/post/2011/01/09/Embed-Facebook-Like-Button-e28093-Right-Align-with-css-and-Settings.aspx
It says to set the width to "0". Then the box will be autoresize by Facebook and you can apply a float right to that box.
iframe is an inline element, you can use
text-align: right
for a div that contains that iframe, or float the iframe to the right, but just make sure to clear the float afterwards.
sample: http://jsfiddle.net/Mujj6/3/
and: http://jsfiddle.net/Mujj6/5/
Seems as though there are many ways to achieve this that work in different situations.
None of the above seemed to make any difference to the position of my 'like' button, however a little trial and error with a "margin-left" tag and I got it in the right place.
Thanks for everyone's input. The position relative trick doesn't always do it for me:
div.around-fb-like{
position:relative;
float:right;
}
So far this has been more dependable:
#fb-root{
position:absolute;
left:-1000%;
}
What is described in Embed Facebook Like button – Right align with CSS and settings works. However, in my website, I had to change the style to
position:relative; right:-130px;
the 'like' social plug-in seems to have changed styles within the iframe. what's the best way to prevent the 'like' from flowing right, on the following page?
[http://www.biographile.com/the-righteousness-and-ruin-of-science-on-this-week-in-history/16573/][1]
With DIV it's easy:
.fb-like{ vertical-align:top;}
posted also on SimpleMediaCode.info ( http://e-art.lv/x/fbas )