We Keep Coding

Change title iframe (that has no id) within a div

I'm trying to figure out how to add a title to a iframe that has no 'id' using javascript.
The code is like this:
<div class="review-right">
<div>
<iframe></iframe>
</div>
</div>
And I want to get this:
<div class="review-right">
<div>
<iframe title="Sample"></iframe>
</div>
</div>
This is what I've tried:
<script type="text/javascript">
$(document).ready(function(){
$(".review-right iframe").attr('title', 'Sample');
});
</script>
I'm a noob at jquery so I don't know if this is even right.

Try removing the . from .review-right class in the HTML and in the Script just use basic DOM
document.querySelector(".review-right div iframe").title = 'Sample Vanilla'
<div class="review-right">
<div>
<iframe></iframe>
</div>
</div>
JQuery Solution
$(document).ready(function(){
$('.review-right iframe').prop('title', 'Sample Jquery');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="review-right">
<div>
<iframe></iframe>
</div>
</div>

Hide div when input is empty

I need to hide a div when an input element is empty (the user has not typed anything in). I have tried this and this but they do not work for me. the div I want to hide has an id of search-result-container and the input has an id of search-input. I need to hide the div when the input is empty.
Here is the relevant part of my HTML code:
<!-- Html Elements for Search -->
<div id="search-container">
<input type="text" name="search-input" id="search-input" placeholder="🔎 type to search...">
<h1></h1>
<h1></h1>
<h1></h1>
</div>
</div>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<div class="container" id="search-result-container" class="show_hide">
<ul id="results-container"></ul>
<!-- Script pointing to search-script.js -->
<script src=[SEARCH JS]></script>
<!-- Configuration -->
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
searchResultTemplate: '<h1>{title}</h1><h2 class="searchresults">{date}</span></h2>',
json: [JSON URL]
})
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
</div>
Any help will be very much appreciated, Thank you in advance.

Here is a very simple way of doing what you want using jquery:
$('#search-input').on('input', function() {
$('#search-result-container').css('display', $(this).val() !== '' ? 'block' : 'none')
});
#search-result-container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="search-input">
<div id="search-result-container">This will be hidden</div>

Based on both links you post:
HTML:
<input id="search-input" type="text" placeholder="Write here"/>
<div id="search-result-container" class="hide">
<p>
Results...
</p>
</div>
CSS:
.hide {
display: none
}
JS:
$('#search-input')
.on('keyup', function(e) {
var input = $(this).val();
input.length ?
$('#search-result-container').show() :
$('#search-result-container').hide();
})
JSFIDDLE

Use This Way:
<script>
// Your div id which you wants to hide
var hide = document.getElementById("yourDivId");
//Your input field id
var textarea = document.getElementById("YourInputFieldId");
//Simple Logic
if (textarea.value == "") {
hide.style.display = "none";
}
</script>

Want to change Label inside div with ID using jquery

I just would like to change the contents of label which is inside a div,
$('#ma').find("label[id=baa]").val("1");
<div id="ma">
<label id="baa">foaie</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

In your case, you should use html("your text")
$(function(){
$('#ma').find("label[id=baa]").html("1");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ma">
<label id="baa">foaie</label>
</div>

You can change the selector, please see the changes inline
$(function(){
$('#ma').find("label#baa").text("1");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ma">
<label id="baa">foaie</label>
</div>

How do I show and hide dive on button click in html css trick?

I have responsive Html website
I want to hide and show on click of next in simple html
DEMO PAGE
Q1.WHAT IS YOUR NAME
ANS - JAMES
Q2.WHAT IS YOUR ADDRESS
ANS- PUNE
here Q1 and Q2 are on the same page but
I want to show only one question at a one time but do not want to create multiple physical pages.
I tried using hide and show trick of css but I want to do it on simple html button click NEXT
want output like following
Q1.WHAT IS YOUR NAME
ANS- JAMES
[CLICK NEXT]
it will load Q2 on same page.
I tried not using one page with different pages like below.
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<nav>
<ul class="group">
<li>Q1</li>
<li>Q2</li>
</ul>
</nav>
<section id="main-content">
<div id="guts">
Q1.WHAT IS YOUR NAME
ANS - JAMES
</div>
</section>

Using just Javascript you can do this fairly easily. Something like this should work:
HTML
<label id="name">What is your name?<input type="text" /></label>
</br>
<label id="address">What is your address?<input type="text" /></label>
</br>
<button id="next">Next</button>
CSS
#address {
display: none;
}
Javascript
document.getElementById('next').onclick=function(){
document.getElementById('address').style.display='block';
};
Here is a fiddle: http://jsfiddle.net/YJRbE/
Or, if you'd prefer to use jQuery, something like this:
$('#next').on('click', function() {
$('#address').show();
});
Here is a fiddle for the jQuery version: http://jsfiddle.net/XyNXq/

Here some example with jQuery which supports more than two questions:
Try to wrap all your questions in a div and use jquery for the click event so each time you click the button a next question will appear.
In this method you should include all your questions inside the wrapper div and set their display to none.
http://jsfiddle.net/ZFZfY/1/
Edit: http://jsfiddle.net/ZFZfY/3/
HTML:
<div class="questionWrapper">
<div class="question show" id="questionOne">
<label>foo bar?</label>
<input type="text">
</div>
<div class="question" id="questionTwo" style="display: block;">
<label>foo bar?</label>
<input type="text">
</div>
</div>
<a class="NextQuestion" href="#">Next Question</a>
CSS:
.question{ display: none;}
.show{ display: block;}
jQuery:
$('.NextQuestion').click(function(e){
e.preventDefault();
loadNext();
});
$('.PrevQuestion').click(function(e){
e.preventDefault();
loadPrev();
});
function loadNext(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).next().length > 0){
$(this).css('display','none');
$(this).next().fadeIn();
return false;
}
});
}
function loadPrev(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).prev().length > 0){
$(this).css('display','none');
$(this).prev().fadeIn();
return false;
}
});
}

here is script
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.content').each(function() {
var $this = $(this);
$this.find(':not(.col:first,.active)').hide();
$('.col').children().removeAttr('style');
});
$("#add").click(function() {
$(".col:hidden:first").show("slow");
$('.col').prev().hide();
});
});
</script>
here demo html
<div class="content">
<div class="col">
<h3>What Is Your Name</h3>
<input type="text">
</div>
<div class="col">
<h3>What Is Address</h3>
<input type="text">
</div>
<button id="add" class="active">Add</button>
</div>

Hope this helps.
You can change the visibility of elements on button click like this.
document.getElementById('name').style.display='none';
document.getElementById('address').style.display='block';
Here is the working demo

getElementById isn't working with pageslide.js

I use pageslide.js and I have this html code
EDIT:
<body>
Click me!
<div id="modal">
<div id="search">
<img class="icon-search" src="imgs/search.png" onClick= "parse_search();" style="cursor:pointer;">
<input id="query" name="q" type="text" size="40" placeholder="Search..." />
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.pageslide.min.js"></script>
<script >
function parse_search(){
alert(document.getElementById("query").value)}
/* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
jQuery(".second").pageslide({ direction: "right", modal: true });
</script>
</body>
Then the alert window doesn't give me the value of the input field. It gives nothing for value like that ""
Where is the problem?

This is a good example why inline script makes troubles.
Try this:
jQuery(document).ready(function(){
jQuery('img.icon-search').click(function(){
var inputValue = jQuery(this).parent().find('input').val();
alert(inputValue);
});
and remove the inline script from your img element. Use just:
<img class="icon-search" src="imgs/search.png" style="cursor:pointer;">
Fiddle