PDA

View Full Version : 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



$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:


<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:


$("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:


<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:



<?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.


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

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


<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


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:


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:


<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.

th3d4v1d
03-21-2012, 04:12 PM
Thank you much. It works. I'm beginning to work with JavaScript and am not familiar with the syntax yet, though it was dumb of me not thinking about the Else If.

Am I correct that I can share this script here in the Forum for other people?

jscheuer1
03-21-2012, 06:01 PM
Sure. However, from what I can tell - at least the way you have it setup, the accordion itself has problems in Opera. Where did you get it? I could test their demo if they have one in Opera. And the vertical text elements are not showing up in IE 9, although the rest of it all works in that browser, probably in at least some earlier IE as well.

The problem appears to be (in IE), the writing-mode style property and/or other styles associated with the vertical text p elements and their parents. The easiest solution might be to use a conditional stylesheet for IE and substitute images for that browser. IE does have a proprietary -ms-writing-mode property that's supposed to work like writing-mode, but simply substituting that didn't seem to fix things, at least not in its developer tools. Actual results might vary for something like that.

th3d4v1d
04-26-2012, 12:13 PM
Hey, sorry for the late reply.

This accordion is a Wordpress plugin called WP Accordion Slider. In IE9 the text elements aren't showing up but they're there (just need to position them in a separate stylesheet).

I'm not aware of any issues this slider has in Opera. Sometimes it does bug and all the slides get overlapped and go all to the side, but I refresh the page and it works again. Not sure what is it :S