The problem I have is the next one:
Only the last section of my code add the class, but the rest not.
Each section of my html has a unique class and the same class is also in the list tags
const activ = () => {
const linkMenus = document.querySelectorAll('a')
sections.forEach(clas => {
const view = clas.getBoundingClientRect()
if (view.top < 50 && view.top >= -800){
clas.classList.add("active");
linkMenus.forEach(lis => {
if (clas.classList.contains("active") &&
lis.classList.contains(clas.id)){
lis.classList.add("active_nav");
}
else {
lis.classList.remove("active_nav");
}
})
}
else{
clas.classList.remove("active");
}
})
};
window.addEventListener('scroll', activ)
I made this idea before, I will put my HTML, CSS and JS code, you can read it and use the JS code, maybe it will help you.
you can see the code on Codepen or use the snippet.
If you have any question, ask me.
Focus on this code in the JavaScript:
window.scrollY > sections[i].offsetTop && window.scrollY < sections[i].offsetTop + sections[i].offsetHeight
Snippet:
var sections = document.getElementsByTagName("section"),
li = document.getElementsByClassName("li"),
i;
window.onscroll = function () {
for ( i = 0 ; i < sections.length ; i = i + 1 ) {
if ( window.scrollY > sections[i].offsetTop && window.scrollY < sections[i].offsetTop + sections[i].offsetHeight ) {
li[i].classList.add("red");
sections[i].classList.add("red");
} else {
li[i].classList.remove("red");
sections[i].classList.remove("red");
}
}
}
body
{
margin:0;
padding:0;
font-family:sans-serif;
height:2800px;
background:#ccc;
}
.fixed
{
position:fixed;
width:300px;
height:200px;
background:#ccc;
right:20px;
top:50px;
padding:20px;
box-sizing:border-box;
}
.fixed ul
{
margin:0;
padding:0;
}
.fixed ul li
{
line-height:40px;
list-style-type:none;
font-size:25px;
font-weight:bold;
}
section
{
width:100%;
height:600px;
background:yellowgreen;
box-sizing:border-box;
border:4px solid;
margin-top:25px;
line-height:600px;
font-size:40px;
text-align:center;
font-weight:bold;
}
.red
{
color:red;
}
<div class="fixed">
<ul>
<li class="li">one</li>
<li class="li">two</li>
<li class="li">three</li>
<li class="li">four</li>
</ul>
</div>
<section>one</section>
<section>two</section>
<section>three</section>
<section>four</section>
I am trying to get the selected text inside a contenteditable div once a button is clicked and so far nothing I try is working. :( Here is the code I have thus far:
html
<html>
<head>
</head>
<body>
<div class="toolbar">
<span class="tool bold" id="tool-bold">B</span>
</div>
<div id="my_textarea" contenteditable>
</div>
</body>
</html>
css
html, body {
margin:0;
padding:0;
}
#my_textarea {
height:20rem;
width:20rem;
resize:none;
border:1px solid #000;
}
.toolbar {
display:flex;
flex-direction:row;
height:50px;
align-items:center;
border:1px solid #000;
width:200px;
padding:10px;
}
.tool {
border:1px solid #000;
width:1em;
height:1em;
line-height:1em;
text-align:center;
cursor:pointer;
}
.tool.bold {
font-weight:bold;
}
javascript
function saveSelection() {
if(window.getSelection) {
sel = window.getSelection();
if(sel.getRangeAt && sel.rangeCount){
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if(window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
var selection;
window.addEventListener("load", function(){
var textarea = document.getElementById("my_textarea");
var boldTool = document.getElementById("tool-bold");
textarea.addEventListener("blur", function(event){
selection = saveSelection();
});
boldTool.addEventListener("click", function(event){
console.log(selection);
});
});
I managed to only get the desired result if clicking inside an iframe.. If anyone could please help I would so much appreciate it. Thank you in advance and please go easy on me... :)
You may use selectionchange event
var selection;
window.addEventListener("DOMContentLoaded", function(){
var textarea = document.getElementById("my_textarea");
var boldTool = document.getElementById("tool-bold");
document.addEventListener("selectionchange", function(event){
var sel = document.getSelection();
if (sel.anchorNode.parentElement.id == 'my_textarea') {
selection = sel.toString();
}
});
boldTool.addEventListener("click", function(event){
console.log(selection);
});
});
html, body {
margin:0;
padding:0;
}
#my_textarea {
height:20rem;
width:20rem;
resize:none;
border:1px solid #000;
}
.toolbar {
display:flex;
flex-direction:row;
height:50px;
align-items:center;
border:1px solid #000;
width:200px;
padding:10px;
}
.tool {
border:1px solid #000;
width:1em;
height:1em;
line-height:1em;
text-align:center;
cursor:pointer;
}
.tool.bold {
font-weight:bold;
}
<div class="toolbar">
<span class="tool bold" id="tool-bold">B</span>
</div>
<div id="my_textarea" contenteditable>
</div>
I have a little problem with the live search form. Below is what I want:
This is what I want. What I have is:
And Screenshot of my problem.
The general problem of Screenshot 3 when I type something in Keyword? field, when I get the result that the field gets bigger and that is what I don't need. The result field is good, exactly what I need. So problem is, I don't need to get a bigger field Keyword? after some user enters some text into that field. Keyword? field the same size, result div size wider.
Bellow, I will paste my code.
HTML:
<div class="header-search-input-item">
<input type="text" name="search" id="search" autocomplete="off" placeholder="Keywords?" value=""/>
<div class="resultDiv"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear:both; }
.sp { clear:both; display:block; margin-bottom:30px; }
.sp a { font-weight:bold; color:#0099FF; }
label { margin-top:20px; margin-bottom:3px; font-weight:bold;}
.searchDiv {
width:130px;
}
.resultDiv {
display:none;
width:auto;
margin-top:40px;
max-height:200px;
overflow:auto;
border:1px solid #0099FF;
padding:5px;
z-index:999;
background-color:#fff;
}
.search {
width: 100%;
float: left;
margin:0;
padding:0;
}
.search .pret {
list-style:none;
clear:both;
width:100%;
height: 60px;
padding:5px 0;
border-bottom: 1px solid #fff;
}
.search .pret:hover, .search .pret:hover > a {
background-color:#0099FF;
color:#fff;
cursor:pointer;
}
.search img {
float:left;
margin:0 5px;
padding:3px;
border:1px solid #ccc;
border-radius:5px;
}
.search a {
text-decoration:none;
color:#666;
display:inline;
}
JS:
$(document).ready(function() {
$("#search").keyup(function() {
var keywords = $(this).val();
if(keywords != "") {
$.ajax({
url: "get_search_result.php",
data: {keywords : keywords},
type: "POST",
success: function(resp) {
if(resp != "") {
$(".resultDiv").html(resp).show();
} else {
$(".resultDiv").html("").hide();
}
}
});
} else {
$(".resultDiv").html("").hide();
}
});
$(document).click(function() {
$("#search").val("");
$(".resultDiv").html("").hide();
});
});
And PHP File:
<?php include("db.php");?>
<?php
if(isset($_POST['keywords'])) {
$keywords_arr = explode(",", mysqli_real_escape_string($con, $_POST['keywords']));
$like = "";
foreach($keywords_arr as $key) {
$key = trim($key);
if($key != "") $like .= " `VehiclesTitle` like '%".$key."%' or";
}
$like = substr($like, 0, -3);
$sql = "select distinct * from `tblvehicles` where ".$like." limit 20";
$res = mysqli_query($con, $sql);
echo "<ul class='search'>";
if(mysqli_num_rows($res) > 0) {
while($row = mysqli_fetch_object($res)) {
if(file_exists("admin/img/vehicleimages/".$row->Vimage1."")) $img = "admin/img/vehicleimages/".$row->Vimage1."";
else $img = "images/post_images/default.jpg";
echo "<li class='pret'><a href=''><img src='".$img."' width='50' height='50' />".$row->VehiclesTitle."</a></li>";
}
} else {
echo "<li class='pret'>No match found!</li>";
}
echo "</ul>";
echo "<div class='clearfix'></div>";
}
?>
I'm working on this quiz.
This is the Demo: https://jsfiddle.net/rpscadda/vwpctcjg/
var quiztitle = "Social Security Quiz";
var quiz = [
{
"question" : "Q1: Who came up with the theory of relativity?",
"image" : "http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Albert_Einstein_Head.jpg/220px-Albert_Einstein_Head.jpg",
"choices" : [
"Sir Isaac Newton",
"Nicolaus Copernicus",
"Albert Einstein",
"Ralph Waldo Emmerson"
],
"correct" : "Albert Einstein",
"explanation" : "Albert Einstein drafted the special theory of relativity in 1905.",
},
{
"question" : "Q2: Who is on the two dollar bill?",
"image" : "http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/US_%242_obverse-high.jpg/320px-US_%242_obverse-high.jpg",
"choices" : [
"Thomas Jefferson",
"Dwight D. Eisenhower",
"Benjamin Franklin",
"Abraham Lincoln"
],
"correct" : "Thomas Jefferson",
"explanation" : "The two dollar bill is seldom seen in circulation. As a result, some businesses are confused when presented with the note.",
},
{
"question" : "Q3: What event began on April 12, 1861?",
"image" : "",
"choices" : [
"First manned flight",
"California became a state",
"American Civil War began",
"Declaration of Independence"
],
"correct" : "American Civil War began",
"explanation" : "South Carolina came under attack when Confederate soldiers attacked Fort Sumter. The war lasted until April 9th 1865.",
},
];
var currentquestion = 0,
score = 0,
submt = true,
picked;
jQuery(document).ready(function ($) {
function htmlEncode(value) {
return $(document.createElement('div')).text(value).html();
}
function addChoices(choices) {
if (typeof choices !== "undefined" && $.type(choices) == "array") {
$('#choice-block').empty();
for (var i = 0; i < choices.length; i++) {
$(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
}
}
}
function nextQuestion() {
submt = true;
$('#explanation').empty();
$('#question').text(quiz[currentquestion]['question']);
$('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length);
if (quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion]['image'] != "") {
if ($('#question-image').length == 0) {
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question');
} else {
$('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question']));
}
} else {
$('#question-image').remove();
}
addChoices(quiz[currentquestion]['choices']);
setupButtons();
}
function processQuestion(choice) {
if (quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']) {
$('.choice').eq(choice).css({
'background-color': '#50D943'
});
$('#explanation').html('<strong>Correct!</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
score++;
} else {
$('.choice').eq(choice).css({
'background-color': '#D92623'
});
$('#explanation').html('<strong>Incorrect.</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
}
currentquestion++;
$('#submitbutton').html('NEXT QUESTION ยป').on('click', function () {
if (currentquestion == quiz.length) {
endQuiz();
} else {
$(this).text('Check Answer').css({
'color': '#222'
}).off('click');
nextQuestion();
}
})
}
function setupButtons() {
$('.choice').on('mouseover', function () {
$(this).css({
'background-color': '#e1e1e1'
});
});
$('.choice').on('mouseout', function () {
$(this).css({
'background-color': '#fff'
});
})
$('.choice').on('click', function () {
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
if (submt) {
submt = false;
$('#submitbutton').css({
'color': '#000'
}).on('click', function () {
$('.choice').off('click');
$(this).off('click');
processQuestion(picked);
});
}
})
}
function endQuiz() {
$('#explanation').empty();
$('#question').empty();
$('#choice-block').empty();
$('#submitbutton').remove();
$('#question').text("You got " + score + " out of " + quiz.length + " correct.");
$(document.createElement('h2')).css({
'text-align': 'center',
'font-size': '4em'
}).text(Math.round(score / quiz.length * 100) + '%').insertAfter('#question');
}
function init() {
//add title
if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") {
$(document.createElement('h1')).text(quiztitle).appendTo('#frame');
} else {
$(document.createElement('h1')).text("Quiz").appendTo('#frame');
}
//add pager and questions
if (typeof quiz !== "undefined" && $.type(quiz) === "array") {
//add pager
$(document.createElement('p')).addClass('pager').attr('id', 'pager').text('Question 1 of ' + quiz.length).appendTo('#frame');
//add first question
$(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');
//add image if present
if (quiz[0].hasOwnProperty('image') && quiz[0]['image'] != "") {
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame');
}
$(document.createElement('p')).addClass('explanation').attr('id', 'explanation').html(' ').appendTo('#frame');
//questions holder
$(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
//add choices
addChoices(quiz[0]['choices']);
//add submit button
$(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Check Answer').css({
'font-weight': 700,
'color': '#222',
'padding': '30px 0'
}).appendTo('#frame');
setupButtons();
}
}
init();
});
<style type="text/css" media="all">
/*css reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, code, small, strike, strong, sub, sup, b, u, i {
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
body {
line-height:1;
font:normal 0.9em/1em"Helvetica Neue", Helvetica, Arial, sans-serif;
}
ol, ul {
list-style:none;
}
strong {
font-weight:700;
}
#frame {
max-width:620px;
width:auto;
border:1px solid #ccc;
background:#fff;
padding:10px;
margin:3px;
}
h1 {
font:normal bold 2em/1.8em"Helvetica Neue", Helvetica, Arial, sans-serif;
text-align:left;
border-bottom:1px solid #999;
padding:0;
width:auto
}
h2 {
font:italic bold 1.3em/1.2em"Helvetica Neue", Helvetica, Arial, sans-serif;
padding:0;
text-align:center;
margin:20px 0;
}
p.pager {
margin:5px 0 5px;
font:bold 1em/1em"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#999;
}
img.question-image {
display:block;
max-width:250px;
margin:10px auto;
border:1px solid #ccc;
width:100%;
height:auto;
}
#choice-block {
display:block;
list-style:none;
margin:0;
padding:0;
}
#submitbutton {
background:#5a6b8c;
}
#submitbutton:hover {
background:#7b8da6;
}
#explanation {
margin:0 auto;
padding:20px;
width:75%;
}
.choice-box {
display:block;
text-align:center;
margin:8px auto;
padding:10px 0;
border:1px solid #666;
cursor:pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id = "frame"
role = "content" >
And This is the Java
I want to make some modification, please help! Here is the list of modification.
when I click on "Check Answer" button then if my answer is wrong
then both correct and incorrect answer will showing and the
explanation should comes with a popup with close button or delay
with 1500ms.
Suppose I have 20 question in the quiz and I want to goto question
No. 10 then I need a navigation menu which help me to go on specific
question like question no.10.
How to show all Question and option Randomly.
Can anyone see what in this code is preventing the tooltips in my map from functioning? Ie they function in normal map but not when I add the layers to this map with a toggle button. I assume it's something with the onclick function, but can't figure it out specifically, and what a workaround might be.
Thank you
<style>
.menu-ui {
background:#fff;
position:absolute;
bottom:10px;left:10px;
z-index:1;
border-radius:3px;
width:120px;
border:1px solid rgba(0,0,0,0.4);
}
.menu-ui a {
font-size:13px;
color:#404040;
display:block;
margin:0;padding:0;
padding:10px;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.25);
text-align:center;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}
.menu-ui a.active {
background:#3887BE;
color:#FFF;
}
.menu-ui a.active:hover {
background:#3074a4;
}
</style>
<nav id='menu-ui' class='menu-ui'></nav>
<div id='map'></div>
<script>
var map = L.map('map').setView([10.8229,-84.2116], 12);
var layers = document.getElementById('menu-ui');
addLayer(L.mapbox.tileLayer('XXXX.XXXX'), 'Photo Points', 4);
addLayer(L.mapbox.tileLayer('XXXX.XXXX'), 'River KMs', 3);
addLayer(L.mapbox.tileLayer('XXXX.XXXXX'), 'December 2013 (0.5m)', 2);
addLayer(L.mapbox.tileLayer('XXXXXX.XXXXXX'), 'February 2014 (1.5m)', 1);
function addLayer(layer, name, zIndex) {
layer
.setZIndex(zIndex)
.addTo(map);
// Create a simple layer switcher that
// toggles layers on and off.
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.innerHTML = name;
link.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
if (map.hasLayer(layer)) {
map.removeLayer(layer);
this.className = '';
} else {
map.addLayer(layer);
this.className = 'active';
}
};
layers.appendChild(link);
}
</script>
Did you add interactivity via TileMill? If so, you'll need to add the gridLayer and gridControl to the map, not just a tileLayer.