Situation:
I currently have a search box that utilizes Jquery’s Autocomplete plugin. When a user begins typing in the search box for a sport’s team (i.e. Boston Red Sox) it will determine relevant matches. When they select on the team I would like it to append to a list (perhaps it should be append to an array as this seems most common – but if it is an array I may need to alter my current content) so that they can have their sport’s team displayed on a navbar (my css allows for this currently) To get a better idea of what I am discussing here is my fiddle http://jsfiddle.net/saLbjdw1/1/
Existing Code:
<!doctype html>
<html>
<head>
<title>TEST</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
</head>
I will skip the css portion unless requested (found in JSFiddle)
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<p>HOME</p>
<ul>
<li id="teamBRS" class="red"><a>BOSTON RED SOX</a></li>
<li id="teamNEP" class="blue"><a>NEW ENGLAND PATRIOTS</a></li>
<li id="teamBC" class="green"><a>BOSTON CELTICS</a></li>
<li id="teamBB" class="gold" style=border-right:none;><a>BOSTON BRUINS</a></li>
</ul>
<div class="ui-widget">
<input id="tags" type="text" placeholder="Search Teams">
</div>
</div>
</div>
</div>
<script>
$(function() {
var availableTeams = [
"Boston Red Sox",
"New England Patriots",
"Boston Celtics",
"Boston Bruins",
"NEW ENGLAND REVOLUTION"
];
$( "#tags" ).autocomplete({
source: availableTeams
});
});
</script>
</body>
</html>
I did attempt to piece together some of my thoughts on where I might begin after reviewing other stack posts such as; using JavaScript to append the user input (which was from the availableTeams [])to a new array called activeArray or list. After it is appended it would appear on the #topBar...hopefully
myThoughts:
activeArray=["BOSTON RED SOX", "NEW ENGLAND PATRIOTS"];
document.getElementById("tags").onClick=function() {
if (document.getElementById("tags").value=="NEW ENGLAND REVOLUTION") {
push searchedItem to activeArray
}
else {
dont do anything
}
}
I realize a lot of what is shown just above is rubbish but I am in a very basic sense trying to outline some rough thoughts. Any suggestions would be much appreciated.
Related
I'm trying to create a site where you can search up any country and it'll show you detailed information on it using REST Countries API. I want to have a first HTML page with just a search box in the middle where you type your country. You then press search and it'll redirect you to another HTML page where I've set up a template for the countries flag, capital, population, currency, region, and subregion.
I have no clue how to connect them and I've tried messing with the input box id value, looking at search bar & REST Countries API tutorials, but I've figured out nothing. I added a search box to the page where I want ONLY the information to be displayed for testing and it works if I type in the exact country name and it is case sensitive.
How could I even connect these pages & search bar? And if it is possible, how could I make it suggest me countries after I type in one letter?
Main HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ae3cf15842.js" crossorigin="anonymous"></script>
<title>CountryProjectA</title>
</head>
<body>
<div>
<div class="search-box" >
<input class= "search-txt" type="text" id="search" placeholder="Search for a country" />
<a class="search-btn" href="">
<i class="fas fa-search-location fa-lg"></i>
</a>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Country info display HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/info-style.css">
<title>Info</title>
</head>
<body>
<h1>Countries</h1>
<div id="main-container">
<div id="flag-container">
<img src="" alt="">
</div>
<div id="info-container">
<input name="" id="countries"></select>
<p>Capital: <span id="capital"></span></p>
<p>Population: <span id="population"></span></p>
<p>Currencies: <span id="currencies"></span></p>
<p>Region: <span id="region"></span></p>
<p>Subregion: <span id="subregion"></span></p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Main JS
const countriesList = document.getElementById("countries");
let countries;
countriesList.addEventListener("change", newCountrySelection);
function newCountrySelection(event) {
displayCountryInfo(event.target.value);
}
fetch("https://restcountries.eu/rest/v2/all")
.then(res => res.json())
.then(data => initialize(data))
.catch(err => console.log("Error:", err));
function initialize(countriesData) {
countries = countriesData;
let options = "";
countries.forEach(country => options+=`<option value="${country.alpha3Code}">${country.name}</option>`);
countriesList.innerHTML = options;
countriesList.selectedIndex = Math.floor(Math.random()*countriesList.length);
displayCountryInfo(countriesList[countriesList.selectedIndex].value);
}
function displayCountryInfo(countryByName) {
const countryData = countries.find(country => country.name === countryByName);
document.querySelector("#flag-container img").src = countryData.flag;
document.querySelector("#flag-container img").alt = `Flag of ${countryData.name}`;
document.getElementById("capital").innerHTML = countryData.capital;
document.getElementById("population").innerHTML = countryData.population.toLocaleString("en-US");
document.getElementById("currencies").innerHTML = countryData.currencies.filter(c => c.name).map(c => `${c.name} (${c.code})`).join(", ");
document.getElementById("region").innerHTML = countryData.region;
document.getElementById("subregion").innerHTML = countryData.subregion;
}
Thank you!
You should use this to get the input value in your Javascript code when someone clicks the search button.
document.getElementsByClassName("search-btn")[0].onclick = function() {
var searchInput = document.getElementById("search").value;
// call the search function here and redirect to the other page where you display results.
}
As for suggesting names, you can use the Google Places Autocomplete API for that: https://developers.google.com/places/web-service/autocomplete. Just call the API in the oninput event handler for #search.
Hope this helps!
I have a large dataset that contains usernames. I have attached this to a jquery listview which is set to filter-reveal.
I would like to be able to restrict the number of rows that the filter brings back.
I know how to override the filter to create a custom search, but i do not know how to restrict the number of item in the list (which would encourage the user to add more information to the filter)
Say i only wanted to show 2 results, if the users contained Tom, Tommy and Tony, and the filter was 'To' id expect to see only Tom and Tommy.
You can listen for keyup event and filter out the elements without class ui-screen-hidden which filter-reveal adds to the list items. Using each iteration over these filtered elements you can conditionally hide them using index value.
In the snippet below I'm checking if the index of each element is higher than 1 (second element) and hide them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).ready(() => {
$(".ui-input-text").keyup(() => {
$("li").not(".ui-screen-hidden").each(function (i, obj) {
i > 1 && $(this).hide();
});
})
})
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search numbers without hint..."
data-inset="true" data-filter-reveal="true">
<li data-filtertext="thirtyone">thirtyone
</li>
<li data-filtertext="thirtytwo">thirtytwo
</li>
<li data-filtertext="thirtythree">thirtythree
</li>
<li data-filtertext="thirtyfour">thirtyfour
</li>
<li data-filtertext="thirtyfive">thirtyfive
</li>
</ul>
</div>
</div>
</body>
</html>
Working on a personal project with a navigation bar. I am using jquery x.load() to load html pages into a specific div. The pages load correctly into the div. However, one of the is using a jquery flipswitch. I am trying to read the state of this flipswitch, to no prevail. I have a main javascript file that loads the individual pages, which is basically my x.load(). I have a working jquery script for reading the switch state, that works when placed directly into the developers console. I have attempted this code both inline in the individual page as well as my main javascript file. When I place it inside the individual page, it will at times cause a race condition to develop.
I am looking for any suggestions, advice, or direction on being able to read the status of the flipswitch from the individual pages.
The first section of code is my javascript file. The second section of code, is both my individual page, as well as my main html page that loads the individual html page, respectively.
jQuery(document).ready(function() {
var SideNav = $('.side-nav'),
NavTrigger = $('.nav-trigger'),
Content = $('.content'),
ApartmentAlarm = $('#Alarm'),
$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
NavTrigger.on('click', function(event) {
event.preventDefault();
alert("click works");
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
ApartmentAlarm.on('click', function() {
//event.preventDefault();
Content.load('alarm.html');
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
</form>
<script type="text/javascript">
$(document).ready(function() {
console.log('hello');
$('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
alert('me')
});
//$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
})
</script>
</body>
</html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="apt.css">
</head>
<body>
<header class="page-header">
<div class="apartment-name">Carlson Casa</div>
<div class="data-top">
<ul class="top-data">
<li>Time</li>
<li>Outside Temp</li>
<li>Inside Temp</li>
<li>Menu<span></span></li>
</ul>
</div>
</header>
<main class="main-content">
<nav class="side-nav">
<ul>
<li>Apartment</li>
<li class="nav-label">Living Room</li>
<li>Alarm control</li>
<li>Chandelier</li>
<li class="nav-label">Bedroom</li>
<li>Lights</li>
<li>Alarm Clock</li>
</ul>
</nav>
<div class="content">
Controls go here
</div>
</main>
<script src="jquery-2.1.4.js"></script>
<script src="main.js"></script>
</body>
</html>
As you are using jQuery Mobile Flipswitch of type checkbox, you can get the status by checking the property checked. Here is a jQuery Mobile Flipswitch playground:
var cases = {false: "Unchecked", true: "Checked"};
function getStatus() {
$("#statusLeft").html(cases[$("#LeftSwitch").prop("checked")]);
$("#statusRight").html(cases[$("#RightSwitch").prop("checked")]);
}
$(document).on("change", "#LeftSwitch", function(e) {
var status = $(this).prop("checked");
$("#statusLeft").html("Changed to "+cases[status]);
});
$(document).on("change", "#RightSwitch", function(e) {
var status = $(this).prop("checked");
$("#statusRight").html("Changed to "+cases[status]);
});
function toggleLeft() {
var status = $("#LeftSwitch").prop("checked");
$("#LeftSwitch").prop("checked", !status).flipswitch("refresh");
}
function toggleRight() {
var status = $("#RightSwitch").prop("checked");
$("#RightSwitch").prop("checked", !status).flipswitch("refresh");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<span id="statusLeft">Unchecked</span>
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
<span id="statusRight">Unchecked</span>
</form>
<button class="ui-btn" onclick="getStatus();">Get Status</button>
<button class="ui-btn" onclick="toggleLeft();">Toggle Left</button>
<button class="ui-btn" onclick="toggleRight();">Toggle Right</button>
</div>
</div>
</body>
</html>
By using the change event instead of click you will be notified of the flipswitch toggling also if you are setting the status in code.
Additional notes:
About what you are defining "race condition" i believe you are referring to one of the common mistakes when using jQuery Mobile, i.e. document.ready vs. page events. Please read this post here, and also take some time to read the whole story in deep in this great post of Omar here: jQuery Mobile “Page” Events – What, Why, Where, When & How? (you will find here some other useful posts about this topic).
Moreover: you are trying to update the flipswtches manually by setting the ui-flipswitch-active class by yourself, but i believe you will run into the problem of keeping the status and the ui consistent. So, you may better use the standard JQM way to set the flipswitch status by using flipswitch.refresh. There is already an example in my code snippet.
The last note: until you strongly need it - and you know how to versioning jQuery Mobile - please use the same version of these libraries in all your files, so in your case i believe the pair jQuery 2.1 + JQM 1.4.5 shall be just fine.
jQuery(document).ready(function() {
var SideNav = $('.side-nav'),
NavTrigger = $('.nav-trigger'),
Content = $('.content'),
ApartmentAlarm = $('#Alarm');
$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')});
NavTrigger.on('click', function(event) {
event.preventDefault();
alert("click works");
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
ApartmentAlarm.on('click', function() {
//event.preventDefault();
Content.load('alarm.html');
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
</form>
<script type="text/javascript">
$(document).ready(function() {
console.log('hello');
$('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
alert('me')
});
//$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
})
</script>
</body>
</html>
I am trying to make use of the iconbar property of mmenu (here: http://mmenu.frebsite.nl/documentation/extensions/iconbar.html)
However it is not working properly. I get the menu open as expected once I run the code. Yet when I close the menu, it is first closed completely, then the container slides slightly to right. I think that is some sort of an invisible iconbar pushing the content to the right.
(it shouldn't push anything even if it was visible since I use the menu in front of the application, floating.)
I would appreciate any ideas about the cause & how to fix it.
Here is what I get: http://jsfiddle.net/ozgen92/eqbaf88q/
What should have been happened: http://mmenu.frebsite.nl/examples.html
(toggle "iconbar" option at the bottom, extensions section)
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"><!--symbols-->
<!-- JS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mmenu -->
<!-- CSS -->
<link href="Libs/jQuery.mmenu-5.3.4/dist/css/jquery.mmenu.all.css" type="text/css" rel="stylesheet" />
<link href="Libs/jQuery.mmenu-5.3.4/dist/css/extensions/jquery.mmenu.iconbar.css" type="text/css" rel="stylesheet" />
<!-- JS -->
<script src="Libs/jQuery.mmenu-5.3.4/dist/js/jquery.mmenu.min.all.js" type="text/javascript"></script>
<!-- JQuery -->
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#menu").mmenu({
"extensions": [
"effect-zoom-panels",
"iconbar",
"theme-dark"
],
"offCanvas":{
"zposition": "front"
},
"searchfield": {
"placeholder": "Search",
"noResults": "No results found.",
"add": true
},
"navbar": {
"title": "Main Search"
},
"navbars": [
{
"position": "top"
}
],
"sectionIndexer": true
}, {/* configuration */});
var API = $("#menu").data( "mmenu" );
API.open();
});
</script>
</head>
<body>
<div><!--Wrapper-->
<!--MMENU-->
<div><nav id="menu">
<ul>
<li><i class="fa fa-home"></i>Menu1
<input type="radio" class="Toggle" checked />
</li>
<li>Menu2
<input type="radio" class="Toggle" checked />
</li>
<li>Menu3
<input type="radio" class="Toggle" checked />
</li>
</ul>
</nav></div>
<div class="container">
<h3>Container Example</h3>
<p>Yes I am a container</p>
</div>
</div><!--wrapper end-->
</body>
</html>
Here is the final image that was suppose to happen: (taken from mmenu, examples section)
The issue:
For some reasons and because I don't really know how this plugin works, it actually creates a parent div to your container with the .mm-slideout (the one we are interested in), with the property transform set as none.
But when you click to hide the menu, this transform property change to translate3d(60px, 0, 0); which basically translate your container to 60px from the left (what you was talking about).
The solution:
To avoid this effect you don't and because like I said I don't how to configure this, the simplest way would be to just avoid this translate with:
.mm-slideout {
transform: none !important;
}
http://jsfiddle.net/RedBreast/eqbaf88q/5/
The !important actually is because it will act as an override, give this a priority.
There is probably a way to avoid this class/div to act like this with a plugin property, but like I said I don't know it and this is the quickest and simplest way to do this even if in term of optimization, I would be better to remove the class.
Hope this is helpful'.
When I incorporate CKEditor 4.0 with an HTML page without any styles or stylesheet associated, the editor looks fine when it comes to exhibiting bullets and numbers.
However, when I apply the template's stylesheet/CSS, the integrated CKEditor component starts not displaying bullets and numbers properly. I meant it displays the site's stylesheet's bullets which is totally not designated for that context. For e.g. the bullets shows up as a small picture at the right side of each text entry. Or nothing shows up for 1, 2, 3, etc.
How can I make the CKEditor not use the site's stylesheet, but use its own instead. The code snippet looks like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>FAQ</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="~/Content/themes/construct/stylesheets/style.css">
<link rel="stylesheet" href="~/Content/themes/construct/stylesheets/responsive.css">
<script src="~/Content/themes/construct/scripts/jquery.min.js"></script>
<script src="~/Content/themes/construct/scripts/jquery.simpleFAQ-0.7.min.js"></script>
<script src="~/Content/themes/construct/scripts/js_func.js"></script>
<script src="~/ckeditor/ckeditor.js"></script>
<script>
$(function () {
$('#faq').simpleFAQ();
});
</script>
</head>
<body>
<div class="wraper">
<header class="header">
</header>
</div>
<!-- /top_title -->
<!-- /faq_list -->
<div class="faq_list">
<ul class="filter">
<li class="active all">All</li>
<li class="business">Business</li>
<li class="technical">Technical</li>
<li class="miscellaneous">Miscellaneous</li>
</ul>
<ul id="faq">
#foreach (var entry in Model.MyList)
{
<li class="all business">
<p class="question">
#entry.Question
</p>
#foreach (var newEntry in entry.List2)
{
<div class="answer" id="editable" contenteditable="true">
<h1>#newEntry.Header</h1>
<p>#newEntry.Answer</p>
</div>
}
</li>
}
</ul>
</div>
</body>
</html>
Thanks for the help.
Arash
The best way to overwrite the style sheet are..
Copy the same classes into a new file and link this file after the default site. Ex.
default:
.class1 {font: normal 12px Arial;}
overwrite
.class1 {font: bold 12px Arial;}
2.. Follow the previous process and mark attributes as !important. Ex..
default:
.class1 {font: normal 12px Arial;padding:10px;}
overwrite:
.class1 {font: normal 12px Arial;padding-left:10px !important;}