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

Display loading icon when transitioning between divs

I have a form, that when the "Next" button is clicked, a new div appears in place of the old one with this code:
function showDiv() {
document.getElementById('2').style.display="block";
document.getElementById('1').style.display="none";
}
I am then, once the form is submitted, sending my data to a server so that it is emailed to me. The problem is that the previous action, the transition between divs after the button click, is being performed far too quickly. People have told me that it would look a lot better with some sort of transition or a quick loading icon, and that it doesn't look authentic.
Is there any way to have my second div "slide" into the position of the new one? Or some sort of transition? Keep in mind, this is just switching two divs out for one another. No actual data is being processed yet, and no new page is being loaded. Or is there any way to create a loading icon on this action to last for 1second?
Thank you for your help.

Try this
// send data
// show loading gif
setTimeout(function () {
// hide loading gif
// show other div
}, 2000);
You get a 2 second delay this way. Hope it helps.

I assume you're open to using jQuery based on your tags. jQuery offers a number of ways to animate changes to divs. .animate() provides a way to do custom animations, or your can use one of the provided options. In your case, perhaps something like .fadeToggle() would work?
Detailed information here: https://api.jquery.com/category/effects/

Modifying a page with Ids

I'm trying to build something similar to this signup form.
Basically when you go through the steps, the whole page changes (probably just a div that disapears and another one that appears instead).
The problem is I can't seem to figure out what they are using to be able to change the whole page AND the url. What I mean by that is I can easily hide an div and make another one appear with javascript but that won't give me the URL effect I am looking for as I want the user to be able to use the back/forward buttons to navigate back and forth through the steps.
Any idea what external technologies they might be using or if it is simply something totally custom as their script custom form attribute suggest it (data-step) :
First step :
<form id="signup_form" class="fs_split_flex_wrapper" data-step="email">
Second step :
<form id="signup_form" class="fs_split_flex_wrapper" data-step="email">

Take a look at the History API in JS:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
Quote:
"Suppose http://mozilla.org/foo.html executes the following JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists."

Can a URL activate several scripts?

Is it possible to alter the url of a webpage so that it will activate specific click-activated features on the webpage without the user having to do the clicking?
To better illustrate my question I made this fiddle.
The page loads with a red box with information in it. The user can click the box once to see new information. They can click it again to see a third piece of information.
I would like to have urls that load the page with specific information showing. For example, if the main url for my page is http://www.mypage.com, then I would like to have urls http://www.mypage.com/#info2 and http://www.mypage.com/#info3 so that when the user enters the info2 (respectively, info3) url, the page loads with the second (respectively, third) piece of information showing.
Remarks: I have searched some other questions about activating scripts with hashtags, but have not found something I can understand or implement into what I want to do. In particular, I need my hashtag urls to be able to implement a sequence of several actions (e.g. two clicks to get info3 in the above example).
Remark 2: I am open to other solutions too. I just need someone to explain how to accomplish what I am trying to do.

You could use this after you define your click handlers.
if (window.location.hash == '#1'){
$("#info1").click();
}
if (window.location.hash == '#2'){
$("#info1").click();
$("#info2").click();
}

Not sure if any of this works -- I didn't devote much time on it, given the state of the question, but consider:
var hash_page = (window.location.hash+'').replace(/^#/,''); // get hash and parse
var page_number = hash_page.match(/\w+?(\d+)/)[1] || 1; // get the number
var next_page = page_number + 1; // get next number
$('#info'+page_number).click(function(){
window.location.hash = 'info' + next_page;
});

Assuming that your red box is a div like this:
<div class="redbox">...</div>
and that you have three blocks within it (info 1, 2, and 3):
<div class="redbox">
<div class="info1">...</div>
<div class="info2">...</div>
<div class="info3">...</div>
</div>
With jQuery you could do something simple like this:
jQuery(".redbox").click(function()
{
if(jQuery(".redbox .info3").is(":visible"))
{
return; // all done already
}
if(jQuery(".redbox .info2").is(":visible"))
{
jQuery(".redbox .info3").show();
return;
}
jQuery(".redbox .info2").show();
});
I'm not too sure why you'd like that in the URI. The only reason for such would be in case the user comes back to that same place and you'd want them to see the page in the same state. If that is important, then yes, you should use the window.location.hash to change the URI. That way, if the user comes back you can test the hash and setup the status as required on load. However, note that the hash does not get sent to the server. It is only a client thing.
My solution supposes that info2 and info3 are already loaded. It is also possible to use the load() function to load them dynamically. It depends on their size and whether you do or do not want that information to be visible when the user does "Show Source".
There is the reason why some systems use the "hashbang" feature in their website:
https://developers.google.com/webmasters/ajax-crawling/
Google, at some point, said they would drop that functionality, but it looks like they have not done so and actually continue to encourage people to use that methodology. Twitter has been using it for a while, but from what I can see they don't use it anymore.

How to automatically render some default content in ember.js?

I'm working on my first Ember.js project and I've to deal with the current problem:
I have a "press" page which has more contents. In ember, there are two routes - let's call it "abouts" for whole page and "about" for each content on a page. Basically, there are (currently) 7 pictures/items with titles etc. When you click on each of those, clicked picture/press gets rendered and opened. This all works perfectly.
What I want to do is - when "abouts" page gets opened, I want to automatically render latest content (right now, nothing gets rendered until you click on an image). One known solution to do that is to pass an additional argument (id) in {{linkTo}} (which is connected to the menu item) in my view, like this:
{{#linkTo 'about' 6 title='Press'}}Press{{/linkTo}}
This works, but it's not dynamic because id is hardcoded. What I want is to dynamically pass the length of "about" items minus one (in my case 7, but it will grow). Is there any way to get length of items "about" items? Maybe in ApplicationRoute or somehow?
Or do you maybe have any other idea of how to solve this? Simply, how to render some content by default?
I'm also attaching two image, to maybe be more clear about what I want to do.

I've solved this a little bit different. Here's the solution.
With {{#linkTo}}, I've generated link to root page, like this:
{{#linkTo 'abouts' title='Press'}}Press{{/linkTo}}
In AboutsRoute, I've added redirection which is performed immediately. It looks something like this.
App.AboutsRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('about');
},
afterModel: function(abouts, transition) {
this.transitionTo('about', abouts.get('length'));
}
});