Hi Folks

 

I'm building a small fashion labels site, beta here:

http://fourbob.com/SART2/01-silk-georgette-printed-shirt.html

 

Pretty much done only to discover that the html/css gallery ive used, borrowed from here:

http://css3.bradshawenterprises.com/sliding/

 

isn't working on Chrome, Opera or Safari (PC) but is fine on Firefox41 and IE11.

 

My suspicion is it's something to do with .js but I'm starting to stray out of my depth.

 

Any one any ideas please?

 

Note the original gallery is fine in the browsers I've mentioned

 

tks in advance

Bob

I'm getting an error in the console "Uncaught ReferenceError: $ is not defined"

 

Basically you are calling jQuery but it hasn't been defined by that point on the page. It is relating to this code that calls the slide

<script>
  $(document).ready(function() {
    $('#slide1_controls').on('click', 'span', function(){
      $("#slide1_images").css("transform","translateX("+$(this).index() * -350+"px)");
      $("#slide1_controls span").removeClass("selected");
      $(this).addClass("selected");
    });
  });
</script>

try moving this to the bottom of the page after you have loaded jQuery

Hi Junior

 

Many tks for yr reply... as suggested ive moved the code to the bottom of the page here

 

http://fourbob.com/SART2/01-silk-georgette-printed-shirt.html

 

but sadly to no effect... still not working on Chrome and Safari (and Opera).

 

But tk u again for taking the trouble to look

 

Kind Rgds Bob

 

 

Not a problem. That error is no more.

 

Interestingly I resized the browser (using chrome) so halved the size so that I could see the site and the console and the gallery then worked.

 

Try adding some console.log() calls to the script and see if it is detecting the clicks once the page has loaded before any resize etc.

 

That said - looking into the way that the page is working. It does fire the JS on load but nothing happens until you resize the browser.

 

Playing around with the inspect element (right click > inspect element) adding a z-index to '#slide1_images img' seems to allow this to work but this would need testing throughout.

Edited October 1, 201510 yr by junior

Yes Junior!!

Now that's really weird... even on pages where i havent moved the <script> as you suggest above if you resize Chrome and then open the browser fully the gallery works, as if the resizing somehow kicks the whole thing off but then a refresh returns the gallery to broke!

Id tried adding a z-index to '#slide1_images img' but no good.

Added

• console.log ( '#slide1_controls was clicked' );

to my <script>

but in truth this is a bit beyond my pay grade so im not altogether sure what im getting in return, however i get this in Firebug:

• 11:26:42.592 #slide1_controls was clicked1 01-silk-georgette-printed-shirt.html:295:4

which I think I understand means its working.

 

Bugger, so close and yet so far. Thank you again for taking the time to look over the problem. A closing thought, the code works fine on the page I lifted it from

 

http://css3.bradshawenterprises.com/sliding/

 

Could it be one the bootstrap files on that page is enabling the galleries functioning on Chrome etc?

 

And again, Big Thanks

Bob

ADDENUM

 

Apologies Junior, scratch this:

 

• A closing thought, the code works fine on the page I lifted it from
• http://css3.bradshaw...es.com/sliding/

 

it doesnt! I'm thinking now that its the version of jquery the site uses that is cauasing problems with Chrome etc I've tried a later version and that just breaks the whole thing.!!

 

Think I'm going to have to start from the beginning with another solution

 

Cheers Bob

In case you drift by Junior - tks for yr help. i ended up replacing the gallery with that looks more elegant so: result! ... albeit one that took a couple of days of fiddling about to get!

 

code eh!

 

tks bob

aye coding who'd do that for a living