cotonti.com : help please

ez

Mo, 22 Nov 2010 21:44:53 -0000

you are welcome...

Kingsley

Mo, 22 Nov 2010 21:28:56 -0000

Man, I lave you...

It works wouldn't have found that on my own.. Although now I learned something new :p

ez

Mo, 22 Nov 2010 14:35:59 -0000

AHHHH maybe my mistake... (i think i see it now)


            Contact Us
            F.A.Q
            Recruitement
            =XE= Ranks

this span is also triggered by your code... so it appends a span, but there was already one there !

Try this my friend:


$(document).ready(function(){

	$("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

	$("ul.topnav li span.dropdownclicker").click(function() { //When trigger is clicked...

		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});
});

You need to change some css to:

ul.topnav li span.dropdownclicker { /*--Drop down trigger styles--*/
	width: 13px;
	height: 35px;
	float: left;
	background: url(img/subnav_btn.gif) no-repeat center top;

This is just a quick answer, but I think you see what I mean.. and have pointed you in the good direction

greetings,

ez

Added 9 minutes later:

Maybe it could even be simpler....

leave your JS code like it was..
just remove the 'extra' span from the HTML..

Kingsley

Mo, 22 Nov 2010 08:58:23 -0000

only get one popup screen..

GHengeveld

Mo, 22 Nov 2010 06:44:41 -0000

If you add an

alert("triggered...");

in the place where the arrow is placed, you can check if it's fired twice. You will get 2 alert popups in that case. Placing an alert is a common way to help debug JS code.

Kingsley

Mo, 22 Nov 2010 05:45:19 -0000

huh, add an alert? what do you mean..

ez

Mo, 22 Nov 2010 01:39:46 -0000

Looks almost like the onready function gets fired twice ????
add an alert to see if so.

Kingsley

Mo, 22 Nov 2010 01:24:49 -0000

http://www.x-ecutionerz.com/newsite/index.php

I've made this new skin with, which has one error that is quite persistent, in ofcourse, IE.

In opera, ff en chrome it works like a charm, but IE displays the dropbox arrow twice.. :S
I've been through the code dozens of time, and now I think I just don't see it anymore.

$(document).ready(function(){

	$("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

	$("ul.topnav li span").click(function() { //When trigger is clicked...

		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

ul.topnav {
	list-style: none;
	padding: 0 20px;
	margin: 0;
	float: left;
	width: 1100px;
	background: #222;
	font-size: 12px;
	background: url(img/topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
    
}
ul.topnav li a{
	padding: 10px 5px;
	color: #bfbfbf;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(img/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 13px;
	height: 35px;
	float: left;
	background: url(img/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 0px solid #222222;   
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
    border: 1px solid #222222;   
}


html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(img/dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(img/dropdown_linkbg.gif) no-repeat 10px center;


   
    Home
 | 
Forums

        Intelligence
        

            Contact Us
            F.A.Q
            Recruitement
            =XE= Ranks
        

Members
 | 
 
        Media
        

            Image Gallery
            Clan Gallery
            Art & images
        

    
        Video
        

            Clan Videos
            Game Trailer
            Movie Trailers
        

Links
 | 
Servers

        Roster
        

            Games
            Squads
            Matches
            Challenge Us
            Sign Up
        



        Stats
        

            Bad Company 2
            CoD: Black Ops
        

     | 
    Support Us

it probably is something very small and stupid, but I just don't see it anymore..