Develop Reference

Anchor link opens Lightbox in another page

I'm having a bit of an issue figuring out a very simple interaction.
Some Context:
I'm working on a website that showcases some products in a grid and when clicked, a Lightbox pops up with the information of the product..pretty simple! Roughly my markup/script:
<img id="1234" src=".../blah.jpg"></img>
$( img ).click(function() {
// open (this) lightbox
// etc. etc.
});
Now I'm trying to implement the search functionality, which exists obviously in another page. The search reutrn a list of products each one with a path such as:
Product 1234
So if I click the item, it will take me to the correct page where the item exist and since I'm including the anchor link, it will kind of place it visible to the user. This works fine.
My question is, how can I make the Lightbox open automatically after being directed from the search to the actual category page where the product exists?
This seems to be super simple, but for some reason I can't manage to figure it out! Any help would be really appreciated!
Thanks!

So when the dom is ready on the category page, you wan to check the url to see if an anchor exists. This will mean that they have arrived via the search results page.
reference:
How can you check for a #hash in a URL using JavaScript?.
Something like this:
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
alert (hash);
// hash found
// open (this) lightbox
}
If it exists, get the product id from the hashtag and trigger the lightbox functionality

Url for specific action in a page

I have page flow like this
User lands on the landing page.
Then does some selection of some select boxes and then hits search.
Then use is taken to new page with all search criteria and displayed search results.
In this page we have left section to display all results and when user clicks on any result item we show the result details on right side.
All this was fine. But now client want a bookmarkable link for the open section i.e. when use clicks on the left div, right div should open and this should have proper url, so that it can be shared.
How can i achieve this, making urls for open divs? i tried #id=1002 everything worked, but when user copies the url and pastes, java is not able to get the hash tag.

Here is one of doing it. -- Codify and map URLs and then handle them within the javascript.
Let me explain.
Say for example, you have 2 divs -- div1, div2
(1) Codify and create a mapping logic/convention ---
Map the states of divs to URLS --
div1 open div2 close --> URL = mysite.com/page/d1-open/d2-close
div1 open div2 open --> URL = mysite.com/page/d1-open/d2-open
div1 close div2 open --> URL = mysite.com/page/d1-close/d2-open
div1 close div2 close --> URL = mysite.com/page/d1-close/d2-close
and so on
(2) Handle the URL at Server --- Just make send the output of mysite.com/page , ignore the rest
(3) Handle the URL at Client ---
something like this
function handleURL() {
var myURL = window.location.href;
var urlArray = myURL.split("/");
//examine the urlArray and decode the URL code after mysite.com/page/
// and open or close your divs accordingly
// eg: if the url-part after page/ is div1-open/div2-close
// i.e urlArray[2]=div1-open and urlArray[3]=div2-close
// you would know what to do accordingly...
}
The example I explained you, is barely scalable. You will have to manually come up with 2^n mappings for each combination of n divs. However, if really want to make it scalable, you can automate the codification too.
You can assign each state of the page a unique id.
Eg: mysite.com/mypage/page-config-id=abcd1
Then you ask the server the for the div configuration
i.e which div is open which divs are closed etc as a JSON. And then you can use Javascript to parse the JSON and rearrange the page.
You can store the div config --> page-config-id key-value pair in a key-value database on the server in a database or file or noSQL or whatever.

You need URL to right divs content only.
You will have to come up with a uri router that links to the searched resource.
If your search resource is user profile then all user should be accessible via some uri like /user/:userid.
Suppose the search is for a person named z.Your left div will have all profiles with name z. Clicking on any result item will open that person in detail view, however the URL should be changed using location attribute to /user/z1.
Also you will need to check if the user that is searching for the resource has access level to view that content.

ajax/json/? to query a webpage and return specifc div/p values

I'm trying to find code or a way to process the following:
When you click a button a site it'll go and read specific website link and then return variables that it finds in the remote page.
1) user clicks button
2) query goes to www.whatever.com/myfile.html
3) there is a specific p tag inside a div tag called 'totalamount' = <div id=WTextWrapper><p id="Amount">2,000</p></div> That I want to grab the value of and then display it on my page below the button that I clicked in step 1
I know there is a way to do it, but I have no idea how it's done.

You need to get the source of the html and use regex to extract what you need. You can use file_get_contents() function to get the source html.

Facebook Like button for every item?

I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345

Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"

Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.

Show values in another document controls

I want to show some JavaScript array values in another document Input Boxes. Previously, I was using:
document.getElementByID('....').value = ....
Now I want to know how to replace the 'document' with another page.
Edited:
My page opens two tables side-by-side. First table contains controls and the second contains and IFrame and inside that frame is enclosed a data-grid. When the user clicks on a row in the grid, results are fetched and I want to show in the controls of table1.

You can use the context of the jQuery method ie the $(..., context) to do this.
$("#someElement", top.document).val($("#someOtherElement").val());
This sets the value of #someElement in the main document, to the value of #someOtherElement in the iframe. Code is supposed to be run from within the iframe, because that's where your button handling is most likely to be.
To go the other way you could use:
$("#someElement", $("#iframeId").contents()).val($("#someOtherElement").val());

In JavaScript the only other documents you can reference are iframes inside the page itself that have the same domain. You could simply do, var iframeDocument = document.getElementById("iframeId").contentWindow.document