logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-04-2012, 12:30 PM   #1
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Question Sliding Box Plugin

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
Crumpy1 is offline   Reply With Quote
Old 09-04-2012, 04:32 PM   #2
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

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...
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 09-05-2012, 10:42 AM   #3
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default

Quote:
Originally Posted by mangofreak View Post
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
HTML Code:
		<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

HTML Code:
<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
Crumpy1 is offline   Reply With Quote
Old 09-05-2012, 12:10 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Do you have all the supporting css and js files in the folders where you say they are?
Thes ones:
HTML Code:
<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/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 09-05-2012, 03:12 PM   #5
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default

Quote:
Originally Posted by gentleone View Post
Do you have all the supporting css and js files in the folders where you say they are?
Thes ones:
HTML Code:
<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
Crumpy1 is offline   Reply With Quote
Old 09-05-2012, 03:23 PM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
HTML Code:
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 09-07-2012, 09:10 AM   #7
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default

Quote:
Originally Posted by gentleone View Post
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.
HTML Code:
<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 is offline   Reply With Quote
Old 09-07-2012, 11:16 AM   #8
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default

Quote:
Originally Posted by Crumpy1 View Post
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
HTML Code:
		<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 is offline   Reply With Quote
Old 09-13-2012, 09:52 AM   #9
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default

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
Crumpy1 is offline   Reply With Quote
Old 09-13-2012, 01:53 PM   #10
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 869
Default

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.
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:03 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com