javascript for pop-up box has...

User 127801 Photo


Registered User
55 posts

I wanted to go back to your original instructions to start again. There you told me to put all the code in the body. Anyway, I have moved them to the top of the head section immediately underneath my own links to stylesheets and uploaded the page. However, when I click on the video icon I am still getting a full screen YouTube video.
User 187934 Photo


Senior Advisor
20,247 posts
Online Now

Move this to the head of the page also.

<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".youtube cboxElement").colorbox({iframe:true, innerWidth:850, innerHeight:480});

});
</script>

also upload these files.
http://www.uk.digiserve.com/mentor/mino … lorbox.css
http://www.uk.digiserve.com/mentor/mino … olorbox.js
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 127801 Photo


Registered User
55 posts

OK. I put that code in the head, right below the links I also moved there and uploaded it. Still getting the full screen video. It's as if the web page isn't engaging with the colorbox plug-in at all. Just to recap. On the server I am using I have a directory called mentor. Inside that directory I have my various web sites, one of which is minoan.

I created a new folder on my hard disk inside the minoan folder. I named it colorbox. I downloaded the colorbox.zip file. I extracted the contents of the zip file into the colorbox file that I had created. I uploaded the colorbox file to my website and placed it inside the minoan folder which is one of several folders for my different websites on the server. I also have a css folder and a js folder for tooltips inside the minoan folder. The code for the other js plug in isn't present on the test page. However, that plug in was linked to an earlier version of jquery positioned in the js folder so I deleted that file and replaced the link to it in the code I will be using for tooltips with a link to the same source for jquery that you gave me. But as I say that code isn't present on the page we are testing.

Also, in case it matters I am not using html5. I'm using html 4.01 transitional.

I can't think of anything to tell you that might be relevant.
User 187934 Photo


Senior Advisor
20,247 posts
Online Now

The links I provided still don't work so the files aren't in the proper location.
http://www.uk.digiserve.com/mentor/mino … lorbox.css
http://www.uk.digiserve.com/mentor/mino … olorbox.js
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 127801 Photo


Registered User
55 posts

Right we're making progress. They are there now and they appear when you click on the link. This is what I did yesterday when I got one of the five examples working. As you didn't say which css file to put there, I chose the one in example 5. Should I put the other files and folders in example 5 into the same folder or should I leave them where they are? If you try the test page now, you get the box appearing on a full screen black background and the message content failed to load.
User 187934 Photo


Senior Advisor
20,247 posts
Online Now

Change this.
<script>
$(document).ready(function(){
$(".youtube cboxElement").colorbox({iframe:true, innerWidth:850, innerHeight:480});

});
</script>

to this.
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:850, innerHeight:480});

});
</script>

Then make sure inside the colorbox folder you have an images folder. All the images for displaying the styling of the popup should be inside this folder.
Example: this link should work if you get it correct.:)
http://www.uk.digiserve.com/mentor/mino … ntrols.png
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 127801 Photo


Registered User
55 posts

OK It's working. Thank you so much for being so patient and persevering. I really am most grateful.

Ian

User 187934 Photo


Senior Advisor
20,247 posts
Online Now

No problem glad to see it working. Others will find this thread quite educational.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 127801 Photo


Registered User
55 posts

I spoke too soon. I have copied and pasted the code which works on the test page onto two other pages and uploaded them into the same folder on the website and in neither case does the code work. I even downloaded a copy of the test page that is still working on the server and copied and pasted directly from it to make sure I wasn't making any mistakes. I then did it again underneath the original copy and compared them to make sure I hadn't cut the end off by mistake. I can't see any difference between what is on the test page that works and what is on the other two pages that do not work. Any idea why it isn't working on these files. To start with I changed the embed code to the code for the correct video for the new pages. When that didn't work I replaced it with the embed code for the video we have been working with. Every time it loads the full screen video. It obviously isn't connecting to the js or css files but I don't know why.

The pages that aren't working are:

http://www.uk.digiserve.com/mentor/minoan/agphotia.htm
linked to the video we have been using

http://www.uk.digiserve.com/mentor/minoan/chamaizi.htm
linked to its own video.
User 127801 Photo


Registered User
55 posts

Damn. I think I've spotted it. There are three pieces of code on the test page, not two as I had thought. Hold on while I check that out.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.