prevent blink after click of menu elements
This commit is contained in:
Miguel Cardenas
parent
f6ef24d8e6
commit
fa277af33f
3 changed files with 1305 additions and 1132 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,154 +1,167 @@
|
|||
(function($){
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
|
||||
/* ---------------------------------------------
|
||||
Scripts initialization
|
||||
--------------------------------------------- */
|
||||
var cardPricing ={
|
||||
'cpu': {
|
||||
'id': 'coreValue',
|
||||
'value': 1,
|
||||
'min':1,
|
||||
'max': 48,
|
||||
'interval': 1
|
||||
},
|
||||
'ram': {
|
||||
'id': 'ramValue',
|
||||
'value': 2,
|
||||
'min':2,
|
||||
'max': 200,
|
||||
'interval': 1
|
||||
},
|
||||
'storage': {
|
||||
'id': 'storageValue',
|
||||
'value': 10,
|
||||
'min': 10,
|
||||
'max': 500,
|
||||
'interval': 10
|
||||
}
|
||||
(function ($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
|
||||
/* ---------------------------------------------
|
||||
Scripts initialization
|
||||
--------------------------------------------- */
|
||||
var cardPricing = {
|
||||
'cpu': {
|
||||
'id': 'coreValue',
|
||||
'value': 1,
|
||||
'min': 1,
|
||||
'max': 48,
|
||||
'interval': 1
|
||||
},
|
||||
'ram': {
|
||||
'id': 'ramValue',
|
||||
'value': 2,
|
||||
'min': 2,
|
||||
'max': 200,
|
||||
'interval': 1
|
||||
},
|
||||
'storage': {
|
||||
'id': 'storageValue',
|
||||
'value': 10,
|
||||
'min': 10,
|
||||
'max': 500,
|
||||
'interval': 10
|
||||
}
|
||||
$(window).load(function(){
|
||||
|
||||
|
||||
}
|
||||
$(window).load(function () {
|
||||
|
||||
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
verifiedUrl();
|
||||
_navScroll();
|
||||
_initScroll();
|
||||
_initNavUrl();
|
||||
_initPricing();
|
||||
|
||||
});
|
||||
|
||||
$(window).resize(function () {
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------
|
||||
Nav panel classic
|
||||
--------------------------------------------- */
|
||||
if (window.matchMedia("(min-width: 767px)").matches) {
|
||||
$('ul.nav li.dropdown').hover(function () {
|
||||
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
|
||||
}, function () {
|
||||
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
verifiedUrl();
|
||||
_navScroll();
|
||||
_initScroll();
|
||||
_initNavUrl();
|
||||
_initPricing();
|
||||
|
||||
} else {
|
||||
/* the viewport is less than 400 pixels wide */
|
||||
}
|
||||
|
||||
|
||||
|
||||
function _initScroll() {
|
||||
$(window).scroll(function () {
|
||||
_navScroll();
|
||||
});
|
||||
|
||||
$(window).resize(function(){
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function _navScroll() {
|
||||
if ($(window).scrollTop() > 10) {
|
||||
$(".navbar").removeClass("navbar-transparent");
|
||||
$(".navbar-default .btn-link").css("color", "#777");
|
||||
$(".dropdown-menu").removeClass("navbar-transparent");
|
||||
$(".dropdown-menu > li > a").css("color", "#777");
|
||||
} else {
|
||||
$(".navbar").addClass("navbar-transparent");
|
||||
$(".navbar-default .btn-link").css("color", "#fff");
|
||||
$(".dropdown-menu").addClass("navbar-transparent");
|
||||
$(".dropdown-menu > li > a").css("color", "#fff");
|
||||
}
|
||||
}
|
||||
|
||||
function _initNavUrl() {
|
||||
$('.url').click(function () {
|
||||
var href = $(this).attr('data-url');
|
||||
$('.navbar-collapse').removeClass('in');
|
||||
$('.navbar-collapse').addClass('collapsing');
|
||||
var url = window.location.pathname;
|
||||
var urlSplit = url.split('/');
|
||||
if (urlSplit.length === 3 && urlSplit[2] === 'datacenterlight') {
|
||||
$('html, body').animate({
|
||||
scrollTop: $(href).offset().top
|
||||
}, 1000);
|
||||
} else {
|
||||
var allUrl = window.location.href;
|
||||
var redirect = allUrl.split('whydatacenterlight')
|
||||
window.location.href = '/en-us/datacenterlight' + href;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function verifiedUrl() {
|
||||
if (window.location.href.indexOf('#success') > -1) {
|
||||
form_success();
|
||||
console.log('epa');
|
||||
}
|
||||
}
|
||||
|
||||
function _initPricing() {
|
||||
_fetchPricing();
|
||||
|
||||
$('.fa-minus-circle.left').click(function (event) {
|
||||
var data = $(this).data('minus');
|
||||
|
||||
if (cardPricing[data].value > cardPricing[data].min) {
|
||||
cardPricing[data].value = Number(cardPricing[data].value) - cardPricing[data].interval;
|
||||
}
|
||||
_fetchPricing();
|
||||
});
|
||||
$('.fa-plus-circle.right').click(function (event) {
|
||||
var data = $(this).data('plus');
|
||||
if (cardPricing[data].value < cardPricing[data].max) {
|
||||
cardPricing[data].value = Number(cardPricing[data].value) + cardPricing[data].interval;
|
||||
}
|
||||
_fetchPricing();
|
||||
});
|
||||
|
||||
$('.input-price').change(function () {
|
||||
var data = $(this).attr("name");
|
||||
cardPricing[data].value = $('input[name=' + data + ']').val();
|
||||
_fetchPricing();
|
||||
});
|
||||
}
|
||||
|
||||
function _fetchPricing() {
|
||||
Object.keys(cardPricing).map(function (element) {
|
||||
//$('#'+cardPricing[element].id).val(cardPricing[element].value);
|
||||
$('input[name=' + element + ']').val(cardPricing[element].value);
|
||||
});
|
||||
_calcPricing();
|
||||
}
|
||||
|
||||
function _calcPricing() {
|
||||
var total = (cardPricing['cpu'].value * 5) + (2 * cardPricing['ram'].value) + (0.6 * cardPricing['storage'].value);
|
||||
total = parseFloat(total.toFixed(2));
|
||||
|
||||
$("#total").text(total);
|
||||
$('input[name=total]').val(total);
|
||||
}
|
||||
|
||||
function form_success() {
|
||||
$('#sucessModal').modal('show');
|
||||
}
|
||||
|
||||
function _calculate(numbers, price) {
|
||||
$('#valueTotal').text(numbers * price * 31);
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------
|
||||
Nav panel classic
|
||||
--------------------------------------------- */
|
||||
if (window.matchMedia("(min-width: 767px)").matches) {
|
||||
$('ul.nav li.dropdown').hover(function() {
|
||||
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
|
||||
}, function() {
|
||||
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
|
||||
});
|
||||
} else {
|
||||
/* the viewport is less than 400 pixels wide */
|
||||
}
|
||||
|
||||
|
||||
|
||||
function _initScroll(){
|
||||
$(window).scroll(function(){
|
||||
_navScroll();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function _navScroll(){
|
||||
if($(window).scrollTop() > 10 ){
|
||||
$(".navbar").removeClass("navbar-transparent");
|
||||
$(".navbar-default .btn-link").css("color", "#777");
|
||||
$(".dropdown-menu").removeClass("navbar-transparent");
|
||||
$(".dropdown-menu > li > a").css("color", "#777");
|
||||
}else{
|
||||
$(".navbar").addClass("navbar-transparent");
|
||||
$(".navbar-default .btn-link").css("color", "#fff");
|
||||
$(".dropdown-menu").addClass("navbar-transparent");
|
||||
$(".dropdown-menu > li > a").css("color", "#fff");
|
||||
}
|
||||
}
|
||||
function _initNavUrl(){
|
||||
$('.url').click(function(){
|
||||
var href = $(this).attr('data-url');
|
||||
$('.navbar-collapse').removeClass('in');
|
||||
$('.navbar-collapse').addClass('collapsing');
|
||||
$('html, body').animate({
|
||||
scrollTop: $(href).offset().top
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
function verifiedUrl(){
|
||||
if(window.location.href.indexOf('#success') > -1){
|
||||
form_success();
|
||||
console.log('epa');
|
||||
}
|
||||
}
|
||||
|
||||
function _initPricing(){
|
||||
_fetchPricing();
|
||||
|
||||
$('.fa-minus-circle.left').click(function(event){
|
||||
var data = $(this).data('minus');
|
||||
|
||||
if(cardPricing[data].value > cardPricing[data].min){
|
||||
cardPricing[data].value = Number(cardPricing[data].value) - cardPricing[data].interval;
|
||||
}
|
||||
_fetchPricing();
|
||||
});
|
||||
$('.fa-plus-circle.right').click(function(event){
|
||||
var data = $(this).data('plus');
|
||||
if(cardPricing[data].value < cardPricing[data].max){
|
||||
cardPricing[data].value = Number(cardPricing[data].value) + cardPricing[data].interval;
|
||||
}
|
||||
_fetchPricing();
|
||||
});
|
||||
|
||||
$('.input-price').change(function(){
|
||||
var data = $(this).attr("name");
|
||||
cardPricing[data].value = $('input[name='+data+']').val();
|
||||
_fetchPricing();
|
||||
});
|
||||
}
|
||||
function _fetchPricing(){
|
||||
Object.keys(cardPricing).map(function(element){
|
||||
//$('#'+cardPricing[element].id).val(cardPricing[element].value);
|
||||
$('input[name='+element+']').val(cardPricing[element].value);
|
||||
});
|
||||
_calcPricing();
|
||||
}
|
||||
|
||||
function _calcPricing(){
|
||||
var total = (cardPricing['cpu'].value * 5) + (2* cardPricing['ram'].value) + (0.6* cardPricing['storage'].value);
|
||||
total = parseFloat(total.toFixed(2));
|
||||
|
||||
$("#total").text(total);
|
||||
$('input[name=total]').val(total);
|
||||
}
|
||||
function form_success(){
|
||||
$('#sucessModal').modal('show');
|
||||
}
|
||||
function _calculate(numbers, price){
|
||||
$('#valueTotal').text(numbers*price*31);
|
||||
}
|
||||
|
||||
|
||||
|
||||
})(jQuery);
|
||||
})(jQuery);
|
||||
|
|
@ -18,19 +18,19 @@
|
|||
<a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
|
||||
<a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle visible-mobile" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
|
||||
<a class="dropdown-toggle url disabled visible-desktop" href="{% url 'datacenterlight:index' %}#how" data-url="#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
|
||||
<a class="dropdown-toggle url disabled visible-desktop" data-url="#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your" >{% trans "Scale out" %}</a></li>
|
||||
<li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li>
|
||||
<li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li>
|
||||
</ul>
|
||||
<li><a class="url" data-url="#your" >{% trans "Scale out" %}</a></li>
|
||||
<li><a class="url" data-url="#our">{% trans "Reliable and light" %}</a></li>
|
||||
<li> <a class="url" data-url="#price" >{% trans "Order VM" %}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
{% endif %}
|
||||
<li class="nav-language">
|
||||
<div class="select-language">
|
||||
{% if LANGUAGE_CODE == 'en-us'%}
|
||||
{% if LANGUAGE_CODE == 'en-us'%}
|
||||
<span>English</span>
|
||||
{% else %}
|
||||
<span>Deutsch</span>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<i class="fa fa-globe" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="drop-language">
|
||||
{% if LANGUAGE_CODE == 'en-us'%}
|
||||
{% if LANGUAGE_CODE == 'en-us'%}
|
||||
<a class="url" href="{% change_lang 'de' %}">Deutsch</a>
|
||||
{% else %}
|
||||
<a class="url" href="{% change_lang 'en-us' %}" >English</a>
|
||||
|
|
|
|||
Loading…
Reference in a new issue