JavaScript - Botones

Botones

Publicado por Drouiz (2 intervenciones) el 30/11/2014 05:42:36

Buenas, estoy diseñando unos botones para redes sociales de una plantilla que ando creando, el problema es que tienen que cambiar de color (azul para facebook, rojo para youtube...) y además cada uno tendrá un texto diferente tipo, síguenos en facebook, visita nuestro canal de youtube. Mi problema es, que no entiendo muy bien el tema del scope y no se como hacer para pasarlo de una funcion a otra os muestro el codigo.

$(document).ready(function(){

    function socialbottons(drbottom, socialcolor, socialtype){

        $(drbottom).hover(

            function(){

                console.log(socialcolor)

                $( this ).css( "color", socialcolor);

                var socialchange = "<span style='color: " + socialcolor +  "'>"+socialtype+"  </span>";

                $( "#dr-contact").html( socialchange);

                $( this ).animate({

                    "fontSize": "40px"

                    }, 200 );

            },function(){

                $( this ).animate({

                    "fontSize": "28px"

                    },200);

                $( "#dr-contact").html("Contact us </span>" );

                $( this ).css( "color", "");

        $(drbottom).click(

            function(){

                $( this ).css( "color", "red");

                $( this ).fadeOut( 0 );

                $( this ).fadeIn( 500 );

};

    $( "#dr-facebook" , "blue"," facebook" ).hover(

        socialbottons("#dr-facebook")

);

    $( "#dr-twitter", "blue"," folow us" ).hover(

        socialbottons("#dr-twitter")

);

    $( "#dr-linkedin", "blue"," linkedin"  ).hover(

        socialbottons("#dr-linkedin")

);

    $( "#dr-google", "red"," +1"  ).hover(

        socialbottons("#dr-google")

);

    $( "#dr-youtube", "red"," canal de youtube" ).hover(

        socialbottons("#dr-youtube")

);

    $( "#dr-mail" , "green"," send us a mail").hover(

        socialbottons("#dr-mail")

);

});

Gracias,

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Botones

Publicado por xve (2100 intervenciones) el 30/11/2014 19:20:04

Hola Drouiz, nos puedes mostrar el código HTML para entender un poco como funciona?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Botones

Publicado por Drouiz (2 intervenciones) el 02/12/2014 07:34:12

Si claro, es el siguiente:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title> TITULO CON PHP TAL </title>

    <!-- font-awesome -->

	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Bootstrap -->

    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <!-- Drouiz -->

	<link href="css/drouiz.css" rel="stylesheet" media="screen"/>

    <script src="js/drouiz.js"></script>

</head>

<body>

	<div class="container">

		<header>

			<div class="head">

				<div class="baner">

					INSERTAR UNA IMAGEN DE FONDO

				</div>

				<div class="menuhead">

					<div class="row">

						<div class="col-lg-4 col-md-6 col-sm-7 col-xs-2">

							<div id="logo" class="inline">

								<img src="img/logo.png" width="40" height="40" alt="logo">

							</div>

							<div class="inline hidden-xs">

								 Drouiz Future Tech CAMBIABLE

							</div>

						</div>

						<div class="col-lg-8 col-md-6 col-sm-5 col-xs-10">

							<div class="row">

								<div class="col-lg-6 col-md-6 col-sm-7 col-xs-12">

									<div class="right">

										<div id="dr-contact" style=' font-size: 10px;'>Contact us </div>

										<div id="dr-facebook" class="fa fa-facebook-square fa-2x"></div>

										<div id="dr-twitter" class="fa fa-twitter-square fa-2x"></div>

										<div id="dr-linkedin" class="fa fa-linkedin-square fa-2x"></div>

										<div id="dr-google" class="fa fa-google-plus-square fa-2x"></div>

										<div id="dr-youtube" class="fa fa-youtube-square fa-2x"></div>

										<div id="dr-mail" class="fa fa-envelope-square fa-2x"></div>

									</div>

								</div>

								<div  class="col-lg-6 col-md-6 col-sm-5 hidden-xs">

									<div id="dr-contact" style=' font-size: 10px;'>Buscar </div>

									<div class="input-group input-group-sm">

										<span class="input-group-btn">

											<button class="btn btn-default fa fa-binoculars" type="button"></button>

										</span>

										<input type="text" class="form-control" placeholder="Buscar">

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

		</header>

		<script type="text/javascript">

		</script>

		<nav class="navbar navbar-default" role="navigation">

			<div class="navbar-header">

				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">

					<span class="sr-only">Desplegar navegación</span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

				</button>

			</div>

			<div class="collapse navbar-collapse navbar-ex1-collapse">

				<ul class="nav navbar-nav">

					<li class="active"><a href="#">Enlace #1</a></li>

					<li><a href="#">Enlace #2</a></li>

					<li class="dropdown">

					<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #1 <b class="caret"></b> </a>

					<ul class="dropdown-menu">

						<li><a href="#">Acción #1</a></li>

						<li><a href="#">Acción #2</a></li>

						<li><a href="#">Acción #3</a></li>

						<li class="divider"></li>

						<li><a href="#">Acción #4</a></li>

						<li class="divider"></li>

						<li><a href="#">Acción #5</a></li>

					</ul>

				  </li>

				</ul>

				<form class="navbar-form navbar-left" role="search">

					<div class="form-group">

						<input type="text" class="form-control" placeholder="Buscar">

					</div>

					<button type="submit" class="btn btn-default">Enviar</button>

				</form>

				<ul class="nav navbar-nav navbar-right">

					<li><a href="#">Enlace #3</a></li>

					<li class="dropdown">

						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menú #2 <b class="caret"></b>

						</a>

						<ul class="dropdown-menu">

							<li><a href="#">Acción #1</a></li>

							<li><a href="#">Acción #2</a></li>

							<li><a href="#">Acción #3</a></li>

							<li class="divider"></li>

							<li><a href="#">Acción #4</a></li>

						</ul>

					</li>

				</ul>

			</div>

		</nav>

	</div>

</body>

</html>

Valora esta respuesta

Comentar