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

Redirect to particular tab on a page from a different page

I have 2 pages and in page 2 we have dynamically tabs created . In page 1 I have a button and when I click that button I open a form and fill the details and select under which tab i have to show this information (Usually we select tabs in page 2) .
Now once i click on submit button in page 1, I am able to navigate to page 2. But I also want to navigate to tab level. In short I have to navigate to page 2 (which ever tab i selected earlier). How to do this in angular JS.
For naviagating I am using window.location("/page2)".
My code is
<div ng-repeat="t in tdata" class="time-tab-adspace " ng-class="{'tab-align-center':tdata.length==2}">
<a class="nav-people-tab text-hover" data-toggle="tab" ng-class="{'nav-people-tab-hover in': 'ticket'+seltab=='ticket'+t.code}" ng-click="selecttab(t)" data-target="#ticket{{$index}}">{{t.name}}
</a>
</div>
A piece of working snippet would be appreciated greatly.
Thanks in advance

Tell the page which tab has to be activated. This can be done via $localStorage if you don't want to add search parameters to the url.
In your function which calls the page2:
$localStorage.nextTab = 2;
Now in your page2, you can access this tab number and set the tab at the startup.
$scope.setTab($localStorage.nextTab);
See ng-storage
You can use window.localStorage if you need to do it in plain JS

One way to do is to set the selected tab as query string parameter. So you will have for navigation:
window.location("/page2?tab=2)"
And in the controller check for the query string tab value and activate the corresponding tab.

What's jQuery Method to 'Link' Data Between 2 Tabs?

I have a shopping cart page which contains 2 tabs.
tab #1 : user can manupulate it's content and rows. add quantity, subtract quantity or even remove the item.
tab #2 : confirm and show all products what user just ordered in tab #1.
now, the problem is, what's jQuery method to 'link' (or bind, or copy. I'm not sure what's the perfect word to describe it.) tab #1 and tab #2, so that when user manipulates data in tab #1, tab #2 will automatically shows it. thank you.

You need to bind first tabs fields change event to a method to retrieve form contents and update the second tabs fields like this:
$('#myFirstTabTextInputId').on('change', function (event){
$('#mySecondTabTextInputId').val($(this).val());
});
this code will copy your first tabs input text to second tab input when it's changed.

Remove page from JQuery Mobile history such that 'Back' button bypasses it

I've looked through the jQuery Mobile documentation to no avail, so hopefully someone here has solved what I so far haven't found a way to.
I have a jquery mobile page, served in the usual way (call it 'item display'). It contains info about a particular item. There is a button on this page that takes the user to a page in which he/she can take notes (essentially a big textarea) on the item displayed. Clicking 'save' on the notes page POSTs and redirects back to the item display page.
My issue is that once the notes have been saved, I would like the 'Back' button on the item display page to link back to the page the user was at before first visiting the item display page, NOT the default behaviour of taking the user back to the notes page (since it was technically the last page the user was on).
So, current behaviour:
item list page -> item display page -> click 'Edit Notes on item' -> notes page -> click 'Save' -> item display page -> click 'Back' -> notes page.
I want to replace the last step with clicking 'Back' to take the user to the item list page.
Any such luck? Thanks for any and all guidance you can provide

You can change pages without keeping them in browser history like so:
$.mobile.changePage('#page', {reverse: false, changeHash: false});
this is based on this answer: Jquery mobile, remove previous page

I have been in the same issue as you and I have created an approach, the only one that worked. If someone knows something better, it would be greatly helpful! So, let me explain how to solve (it is a bit complicated, but worked for me).
You will need to override the back button to roll back the history by X pages in the html you want, for example:
$(document).ready(function() {
$('[data-rel=back]').click(function() {
window.history.go(-4);
return false;
});
});
But, the 4 is actually a navigation counter variable in session.
If you use jsf, it would be like this:
window.history.go(-#{mySessionManagedBean.navigationCounter});
Also, you need to initialize and increment this each page change.
If you use jsf, it would be like this:
<h:commandButton ...>
<f:setPropertyActionListener target="#{mySessionManagedBean.navigationCounter}" value="#{mySessionManagedBean.navigationCounter + 1}" />
</h:commandButton>

Mootools: Open a parent/section accordion panel if its child item is active

I have 2 Mootools challenges/issues with this site (Built with Joomla) and I would appreciate it if someone can help me out Link to the site.
As you can see, I have 4 accordion items that include some child menu items. The main issue is that the first one is opened by default regardless of which other items have been clicked and are active. For example, the aforementioned link is under the WEBBDesign accordion. What I need to accomplish is to basically check if the child link is active and open the respective parent panel.
The second issue is that I want to make the top menu item (Tjänster) active if any of the children in the accordion are active.
Thank you in advance.

I notice your call to create the accordion menu has
display: 0,
This option opens the menu with the specified index.
You need to have each page declare where it is in the accordion menu with a snippet of javascript:
<script>
mymenupos = n;
</script>
and then later pass that the Fx.accordion constructor:
var myAccordion = new Fx.Accordion($('ja-accordion104'), $$('.ja-accordion-title104'), $$('.ja-accordion-content104'), {
alwaysHide: true,
display: mymenupos,
// etc
Consider using show instead of display, as according to the docs, show creates the menu with the item already showing, rather than animating to show it, which would be redundant in this case.