I have a search bar where the results are displayed centered of the page with a fixed div. And an absolute div covers the page behind the results with a semi transparent black. How could I remove the class ".coverOn" added on the keyup function, If I just deleted what I put into the search field without refreshing the page?
Thanks.
<styles>
.coverOn {
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
z-index:8;
}
#output { /* holds search results */
position:fixed;
left:0;
right:0;
top:130px;
width:400px;
margin:0 auto;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
z-index:12;
}
</styles>
<body>
<div id="cover"></div>
<div id="Search">
<input type="text" name="search" onkeyup="searchq();" value="" required class="SearchField" />
<div id="output"></div>
</div>
</body>
<script>
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("../php/productSearch.php", {searchVal: searchTxt}, function(output) {
$("#output").html(output);
document.getElementById("cover").className = "coverOn";
});
}
</script>
Remove class if searchTxt string is empty:
function searchq() {
var searchTxt = $("input[name='search']").val().trim();
$.post("../php/productSearch.php", {searchVal: searchTxt}, function (output) {
$("#output").html(output);
document.getElementById("cover").className = searchTxt ? "coverOn" : "";
});
}
or since you are using jQuery it can be simpler:
$("#cover").toggleClass("coverOn", searchTxt);
use removeClass('selector');
$('input').on('keyup', function() {
$('.red').removeClass('red');
})
.red {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
<div class="red">red</div>
What you could do, rather than operating with classes, is instead of
.coverOn {
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
z-index:8;
}
do
#output:not(:empty) {
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
z-index:8;
}
So long as when you do an empty search, it returns an empty result.
Your resulting javascript would be
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("../php/productSearch.php", {searchVal: searchTxt}, function(output) {
$("#output").html(output);
});
Related
$('.menu-colors_page > span').each(function () {
var arr_color = [];
arr_color.push($(this).attr('class'));
$(this).click(function (arr_color) {
console.log(arr_color);
});
});
I tried like this but it doesn't work
Q: How to call arr_color inside click?
q: How can i pass parameter from "each" function to "click" function?
Maybe like this:
var arr_color = []; /* global variable */
$(document).ready(function() {
$('.menu-colors_page > span').each(function() {
arr_color.push($(this).attr('class'));
});
$('.menu-colors_page > span').click(function() {
console.log(arr_color);
});
});
span{
padding:2px;
margin:1px;
color:white;
cursor:pointer;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<div class="menu-colors_page">
<span class="red">span blue</span>
<span class="green">span green</span>
<span class="blue">span blue</span>
</div>
I need to ask user's input by clicking a button "start" and display it in a div box on the left, then there are 2 buttons which can switch the text from left box to right and another button to switch the text back to left, after all another button to clear it. I'm stuck on the switching part and the clear part. My clear script got some problem and it can't clear the content. I have no idea how to start on the switching part.
This is my code:
<html>
<style>
.container{
width:900px;
height:200px;
}
.grey-box{
background-color:grey;
width:300px;
height:200px;
float:right;
}
.black-box{
background-color:black;
width:300px;
height:200px;
float:left;
}
.button{
position:relative;
left:110px;
top:50px;
}
</style>
<script>
function start(){
var name = prompt("Please enter your name");
document.getElementById("name").innerHTML = name;
}
function clear(){
document.getElementById("name").innerHTML = "";
}
</script>
<button onClick="start();">Start</button>
<button onClick="clear()">Clear</button>
<br/ ><br />
<div class="container">
<div class="black-box" id="leftBox"><p id="name" style="color:white;text-
align:center;margin:100px;"></p></div>
<div class="grey-box" id="rightBox"></div>
<div class="button">
<button onClick="le2ri()">--></button><br /><br />
<button onClick="ri2le()"><--</button>
</div>
</div>
</html>
Ideally I would like to have page like this, after entering the input it will be shown on the left box initially, when i press to right button the user input will be going to the right box. When i press to left button the user input will be going to the left.
Try this, clicking the buttons would simply copy the textContent from each and place it in the other box. Don't call your function clear() as it is referring to Document.clear().
Your clear function would be always shadowed by the document.clear() so you would be needing to change the name of the function responsible for clearing text.
<html>
<style>
.container{
width:900px;
height:200px;
}
.grey-box{
background-color:grey;
width:300px;
height:200px;
float:right;
}
.black-box{
background-color:black;
width:300px;
height:200px;
float:left;
}
.button{
position:relative;
left:110px;
top:50px;
}
</style>
<script>
function start(){
var name = prompt("Please enter your name");
document.getElementById("name").textContent = name;
}
function clearText(){
document.getElementById("name").textContent = "";
}
function le2ri(){
document.getElementById("rightBox").textContent = document.getElementById("name").textContent
document.getElementById("name").textContent = "";
}
function ri2le(){
document.getElementById("name").textContent = document.getElementById("rightBox").textContent
document.getElementById("rightBox").textContent = "";
}
</script>
<button onclick="start();">Start</button>
<button onclick="clearText();">Clear</button>
<br/ ><br />
<div class="container">
<div class="black-box" id="leftBox"><p id="name" style="color:white;text-
align:center;margin:100px;"></p></div>
<div class="grey-box" id="rightBox"></div>
<div class="button">
<button onClick="le2ri()"> To right </button><br /><br />
<button onClick="ri2le()"> To left </button>
</div>
</div>
</html>
Try this:
<html>
<head>
<style>
.container {
width: 900px;
height: 200px;
}
.grey-box {
background-color: grey;
width: 300px;
height: 200px;
float: right;
}
.black-box {
background-color: black;
width: 300px;
height: 200px;
float: left;
}
.button {
position: relative;
left: 110px;
top: 50px;
}
</style>
</head>
<body>
<button onClick="start()">Start</button>
<button onClick="clearField()">Clear</button>
<br /><br />
<div class="container">
<div class="black-box" id="leftBox">
<p style="color:white;text-align:center;margin:100px;"></p>
</div>
<div class="grey-box" id="rightBox">
<p style="color:white;text-align:center;margin:100px;"></p>
</div>
<div class="button">
<button onClick="leftRight()">Move Right</button>
<br /><br />
<button onClick="rightLeft()">Move Left</button>
</div>
</div>
</body>
<script>
// dom reference
const blackBox = document.querySelector("#leftBox");
const greyBox = document.querySelector("#rightBox");
let name;
// start function
function start() {
name = prompt("Please enter your name");
// make sure user input something
if (name !== "") {
blackBox.children[0].innerHTML = name;
} else {
alert("Type your name.");
}
}
// left 2 right function
function leftRight() {
// setting first box to empty
blackBox.children[0].innerHTML = "";
// adding name value to the right box
greyBox.children[0].innerHTML = name;
}
// left 2 right function
function rightLeft() {
// setting first box to empty
blackBox.children[0].innerHTML = name;
// adding name value to the right box
greyBox.children[0].innerHTML = "";
}
function clearField() {
// clearing out the fields and the name value
blackBox.children[0].innerHTML = "";
greyBox.children[0].innerHTML = "";
name = "";
}
</script>
</html>
I'm working on a random wiki viewer, and its been a slog, but i'm finally at the point where i think that at least the UI's functionality is done. The only problem is that after i fade some text on the "random" button, and replace it with an iframe which is then removed when the button is clicked again, the text doesn't seem to fade back in. Any ideas?
https://codepen.io/EpicTriffid/pen/WOYrzg
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").animate({opacity:0});
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$("#cross1").fadeOut('fast');
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
};
};
});
You are emptying the HTML of .button1 when you do:
$(".button1").html(....
In order to get it back, you need to add:
$(".button1").html('<div class="b1text">Random</div>');
after
$('.randframe').remove();
Your button is missing the text Random
When you call:
$(".button1").html(...
you are replacing the inside html of the object with the iframe.
When you remove .randframe you need then re-add the text for your button.
Instead of:
$('.randframe').remove()
you can call this which will accomplish both:
$('.button1').html('random');
Efficiency tip: You did a good job of saving references to your jquery variables but and cross, why not use them?
but.html(...
cross.click(function (){...
This line effectively replaces whatever you have in the button 1 div
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
Your cross1.click function does not re-populate the button1 div, I would recommend
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$('.button1').html('Random');
$("#cross1").fadeOut('fast');
$(".b1text").animate({opacity:"1"});
});
Here you go with the solution https://codepen.io/Shiladitya/pen/WOLNpw
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").fadeOut();
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
but.removeAttr('style');
cross.fadeOut('fast');
$('.randframe').remove();
but.html('<div class="b1text">Random</div>');
});
};
};
});
//Search Button
var but2 = "closed"
$(".button2").click(function () {
var but = $(".button2");
var btext = $(".b2text");
var cross = $("#cross2");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
btext.fadeOut();
cross.delay(2000).fadeIn()
but2 = "open"
$("#cross2").click(function() {
$('.button2').removeAttr('style');
$('.b2text').fadeIn(1500);
$("#cross2").fadeOut('fast');
})
})
});
#spacer {
margin:0;
padding:0;
height:50px;
}
body {
min-height: 100%;
min-width: 1024px;
width:100%;
margin-top:4em;
padding:0;
background-color: teal;
}
h1 {
color:white;
font-family:"cabin";
text-align:center;
}
#cross1 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: left;
display:none;
}
#cross2 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: right;
display:none;
}
#randframe {
display:none;
}
.button1 {
position:absolute;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
.button2 {
position:absolute;
right:0;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Wiki Viewer</h1>
</div>
</div>
</div>
<div id="spacer"></div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="button1">
<div class="b1text">Random</div>
</div>
<div class="button2">
<div class="b2text">Search</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="text-center">
<i id="cross1" class="glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="col-xs-12">
<div class="text-center">
<i id="cross2" class="glyphicon glyphicon-remove"></i>
</div>
</div>
You need to keep the content inside the ".button1" to reuse after the iframe is removed.
Try using callbacks. So change your #cross1 fadout to
$("#cross1").fadeOut('fast',function(){
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
Also, this may not be affecting your code, but you're missing some semi colons after some variable declarations.
Not all methods have callbacks in JQuery, but when available, they are useful because basically it means that your code is not fired until the other thing is completely done. This happens a lot with fading and opacity.
$('button').click(function(){
$(this).parent().before('<div class="comment_box_all"><div class="comment_user"></div></div>')
var content = document.createElement("span");
content.innerHTML=$(".textarea").val().replace(/(\n|\r|\r\n)/g, '<br>');
$('.comment_user').append(content);
});
$(document).on("click", "button", function() {
$(this).closest('.comment_panel').find('.textarea').val('')
});
$('button').attr('disabled',true);
$('.textarea').keyup(function(){
if($(this).val().length !=0)
$('button').attr('disabled', false);
else
$('button').attr('disabled',true);
});
.comment_panel
{
width:450px;
height:100px;
}
textarea
{
width:300px;
height:80px;
}
button
{
top:10px;
left:330px;
}
.comment_box_all
{
width:450px;
height:100px;
background-color:#999;
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment_panel">
<textarea class="textarea" placeholder="Add text..."></textarea>
<button>Add comment</button>
</div>
Could you help me how I can clear textarea after click button not using .val(''), because look, I would like disabled button when textarea is empty but this happen only in first add text, if I add text next time in textarea is '' and button is active
You can just add the disabled class every time the add button is clicked as you were doing for the first time .
$(this).attr('disabled',true);
Add this line inside the button onclick function.
$('button').click(function(){
$(this).parent().before('<div class="comment_box_all"><div class="comment_user"></div></div>')
var content = document.createElement("span");
content.innerHTML=$(".textarea").val().replace(/(\n|\r|\r\n)/g, '<br>');
$('.comment_user').append(content);
});
$(document).on("click", "button", function() {
$(this).closest('.comment_panel').find('.textarea').val('')
$(this).attr('disabled',true);
});
$('button').attr('disabled',true);
$('.textarea').keyup(function(){
if($(this).val().trim().length !=0)
$('button').attr('disabled', false);
else
$('button').attr('disabled',true);
});
.comment_panel
{
width:450px;
height:100px;
}
textarea
{
width:300px;
height:80px;
}
button
{
top:10px;
left:330px;
}
.comment_box_all
{
width:450px;
height:100px;
background-color:#999;
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment_panel">
<textarea class="textarea" placeholder="Add text..."></textarea>
<button>Add comment</button>
</div>
Here is my code:
$(function(){
$("#tags input").on({
focusout : function() {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
this.value = "";
},
keyup : function(ev) {
// if: comma|enter (delimit more keyCodes with | pipe)
if(/(188|13|32)/.test(ev.which)) $(this).focusout();
}
});
$('#tags').on('click', 'span', function() {
if(confirm("Remove "+ $(this).text() +"?")) $(this).remove();
});
});
#tags{
float:right;
border:1px solid #ccc;
padding:5px;
font-family:Arial;
}
#tags > span{
cursor:pointer;
display:block;
float:right;
color:#3e6d8e;
background:#E1ECF4;
padding:5px;
padding-right:25px;
margin:4px;
}
#tags > span:hover{
opacity:0.7;
}
#tags > span:after{
position:absolute;
content:"×";
border:1px solid;
padding:2px 5px;
margin-left:3px;
font-size:11px;
}
#tags > input{
direction: rtl;
background:#eee;
border:0;
margin:4px;
padding:7px;
width:auto;
}
.autocomplete{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags">
<span>php</span>
<input type="text" value="" placeholder="Add a tag" />
<div class="autocomplete"></div>
</div>
As you see, I'm trying to create a tag attachment box for a post. Now I need to create an autocomplete box for tags. I can do that by jQuery UI, but I don't want to. Because using jQuery UI just for autocomplete doesn't seem affordable.
Anyway I want to suggest to user the values of following array:
var tags = ["PHP", "MySQL", "HTML", "CSS", "C", "SQL", "JavaScript"];
For example:
if the user writes H, I want to suggest him: HTML
if the user writes T, I want to suggest him: HTML, JavaScript
if the user writes SQ, I want to suggest him: MySQL, SQL
Ok, is doing that possible without using jQuery UI?
Try this:
var tags = ["PHP", "MySQL", "HTML", "CSS", "C", "SQL", "JavaScript"];
var searchTerm = 'SQ';
var matches = tags.filter(function(tag) {
return tag.toLowerCase().indexOf(searchTerm.toLowerCase()) >= 0;
});
console.log(matches);
an easy way to do this, is with Array.filter
you would need a polyfill to support IE browsers
var tags = ["PHP", "MySQL", "HTML", "CSS", "C", "SQL", "JavaScript"];
function autocomplete(query) {
var re = new RegExp(query,"gi");
return tags.filter(function(tag){
return re.exec(tag)
})
}
autocomplete('h')