i am trying to make a Menu as shown in below image
see this Link to go to its website i have copied some code ( HTML code and links to css and .js files) from there.
Here is my code :
<!DOCTYPE html>
<html>
<head>
<link href="scripts/gooey.min.css" rel="stylesheet" />
<script src="jquery-2.2.3.js"></script>
<script src="scripts/gooey.min.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<nav id="gooey-upper">
<input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1" />
<label class="open-button" for="menu-open1">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>
<a href="#features" class="gooey-menu-item">
<i title="Features" class="fa fa-cog fa-2x"></i> Item 1
</a>
<a href="#h-spaced-menu" class="gooey-menu-item">
<i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i>Item 2
</a>
<a href="#menu-v-example" class="gooey-menu-item">
<i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i>Item 3
</a>
<a href="#docs" class="gooey-menu-item">
<i title="Docs" class="fa fa-book fa-2x"></i>Item 4
</a>
<a href="#event-api" class="gooey-menu-item">
<i title="Event API" class="fa fa-code fa-2x"></i>Item 5
</a>
<a href="#round" class="gooey-menu-item">
<i title="Round Menu" class="fa fa-circle fa-2x"></i>Item 6
</a>
</nav>
<script type="text/javascript">
$(function () {
$("#gooey-round").gooeymenu({
bgColor: "#ffc0cb",
contentColor: "white",
style: "circle",
circle: {
radius: 85
},
size: 80
});
});
</script>
</body>
</html>
I have downloaded all the required files and even linked required .css and .js files to my code but i don't know why it gives me error that " It doesn't contain property googymenu "
Can anyone please help me to implement this Menu item.
Thank you so much.
EDIT : Which file i need to add from all font-awesome files ?
Works fine , see the sample.
Edit
Added Font-Awesome and a bit of CSS to move the menu.
#gooey-upper{
left : 200px;
top : 50px;
}
Sample
$("#gooey-upper").gooeymenu({
bgColor: "#ff6666",
contentColor: "white",
style: "circle",
horizontal: {
menuItemPosition: "glue"
},
vertical: {
menuItemPosition: "spaced",
direction: "up"
},
circle: {
radius: 80
},
margin: "small",
size: 90,
bounce: true,
bounceLength: "small",
transitionStep: 100,
hover: "#e55b5b"
});
#gooey-upper{
left : 200px;
top : 50px;
}
<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--font awesome-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!--plugin style-->
<link rel="stylesheet" type="text/css" href="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/css/gooey.min.css">
<!--plugin js-->
<script type="text/javascript" src="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/js/gooey.min.js"></script>
<nav id="gooey-upper">
<input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1" />
<label class="open-button" for="menu-open1">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>
<a href="#features" class="gooey-menu-item">
<i title="Features" class="fa fa-cog fa-2x"></i>
</a>
<a href="#h-spaced-menu" class="gooey-menu-item">
<i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i>
</a>
<a href="#menu-v-example" class="gooey-menu-item">
<i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i>
</a>
<a href="#docs" class="gooey-menu-item">
<i title="Docs" class="fa fa-book fa-2x"></i>
</a>
<a href="#event-api" class="gooey-menu-item">
<i title="Event API" class="fa fa-code fa-2x"></i>
</a>
<a href="#round" class="gooey-menu-item">
<i title="Round Menu" class="fa fa-circle fa-2x"></i>
</a>
</nav>
Related
I want to change the colour of an Awesome Icon, and I created this piece of code, but instead of giving me the colour, I got an 'undefined'
<script type="text/javascript">
function changeAIColor(idName) {
alert ($('idAwesomeIcon').css("color"));
}
</script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i d="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
You have missed the id selector # in your JQuery. Also use idName of the changeAIColor function in your selector. So, the query becomes ($('#'+idName).css("color"). Please note that you have used same id as idAwesomeIcon multiple times. id values should be used uniquely in HTML page.
function changeAIColor(idName) {
alert ($('#'+idName).css("color"));
}
changeAIColor('idAwesomeIcon');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
You need $('#idAwesomeIcon').css("color")
Also <i d="idAwesomeIcon" isn't right. The ID should be different and should actually be id="".
<script type="text/javascript">
$('.AwesomeIcon').each(function(){
alert ($(this).css("color"));
});
</script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i class="fa fa-toggle-on fa-lg AwesomeIcon" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i class="fa fa-toggle-off fa-lg AwesomeIcon" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
Change your ID to class and change your JS accordingly.
I am tryng to run a star rating component in the most simplest approach. I got most of the code from this link. But unfortunately, nothing appears in the page.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./rating-stars.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./rating-stars.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever1" class="rating-value" value="2.56">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever2" class="rating-value" value="1.9">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever3" class="rating-value" value="4.1">
</div>
</div>
</div>
</div>
</body>
</html>
and then a simple css file called as rating-stars.css:
.star-rating {
line-height:32px;
font-size:1.25em;
}
.star-rating .fa-star{color: yellow;}
and finally the javascript file is:
var $star_rating = $('.star-rating .fa');
var SetRatingStar = function() {
return $star_rating.each(function() {
if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
return $(this).removeClass('fa-star-o').addClass('fa-star');
} else {
return $(this).removeClass('fa-star').addClass('fa-star-o');
}
});
};
$star_rating.on('click', function() {
$star_rating.siblings('input.rating-value').val($(this).data('rating'));
return SetRatingStar();
});
SetRatingStar();
$(document).ready(function() {
});
The problem is, no star appears in the page. I checked the console, and it seems that, everything is fine, and there is no error.
you can use the rateYo plugin
$(function () {
$(".rateyo").rateYo({
starWidth: "80px"
}).on("rateyo.change", function (e, data) {
var rating = data.rating;
$(this).parent().find('.result').text('rating :'+ rating);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
<div class="rateyo"
data-rateyo-rating="1.5"
data-rateyo-num-stars="5"></div>
<span class='result'>0</span>
</div>
It's using a custom font from fontawesome to create the stars (referenced from here: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css). The font is relative to that CSS file, so you either need to ensure you're including that file or that you have the fonts locally.
I don't see link to font awesome. There're multiple ways to add it check
http://fontawesome.io/get-started/
The simplest solution add between <head></head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
I have hover list box and my list box has some links if I visit links my main image of list box is changing with relevant image but I'm using lazy load plugin that is why I want to change with data-src not src but it didn't work how can I handle as dynamic ?
and one more thing I guess it's possible bot how I don't know..if I leave area my images must change with default images but I couldn't
My main structure
HTML
<div class="tur-list-box">
<div class="tur-list-content">
<figure>
<img data-src="img/assets/tourlist-2.jpg" class="lazy" src="img/assets/placeholder.png" alt="tur sayfası">
<a href="#" class="figure-overlay">
<p class="tour-price">
<span class="price-big">73,</span>
<span class="price-little">40</span>
<span class="price-unit">TL*</span>
<span class="price-block">‘den itibaren</span>
</p>
</a>
</figure><!-- tur resim-->
<div class="tur-details">
<h3>Hafta Sonu Turları</h3>
<p>15 farklı program</p>
<i class=" open-tur-toggle fa fa-chevron-down" aria-hidden="true"></i>
</div><!-- tur detay-->
</div><!-- tur list content-->
<div class="tur-list-toggle">
<ul class="list-unstyled">
<li>Kakava ( Hıdırellez ) Şenlikleri Alaçatı <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Ot Festivali Urla Enginar Festivali Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Adana Portakal Çiçeği Karnavalı Isparta <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Gül Hasadı Ve Göller Yöresi Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Manisa Mesir Macunu Şenliği Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Uçaklı Festival Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
</ul>
</div><!-- acilir kapanir alan-->
</div><!-- tur list box-->
and JS
$(".tur-list-box").hover(function(){
$(this).find(".tur-list-toggle").stop().slideDown();
$(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-down").addClass("fa-chevron-up");
},function(){
$(this).find(".tur-list-toggle").stop().slideUp();
$(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-up").addClass("fa-chevron-down");
var defaultImg = $(this).find("figure img").attr("data-src");
console.log(defaultImg);
});
$('.tur-list-toggle ul li a').hover(
function(e) {
e.preventDefault();
var getAttr = $(this).attr("data-img");
$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
$(this).fadeIn(500);
},
function(e) {
}
);
if you hover image you gonna see link and if you visit the links images has been change
and you can see the demo
change
$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
to
$(this).parents(".tur-list-box").find("figure img").data("src",getAttr);
more on data
I am new to angularjs and just started getting my hands dirty in it. I have downloaded angular-seed and started changing in it. I have a navbar which displays different html pages when user navigate. The problem is the page is getting loaded properly but i have some javascript in the script tag in that html page that is not loading, and its also not throwing any error in the console.
Here is my index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="/css/style1.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
here is my app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Here is my view1.js:
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
Here is my view1.html which contains a javascript script tag in it:
<div class="row">
<div class="charts">
<div class="col-md-4 charts-grids stats-widget ">
<div class="sparkline">
<i class="fa fa-sign-in fa-3x" ></i>
</div>
<div id="stats1"class="stats_box">
<span class="info-box-text">Number of sign-ups</span>
<span id="sign-up" class="percent">56,000</span>
</div>
<i id="red" class="fa fa-circle-o text-red" value="11000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="12000"></i>
<i id="green" class="fa fa-circle-o text-green" value="13000"></i>
</div>
<div class="col-md-4 charts-grids stats-widget states-mdl">
<div class="sparkline">
<i class="fa fa-user fa-3x"></i>
</div>
<div id="stats2" class="stats_box">
<span class="info-box-text">Daily active users</span>
<span id="active" class="percent">23,000</span>
</div>
<div class='firstbox' id='fb2' >
<i id="red" class="fa fa-circle-o text-red" value="21000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="22000"></i>
<i id="green" class="fa fa-circle-o text-green" value="23000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats3"class="stats_box">
<span class="info-box-text">Average time active</span>
<span class="percent">80,000</span>
</div>
<div class='firstbox' id='fb3'>
<i id="red" class="fa fa-circle-o text-red" value="31000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="32000"></i>
<i id="green" class="fa fa-circle-o text-green" value="33000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget ">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats4" class="stats_box">
<span class="info-box-text">Total time run</span>
<span class="percent">39,000</span>
</div>
<div class='firstbox' id='fb4' >
<i id="red" class="fa fa-circle-o text-red" value="41000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="42000"></i>
<i id="green" class="fa fa-circle-o text-green" value="43000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget states-mdl">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats5"class="stats_box">
<span class="info-box-text">Total distance covered</span>
<span id="distance"class="percent">20,000</span>
</div>
<div class='firstbox' id='fb5' >
<i id="red" class="fa fa-circle-o text-red" value="51000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="52000"></i>
<i id="green" class="fa fa-circle-o text-green" value="53000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget">
<div class="sparkline">
<i class="fa fa-bolt fa-3x"></i>
</div>
<div id="stats6"class="stats_box">
<span class="info-box-text">10K activated</span>
<span id="activated"class="percent">26,000</span>
</div>
<div class='firstbox' id='fb6' >
<i id="red" class="fa fa-circle-o text-red" value="61000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="62000"></i>
<i id="green" class="fa fa-circle-o text-green"value="63000"></i>
</div>
</div>
<div class="clearfix"> </div>
</div><!--end charts-->
</div><!--end row-->
<script>
var barChartData = {
labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
datasets : [
{
fillColor : "#dd4b39",
strokeColor : "#dd4b39",
data : [10000,13000,56081,42001,5000,40000]
},
{
fillColor : "#f39c12",
strokeColor : "#f39c12",
data : [40000,70000,55000,21001,45023,70121,60093]
},
{
fillColor : "#00a65a",
strokeColor : "#00a65a",
data : [43010,75432,50966,66300,39000,12010,33098]
}
]
};
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
</script>
i used captcha in my register user page with that i used icons of refresh, headphones, help but captcha, text box everything is displaying on browser and working fine also even refresh, headphones, help icons are also working well but problem is that istead of showing refresh, or headphone, or help icon in browser only a squre is showing, plz give me any idea how i can show this?
<script type="text/javascript">
var RecaptchaOptions = {
theme: 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR"></script>
<div id="recaptcha_widget" class="form-recaptcha">
<div class="form-recaptcha-img" style="width: 325px">
<a id="recaptcha_image" href="#"></a>
<div class="recaptcha_only_if_incorrect_sol display-none" style="color: red">
Incorrect please try again
</div>
</div>
<div class="input-group" style="width: 325px">
<input type="text" class="form-control" id="recaptcha_response_field" name="recaptcha_response_field"/>
<div class="input-group-btn">
<a class="btn default" href="javascript:Recaptcha.reload()">
<%--<img src="../logo/refresh.jpg" alt="" />--%>
<i class="fa fa-refresh"></i>
</a>
<a class="btn default recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">
<i title="Get an audio CAPTCHA" class="fa fa-headphones"></i>
</a>
<a class="btn default recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">
<i title="Get an image CAPTCHA" class="fa fa-picture-o"></i>
</a>
<a class="btn default" href="javascript:Recaptcha.showhelp()">
<i class="fa fa-question-circle"></i>
</a>
</div>
</div>
<p class="help-block">
<span class="recaptcha_only_if_image">Enter the words above </span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear </span>
</p>
</div>
i did it, simply i make a folder in my .aspx page and in that folder i place the icons like refresh, headphones etc and after that i give the path of image
<div class="input-group-btn">
<a class="btn default" href="javascript:Recaptcha.reload()">
<i>
<img src="../logo/glyphicons_081_refresh%20-%20Copy.png" class="fa fa-refresh" />
</i>
</a>
<a class="btn default recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">
<i title="Get an audio CAPTCHA">
<img src="../logo/glyphicons_076_headphones%20-%20Copy.png" class="fa fa-headphones" />
</i>
</a>
<a class="btn default recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">
<i title="Get an image CAPTCHA">
<img src="../logo/glyphicons_138_picture#2x%20-%20Copy.png" class="fa fa-picture-o" />
</i>
</a>
<a class="btn default" href="javascript:Recaptcha.showhelp()">
<i>
<img src="../logo/glyphicons_194_circle_question_mark%20-%20Copy.png" class="fa fa-question-circle" />
</i>
</a>
</div>