I am working on a script and trying to add links to submenu items based on bootstrap.
The problem appears when I try to click on them.
They don't work: https://smsverificator.com/2/demo/
Don't know the reason the cannot work here.
I even don't know the language it's written below. Can anybody help me?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/css/flags.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="../dist/js/jquery.flagstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<link rel="stylesheet" href="https://smsverificator.com/assets/css/language_switcher_style.css">
</head>
<body onload="prettyPrint()">
<div class="col-xs-12 col-md-6">
<form>
<div class="form-group">
<label>Select Language</label><br>
<div id="options"
data-input-name="country2"
data-selected-country="US">
</div>
</div>
</form>
</div>
<script>
$('#basic').flagStrap();
$('#origin').flagStrap({
placeholder: {
value: "",
text: "Language"
}
});
$('#options')
.flagStrap({
countries: {
"US": '<a target="_self" href="https://smsverificator.com">English</a>',
"PL": 'Polish',
"RU": 'Russian',
"DE": 'German',
"UA": 'Ukrainian',
"ES": 'Spanish',
"FR": 'French',
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
scrollable: false,
scrollableHeight: "350px"
});
$('#advanced')
.flagStrap({
buttonSize: "btn-lg",
buttonType: "btn-primary",
labelMargin: "20px",
scrollable: false,
scrollableHeight: "350px",
onSelect: function (value, element) {
alert(value);
console.log(element);
}
});
</script>
</body>
</html>
How to make them clickable and work?
Below is your edited code. I modified your array of countries to put only their names and created a separate table for the urls.
When the user changes the selection, the OnSelect function is triggered.
We then redirect the page to the new url
Make sure the version of flagstrap is the latest. It can be found here: https://github.com/blazeworx/flagstrap/blob/master/dist/js/jquery.flagstrap.min.js
$('#options')
.flagStrap({
countries: {
"US": 'English',
"PL": 'Poland',
"RU": 'Russian',
"DE": 'German',
"UA": 'Ukrainian',
"ES": 'Spanish',
"FR": 'French',
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
scrollable: false,
scrollableHeight: "350px",
onSelect: function (value, element) {
let urls = {
"US": 'https://smsverificator.com',
"PL": 'https://smsverificator.com/pl/',
"RU": 'https://smsverificator.com/ru/',
"DE": 'https://smsverificator.com/de/',
"UA": 'https://smsverificator.com/ukr/',
"ES": 'https://smsverificator.com/es/',
"FR": 'https://smsverificator.com/fr/',
};
document.location.href = urls[value];
console.log(element);
}
});
Related
I trying to use slider revolution provided by Themepunch on my website (developed in Angular 8) with dynamic data that is coming for a JSON file. Therefore, I have required CSS and js files in the index.html like this
<head>
<meta charset="utf-8">
<title>Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Css Files-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/all.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
//Here is the css files
<link href="assets/css/rs-plugin/css/settings.css" rel="stylesheet">
<link href="assets/css/rs-plugin/css/navigation.css" rel="stylesheet">
<link href="assets/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/css/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<!-- js Files -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.smartmenus.js"></script>
<script src="assets/js/jquery.smartmenus.bootstrap-4.js"></script>
// Here is the js files
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/functions.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
And I use a component to show the slider as a banner. In that component I use asyc call to get the json from the json file and update the array and in the component HMTL I use ngFor loop it bind the array data. However, the silder is not showing any data bacause of the ngFor and if I remove it, then the data will show.
Here is the typescript code
#Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, AfterViewInit {
constructor(private file: FileService, public translate: TranslateService) { }
#Input() entity: string;
#Input() site;
main_banner: any[] = [];
revSlider: any;
ngAfterViewInit() {
this.initRevolutionSlider();
}
ngOnInit() {
this.file.get(0, 'main_banner').then(r => {
this.main_banner = r;
});
}
get lang(): string {
return this.translate.currentLang == 'ar' ? '_ar' : '_en';
}
identify(index, item) {
return index;
}
counter: number = 0;
initRevolutionSlider() {
if ($('#revolutionSlider').get(0)) {
this.revSlider = $('#revolutionSlider').show().revolution({
sliderType: 'standard',
sliderLayout: 'fullscreen',
delay: 9000,
responsiveLevels: [4096, 1200, 992, 576],
gridwidth: [1100, 920, 680, 500],
gridheight: 740,
disableProgressBar: 'on',
spinner: 'spinner3',
parallax: {
type: "on",
levels: [20, 40, 60, 80, 100],
origo: "enterpoint",
speed: 400,
bgparallax: "on",
disable_onmobile: "off"
},
navigation: {
arrows: {
enable: true
}
},
});
}
}
}
and here is the HTML
<div class="rev_slider_wrapper fullscreen-container">
<div id="revolutionSlider" class="rev_slider fullscreenbanner" data-version="5.4.8" >
<ul>
<li data-transition="fade" *ngFor="let n of main_banner;trackBy:identify;">
<img *ngIf="n.banner" src="{{n.banner}}"
alt=""
data-bgposition="center center"
data-bgfit="cover"
data-bgrepeat="no-repeat"
data-kenburns="on"
data-duration="20000"
data-ease="Linear.easeNone"
data-scalestart="110"
data-scaleend="100"
data-offsetstart="250 100"
class="rev-slidebg" />
<h1 class="tp-caption font-weight-bold text-color-light text-center text-white"
data-x="center"
data-y="center" data-voffset="['-70','-70','-70','-70']"
data-width="['770','770','770','350']"
data-start="1000"
data-paddingtop="['11','11','11','16']"
data-paddingbottom="['11','11','11','16']"
data-fontsize="['50','50','45','35']"
data-lineheight="['56','56','50','40']"
data-transform_in="y:[100%];opacity:0;s:500;"
data-transform_out="opacity:0;s:500;"
style="white-space: normal;">
{{n.name_en}}
</h1>
</li>
</ul>
</div>
</div>
Thanks in advance
I wasn't able to figure out why *ngFor was not working, but I found a work around by following these steps:
Clear everything inside the slider 'ul' and give it an id='rev_slider_ul'
<!--Slider-->
<div class="rev_slider_wrapper">
<div id="rev_slider" class="rev_slider" data-version="5.0">
<ul id="rev_slider_ul">
</ul>
</div>
</div>
Import jquery in .ts file.
declare var jQuery: any;
Define a method to load the slider with configurations
loadSlider(){
return jQuery("#rev_slider").show().revolution({
sliderType: "standard",
sliderLayout: "fullwidth",
scrollbarDrag: "true",
navigation: {
arrows: {
enable: true
},
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
}
},
gridwidth: 1170,
gridheight: 770
});
}
Iterate the object you needed to iterate in ts and form a HTML string with it or keep appending to the slider element.
data.forEach((elem)=>{
jQuery("#rev_slider_ul").append(${elem})
});
Outside and after the forEach loop, load the slider
this.loadSlider()
Hope that helps. Don't see much to explain here, but open to questions if any.
I have the following selectize.js :
$("#abc").selectize({
valueField: 'name',
labelField: 'name',
searchField: ['name'],
plugins: ['remove_button'],
createOnBlur: true,
maxItems: 10,
preload: true,
create:function (input){
callback({ name:'Cricket', name:'Football', name : 'Tennis'})
},
});
The html code is :
<select id="abc" name="sport[]"></select>
I want the Cricket, Football, Tennis to pre load, Means it should be auto loaded on page load. But the options are not loading, What am i missing ?
Seems like you might just be looking for the options property to set the initial list of selection options and the items property to select the ones you want defaulted. If so, you don't need the create function (which is there to enable you to customize the handling of user entered options). See below.
$('#abc').selectize({
options: [
{name: 'Cricket'},
{name: 'Football'},
{name: 'Tennis'}
],
items: [
'Cricket',
'Football',
'Tennis'
],
valueField: 'name',
labelField: 'name',
searchField: ['name'],
plugins: ['remove_button'],
createOnBlur: true,
maxItems: 10,
preload: true
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selectize</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
</head>
<body>
<form action="" method="POST">
<input id="abc" name="abc" type="text" />
<button type="submit">Submit</button>
</form>
</body>
</html>
I'm new to AngularJS, and this project pushes what I already know about using ng-repeat and controllers.
Goal : To make it so when you select an option from the drop down menu and click the button, the guitars will show up with the assistance of ng-repeat. For now, only the names will show up, but I'm focused on ensuring the app.js file works.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Angular Project 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<header ng-controller="HeaderCtrl">
<h1 id="title">{{appDetails.title}}</h1>
<h3 id="tagline">{{appDetails.tagline}}</h3>
</header>
<select id="dropdown">
<option value="Yamaha">Yamaha</option>
<option value="Gibson">Gibson</option>
<option value="Jackson">Jackson</option>
<option value="ESP">ESP</option>
</select>
<br>
<input type="submit" id="searchGuitars" value="Search!">
<section id="bookSection" ng-controller="GuitarCtrl">
<div ng-repeat="guitar in guitars">
{{guitar.title}}
</div>
</section>
</body>
</html>
JS :
var app = angular.module("myApp", []);
app.controller("HeaderCtrl", function ($scope) {
$scope.appDetails = {
title: "JamLog",
tagline: "Take a look at our Fancy Instruments in Stock!"
};
})
app.controller("GuitarCtrl", function ($scope) {
$('#searchGuitars').click(function() {
if ($('#dropdown').val() == "Yamaha") {
$scope.guitars = [
{
title: "Yamaha Revstar 420",
instrument: "Electric Guitar",
color: "Red",
price: "$499.99",
details: "Yes",
imageURL: "YamahaRS420.jpg"
},
{
title: "Yamaha Pacifica Series PAC012",
instrument: "Electric Guitar"
color: "Blue",
price: "$",
details: "Yes",
imageURL: "YamahaPacificaSeriesPAC012.jpg"
}
];
}
else if ($('#dropdown').val() == "Gibson") {
$scope.guitars = [
{
title: "Gibson Les Paul Custom",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "GibsonLesCustomBlue.jpg"
},
{
title: "Thunderbird",
instrument: "Bass",
color: "Black",
price: "$",
details: "Used by SOAD Bassist",
imageURL: "GibsonThunderbirdIV.jpg"
}
];
}
})
})
I'm hoping it's not a small error I missed, but the overall layout of this program seems as if it would work, and am unsure as to why not.
Please try to declare JQuery CDN before Angular
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
If you already use the angularjs, do not mix it up with JQuery.
Maybe this solution below could help you.
"use strict";
angular
.module('app')
.controller("HeaderCtrl", function ($scope) {
$scope.appDetails = {
title: "JamLog",
tagline: "Take a look at our Fancy Instruments in Stock!"
};
})
.controller("GuitarCtrl", function ($scope) {
$scope.searchGuitars = function(guitar) {
if (guitar == "Yamaha") {
$scope.guitars = [
{
title: "Yamaha Revstar 420",
instrument: "Electric Guitar",
color: "Red",
price: "$499.99",
details: "Yes",
imageURL: "YamahaRS420.jpg"
},
{
title: "Yamaha Pacifica Series PAC012",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "YamahaPacificaSeriesPAC012.jpg"
}
];
}
else if (guitar == "Gibson") {
$scope.guitars = [
{
title: "Gibson Les Paul Custom",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "GibsonLesCustomBlue.jpg"
},
{
title: "Thunderbird",
instrument: "Bass",
color: "Black",
price: "$",
details: "Used by SOAD Bassist",
imageURL: "GibsonThunderbirdIV.jpg"
}
];
}
console.log($scope.guitars);
}
});
<!DOCTYPE html>
<html>
<head>
<title>Angular Project 2</title>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="style.css">-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script src="app.js"></script>-->
</head>
<body ng-app="app">
<header ng-controller="HeaderCtrl">
<h1 id="title">{{appDetails.title}}</h1>
<h3 id="tagline">{{appDetails.tagline}}</h3>
</header>
<select id="dropdown" ng-model="dropdownSelect">
<option value="Yamaha">Yamaha</option>
<option value="Gibson">Gibson</option>
<option value="Jackson">Jackson</option>
<option value="ESP">ESP</option>
</select>
<br>
<div ng-controller="GuitarCtrl">
<input type="button" ng-click="searchGuitars(dropdownSelect)" id="searchGuitars" value="Search!">
<section id="bookSection">
<div ng-repeat="guitar in guitars">
{{guitar.title}}
</div>
</section>
</div>
</body>
</html>
First of all, Sorry for the not-so-descript title, but i couldn't find a way to describe it in a few words.
I'm trying to make a simple Syntax Highlighter, using Javascript and Jquery.
I have a HTML TextArea with some HTML inside, that i want to add classes to, depending on the syntax.
But i have a weird problem with the open and closing tags...
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Syntax Highlighter</title>
<link rel="stylesheet" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container" id="mainWrapper">
<div class="container" id="mainContent">
<div class="container" id="textareaWrapper">
<textarea name="codeInput" id="codeInput" cols="100" rows="1000" class="textarea">
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>I'm a Paragraph</p>
<img src="img/image.jpg" alt="I'm an image!" />
</body>
</html>
</textarea>
</div>
<button id="buttonHighlightSyntax" onClick="addClass()">Huelight</button>
<div class="container" id="syntaxWrapper">
<div id="syntaxContainer">
<pre id="highlighted">
</pre>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
// HTML tags: http://www.w3schools.com/tags/
var htmlTags = ["!DOCTYPE", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"];
var code = $('#codeInput').val(); // non-highlighted HTML
code = code.replace(/(<\/|<|\s\/>|\/>|>)/g, "<span class=\"openClose\">$1</span>"); // add openClose class to <,</,>,/>, />
console.log(code);
$('#highlighted').html(code);
})
Here the weird thing happens when it replaces it, or maybe when it sets the html of #highlighted...
either way, the result is this:
<span class="openClose"><</span>html<span class="openClose">></span>
<span class="openClose"><</span>head<span class="openClose">></span>
<span class="openClose"><</span>title<span class="openClose">></span>Test page<span class="openClose"><!--</span-->title<span class="openClose">></span>
<span class="openClose"><</span>link rel="stylesheet" href="css/style.css"<span class="openClose"> /></span>
<span class="openClose"><!--</span-->head<span class="openClose">></span>
<span class="openClose"><</span>body<span class="openClose">></span>
<span class="openClose"><</span>p<span class="openClose">></span>I'm a Paragraph<span class="openClose"><!--</span-->p<span class="openClose">></span>
<span class="openClose"><</span>img src="img/image.jpg" alt="I'm an image!"<span class="openClose"> /></span>
<span class="openClose"><!--</span-->body<span class="openClose">></span>
<span class="openClose"><!--</span-->html<span class="openClose">></span>dsdad
</span></span></span></span></span>
The problem there, is that it seems to screw up when it comes to the ,/> and only partially replaces it?
I'm very confuzzled, so if anyone can explain what is going on with the string.replace(), please do =)
I am using Kendo Grid in my web app and including kendo.all.min.js file. The version of this js file is 2012.1.515.
In the grid, columns are not resizeable in IE 10 and IE 11 though it works fine in all other browsers.
I have created a sample of grid and included the same file but grid columns are not resizeable in IE 10 and IE 11.
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />
<link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
</head>
<body>
<div id="main">
<h1 id="exampleTitle">
<span class="exampleIcon gridIcon"></span>
<strong>Grid /</strong> Column resizing </h1>
<div id="theme-list-container"></div>
<div id="exampleWrap">
<script>preventFOUC()</script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
gridDataSource = new kendo.data.DataSource({
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
scrollable: true,
resizable: true,
columns: [
{
field: "OrderDate",
title: "Order Date"
},
{
field: "ShipCountry",
title: "Ship Country"
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date"
},
{
field: "OrderID",
title: "ID"
}
]
});
});
</script>
</div>
</div>
</div>
</body>
</html>
Thanks
I think, you need to specify width for every columns to resize. Something like:
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 50px
}
I hope this is helpful.
I had some problems with clicking in ie10 and 11. Telerik advised me to update my js and css with latest edition. Which eventually solved my problem. Try update your kendo version to something on 2013. They have 4/5 updates on 2013, go for 3/4th one.