How to trigger click on css child (envolving ID)

**th3d4v1d** · 03-19-2012, 10:28 PM

Hi.

I'm working on a usability issue on a website. I have a jquery accordion slider, each slide has a link to a category. Now what happens is that when I go to the category page by clicking on a slider, when the page loads, the sliders always opens the first slide. For example, if I click on the third slide, I would like that slide to be open when the page loads.

This is similar to the :current I believe. I think to solve what I need I must trigger a click on the third slide that third slide page opens.

I know I need a reference for a condition, so I have ID'd my body through this php code were it gets the page name from the url into variable $page and then into do body's ID:

PHP Code:


<?php 







    $page = $_SERVER['REQUEST_URI']; 







    $page = str_replace("/","",$page); 







    $page = str_replace(".php","",$page); 







    $page = str_replace("?s=","",$page); 







    $page = $page ? $page : 'default' 







?> 















<body id="<?php echo $page ?>">

Now I've been trying through Javascript to get the variable from php and trigger a click on the slide of the category it is opening:

HTML Code:

<script type="text/javascript"> 



var bodyid = "<? $page ?>"; 

if (bodyid == "energy") { 

$("document").ready(function() { 
    setTimeout(function() { 
        $("ul#accordion li:second-child).trigger('click'); 
    },10); 
}); 

} 

</script>

This is not working and I don't really know what's wrong and how to solve or search for help.

Does anyone understand what I'm trying to do here? Thank you.

**jscheuer1** · 03-20-2012, 03:23 AM

There is no :second-child selector. You can use the :nth-child(n) selector and you need a closing quote at the end of the selector, so:

Code:

$("ul#accordion li:nth-child(2)").trigger('click');

That will trigger the click on the li that's the second child of the ul. If you are looking for a different element, let me know.

And further, since li elements have no native click action, in order for this to do anything, script code must have previously assigned one to this particular li.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**th3d4v1d** · 03-20-2012, 10:44 PM

jscheuer1, thank you for correcting me.

Could you explain what the script code must assign? It must assign a native click?

What would I search for if I tried to solve this by myself? Does it have to do with a onClick Event?

http(double_dot)//lusotrade(dot)com

**jscheuer1** · 03-21-2012, 02:59 AM

Well, obviously you want to trigger the click of something. If the li has a click event associated with it fine, it will be triggered. It must have been assigned by javascript. So unless you were looking for the wrong element, everything should be fine. But if what you really want to trigger is a click on an a tag that's in the li, then that might or might not work. Even if it does work, it might not in some browsers.

The very fact that you were trying to trigger the click of the li implies that it has one assigned already though, unless you only thought it did.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**th3d4v1d** · 03-21-2012, 10:38 AM

I did include the link in my last reply: http://lusotrade.com

The li doesn't have an "a tag". It just makes the slider open. That slider has an "a tag" on the image that slides in but I don't want to trigger a click there.

**jscheuer1** · 03-21-2012, 10:42 AM

Well, looks like it's working, right?

**th3d4v1d** · 03-21-2012, 11:15 AM

You see it working?

It's not working in any of my browsers...

**jscheuer1** · 03-21-2012, 02:26 PM

Sorrry, I spoke too soon. When I look at the source code though - say after clicking on the menu (not the accordion) to select Industry, this is what I see:

Code:

<script type="text/javascript">



var bodyid = "";


if (bodyid == "agriculture") {

$("document").ready(function() { 
    setTimeout(function() { 
        $("ul#accordion li:nth-child(2)").trigger('click');
    },10); 
}); 

}

if (bodyid == "ene . . .

That means that:

Originally Posted by th3d4v1d

PHP Code:


<?php 







    $page = $_SERVER['REQUEST_URI']; 







    $page = str_replace("/","",$page); 







    $page = str_replace(".php","",$page); 







    $page = str_replace("?s=","",$page); 







    $page = $page ? $page : 'default' 







?> 















<body id="<?php echo $page ?>">

Isn't doing what you expect it to be doing. So of course the javascript isn't going to do anything.

I think the replacements might be off. The syntax is, there are missing ; terminators on the default line and on the echo line. There could also be other PHP problems, I'm not very adept at PHP.

**th3d4v1d** · 03-21-2012, 03:06 PM

So javascript isn't pulling the string from the php $page variable. However the lines you say that might not be working are indeed working, at least within php and html. My body is getting an idea for each menu item.

PHP Code:


<body id="<?php echo $page ?>">

So I changed my variable from javascript to a less confusing one.

HTML Code:

<script type="text/javascript">



var slider_id = "<? $page ?>";


if (slider_id == "energy") {

$("document").ready(function() { 
    setTimeout(function() { 
        $("ul#accordion li:nth-child(2)").trigger('click');
    },10); 
}); 

</script>
}

My html body is getting an idea. But the slider_id isn't. So that means it's something in between that isn't working.

I would suggest that

HTML Code:

var slider_id = "<? $page ?>";

isn't working?

**jscheuer1** · 03-21-2012, 03:49 PM

That's basically what I said only it's the PHP part. Now the source code has:

Code:

var slider_id = "";

You see, when you view the source code, you see only what the server is sending to the browser, only the effect of the PHP code, which in this case is an empty string. With only that to work with, the javascript cannot do anything.

The title of the page has the information we need. We should be able to use the title and have javascript take it from there without the tortured PHP (get rid of the PHP part completely). Your other code in that section is unnecessarily repetitive. So I'd try replacing it all with:

Code:

<script type="text/javascript">

jQuery(function($){ // shorthand for document ready
	var slider_id = document.title.replace(/ .*$/, '').toLowerCase();
	setTimeout(function(){
		if(slider_id == "agriculture") {return;}
		else if(slider_id == "energy") {$("ul#accordion li:nth-child(2)").trigger('click');}
		else if(slider_id == "industry") {$("ul#accordion li:nth-child(3)").trigger('click');}
		else if(slider_id == "investment") {$("ul#accordion li:nth-child(4)").trigger('click');}
		else if(slider_id == "international") {$("ul#accordion li:nth-child(5)").trigger('click');}
		else if(slider_id == "business") {$("ul#accordion li:nth-child(6)").trigger('click');}		
	}, 10);
});

</script>

Works in a simulation here.

Thread: How to trigger click on css child (envolving ID)

Thread Tools

Search Thread

How to trigger click on css child (envolving ID)

Bookmarks

Bookmarks

Posting Permissions