JavaScript - Botones

   
Vista:

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
$(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 claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Botones

Publicado por xve (1595 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 claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Botones

Publicado por Drouiz (2 intervenciones) el 02/12/2014 07:34:12
Si claro, es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<!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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar