Conflitto due script jQuery

elias90 · 18 Ottobre 2011

Ciao ragazzi ho un problema, sto sviluppando un sito e sono all'inizio. Ho un menÃ¹ e una galleria con script jQuery, solo che vanno in conflitto.

Script Menu

 <script type="text/javascript"> 
	$(document).ready(function(){					
		// Create the Menu
		 $.noConflict();
		 jQuery('#menu').slidermenu();						
	});
 </script>

Script Galleria

<script type="text/javascript"> 

	$(document).ready(function(){ 
		$("#DP_slide").dp360slider({
			speed: 'slow', 
			easing: ''
		})  
	})
</script>

Solo che il 2 script non funziona, ma se cancello "momentaneamente" il primo allora il 2 parte a funzionare, come faccio per risolvere questo piccolo problema?

Grazie in anticipo!

pix · 18 Ottobre 2011

try this.....

<script type="text/javascript"> 
$(document).ready(function(){					
	// Create the Menu
	 $.noConflict();
	 jQuery('#menu').slidermenu();						

	$("#DP_slide").dp360slider({
		speed: 'slow', 
		easing: ''
	})  
})
</script>

elias90 · 18 Ottobre 2011

try this.....

<script type="text/javascript"> 
$(document).ready(function(){					
	// Create the Menu
	 $.noConflict();
	 jQuery('#menu').slidermenu();						

	$("#DP_slide").dp360slider({
		speed: 'slow', 
		easing: ''
	})  
})
</script>

MMMhh.. amico mio! grazie ma non funziona!

pix · 18 Ottobre 2011

MMMhh.. amico mio! grazie ma non funziona!

che ti dice la console javascript?

elias90 · 18 Ottobre 2011

Failed to load resource

example1.html:56Uncaught TypeError: Object [object Object] has no method 'dp360slider'

pix · 18 Ottobre 2011

Failed to load resource

example1.html:56Uncaught TypeError: Object [object Object] has no method 'dp360slider'

Ã¨ strano perchÃ¨ non sembra essere un conflitto......ti dice che non ha trovato il metodo "dp360slider" per l'oggetto che lo richiede...

puÃ² essere perÃ² che in uno e nell'altro script ci sia un oggetto con lo stesso nome.

hai provato ad invertirli?

cosÃ¬:

<script type="text/javascript"> 
$(document).ready(function(){					
	$("#DP_slide").dp360slider({
		speed: 'slow', 
		easing: ''
	});

	// Create the Menu
	 $.noConflict();
	 jQuery('#menu').slidermenu();
});
</script>

(ho aggiunto anche un paio di ; )

elias90 · 18 Ottobre 2011

Ã¨ strano perchÃ¨ non sembra essere un conflitto......ti dice che non ha trovato il metodo "dp360slider" per l'oggetto che lo richiede...

puÃ² essere perÃ² che in uno e nell'altro script ci sia un oggetto con lo stesso nome.

hai provato ad invertirli?

cosÃ¬:
<script type="text/javascript"> 
$(document).ready(function(){					
	$("#DP_slide").dp360slider({
		speed: 'slow', 
		easing: ''
	});

	// Create the Menu
	 $.noConflict();
	 jQuery('#menu').slidermenu();
});
</script>
(ho aggiunto anche un paio di ; )

ora mi da questo errore:

Uncaught SyntaxError: Unexpected token <

Vuoi tutto il codice della pagina?

pix · 18 Ottobre 2011

a che riga?.......

elias90 · 18 Ottobre 2011

Riga 56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Home</title>
<meta name="description" content="" />
<meta name="keywords"	content="" />

<link rel="icon" type="image/png" href="images/sitelogo.png" />

   <!-- get jQuery from the google apis -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- jQuery per la galleria fotografica -->
<script type="text/javascript" src="js2/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js2/effects.core.js"></script>
   <script type="text/javascript" src="js2/jquery.dp360slider.min.js"></script>

<!-- DEMO STYLE SHEET - NO NEED FOR MENU ! -->
<!-- CSS reset -->    
<link rel="stylesheet" type="text/css" href="css/syle.css" media="screen" /> 	

<!-- main stylesheets GALLERIA--> 

   <link rel="stylesheet" href="cssgalleria/reset.css" /> 
<link rel="stylesheet" href="cssgalleria/preview.css" /> 
<link rel="stylesheet" href="cssgalleria/dp360slider.css" />


<!-- FONT IMPORT -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic' rel='stylesheet' type='text/css' >	



<!-- THE MENU JS AND CSS -->
<link rel="stylesheet" type="text/css" href="css/promenu.css" media="screen" />	 
   <script type="text/javascript" src="js/freshline/jquery.freshline.SliderMenu.mini.js">	</script>



<!-- 
	#########################################
	- THE SCRIPT TO IMPOERT THE MENU JQUERY -
	#########################################
-->
<script type="text/javascript"> 
       $(document).ready(function(){                                   
               $("#DP_slide").dp360slider({
                       speed: 'slow', 
                       easing: ''
               });

               // Create the Menu
                $.noConflict();
                jQuery('#menu').slidermenu();
       });
</script>








</head>



<!--
###################
- BODY -
###################
-->	
<body>

<div id="header">  
<div class="logo"></div>	

		<!--
		###########################
			- MENU -
		###########################
		-->
		<div id="menu" class="slider-menu">

               <ul>
                  <li><a href="index.html"><span class="main_type_1">Home</span></a>
				   <ul id="ok">
                        <li><a href="index.html"><img src="images/submenu/sub_3.jpg"> <div class="menu-head">> Piscine</div><div class="menu-content">La Water Art Ã¨ in grado di esaudire ogni vostra esigenza in termini strutturali, estetici o realizzativi.</div></a></li>
                        <li><a href="index.html"><img src="images/submenu/sub_4.jpg"> <div class="menu-head">> Benessere</div><div class="menu-content">La Water Art, in questi anni si Ã¨ specializzata nella progettazione e nella realizzazione di centri benessere.</div></a></li>
				  </ul>
			   </li>


                  <li><a href="index.html"><span class="main_type_1">Prodotti</span></a>
                     <ul>
                        <li><a href="#"><img src="images/submenu/sub_1.jpg"> <div class="menu-head">> About Us</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>
                        <li><a href="#"><img src="images/submenu/sub_2.jpg"> <div class="menu-head">> The Story</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>
                        <li><a href="#l"><img src="images/submenu/sub_11.jpg"> <div class="menu-head">> Latest Interviews</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>
					 <li><a href="#"><img src="images/submenu/sub_21.jpg"> <div class="menu-head">> Firm Philosophy</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>
                        <li><a href="#"><img src="images/submenu/sub_22.jpg"> <div class="menu-head">> Applications</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>
                        <li><a href="#"><img src="images/submenu/sub_5.jpg"> <div class="menu-head">> My Code Partners</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>						 
                        <li><a href="#"><img src="images/submenu/sub_6.jpg"> <div class="menu-head">> Download & Extras</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>						 						                       


				  </ul>
                 </li>
                  <li><a href="index.html"><span class="main_type_1">Galleria</span></a>
                     <ul>
                        <li><a href="index.html"><img src="images/submenu/sub_16.jpg"> <div class="menu-head">> Big Movies 1</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>
                        <li><a href="index.html"><img src="images/submenu/sub_18.jpg"> <div class="menu-head">> Big Movies 2</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>
                        <li><a href="index.html"><img src="images/submenu/sub_12.jpg"> <div class="menu-head">> Our Collection</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>						 
					 <li><a href="index.html"><img src="images/submenu/sub_13.jpg"> <div class="menu-head">> New Style One</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>						 						 
					 <li><a href="index.html"><img src="images/submenu/sub_14.jpg"> <div class="menu-head">> New Style Two</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>						 						 
					 <li><a href="index.html"><img src="images/submenu/sub_15.jpg"> <div class="menu-head">> Picture Gallery</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>						 
                     </ul>
                 </li>

			    <li><a href="index.html"><span class="main_type_1">EXTRAS</span></a>
                      <ul>
                        <li><a href="index.html"> <div class="menu-head">> WaterArt STORE</div><div class="menu-content"></div></a></li>
                        <li><a href="index.html"> <div class="menu-head">> WaterArt PROJECT</div><div class="menu-content"></div></a></li>						 
                     </ul>
                  </li>

			   <li><a href="index.html"><span class="main_type_1">Menu</span></a>
                      <ul>
                        <li><a href="index.html"> <div class="menu-head">> Online Store</div><div class="menu-content">Pro pertinacia constituam in, inte dolores percipit idun. Esse vitae perpetua id sit, pro corpora. Inda nihil congue dissentiunt pro, est nonumy etni. Iqu altera salutatus per, elit tritani volutpat. <br><hr />Cu his solum pertinacia, pro ea nonumes urbanita persequeris. Eos eros postulant at, mei ut liber insolens, graeci theophrastus ea ius.</div></a></li>
                        <li><a href="index.html"> <div class="menu-head">> Our Clients</div><div class="menu-content">In exerci ignota intellegam namei mei ornatus pic perfecto dissentiet, te velit sanctus appareat nam. <br><hr />Usu eu enim reque aperiri, esse audiam id meani. Cum ea deserunt voluptatibus, elit no quo.<br><hr />In exerci ignota intellegam namei mei ornatus pic perfecto dissentiet, te velit  appareat nam.
                        </div></a></li>
                        <li><a href="index.html"> <div class="menu-head">> Contact Us</div><div class="menu-content">Pro pertinacia constituam in, inte dolores percipit idun. Esse vitae perpetua id sit, pro corpora. Inda nihil congue dissentiunt pro, est nonumy etni. Iqu altera salutatus per, elit tritani volutpat. <br><hr />Cu his solum pertinacia, pro ea nonumes urbanita persequeris. Eos eros postulant at, mei ut liber insolens, graeci theophrastus ea ius.</div></a></li>
                     </ul>
                  </li>

               </ul>
             </div>			  			 	

<!-- GALLERIA IMMAGINI DI PRESENTAZIONE -->

<ul id="DP_slide">
               <li><img src="imggalleria/img1.jpg"></li>
               <li><img src="imggalleria/img2.jpg"></li>
               <li><img src="imggalleria/img3.jpg"></li>
               <li><img src="imggalleria/img4.jpg"></li>
               <li><img src="imggalleria/img1.jpg"></li>
               <li><img src="imggalleria/img2.jpg"></li>
               <li><img src="imggalleria/img3.jpg"></li>
               <li><img src="imggalleria/img4.jpg"></li>
           </ul>


</body>
</html>

ORA FUNZIONA

PS. TI RINGRAZIO, ottimo come sempre sei! una mano santa! ahah

pix · 18 Ottobre 2011

beh hai fatto (quasi) tutto te

elias90 · 18 Ottobre 2011

beh hai fatto (quasi) tutto te

Ahah no, fai sempre TUTTO TE!.

Ps. ho un'altro piccolo problemino, lo espongo qua al volo o apro un'altro topic?

pix · 18 Ottobre 2011

come vuoi.....vai pure qui se preferisci.

elias90 · 18 Ottobre 2011

Grazie caro!

Allora, stavo modificando il codice html per creare un div e buttarci dentro la gallery e centrare il tutto, ma a quanto pare da quanto ho capito, non ci riesco perchÃ¨ anche se il div lo richiamo correttamente nel css poi non lo considera, nel senso, sembra che usi il foglio di stile del menÃ¹ se non erro...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Home</title>
<meta name="description" content="" />
<meta name="keywords"	content="" />

<link rel="icon" type="image/png" href="images/sitelogo.png" />

   <!-- get jQuery from the google apis -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- jQuery per la galleria fotografica -->
<script type="text/javascript" src="js2/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js2/effects.core.js"></script>
   <script type="text/javascript" src="js2/jquery.dp360slider.min.js"></script>

 <!-- css della home -->
<link rel="stylesheet" type="text/css" href="css/home.css"Â¢Â¢â€™ /> 	

<!-- main stylesheets GALLERIA--> 

<link rel="stylesheet" href="cssgalleria/preview.css" /> 
<link rel="stylesheet" href="cssgalleria/dp360slider.css" />


<!-- FONT IMPORT -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic' rel='stylesheet' type='text/css' >	



<!-- THE MENU JS AND CSS -->
<link rel="stylesheet" type="text/css" href="css/promenu.css" media="screen" />	 
   <script type="text/javascript" src="js/freshline/jquery.freshline.SliderMenu.mini.js">	</script>



<!-- 
	#########################################
	- THE SCRIPT TO IMPOERT THE MENU JQUERY -
	#########################################
-->
<script type="text/javascript"> 
       $(document).ready(function(){                                   
               $("#DP_slide").dp360slider({
                       speed: 'slow', 
                       easing: ''
               });

               // Create the Menu
                $.noConflict();
                jQuery('#menu').slidermenu();
       });
</script>








</head>



<!--
###################
- BODY -
###################
-->	
<body>

<div id="header">  
<div class="logo"></div>	

		<!--
		###########################
			- MENU -
		###########################
		-->
		<div id="menu" class="slider-menu">

               <ul>
                  <li><a href="index.html"><span class="main_type_1">Home</span></a>
				   <ul id="ok">
                        <li><a href="index.html"><img src="images/submenu/sub_3.jpg"> <div class="menu-head">> Piscine</div><div class="menu-content">La Water Art Ã¨ in grado di esaudire ogni vostra esigenza in termini strutturali, estetici o realizzativi.</div></a></li>
                        <li><a href="index.html"><img src="images/submenu/sub_4.jpg"> <div class="menu-head">> Benessere</div><div class="menu-content">La Water Art, in questi anni si Ã¨ specializzata nella progettazione e nella realizzazione di centri benessere.</div></a></li>
				  </ul>
			   </li>


                  <li><a href="index.html"><span class="main_type_1">Prodotti</span></a>
                     <ul>
                        <li><a href="#"><img src="images/submenu/sub_1.jpg"> <div class="menu-head">> About Us</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>
                        <li><a href="#"><img src="images/submenu/sub_2.jpg"> <div class="menu-head">> The Story</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>
                        <li><a href="#l"><img src="images/submenu/sub_11.jpg"> <div class="menu-head">> Latest Interviews</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>
					 <li><a href="#"><img src="images/submenu/sub_21.jpg"> <div class="menu-head">> Firm Philosophy</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>
                        <li><a href="#"><img src="images/submenu/sub_22.jpg"> <div class="menu-head">> Applications</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>
                        <li><a href="#"><img src="images/submenu/sub_5.jpg"> <div class="menu-head">> My Code Partners</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>						 
                        <li><a href="#"><img src="images/submenu/sub_6.jpg"> <div class="menu-head">> Download & Extras</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>						 						                       


				  </ul>
                 </li>
                  <li><a href="index.html"><span class="main_type_1">Galleria</span></a>
                     <ul>
                        <li><a href="index.html"><img src="images/submenu/sub_16.jpg"> <div class="menu-head">> Big Movies 1</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>
                        <li><a href="index.html"><img src="images/submenu/sub_18.jpg"> <div class="menu-head">> Big Movies 2</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>
                        <li><a href="index.html"><img src="images/submenu/sub_12.jpg"> <div class="menu-head">> Our Collection</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>						 
					 <li><a href="index.html"><img src="images/submenu/sub_13.jpg"> <div class="menu-head">> New Style One</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>						 						 
					 <li><a href="index.html"><img src="images/submenu/sub_14.jpg"> <div class="menu-head">> New Style Two</div><div class="menu-content">Pro pertinacia constituam invi, inte dolores percipitur idunni. Esse vitae perpetua id corpora.</div></a></li>						 						 
					 <li><a href="index.html"><img src="images/submenu/sub_15.jpg"> <div class="menu-head">> Picture Gallery</div><div class="menu-content">In exerci ignota intellegam name mei ornatus perfecto dissentiet, te velit sanctus appareat nam.</div></a></li>						 
                     </ul>
                 </li>

			    <li><a href="index.html"><span class="main_type_1">EXTRAS</span></a>
                      <ul>
                        <li><a href="index.html"> <div class="menu-head">> WaterArt STORE</div><div class="menu-content"></div></a></li>
                        <li><a href="index.html"> <div class="menu-head">> WaterArt PROJECT</div><div class="menu-content"></div></a></li>						 
                     </ul>
                  </li>

			   <li><a href="index.html"><span class="main_type_1">Menu</span></a>
                      <ul>
                        <li><a href="index.html"> <div class="menu-head">> Online Store</div><div class="menu-content">Pro pertinacia constituam in, inte dolores percipit idun. Esse vitae perpetua id sit, pro corpora. Inda nihil congue dissentiunt pro, est nonumy etni. Iqu altera salutatus per, elit tritani volutpat. <br><hr />Cu his solum pertinacia, pro ea nonumes urbanita persequeris. Eos eros postulant at, mei ut liber insolens, graeci theophrastus ea ius.</div></a></li>
                        <li><a href="index.html"> <div class="menu-head">> Our Clients</div><div class="menu-content">In exerci ignota intellegam namei mei ornatus pic perfecto dissentiet, te velit sanctus appareat nam. <br><hr />Usu eu enim reque aperiri, esse audiam id meani. Cum ea deserunt voluptatibus, elit no quo.<br><hr />In exerci ignota intellegam namei mei ornatus pic perfecto dissentiet, te velit  appareat nam.
                        </div></a></li>
                        <li><a href="index.html"> <div class="menu-head">> Contact Us</div><div class="menu-content">Pro pertinacia constituam in, inte dolores percipit idun. Esse vitae perpetua id sit, pro corpora. Inda nihil congue dissentiunt pro, est nonumy etni. Iqu altera salutatus per, elit tritani volutpat. <br><hr />Cu his solum pertinacia, pro ea nonumes urbanita persequeris. Eos eros postulant at, mei ut liber insolens, graeci theophrastus ea ius.</div></a></li>
                     </ul>
                  </li>

               </ul>
             </div>			  			 	
</div>

<!-- CORPO -->


<div id="corpo1"><<<

<div id="galleriapresentazione">

<ul id="DP_slide">
               <li><img src="imggalleria/img1.jpg"></li>
               <li><img src="imggalleria/img2.jpg"></li>
               <li><img src="imggalleria/img3.jpg"></li>
               <li><img src="imggalleria/img4.jpg"></li>
               <li><img src="imggalleria/img1.jpg"></li>
               <li><img src="imggalleria/img2.jpg"></li>
               <li><img src="imggalleria/img3.jpg"></li>
               <li><img src="imggalleria/img4.jpg"></li>
           </ul>
</div>


</div>

</body>
</html>

Ho fatto anche il file css, ma nada, cioÃ¨ come se non lo prendesse. Immagine nel link qui sotto!

Mio collegamento

pix · 19 Ottobre 2011

ma i "<<<" li hai messi solo per farmi vedere il punto in questione....vero? PerchÃ© se no son da togliere.

fammi capire....tu dai uno stile #corpo1 al rispettivo div, in un file css linkato.

ma non vedi applicato il tuo stile bensÃ¬ solo quello di #galleriapresentazione.....Ã¨ questo che intendi?

puÃ² darsi che galleriapresentazione non sia sullo stesso z-index di corpo1, e quindi Ã¨ libero di muoversi come gli pare.

posta i due pezzi di css dell'uno e dell'altro.

elias90 · 19 Ottobre 2011

Si i <<< sono puramente indicativi.

Ora ti incollo i codici dei due, non Ã¨ di #galleriaimmagini che riprende il foglio di stile, ma nell'immagine che ti ho linkato fa vedere proprio che fa uso del css #promenÃ¹ che sarebbe il css del menÃ¹ che ho utilizzato

css HOME per dare corpo alla galleria

#corpo1{
background-color: black;
width: 900px;
height: 300px;
margin: auto;
}

#galleriapresentazione {
margin: auto;
position: absolute;
height: 300px;
width: 300px;
}

sono i 2 semplici div

e ora ti posto il css del promenu.css che a quanto pare Ã¨ quello che richiama da quanto dice la console di google chrome

/*----------------------------------------------------------------------------- 

Pro&Quick Menu

Screen Stylesheet 

version:   	1.0 
date:      	07/27/11 
author:		freshline
email:     	info@version-four.com 
website:   	http://www.version-four.com
-----------------------------------------------------------------------------*/



/***************/
/* RESET STYLE */
/**************/
html, body,  ul, li, fieldset, tr, th, td { 
   margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; 
}



/***************/
/* LOGO STYLE */
/*************/
.logo {
float:left;										/* Let the Menu float next to the Logo */
margin-top:12px;
margin-left:10px;
background-image: url(../images/logo.png);
background-repeat:no-repeat;
width:88px;										/*Width and Height should be Set !! */
height:90px;
}


/**************************/
/* THE SLIDER MENU STYLE */
/************************/

.slider-menu {

font-family: 'Oswald', sans-serif;				/* The Defaulte Font Type for the Menu */
background-color: #f3fefa;						/* The Background color of the Menu */

box-shadow:0px 3px 9px #999;					/* Shadows */
-moz-box-shadow:0px 3px 9px #999;
-khtml-box-shadow:0px 3px 9px #999;
-webkit-box-shadow:0px 3px 9px #999;

padding-top:69px;								/* The Space over and Under the Menu */
padding-bottom:40px;	
z-index:10;		
line-height: 1; 	
}


/***************************/
/* Remove the List Styles */
/***************************/
.slider-menu ol, ul { 
   list-style: none; 
}



.slider-menu ul{

/************************/
/* To Align to the Left */	
/*						*/
/*	width:auto;			*/
/*	margin-left:0px;	*/
/*	float:left;			*/
/*						*/
/************************/



/**************************/
/* To Align to the Center */	
/*						  */
/*	width:600px;		  */
/*	margin-left:auto;	  */
/*	margin-right:auto;	  */
/*						  */
/**************************/

width:600px;
margin-left:auto;
margin-right:auto;


}


/***************************************************************/
/* To Set the Width of the SubMenus with Image in the SubMenus */
/***************************************************************/
.slider-menu .img_head_description {
width:300px;
height:auto;	
}


/********************************************************************************/
/* To Set the Width of the SubMenus without Images, but with Content and Title */
/* If you set the height,than all Submenu LI will have the same height !	 */
/********************************************************************************/
.slider-menu .head_description{
width:260px;
height:auto;
}




/***********   THE ORDER OF THE SETTINGS ARE IMPORTANT !! *****************/


/************************************************/
/* Margin  left-right between the submenu items */
/************************************************/
.slider-menu ul li >ul >li{
font-size:24px;		
margin-left:10px;
margin-right:10px;	
}


/*****************************************************/
/*	FIRST LEVEL MENU SHOULD HAVE DIFFERENT MARGINS  */
/***************************************************/
.slider-menu >ul>li {
margin-left:40px;	
}



/**************************************/
/* TURN OFF LINK DECORATION OF MENUS */
/************************************/
.slider-menu  >ul>li a:link {
color:#e4e4e4;
text-decoration:none;	
}

.slider-menu >ul >li a:visited {
color:#e4e4e4;
}


.slider-menu >ul >li a:hover {
color:#d10c27;
}


/***************************************************/
/*	FLOAT THE SUBMENUS NEXT TO EACH OTHER,        */
/*	START POSITION DIRECT UNDER THE 1 LEVEL MENU */
/***************************************************/
.slider-menu ul li ul {
margin-top:30px;
padding-top:10px;		/* TO START THE SUBMENUS UNDER THE MAIN MENU - Set this Value to increase / decreas the space between the 1st and 2nd level Menu*/	
padding-bottom:20px;	/* LEAVE PLACE UNDER THE SUBEMENUS */
display:none;			/* DONT SHOW IT AT START */
font-size:10px;		
background-color: #5999d9;
/*Dont Touch the following settings*/
position:absolute;		
float:left;			
box-shadow:none;
z-index:10;
height:auto;			
}


.slider-menu ul li:hover ul {
display:block;
z-index:10;
}


/************************************************/
/* DRAW THE BACKGROUND AROUND THE SUBMENU ITEM */
/************************************************/
.slider-menu ul li ul li >div {
position:relative;
background-color: #467bb0;	
-webkit-border-radius:0px;
-moz-border-radius: 0px;
border-radius: 0px;	

}

/********************************/
/*  SET THE IMAGE MARGINS HERE */
/********************************/
.slider-menu ul li ul li .img_holder {
margin-left:16px;
margin-top:16px;
margin-bottom:16px;
}


/****************/
/* THE SUBMENU */
/****************/
.slider-submenu {	
float:left;	
}


/***********************************/
/* THE TITLE STYLE IN THE SUBMENU */
/*********************************/
.slider-submenu .menu-head {
font-family: 'Oswald', sans-serif;
font-size:16px;		
z-index:8;			
margin-left:16px;
margin-top:16px;
margin-right:16px;
margin-bottom:16px;
}


/*************************************/
/* THE CONTENT STYLE IN THE SUBMENU */
/************************************/
.slider-submenu .menu-content {	
font-family: 'Open Sans Condensed', sans-serif;	
font-size:14px;
z-index:10;	
margin-top:-6px;	
overflow:hidden;
margin-bottom:16px;
margin-left:16px;
margin-right:16px;	
}




/*********************************************************/
/* HEAD TYPES AND CONTENT TYPES ALTERNATIVS FOR THE MENU */
/*********************************************************/

.main_type_1 {
color: #000;
font-size:25px;	
}

a:hover .main_type_1{
color:#e4e4e4;
}

pix · 19 Ottobre 2011

ok, e di preciso cos'Ã¨ che non funziona?

(domanda.....ma non puoi caricare online da qualche parte?..... )

non credo sia questo il problema, ma ci sono dei caratteri strani nel tag link di questa riga, verso la fine:

        <!-- css della home -->
       <link rel="stylesheet" type="text/css" href="css/home.css"Â¢Â¢â€™ />

elias90 · 19 Ottobre 2011

si infatti non Ã¨ quello il problema, ora ti carico il tutto online, dammi qualche minuto

elias90 · 19 Ottobre 2011

ECCOLO

Mio collegamento

pix · 19 Ottobre 2011

bene, ma ripeto cos'Ã¨ esattamente che vuoi fare e non riesci?

elias90 · 19 Ottobre 2011

bene, ma ripeto cos'Ã¨ esattamente che vuoi fare e non riesci?

centrare la galleria.

ps. era giusto quello che dicevo io che non richiama il giusto foglio css?

pix · 19 Ottobre 2011

nel file home.css tu fai riferimento ai div come classe (usando il punto), invece che con l'id selector (che usa il carattere #).

cioÃ¨, c'Ã¨ questo:

.corpo1{

}

.galleriapresentazione {

}

invece di questo:

#corpo1{

}

#galleriapresentazione {

}

o cambi il css mettendo # al posto del punto, o cambi l'html mettendo "class" al posto di "id".

elias90 · 19 Ottobre 2011

nel file home.css tu fai riferimento ai div come classe (usando il punto), invece che con l'id selector (che usa il carattere #).

cioÃ¨, c'Ã¨ questo:
.corpo1{

}

.galleriapresentazione {

}
invece di questo:
#corpo1{

}

#galleriapresentazione {

}
o cambi il css mettendo # al posto del punto, o cambi l'html mettendo "class" al posto di "id".

no si lo so, lo cambiai dopo averlo caricato, ho provato a fare delle prove cambiando e mettendo il punto cosÃ¬ tanto per provare anche se sapevo che non funzionava anche con il # non risolvo nulla...

elias90 · 19 Ottobre 2011

Vedi nell'immagine dovrebbe richiamare il css "home" ma richiama il css "promenu" perchÃ¨???!?!!?!?!?!?

Questa Ã¨ la riga 19 che segna li sull'immagine...

/***************/
/* RESET STYLE */
/**************/
html, body,  ul, li, fieldset, tr, th, td { 
   margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; 
}

pix · 20 Ottobre 2011

no si lo so, lo cambiai dopo averlo caricato, ho provato a fare delle prove cambiando e mettendo il punto cosÃ¬ tanto per provare anche se sapevo che non funzionava anche con il # non risolvo nulla...

beh allora lascia il #, che Ã¨ giusto

(online c'Ã¨ ancora la classe, con il punto)

Vedi nell'immagine dovrebbe richiamare il css "home" ma richiama il css "promenu" perchÃ¨???!?!!?!?!?!?

Questa Ã¨ la riga 19 che segna li sull'immagine...

quello Ã¨ uno stile ereditato (inherited) dovuto unicamente al pezzetto di css che hai riportato. Non credo c'entri col tuo problema, ad ogni modo se non ti piace basta che richiami all'inizio del codice il file promenu.css prima degli altri, anzichÃ¨ per ultimo.

Oppure togli quel pezzo con il RESET.

l'elemento DP_slide, di classe dp_360slider, ha dimensioni 960x500.

tu "galleriapresentazione" che lo continene vorresti fosse 300x300....non ha molto senso.....deve essere anche questo 960x500.

poi "corpo1" lo fai 900x300.....anche qui, dimensioni che non c'entrano.

se vuoi centrare DP_slide in copro1, devi fargli il css cosÃ¬:

#corpo1{
       background-color: black;
       width: 100%;
       text-align: center;
       margin: auto;
}

#galleriapresentazione {
       margin: 0px;
       width: 960px;
       height: 500px;
}

prova...

elias90 · 20 Ottobre 2011

Ti ringrazio per l'aiuto, ieri sera poi ho risolto, in modo molto strano:

Ho spostato gli id che mi servivano su promenu.css e a quel punto funzionava.

Poi perÃ² nel foglio css HOME ho creato un'altro contenitore cosÃ¬ per curiositÃ e ho scritto correttamente il dv nell'html...e lo leggeva correttamente poi.

Se provavo ad invertire, a quel punto l'ultimo div creato si vedeva correttamente mentre la galleria ritornava decentrata. BOH.

Ps. le grandezze che gli avevo dato erano soltanto per dargli corpo, principalmente in quel momento mi stavo concentrando sul centrare il tutto

Cmq ho aggiornato i file, cosi vedi com'Ã¨ venuto!!! e magari mi dici cosa ne pensi...

Sito

ps2. il cliente voleva una 1 pagina e un'impostazione generale semplice e pulita. Spero di esserci riuscito

pix · 20 Ottobre 2011

ok.

semplicitÃ e pulizia direi che ci sono.....ma fa un po' venire il mal di mare con tutto quello "sballottamento" fra galleria e menÃ¹ sopra....

elias90 · 20 Ottobre 2011

ok.

semplicitÃ e pulizia direi che ci sono.....ma fa un po' venire il mal di mare con tutto quello "sballottamento" fra galleria e menÃ¹ sopra....

e tu cosa consigli?! :rolleyes: :rolleyes:

pix · 20 Ottobre 2011

e tu cosa consigli?! :rolleyes: :rolleyes:

....un antiemetico?

per esempio nella gallery metterei meno foto, in modo che le "strisce" verticali siano un po' piÃ¹ larghe.....diciamo larghe il doppio.

poi per evitare che il menÃ¹ faccia abbassare tutta la pagina, sposterei la galleri in alto ed il menÃ¹ sotto.

elias90 · 20 Ottobre 2011

....un antiemetico?

per esempio nella gallery metterei meno foto, in modo che le "strisce" verticali siano un po' piÃ¹ larghe.....diciamo larghe il doppio.

poi per evitare che il menÃ¹ faccia abbassare tutta la pagina, sposterei la galleri in alto ed il menÃ¹ sotto.

ahahah....

PresenterÃ² cosÃ¬ la pagina e poi suggerirÃ² il tuo consiglio, per me va bene qualsiasi cosa pur che il cliente ne rimanga soddisfatto!

pix · 20 Ottobre 2011

PresenterÃ² cosÃ¬ la pagina e poi suggerirÃ² il tuo consiglio, per me va bene qualsiasi cosa pur che il cliente ne rimanga soddisfatto paghi!

fixed

Accedi

Conflitto due script jQuery

Messaggi raccomandati

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Link al commento

Condividi su altri siti

Archiviato

Dallo staff