PDA

View Full Version : Sliding Box Plugin


Crumpy1
09-04-2012, 12:30 PM
Hi All,

I would like to put a box onto my website like the ones found here..

http://buildinternet.com/project/mosaic/1.0/

I have tried to integrate this one but i cannot get it to work. Is there a plugin i can purchase that does all the work for me?

Thanks

mangofreak
09-04-2012, 04:32 PM
How have you tried integrating it? It would help if you post your attempt so others can help. Otherwise is a guessing game. Also, once you solve this one, you'll be much experienced... :)

Crumpy1
09-05-2012, 10:42 AM
How have you tried integrating it? It would help if you post your attempt so others can help. Otherwise is a guessing game. Also, once you solve this one, you'll be much experienced... :)

Ok, I have added the following to the content div
<div class="mosaic-block bar">
<a href="http://buildinternet.com/project/mosaic" target="_blank" class="mosaic-overlay">
<div class="details">
<h4>Mosaic - Sliding Boxes and Captions jQuery Plugin</h4>
<p>by Build Internet</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/></div>
</div>

and the following to the head tag

<link href="Mosaic/css/mosaic.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
<script type="text/javascript">

$(document).ready(function($){

$('.circle').mosaic({
opacity : 0.8 //Opacity for overlay (0-1)
});

$('.fade').mosaic();

$('.bar').mosaic({
animation : 'slide' //fade or slide
});

$('.bar2').mosaic({
animation : 'slide' //fade or slide
});

$('.bar3').mosaic({
animation : 'slide', //fade or slide
anchor_y : 'top' //Vertical anchor position
});

$('.cover').mosaic({
animation : 'slide', //fade or slide
hover_x : '400px' //Horizontal position on hover
});

$('.cover2').mosaic({
animation : 'slide', //fade or slide
anchor_y : 'top', //Vertical anchor position
hover_y : '80px' //Vertical position on hover
});

$('.cover3').mosaic({
animation : 'slide', //fade or slide
hover_x : '400px', //Horizontal position on hover
hover_y : '300px' //Vertical position on hover
});


});

</script>

I am getting an empty black box with the circle loading image going round constantly so far.

Thanks

gentleone
09-05-2012, 12:10 PM
Do you have all the supporting css and js files in the folders where you say they are?
Thes ones:

<link href="Mosaic/css/mosaic.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

It would be much easier for us if you put the page online somewhere. If you can't afford a web host (yet), you can get a dropbox account (the free plan has 5 gig storage). You're then able to upload everything to the public folder in your dropbox which you can share with a link.

Here's an example which loads index.htm from the folder 'test' (w/ sub directories 'css' and 'js') in my public folder.
https://dl.dropbox.com/u/17359641/test/index.htm

You can get dropbox here:
https://www.dropbox.com/

Crumpy1
09-05-2012, 03:12 PM
Do you have all the supporting css and js files in the folders where you say they are?
Thes ones:

<link href="Mosaic/css/mosaic.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

It would be much easier for us if you put the page online somewhere. If you can't afford a web host (yet), you can get a dropbox account (the free plan has 5 gig storage). You're then able to upload everything to the public folder in your dropbox which you can share with a link.

Here's an example which loads index.htm from the folder 'test' (w/ sub directories 'css' and 'js') in my public folder.
https://dl.dropbox.com/u/17359641/test/index.htm

You can get dropbox here:
https://www.dropbox.com/

I have now uploaded the website to the internet as requested. I did make an error with the js files, they were not in the root but in a subfolder called Mosaic, i have amended this in the head and uploaded.

The website can be seen here http://barkers.0catch.com/

If you could help me identify the error and get it working it would be great.

Thanks

gentleone
09-05-2012, 03:23 PM
Please don't use such a crappy free hosting service. Not even for showing us your issue. I get popups all over my screen and the scripts to show these ads are likely going to interfere and give conflicts with your code.
Better to use Dropbox.

Anyways... I had a quick look and I get a 404 error on this js file, so it's not there where you say it is.
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

Crumpy1
09-07-2012, 09:10 AM
Please don't use such a crappy free hosting service. Not even for showing us your issue. I get popups all over my screen and the scripts to show these ads are likely going to interfere and give conflicts with your code.
Better to use Dropbox.

Anyways... I had a quick look and I get a 404 error on this js file, so it's not there where you say it is.
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

Sorry for using this host, i only used it because i already have an account with them.

You were correct, i amended the location and it works ok however the mosaic.css is conflicting with my websites css layout and is causing issues with layout etc. Is there a way of setting the mosaic.css to a specific div only?

Thanks

Crumpy1
09-07-2012, 11:16 AM
Sorry for using this host, i only used it because i already have an account with them.

You were correct, i amended the location and it works ok however the mosaic.css is conflicting with my websites css layout and is causing issues with layout etc. Is there a way of setting the mosaic.css to a specific div only?

Thanks

I have fixed this issue now, the demo example css in the head tag was causing the issues not the mosaic.css
<style type="text/css">

/*Demo Styles*/
body{ background:#e9e8e4 url('img/bg-grid.png');; }
.mosaic-block{ left:50%; top:50%; margin-left:-200px; margin-top:-125px; position:absolute; }
.clearfix{ display: block; height: 0; clear: both; visibility: hidden; }

.details{ margin:15px 20px; }
h4{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%; letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); }
p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#aaa; text-shadow:1px 1px 0 rgb(0,0,0);}
a{ text-decoration:none; }

</style>


I have removed these rules from the html and the text now sits above the image. How do i fix this issue without it affecting the webpage layout? The mosaic is in its own div.

Crumpy1
09-13-2012, 09:52 AM
I have now got the layout correct, however the mosaic.css is messing up the layout for the rest of my pages. I want 3 of these mosaic boxes on my homepage each in their own div called box 1, 2 and 3.

Is there a way of getting mosaic.css to effect only box1,2,3 divs?

Thanks

johnMoss
09-13-2012, 01:53 PM
Yes. Take all the mosaic css scripts and put them in their own css file, perhaps labeling it "mosaic.css". Put a link for this file in the header on the mosaic page, and simply leave that link off all other pages.

Crumpy1
10-05-2012, 12:49 PM
Hi All,

Thanks to everyone's help above I got my 3 boxes working correctly, so firstly thank you to everyone that helped.

I have now come to intergrate another 3 on another page and I get the mosaic 1.0.1.js not on the local disk error.

I saved the mosaic code into my web template which is the same as my working page here http://thebarkercompany.co.uk/index2.html

However this page keeps getting the error.
http://thebarkercompany.co.uk/sizing_guide/

Can anyone please see where i have gone wrong.

Thanks Alot!!

johnMoss
10-05-2012, 12:59 PM
Without checking it I immediately notice you are missing theese two lines:


<link rel="stylesheet" href="ajximagerotator.css" type="text/css" />
<

script src="ajximagerotator.js" type="text/javascript"></script>

Crumpy1
10-05-2012, 01:32 PM
Without checking it I immediately notice you are missing theese two lines:


<link rel="stylesheet" href="ajximagerotator.css" type="text/css" />
<

script src="ajximagerotator.js" type="text/javascript"></script>


Thank you for pointing that out, i have added these now, but these files too get the not on disk error. These two files are in my root folder or htdocs but for some reason the page cannot see them, yet my index2 page which shared this directory does?

Any ideas?

domedia
10-05-2012, 01:40 PM
Look at your page. You have 404 for all your images.

Crumpy1
10-05-2012, 01:49 PM
Look at your page. You have 404 for all your images.

Which image are you referring to?

I have just checked one of the boxes image source http://thebarkercompany.co.uk/Assets/images/Mosaic/coats.jpg and that is found ok.

If i do have any 404 errors i will fix this immediately.

The problem i am having is the loading screen constantly as the js scripts are supposedly not in the file directory but they are and their location is definitely correct.

johnMoss
10-05-2012, 02:19 PM
D found it, your issue is your file paths.

For example you have this as your file path for the first box:
<img src="Assets/images/Mosaic/lead.jpg"/>

I can't quite see your root structure, but have a look at this & verify the path is correct.
Where is this page stored in relation to the image file?

Crumpy1
10-05-2012, 02:28 PM
D found it, your issue is your file paths.

For example you have this as your file path for the first box:
<img src="Assets/images/Mosaic/lead.jpg"/>

I can't quite see your root structure, but have a look at this & verify the path is correct.
Where is this page stored in relation to the image file?

Ok the file location folder for these images files are

htdocs/barkers/Assets/images/Mosaic/lead.jpg

The sizing guide page is called index.html and is located in another folder off the root called sizing_guide

htdocs/barkers/sizing_guide/index.html

These were the same images i used on the homepage (index2.html), i mealy copied the code from it. I have changed the images and used the browse to file option in the code to ensure the location is correct and it is.

All files are from the same folder, below is the location of 1

../Assets/images/size-ferret.jpg

I am still getting the same error.

Hope this makes sense.

Thanks for the help!

johnMoss
10-05-2012, 02:49 PM
Ok, so to retrieve the image, the request has to go "up" one level to get into the assets folder. To travel up one level, you use this: "../"
So:
<img src="../Assets/images/Mosaic/lead.jpg"/>

Crumpy1
10-05-2012, 02:54 PM
Ok, so to retrieve the image, the request has to go "up" one level to get into the assets folder. To travel up one level, you use this: "../"
So:
<img src="../Assets/images/Mosaic/lead.jpg"/>

my images already use the ../, I think :s

../Assets/images/dog.jpg

Can you show me how i would do this image using the go up way you mentioned above?

Also I have noticed that most of the js files are doing the same the mosaic.1.0.1.js thinks this file is in the sizing-guide folder with the page, however this part of the code is locked by my template. How can i unblock the head tag of a template?

Thanks for the patience and support!

Crumpy1
10-05-2012, 02:58 PM
Thanks johnMoss for the help. I added ../ to the location of my mosaic.1.0.1.js file and everything worked.

Many Many Many (x1000) Thank You's!!!!!

johnMoss
10-05-2012, 03:19 PM
You're welcome :)

Also I have noticed that most of the js files are doing the same the mosaic.1.0.1.js thinks this file is in the sizing-guide folder with the page, however this part of the code is locked by my template. How can i unblock the head tag of a template?

You can't, but you don't need to... I suspect what you are seeing is when you have your template master page open you are seeing a different file path which would not work when implemented 'as is' in the child pages.
What you notice though is that DW of course corrects the link path as it should be in those child pages, so no worries...

domedia
10-05-2012, 04:43 PM
Which image are you referring to?
At the time I wrote my reply, there were several 404 responses to the images on http://thebarkercompany.co.uk/index2.html.

Do you know how to use your browser tools to check for this and all other web dev issues on your web site?

Basically that's what we're doing.

Crumpy1
10-08-2012, 08:15 AM
At the time I wrote my reply, there were several 404 responses to the images on http://thebarkercompany.co.uk/index2.html.

Do you know how to use your browser tools to check for this and all other web dev issues on your web site?

Basically that's what we're doing.

No i do not know how to use these tools in the browser, could you provide a link to a resource that explains it please.

Thanks

johnMoss
10-08-2012, 12:58 PM
https://developers.google.com/chrome-developer-tools/

domedia
10-08-2012, 02:38 PM
No i do not know how to use these tools in the browser, could you provide a link to a resource that explains it please.

Thanks

In Internet Explorer and Google Chrome, you just hit F12, and they will pop up.
IE: http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx
Chrome: https://developers.google.com/chrome-developer-tools/

Firefox will have similar tools introduced either in the next version, or version 17. If Firefox is your main browser, then it has an extension called 'Web Developer'.
https://addons.mozilla.org/en-US/firefox/addon/web-developer/

These tools gives you the ability to inspect your code, check for errors, modify HTML/CSS/JS in real time. If you're developing web pages, this should be one of your main tools.

Crumpy1
01-10-2013, 03:35 PM
Im reloading the mosaic for another website and are again encountering glitches, although only 1, which i belive is a css issue somewhere.

Thanks to you guys the intergration of any javascript & jquery plugin has become easy, i understand how and why everything does what it does and have managed to do it numerous times so thanks to all of you for getting me to this stage.

However, I have re-intergrated 3 mosaic boxes to this website https://dl.dropbox.com/u/104598901/Website/index.html

When you hover over it the #111 colour overlay layer behind the text does not appear. I have used the safari inspection tool to see if i can see where the conflict is in the css to no avail.

Can any of you guys see what is causing the overlay to be transparent.

Thanks!!