jQuery Need help with calling specific function from link

[maky357]

Hi there! First of all i want to say HELLO to this community. A lot of good stuff (and people) here Please take my honest apology for bad typing. I wil ltry to be as short as possible.

So i started with some new page and so far everything functionality wise is working nice (i am not bothering with graphic right now, i need functionality at first). For my "Item" page i am using Product Slider similar to that on Apple website. I have used various jQuery tutorials and so far i like functionality and everything is working well on "Item" page (working well on item page...we will get back to this).

You can see some preview here: http://maky.host56.com/item.html

You will see how slider is working, content is sliding when you click on scrollbar and move from catgory1 to category3 etc. Clicking on letters will also move that scrollbar etc.

For Main Menu above i also used Java script and overall i like it. When you hoover over "ITEM-PAGE" menu you will see nice drop down menu with links "Category1, Category2, Category 3. and 4. Try to click on links. Clicking on any of these(category 3 for example) will make scroll bar(and content behind) to move on category which is named in link. Allright everything fine there.
This is what i want after all.
Here is code for slider gallery:

    <script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var container = $('div.sliderGallery');
            var ul = $('ul', container);
            var itemsWidth = ul.innerWidth() - container.outerWidth();
            $('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 500);
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
				
            });
		$(".point-category1").click(function(){
                $('.slider', container).slider("moveTo","30px");
        });
		
		$(".point-category2").click(function(){
                $('.slider', container).slider("moveTo","2280px");
        });
			
		$(".point-category3").click(function(){
                $('.slider', container).slider("moveTo","4160px");
        });

        $(".point-category4").click(function(){
                $('.slider', container).slider("moveTo","5900px");
        });


    };
			
    </script>

To make this working - in java script i added following lines: (for this example i am pointing to category 4 - rest is same anyway)

$(".point-category4").click(function(){
$('.slider', container).slider("moveTo","5900px");
});

And to call it from menu via link in HTML i am using this:

<li><a href="#" class="point-category4" >Category4</a></li>

And i am satisfied with this. My problem (i am sure it is something obvious but...) is that i simply can't get it in next scenario:

Click on "Home" in Main Menu. You will see empty Home page and this is ok. When i am still on Home page how can i call from Main Menu-ItemPage-drop down - Category 4 for example? I am not asking how can i simply call item.html page that is clear, but how can i by clicking (from Home page main menu) on "Category 4" open "Item" page with slider set to Category 4?

Obviously i am interested in same thing for Category 3 and so on but if you can figure for Category 4 and post code i will figure everything else.

I did everything with no success. Anchor obviously won't help in this one (LOL). So i am without any ideas and i am sure that solution is obvious but somehow i am stuck at this..So only thing that is on my mind is that somehow i need to call that specific "$(".point-category4").click(function(){ etc." function while i am still on Home page.

Any kind of help will be greatly appreciated.

p.s. if you want to download source code to look easier at this - here you can do it (only 200kb): http://maky.host56.com/dummy2.zip

Kind regards
Maky

[maky357]

bump

Anyone? Please

[maky357]

weekend bump

Please can anyone help? Does it have anything with sending some string?

[criterion9]

Why wouldn't anchor work? You'll need to append a hash (as in item.html#category=1 or item.html?category=1) to your query string and check for that hash during item.html page load. If it exists and points to a valid category id or whatever make that one visible.

[maky357]

Hi criterion9! Thanks for your kind help. I really appreciate it! I am not at home right now but i'll check this ASAP. I am not sure why anchors won't work but i am aware of that tip, i had that idea, i tested it and it didn't worked at all. Try to download my source(link is provided) and see for yourself.

I will check this anchor idea again for sure as soon as i get home. Maybe i did something wrong or i am not aware of whole anchor possibility
Remember, i want to call it from other page("home" in this example) and when "item-page" is loaded slider should be at category 4 (but i think you already got that well despite my poor typing).

Again thanks for your input

[criterion9]

In order to use it you'll need to append the hash to the link in the navigation from the home page as in <a href="item.html#cat1"> or <a href="item.html?cat1">. Then you'll need to check the document location and parse the query string to work with the variables. Then you'll need to execute the action associated with that category link being clicked.

[maky357]

PM Sent....( i am dumb as hell...)

[criterion9]

I found a quick function:

function getArgs() {
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0,pos);
var value = pairs[i].substring(pos+1);
args[argname] = unescape(value);
}
return args;
}

You can pass your category like:

<a href="item.html?category=4">Category 4</a>

And read it on the items page like:

var args = getArgs();
if(args.category){
//category variable is set
//do your stuff here
}

[maky357]

Awesome!! I'll try this today. I'll update this thread with results..

[maky357]

update:

Your solution is working flawless but i can't utilize it fully due the lack of my JavaScript experience.

For example:
Just like you said i am passing category from home.html inside link:
<a href="item.html?category=4">Category 4</a>
And on item-page i have your JavaScript ready to catch string and to write txt(i need link activator though) if string is there.

var args = getArgs();
if(args.category=4){
document.write('TXT writting is doing ok');
//category variable is set
//do your stuff here
}

And that is working. If i am on home page and i click on category 4 link from menu it will open item page and it will write "TXT writting is doing ok" which is proof that everything went fine and string is received etc.

But i want to activate slider so i did it this way:

var args = getArgs();
if(args.category=4){
document.getElementById("category4").focus();
//category variable is set
//do your stuff here
}

and i simply added ID (still in item.html) to my already existed and working html - like this:
<li><a id="category4" href="#" class="category4" >Category4</a></li>

(in case you wonder why class name must be there, it's there to enable slider to work from main menu)

And then...it's not working Should i try with something different then "document.getElementById" ?

I also tested it with anchor in a way:
var args = getArgs();
if(args.category=4){
function load()
{
document.location.hash="category4";
}
//category variable is set
//do your stuff here
}
but with no success..

I am close to solution. I am suspecting that i should use something different then getElementById or i am using getElementById wrong?

Thanks in advance!!

[criterion9]

You have this in a previous post as what happens when you click category 4:

$(".point-category4").click(function(){
$('.slider', container).slider("moveTo","5900px");
});

Would you not just use:

$('.slider', container).slider("moveTo","5900px");

to move your slider to category 4?

[maky357]

Hi criterion9! I did exactly how you told me but it's not moving. Not at all
Simply it won't work. Like i did not do anything at all. string is passed and javascript grabbed it(i am sure since code is right and some other function will work) but nothing is happening.

I am begging you. Try to download my source and see for yourself. Follow exact steps you told me and then try to resolve this mystery. My javascript knowledge is way bellow this. I am hitting wall with my head

[criterion9]

Try adding an alert to see that it is grabbing the query string. Also are you using an onload handler so the DOM is ready before you try to move something that may or may not exist yet?

[criterion9]

I'm curious. did using an onload handler fix the problem?

[maky357]

Hi criterion 9. Sorry for my late reply. I have been off my home place for two days. No, handler did not fix anything. I did some rearranging but still nothing

I am telling you i am sure i am doing something wrong. I mean even with your directions, my lack of experience can cause some errors. Could you try it since i am sure you would do it by now even in some simpler way. I have tendency to complicate things LOL