Is it possible to have both an "AJAX" hash mark # as well as a scroll down to one?
Thanks.
No.
The # is a special character in a URL, it marks the rest of the URL as a fragment identifier, so everything after it refers to an HTML element id, or a named anchor in the current page. (Source)
What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for? - it's only for Googlebot.
Yes.
If you really want to have both, the scroll-to bit can be fudged width JavaScript. It wouldn't be pretty.
As far as I know, # is not allowed in a fragment identifier. You could encode it as %23 and do something with that maybe.
If you're doing on-page stuff that you would like to be able to scroll to, you could just hijack links by adding a certain class to them or something.
Also, consider reading up on history.pushState and such on:
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Related
I have human friendly urls without index.php. I had to modify .htaccess file for that. Actually I always use Codeigniter like this. My url-s always look like this:
www.example.com/controller/function/parameter
So if I have an extra url parameter, then the url looks like this:
www.example.com/controller/function/parameter?archive=2013
Now what I want to do: If there is 'archive' parameter in the url, than also add that to the url when anchor function creates a link.
We have some different stuff every year (like stylesheets), so I need to make this navigation automatic. Am I thinking in the right direction?
And the answer is "Yes".
I slightly modified the solution from here:
How to extend anchor() function to anchor_admin() in CodeIgniter?
I'm having a bad time trying to implement a simple PinIt button.
I followed all the process and it works fine, with an exception: it is removing the Media parameter from the anchor tag.
This means that the PinIt button will open a window showing all the images from that page and the user needs to select one.
The source is ok:
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" />
But, when the page is loaded, the pinit.js is replacing the parameters.
I have tried to find a solution on the web and read something about the URL Enconde, I have tried with UTF-8 and ISO-8859-1 but without success.
The rendered html is:
<span class="PIN_1395089773564_hidden" id="PIN_1395089773564_pin_count_0"><i></i></span>
The media parameter is there, empty.
Thanks for your time,
William Borgo.
I believe the problem is actually in your url parameter. It cannot contain hashtags or other types of parameters. If you delete ?idItem=6920 from the url it will probably work.
I think your URL encoding is incorrect and is confusing Pinterest as to what is part of the Pinterest URL and what is part of one of the parameters - essentially where each parameter begins and ends, and what's a separate parameter for Pinterest vs a continuation of a previous parameter. (This is really the purpose of URL encoding for parameters.)
That is, the overall Pinterest URL should be like:
www.pinterest.com/pin/create/button/?url=[url]&media=[media]&description=[description]
The "&" separating the url, media, and description parameters should NOT be encoded. But each of the parameters themselves (the parts in [brackets]) SHOULD be encoded.
So for instance:
https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.tokstok.com.br%2Fvitrine%2Fproduto.jsf%3FidItem%3D121826&media=http%3A%2F%2Fwww.tokstok.com.br%2Fpnv%2F570%2Fc%2Fconnmlt_czbr1.jpg&description=CONNECTION%20MESA%20PARA%20LAPTOP
...which you could look at like this (with line breaks between parameters and some spacing):
https://www.pinterest.com/pin/create/button/
?url = http%3A%2F%2Fwww.tokstok.com.br%2Fvitrine%2Fproduto.jsf%3FidItem%3D121826
&media = http%3A%2F%2Fwww.tokstok.com.br%2Fpnv%2F570%2Fc%2Fconnmlt_czbr1.jpg
&description = CONNECTION%20MESA%20PARA%20LAPTOP
(Note: the URL you gave seems not to be active any more, so I grabbed another product from the site.)
I have an ecommerce gift store where users can fill out a gift-card for their recipient.
In order to fill out the card, I have the users enter text into a multiline textbox.
When I display the gift-card on the final review page, I have to spit out the information with Html.Raw so that Newlines are being displayed properly. I'm doing this:
#(Model.GiftCard.Text != null ? Html.Raw(Model.GiftCard.Text.Replace(char.ConvertFromUtf32(13),"<br />")) : Html.Raw(""))
I'm frightened that i'm entering dangerous territory using Html.Raw on values that were user-entered. However, when I go back to the gift-card entry page, the page breaks when I try to do something like "This is my gift card! (scripttag)alert('test');(/scripttag)"... so I feel like .net will catch any malicious entries during that point.
Am I safe to proceed like this? It seems that since the gift-card entry page is running validations against malicious code, I should be okay to use HtmlRaw later to display newline html that I'm putting in myself...
(I replaced the actual script tag with this (scripttag) thing above so it will show in stackoverflow)
Use a regular expression in your view model to make sure people only enter A-Za-z0-9 and whatever else you think should use such as :) =] type of stuff. Screening this stuff front end is better than second guessing it on the way out.
How about using a
<pre></pre>
tag instead? This would allow returns to display in HTML without the need for Html.Raw?
I have a text area in which I am trying to add youtube embed code and other HTML tags. $this->input->post is converting the <iframe> tags to < and > respectively but not the <h1> and <h2> tags.
Any idea how I can store these values?
If you only have a small number of forms that you need to allow iframes in, I would just write a function to restore the iframe (while validating that it's a valid YouTube embed code).
You can also turn off global_xss_filtering in your config (or not implement it if you're using it), but that's not the ideal solution (turning off all of your security to get one thing to work is generally a horrible idea).
$config['global_xss_filtering'] = FALSE;
To see all of the tags that get filtered out, look in the CI_Input class and search for the '$naughty' variable. You'll see a pipe-delimited list (don't change anything in this class).
Why don't you avoid CIs auto sanitizing and use something like htmlspecialchars($_POST['var']); ? Or make a helper function for sanitizing youtube urls...
Or you could either just ask for the video ID code or parse the code from what you are getting.
This would let you use both the URL or the embed code.
Also storing just the ID takes less space in you database, and you could write a helper function to output the embed code/url.
In this case, use $_POST instead of $this->input->post to get the original text area value, and then use HTML Purifier to clean the contents without losing the <iframe> tag you want.
You will need to check HTML Purifier documentation for details. Please, check this specific documentation page about "Embedding YouTube Videos".
I'll explain:
I have a picture gallery, the first page is display.php.
Users can flip through pictures using arrows, when you click an arrow it sends an Ajax request to retrieve the next picture from the db. Now I want the URL to change according to the picture displayed.
So if the first picture is:
www.mydomain.com/display.php?picture=Paris at night
I'll flip to the next one and the URL would be
www.mydomain.com/display.php?picture=The Big Ben
How do I do this?
The trick here are uri's with an anchor fragment.
The part before '#' points to a resource on the internet, and after normally designates to a anchor on the page.
The browser does not refresh if the resource is the same but moves to the anchors position when present.
This way you can keep the convenience of browser history from a usability point of view while replacing certain parts on the page with ajax for a fast and responsive user interface.
Using a plugin like jQuery history (as suggested by others) is really easy: you decorate certain elements with a rel attribute by which the plugin takes care of the rest.
Also kinda related to this topic is something called 'hijax', and it's something I really like.
This means generating html just like you would in the old days before ajax. Then you hijack certain behavior like links and request the content with ajax, only replacing the necessary parts. This in combination with the above technique allows really SEO friendly and accessible webpages.
You can use the jQuery history plugin for example.
changing the search of the url will load the changed url.
See also: stackoverflow, javascript changing the get parameter without redirecting
Do you really want to use AJAX here?
A traditional web request would work like this...
User navigates to display.php
User clicks "next" and location is updated to "display.php?picture=Big-Ben"
Big Ben is shown to user, along with a link to "display.php?picture=Parliment"
User clicks "next" and location is updated to "display.php?picture=Parliment"
And so on.
With AJAX, you essentially replace the GET with a "behind the scenes" GET, that just replaces a portion of your page. You would do this to make things faster... for example...
User navigates to display.php
User clicks "next" and the next image location is obtained using an AJAX request
The image (and image description) is changed to the next image
What you are suggesting is that you retrieve the "next url" using AJAX and then also perform a GET on the whole page. You would be much better off sending the "next" image when you send each page and not using AJAX at all.
this best describes everything i think: http://ajaxpatterns.org/Unique_URLs