Slide out menu onlcik only works if border clicekd - Opera 1

[1DMF]

Hi,

I have a JQuery slide out menu which has an onclick event applied to an image ID, it works fine in IE & FF (well there is some funkyness with FF when the animation runs), but in Opera it only works when you click the border of the image, then the menu slides out.

Interestingly it only happens on the first page load, after that you can click anywhere on the image and it works normally?

the page is

http://dance-music.org

The code in question is

HTML

<div id="popout">
    <div id="cap">
        <img id="open"  src="/images/slide-button.gif" title="Click for slide out menu" alt="Click for slide out menu" />
    </div>
    <div id="adbox">
<!-- Slide out menu content not included -->
    </div>
</div>

CSS

#popout {
    font-size:.8em;
    float:left;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 100;
	overflow: hidden; 
	margin-top: 175px;
	margin-left: 40px;	
    height: 140px; 
    padding-right:1px;
	}
	
#cap {
	width: 28px;
	height: 137px;
	position: relative;
	left: 0;
	z-index: 102; 
	border:none;
	}
		
#cap img {	 
    border-top:1px dashed #01a9c0;	
    border-right:1px dashed #01a9c0;
    border-bottom:1px dashed #01a9c0;
    border-left : none;
	cursor:pointer;    
	}		
	
	
		
#adbox {
	background-image:url('/images/background.gif');
	background-position:top left;
    background-repeat:repeat-y;
    position:absolute;
    border-top:1px dashed #01a9c0;
    border-bottom:1px dashed #01a9c0;  
    border-right:1px dashed #01a9c0;    
	left: 28px;
	top:0;
	z-index: 101; 
	margin-left: -510px;	
	height: 137px;	
	}

JavaScript

   function openAd() {
      $(popOut).width(adWidth+"px");
      $(adBox).animate({marginLeft: "0"},1200)
      isExtended = 1;  
      document.getElementById('open').src = '/images/slide-button-active.gif';    
   }

   function closeAd() {
      $(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
         function(){ $(popOut).width($("#cap").width() + "px"); }        
      );
      isExtended = 0;     
       document.getElementById('open').src = '/images/slide-button.gif';
   }


$("#open").click(function() {
      if(isExtended == 0){
        openAd();
      }
      else {
        closeAd();
      }
      
       createCookie('SB',isExtended,1);      
      
        return false; 
   });

Your help is appreciated.





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

Well the validator comes back with 13 errors, Including several repeated ID's.. And Firefox is barfing back a slew of CSS errors, and warnings. You have values that don't exist for a particular property, selectors that don't exist in your document etc..

There's so many things going on there its hard to say what may be affecting something and what isn't.

I'd go in and try to fix all those things, if only to rule out the possibility that any of them may be causing the issue.

For reference It did work in IE, but id didn't in either FF nor Chrome.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

Thanks for the reply.

I can't seemt to fix some errors as they appear to be facebook & google. - how do you use the plugins and validate the code?

Some FF console errors seem to point to CSS attributes that come with the 'anything slider' which seem to be CSS3, why does FF think it's invalid?

What version of FF are you using, as the slide out menu still works for me in FF 3.5.8, if a little funky.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[1DMF]

I've also just installed Chrome and it seems to work fine for me in that also?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[1DMF]

I also just upgraded my FF to v5, didn't realise I was using an old one, but all looks fine in FF, even the funkiness has gone away.

So it just seems to be Opera I am having the problem with?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

I'm using Firefox 5.0. The slider doesn't work for me because I have AdBlock enabled. Once I disabled it, the slider moved correctly. Same thing with Chrome.

Chrome is 13.0.782.112 m

and

IE8

As for Validating, I use the W3C Markup Vaidation Service.

http://validator.w3.org/

And for FF, just the Error Console. It list
s CSS errors, including invalid values and other less important warnings.








----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

Thanks Phil,

What's AdBlock? Does that turn off JQuery? or Javascript in general?

i assume it is meant to stop pop-up advertising , but is seems to be blocking legitimate JS framework technologies that are triggered 'onclick'?

Is this an issue, how would I resolve it, or is that just how AdBlock works?

I have validated with w3c validator and the only errors it is showing me is facebook and google 'bespoke' tag errors, which i am unsure how I can posibly validate the page when facebook and google use their own non-valid markup?

I've tried wrapping them in comment tags but that doesn't work, I guess it stops the facebook & google JS from seeing the tags as part of the DOM.

I'll re-look at the FF error console tonight regarding the CSS errors, now I have upgraded FF.

It's always a steep curve when trying to learn and implement a new framework!

Again thanks for your help thus far!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

AdBlock is a plugin available for browsers that yes stops advertisements from showing. It doesn't disable JQuery Javascript or legitimate frameworks, it hides elements it deems are ads. In your case it finds the "ad" key word that is in the ID of your slide out DIV "adbox". Without the div the slider has nothing to slide out.

If at all possibly change the name of your div, and the references to it to something that does not contain the word "ad" in its ID.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

Hi Phil,

I've renamed the slide out menu, so hopefully the ad blocker won't be an issue anymore. Thanks for pointing it out.

I've also added a bit of code so it only appears when the page loads, as it doesn't work until the page has fully loaded anyway!

As for the errors, I removed all code so the only errors were facebook but still the menu won't work in Opera?

Some errors form FF are because it doesn't understand the Google canonical link tag which is making it report some funky errors on imaginary lines of code that doesn't exist, so like the facebook errors, unavoidable really!

I'm at a loss why only clicking the border makes it work in Opera for first click, but then fine every other, any ideas?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

After digging for a while, I can find no in code reason for the behavior in Opera now.

Seems like it somehow doesn't like the first loading of the slider.

Other than using a different slider, I see no way around this. More so considering it works correctly in every other browser.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

Thanks Phil, I really appreciate the time you have taken to help out.

Glad at least it isn't me doing something stupid or an obvious coding error.

Though it does make the person who wrote that hoax newspaper aticle stating that those who don't use Opera are retarded look like the moron

Though perhaps it was a PR stunt by Opera that has backfired or maybe it was deliberate miss-information by a competitor?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[vacunita]

OPera is pushing to get break into the browser market very hard. Its one of the principal options in many mobile platforms, however for desktop versions its dead last in usage statistics.
Heck people use IE6 almost as much as they use Opera.

That was either a very bias opinion from the writer or a way for Opera to garner new users.

Still with as little as 2.3% of all internet users actually using Opera its not something you should worry to much about.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[1DMF]

Just thought I'd post back as I emailed those nice people over at the validator.w3.org regarding getting a valid way of using social media plugins.

Here is the reply I received which is working great....

Hello Craig,

After some digging and hacking, I found this:

* Standard Facebook button with faces:
<object data="

http://www.facebook.com/plugins/like.php?href=YOUR_URL"

style="border:none; width:450px; height:80px"></object>

* Standard Facebook button without faces:
<object data="

http://www.facebook.com/plugins/like.php?href=YOUR_URL&amp;show_faces=false"

style="border:none; width:450px; height:35px"></object>

* Small Facebook button:
<object data="

http://www.facebook.com/plugins/like.php?href=YOUR_URL&amp;layout=button_count"

style="border:none; width:150px; height:20px"></object>

* Standard Google +1 without count:
<object data="

https://plusone.google.com/u/0/_/+1...p;size=standard&amp;count=false&amp;hl=en-US"

style="border:none; width:38px; height:24px;"></object>

* Standard Google +1 with count:
<object data="

https://plusone.google.com/u/0/_/+1...mp;size=standard&amp;count=true&amp;hl=en-US"

style="border:none; width:106px; height:24px;"></object>

Hopefully, with those examples you’ll be able to do what you want. They're all valid HTML4/XHTML1 Strict.

Note that the above code for Google +1 isn’t officially supported by Google and thus may break at any time. The Facebook code should be fine, since it doesn’t differ much from the Facebook-supported <iframe> Like buttons.

If anyone wants to post this code somewhere, feel free to do so but please quote my name.

Regards,

Etienne Miret

Note: now I have a validated X/HTML 1.0 strict page, Opera still doesn't work properly!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts