Ingreso : agosto-2010
Ubicación : Frente al pc
Mensajes : 474
Sexo: País:
Como cargo 2 Jquery a la vez
Hola!!!!!!
buen dia chicos, en el dia de hoy vengo solicitando de su ayuda en el sentido de diseño web.
Estoy trabajando en una web con Jquery, en la misma manejo un Jquery para redondear las esquinas de un Div, otro para cargar un slider de imagenes y uno para cargar un reproductor de musica. Hasta ahi no hay ningun problema. Mi problema radica al momento de insertar un nueva nueva linea de codigo en donde hago un llamado a un Jquery, para hacer un menu con imagenes, ya que no me carga ni el que estaba usando, ni el que estoy llamando.
Este es el codigo que uso (sin hacer el llamado al otro Jquery) y funciona, perfectamente.
Spoiler:
Código HTML:
<html>
<head>
<link type="image/x-icon" href="images/icono.ico" rel="icon" />
<!-- ESTE CSS ES QUE USO GENERALMENTE--> <link rel="stylesheet" href="css/estilos_generales.css" type="text/css" media="all" />
<!-- ESTE CSS ME LO PIDE EL MENU COMO TAL--> <link rel="stylesheet" type="text/css" href="css/estilos_menu.css" />
<!-- ESTE JS ME CARGA UN REPRODUCTOR--> <script language="javascript" type="text/javascript" src="swfobject.js" > </script>
<!-- ESTE JS ES EL QUE ME REDONDEA LAS ESQUINAS--> <script type="text/javascript" src="niftycube.js" > </script>
<script type="text/javascript" >
window.onload=function(){
Nifty("div#creditos","big");
}
</script>
<!--AQUI CIERRA EL ACTION SCRIPT QUE LAS REDONDEA--> <title> ★ Doctor Krá </title>
<style type="text/css" >
<!--
.Estilo2 {color: #FFFFFF}
.Estilo3 {font-family: Arial, Helvetica, sans-serif}
--> </style>
<!-- ESTE CSS ES EL QUE ME CARGA EL SLIDER--> <link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script src="js/jquery-1.6.3.min.js" > </script>
<script src="js/jquery.easing.1.3.js" > </script>
<script src="js/jquery.animate-colors-min.js" > </script>
<script src="js/jquery.skitter.min.js" > </script>
<script src="js/highlight.js" > </script>
<script src="js/sexy-bookmarks-public.js" > </script>
<script>
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
if (value == 'dots_preview') {
$('.border_box').css({'marginBottom': '40px'});
options['dots'] = true;
options['preview'] = true;
}
else {
options[value] = true;
if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
}
}
}
$('.box_skitter_large').skitter(options);
// Highlight
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > <style type="text/css" >
<!--AQUI FINALIZA EL ACTION SCRIPT DEL SLIDER--> <!--
body {
background-color: #000000;
}
.Estilo5 {font-size: 14px}
--> </style> </head>
<body>
<div id="padre" >
<div id="banner" >
<a name="arriba" > </a>
<div class="box_skitter box_skitter_large" >
<ul>
<li> <img src="images/001.jpg" class="cubeRandom" />
<div class="label_text" > </div>
</li>
<li> <img src="images/002.jpg" class="block" />
<div class="label_text" > </div>
</li>
<li> <img src="images/003.jpg" class="cubeStop" />
<div class="label_text" > </div>
</li>
<li> <img src="images/004.jpg" class="cubeHide" />
<div class="label_text" > </div>
</li>
<li> <img src="images/005.jpg" class="cubeHide" />
<div class="label_text" > </div>
</li>
</ul>
</div>
<!--Cierre banner--> </div>
<div id="menu" >
<ul id="nav" >
<li class="top" > <a href="#" class="top_link" > <span class="down" > Home</span> </a>
<ul class="sub" >
<li> <a href="menu.html" > Inicio</a> </li>
<li> <a href="#" > Noticias</a> </li>
</ul>
</li>
<!-------------------------------------------------------------------------------------------> <li class="top" > <a href="#" class="top_link" > <span class="down" > Banda</span> </a>
<ul class="sub" >
<li> <a href="historia.html" > Historia</a> </li>
<li> <a href="#" > Integrantes</a> </li>
<li> <a href="tour.html" > Tour</a> </li>
</ul>
</li>
<!-------------------------------------------------------------------------------------------> <li class="top" > <a href="#nogo27" class="top_link" > <span class="down" > Discografia</span> </a>
<ul class="sub" >
<li> <a href="#" > Albums</a> </li>
<li> <a href="#" > Singles</a> </li>
<li> <a href="#" > DVD's</a> </li>
</ul>
</li>
<!-------------------------------------------------------------------------------------------> <li class="top" > <a href="#" class="top_link" > <span class="down" > Multimedia</span> </a>
<ul class="sub" >
<li> <a href="#" class="fly" > Liricas</a>
<ul>
<li> <a href="#" > El carnaval de la apatilla</a> </li>
<li> <a href="#" > Dele la welta al disco</a> </li>
<li> <a href="#" > Bombea</a> </li>
<li> <a href="#" > Sagrado corazon</a> </li>
<li> <a href="#" > Corazon bombea vivo</a> </li>
</ul>
</li>
<li> <a href="#" > Galeria</a>
<li> <a href="#" class="fly" > Videografia</a>
<ul>
<li> <a href="#" > Videos oficiales</a> </li>
<li> <a href="#" > Extras</a> </li>
</ul>
</ul>
</li>
<!-------------------------------------------------------------------------------------------> <li class="top" > <a href="#" class="top_link" > <span class="down" > Club de Fans</span> </a>
<ul class="sub" >
<li> <a href="#" > Objetivos</a>
<li> <a href="#" > Filosofia</a> </li>
<li> <a href="#" > Divisiones</a> </li>
<li> <a href="#" > Reuniones</a> </li>
</ul>
</li>
<!---------------------------------------------------------------------------------------------> <li class="top" > <a href="#" class="top_link" > <span class="top_link" > Contacto</span> </a>
</li>
<!--Cierre menu--> </div>
<div id="contenido" >
<p align="center" >
<iframe width="640" height="400" src="https://www.youtube.com/embed/siPhITPwRYM" frameborder="0" allowfullscreen> </iframe>
<p class="Estilo3" > <br> <br> Tras un dedicado trabajo de preproducció ó á Á á á ó é á í </p>
<p class="Estilo3" > Fueron dos dí ó á ó á á á ó ó ó </p>
<p class="Estilo3" > La nueva canció á á </p>
<p class="Estilo3" > Grabado en Henson Recording Studios de Los Á ó é í á </p>
</div>
<div id="redes" >
<table border="0" cellspacing="5" >
<tr>
<td width> <!-- Div that contains player. --> <div id="player" >
<h1> No flash player!</h1>
<p> Parece que usted no tiene instalado Flash Player. <a href="http://www.macromedia.com/go/getflashplayer" > Haga clic aquí </ a> para ir a la página de descargas de Macromedia.</p>
</div>
<!-- Script that embeds player. --> <script language="javascript" type="text/javascript" >
var so = new SWFObject("flashmp3player.swf", "player", "254", "247", "9"); // Location of swf file. You can change player width and height here (using pixels or percents).
so.addParam("quality", "high");
so.addVariable("content_path","mp3"); // Location of a folder with mp3 files (relative to php script).
so.addVariable("color_path","default.xml"); // Location of xml file with color settings.
so.addVariable("script_path","flashmp3player.php"); // Location of php script.
so.write("player");
</script>
<br/> </td>
</tr>
<tr>
<td> <div align="center" >
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js" > </script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#69cce8',
color: '#fafafa'
},
tweets: {
background: '#fffcff',
color: '#000000',
links: '#0c4ef5'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
behavior: 'all'
}
}).render().setUser('@drkpresente').start();
</script>
</div> </td>
</tr>
<tr>
<td> <p align="center" > <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FDoctorKrapulaPresente& & & & & & & scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:400px; allowTransparency=" true"></iframe></p></td>
</tr>
</table>
<!--Cierre redes--> </div>
<div id="creditos" >
<p class="Estilo2" ><span class="Estilo5" >© á "http://www.doctorkrapula.net/" target="_blank" class="Estilo2" >Doctor Krá "http://www.doctorkrapula.net/" target="_blank" class="Estilo2" > Doctor Krapula</a> . La imagenes usadas fueron tomadas por Locomotora Producció <br>
Solo se muestran con fines promocionales e informativos</span> <br />
</p>
<!--Cierre creditos--> <!--Cierre padre--> </div>
</body>
</html>
Esta es la web que no me carga como quiero.
Aqui solo cambia el contenido del DIV Contenido; aqui si esta contenido el llamado al Jquery que necesito llamar.
Spoiler:
Código HTML:
<html> <!-- InstanceBegin template="/Templates/plantilla.dwt" codeOutsideHTMLIsLocked="false" --> <!-- InstanceBeginEditable name="head" --> <head>
<!-- ESTOS SON LOS CSS Y JS QUE CARGAN LO QUE QUIERO CARGAR--> <link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css' />
<!--HASTA AQUI--> <link type="image/x-icon" href="images/icono.ico" rel="icon" />
<link rel="stylesheet" href="css/estilos_generales.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/estilos_menu.css" />
<script language="javascript" type="text/javascript" src="swfobject.js" > </script>
<script type="text/javascript" src="niftycube.js" > </script>
<script type="text/javascript" >
window.onload=function(){
Nifty("div#creditos","big");
}
</script>
<title> ★ Doctor Krá </title>
<style type="text/css" >
<!--
.Estilo2 {color: #FFFFFF}
.Estilo3 {font-family: Arial, Helvetica, sans-serif}
--> </style>
<link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script src="js/jquery-1.6.3.min.js" > </script>
<script src="js/jquery.easing.1.3.js" > </script>
<script src="js/jquery.animate-colors-min.js" > </script>
<script src="js/jquery.skitter.min.js" > </script>
<script src="js/highlight.js" > </script>
<script src="js/sexy-bookmarks-public.js" > </script>
<script>
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
if (value == 'dots_preview') {
$('.border_box').css({'marginBottom': '40px'});
options['dots'] = true;
options['preview'] = true;
}
else {
options[value] = true;
if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
}
}
}
$('.box_skitter_large').skitter(options);
// Highlight
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > <style type="text/css" >
<!--
body {
background-color: #000000;
}
.Estilo5 {font-size: 14px}
--> </style> </head> <!-- InstanceEndEditable --> <body>
<div id="padre" >
<div id="banner" >
<a name="arriba" > </a>
<div class="box_skitter box_skitter_large" >
<ul>
<li> <img src="images/001.jpg" class="cubeRandom" />
<div class="label_text" > </div>
</li>
<li> <img src="images/002.jpg" class="block" />
<div class="label_text" > </div>
</li>
<li> <img src="images/003.jpg" class="cubeStop" />
<div class="label_text" > </div>
</li>
<li> <img src="images/004.jpg" class="cubeHide" />
<div class="label_text" > </div>
</li>
<li> <img src="images/005.jpg" class="cubeHide" />
<div class="label_text" > </div>
</li>
</ul>
</div>
<!--Cierre banner--> </div>
<div id="menu" >
<ul id="nav" >
<li class="top" > <a href="#" class="top_link" > <span class="down" > Home</span> </a>
<ul class="sub" >
<li> <a href="menu.html" > Inicio</a> </li>
<li> <a href="#" > Noticias</a> </li>
</ul>
</li>
<!-------------------------------------------------------------------------------------------> <li class="top" > <a href="#" class="top_link" > <span class="down" > Banda</span> </a>
<ul class="sub" >
<li> <a href="historia.html" > Historia</a> </li>
<li> <a href="#" > Integrantes</a> </li>
<li> <a href="tour.html" > Tour</a> </li>
</ul>
</li>
<!-------------------------------------------------------------------------------------------> <li class="top" > <a href="#nogo27" class="top_link" > <span class="down" > Discografia</span> </a>
<ul class="sub" >
<li> <a href="#" > Albums</a> </li>
<li> <a href="#" > Singles</a> </li>
<li> <a href="#" > DVD's</a> </li>
</ul>
</li>
<!-------------------------------------------------------------------------------------------> <li class="top" > <a href="#" class="top_link" > <span class="down" > Multimedia</span> </a>
<ul class="sub" >
<li> <a href="#" class="fly" > Liricas</a>
<ul>
<li> <a href="#" > El carnaval de la apatilla</a> </li>
<li> <a href="#" > Dele la welta al disco</a> </li>
<li> <a href="#" > Bombea</a> </li>
<li> <a href="#" > Sagrado corazon</a> </li>
<li> <a href="#" > Corazon bombea vivo</a> </li>
</ul>
</li>
<li> <a href="#" > Galeria</a>
<li> <a href="#" class="fly" > Videografia</a>
<ul>
<li> <a href="#" > Videos oficiales</a> </li>
<li> <a href="#" > Extras</a> </li>
</ul>
</ul>
</li>
<!-------------------------------------------------------------------------------------------> <li class="top" > <a href="#" class="top_link" > <span class="down" > Club de Fans</span> </a>
<ul class="sub" >
<li> <a href="#" > Objetivos</a>
<li> <a href="#" > Filosofia</a> </li>
<li> <a href="#" > Divisiones</a> </li>
<li> <a href="#" > Reuniones</a> </li>
</ul>
</li>
<!---------------------------------------------------------------------------------------------> <li class="top" > <a href="#" class="top_link" > <span class="top_link" > Contacto</span> </a>
</li>
<!--Cierre menu--> </div>
<!-- InstanceBeginEditable name="contenido" --> <div id="contenido" >
<div id="ei_menu" class="ei_menu" >
<ul>
<li> <a href="#" class="pos1" > <span class="ei_preview" > </span> <span class="ei_image" > </span> </a>
<div class="ei_descr" >
<h2> Gary</h2>
<h3> Vocals</h3>
<p> A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart. </p>
<p> I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine. </p>
</div>
</li>
<li> <a href="#" class="pos2" > <span class="ei_preview" > </span> <span class="ei_image" > </span> </a>
<div class="ei_descr" >
<h2> David</h2>
<h3> Guitar</h3>
<p> A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart. </p>
<p> I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine. </p>
</div>
</li>
<li> <a href="#" class="pos3" > <span class="ei_preview" > </span> <span class="ei_image" > </span> </a>
<div class="ei_descr" >
<h2> Andrew</h2>
<h3> Bass</h3>
<p> A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart. </p>
<p> I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine. </p>
</div>
</li>
<li> <a href="#" class="pos4" > <span class="ei_preview" > </span> <span class="ei_image" > </span> </a>
<div class="ei_descr" >
<h2> Sean</h2>
<h3> Drums</h3>
<p> A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart. </p>
<p> I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine. </p>
</div>
</li>
<li> <a href="#" class="pos5" > <span class="ei_preview" > </span> <span class="ei_image" > </span> </a>
<div class="ei_descr" >
<h2> Marc</h2>
<h3> Guitar</h3>
<p> A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart. </p>
<p> I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine. </p>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" > </script>
<script type="text/javascript" src="js/jquery.easing.1.3.js" > </script>
<script type="text/javascript" >
$(function() {
var $menu = $('#ei_menu > ul'),
$menuItems = $menu.children('li'),
$menuItemsImgWrapper= $menuItems.children('a'),
$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
totalMenuItems = $menuItems.length,
ExpandingMenu = (function(){
/*
@current
set it to the index of the element you want to be opened by default,
or -1 if you want the menu to be closed initially
*/
var current = -1,
/*
@anim
if we want the default opened item to animate initialy set this to true
*/
anim = true,
/*
checks if the current value is valid -
between 0 and the number of items
*/
validCurrent = function() {
return (current >= 0 && current < totalMenuItems);
},
init = function() {
/* show default item if current is set to a valid index */
if(validCurrent())
configureMenu();
initEventsHandler();
},
configureMenu = function() {
/* get the item for the current */
var $item = $menuItems.eq(current);
/* if anim is true slide out the item */
if(anim)
slideOutItem($item, true, 900, 'easeInQuint');
else{
/* if not just show it */
$item.css({width : '400px'})
.find('.ei_image')
.css({left:'0px', opacity:1});
/* decrease the opacity of the others */
$menuItems.not($item)
.children('.ei_preview')
.css({opacity:0.2});
}
},
initEventsHandler = function() {
/*
when we click an item the following can happen:
1) The item is already opened - close it!
2) The item is closed - open it! (if another one is opened, close it!)
*/
$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
var $this = $(this).parent(),
idx = $this.index();
if(current === idx) {
slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
current = -1;
}
else{
if(validCurrent() && current !== idx)
slideOutItem($menuItems.eq(current), false, 250, 'jswing');
current = idx;
slideOutItem($this, true, 250, 'jswing');
}
return false;
});
},
/* if you want to trigger the action to open a specific item */
openItem = function(idx) {
$menuItemsImgWrapper.eq(idx).click();
},
/*
opens or closes an item
note that "mLeave" is just true when all the items close,
in which case we want that all of them get opacity 1 again.
"dir" tells us if we are opening or closing an item (true | false)
*/
slideOutItem = function($item, dir, speed, easing, mLeave) {
var $ei_image = $item.find('.ei_image'),
itemParam = (dir) ? {width : '400px'} : {width : '75px'},
imageParam = (dir) ? {left : '0px'} : {left : '75px'};
/*
if opening, we animate the opacity of all the elements to 0.1.
this is to give focus on the opened item..
*/
if(dir)
/*
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current))
.stop()
.animate({opacity:0.1}, 500);
*/
$menuItemsPreview.stop()
.animate({opacity:0.1}, 1000);
else if(mLeave)
$menuItemsPreview.stop()
.animate({opacity:1}, 1500);
/* the <li> expands or collapses */
$item.stop().animate(itemParam, speed, easing);
/* the image (color) slides in or out */
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
if opening, we animate the opacity to 1,
otherwise we reset it.
*/
if(dir)
$ei_image.animate({opacity:1}, 2000);
else
$ei_image.css('opacity', 0.2);
});
};
return {
init : init,
openItem : openItem
};
})();
/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();
/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});
</script>
</div> <!-- InstanceEndEditable --> <div id="redes" >
<table border="0" cellspacing="5" >
<tr>
<td width> <!-- Div that contains player. --> <div id="player" >
<h1> No flash player!</h1>
<p> Parece que usted no tiene instalado Flash Player. <a href="http://www.macromedia.com/go/getflashplayer" > Haga clic aquí </ a> para ir a la página de descargas de Macromedia.</p>
</div>
<!-- Script that embeds player. --> <script language="javascript" type="text/javascript" >
var so = new SWFObject("flashmp3player.swf", "player", "254", "247", "9"); // Location of swf file. You can change player width and height here (using pixels or percents).
so.addParam("quality", "high");
so.addVariable("content_path","mp3"); // Location of a folder with mp3 files (relative to php script).
so.addVariable("color_path","default.xml"); // Location of xml file with color settings.
so.addVariable("script_path","flashmp3player.php"); // Location of php script.
so.write("player");
</script>
<br/> </td>
</tr>
<tr>
<td> <div align="center" >
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js" > </script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#69cce8',
color: '#fafafa'
},
tweets: {
background: '#fffcff',
color: '#000000',
links: '#0c4ef5'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
behavior: 'all'
}
}).render().setUser('@drkpresente').start();
</script>
</div> </td>
</tr>
<tr>
<td> <p align="center" > <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FDoctorKrapulaPresente& & & & & & & scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:400px; allowTransparency=" true"></iframe></p></td>
</tr>
</table>
<!--Cierre redes--> </div>
<div id="creditos" >
<p class="Estilo2" ><span class="Estilo5" >© á "http://www.doctorkrapula.net/" target="_blank" class="Estilo2" >Doctor Krá "http://www.doctorkrapula.net/" target="_blank" class="Estilo2" > Doctor Krapula</a> . La imagenes usadas fueron tomadas por Locomotora Producció <br>
Solo se muestran con fines promocionales e informativos</span> <br />
</p>
<!--Cierre creditos--> <!--Cierre padre--> </div>
</body>
<!-- InstanceEnd --> </html>
Agradezco que por favor alguien me pueda explicar que estoy haciendo mal, ya que se que es complicado hacerlo de esta forma, pero no puedo subir lor archivos aqui.
07-may-2012
Como cargo 2 Jquery a la vez
(08-may-2012)
Mode Lineal
Cambiar a Modo Hibrido
Cambiar a Modo Hilado
Temas Similares
