I've been trying to hide a button when a div is empty with no luck, why is the div empty? because via back-end wordpress i'm inserting a shortcode in it.
this is the code:
<head>
<script src="jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() { if ( $(".whatever").parents("#content").length == 1 ){
$('input#bt23').show();
}else { $('input#bt23').hide();
});
</script>
</head>
<body>
<div id="content">
///empty
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" /></body>
That's pretty much it, trying to get the button to disappear if there's no other div insider #Content, any ideas?
I just noticed that, maybe just maybe the div is not empty, it looks like it's empty but i think is filled with space.
So rather than comparing empty with filled, how would it be to compare filled with text and a specific div inside it?
like this:
<div class="content">
<div style="whatever">
<div class="video-wrapper" style="padding-bottom:56.2222222222%;">
Check for text or html:
Without content
$(document).ready(function() {
if ( $("#content").text() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
With content
$(document).ready(function() {
if ( $("#content").text() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">Content here</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
With spaces only
$(document).ready(function() {
if ( $("#content").text().trim() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"> </div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
Checking for a specific div
We can be a little creative here. Let's say we're looking for the .video_wrapper div inside the content. We can simply query for it, and if it's not found, the returned length will be zero, causing the input to hide.
$(document).ready(function() {
console.log($("#content .video-wrapper"));
if ($("#content .video-wrapper").length > 0) {
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="content">
<div style="whatever">
<div class="video-wrapper"></div>
</div>
</div>
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
Checking for a specific div - plain JS
function windowReady() {
if (document.querySelector("#content .video-wrapper")) {
document.getElementById('bt23').style.display = "block";
} else {
document.getElementById('bt23').style.display = "none";
}
};
window.onload = windowReady;
<div id="content">
<div class="content">
<div style="whatever">
<div class="video-wrapper"></div>
</div>
</div>
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
You trying to accomplish something like this?
$(document).ready(function() {
if ( $("#content").html() == '' )
{
$('input#bt23').hide();
}
else {
$('input#bt23').show();
}
});
well first of all this should be handled server sided in PHP, you should check there if any contend comes out. failing to do that there is a jquery solution.
if($.trim($("#content").text()) == ""){$("#bt23").hide();}
Related
I have some very simple code to get information about active div with class name active. I currently trying to get its index between a collection of divs with class name slide. However, I tried many selectors with no benefit. So, I need your help.
CSS
<style type="text/css">
.slide {
width:50px;border:1px solid #808080;height:50px;float:left; display:inline-block;
text-align:center; vertical-align:middle;/*display:none;*/
}
.active { background-color:brown }
</style>
HTML
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function () {
var nxt = 0;
var prv = 0;
var crnt = 0;
$("#get_info").click(function () {
crnt = $(".slide").index(".slide .active");
$('#msg').html(crnt);
});
});
</script>
As shown all I need to get "active" position index between "slide". The permanent result for this is -1.
You can get it like this:
$(document).ready(function() {
$("#get_info").click(function() {
let crnt = $(".slide").index($(".slide.active"));
$('#msg').html(crnt);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
I created extension:
HTML code is lower:
<input id="play1" type="image" src="images/121.png" type="button" alt="Воспроизвести"/>
<input id="pause1" type="image" src="images/120.png" type="button" alt="Пауза"/>
<input id="next1" type="image" src="images/122.png" type="button" alt="След.трек"/>
I don't understand why javascript the id button = with "play1" after clicking doesn't work
Javascript this extension:
$(document).ready(function () {
document.getElementById('play1').onclick = function(){
}
});
Code of control of player buttons:
<div id="ac_controls" class="fl_l">
<div id="ac_play" class="fl_l"></div>
<div class="next_prev fl_l">
<div id="ac_prev" class="ctrl_wrap">
<div class="prev ctrl"></div>
</div>
<div id="ac_next" class="ctrl_wrap">
<div class="next ctrl"></div>
</div>
</div>
</div>
Then you will need to use window.onload. Your script will look something like this:
<script type="text/javascript">
window.onload = function() {
document.getElementById("play1").onclick = function() {
alert("hello"); //for testing
}
}
</script>
$(document).ready() is a shortcut used in jQuery. Which you can make use of by adding the line below in your html.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
I have the DOM structure as
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
</div>
</div>
<div class="subContent">
</div>
<div class="subContent">
</div>
I want to select <div class="subContent"> on enter event of input box which is closest to the input box.
$('#search').on('keypress', function(){
$(this).parent().parent().next();
});
Is there a better way to do this ?
$(this).closest('#wrapper').nextAll('.subContent').first()
That way you can change it to use classes
I guess this can help you
$("#search").click(function () {
$(this).closest("div.module").hide();
});
Possible duplicate of
Hiding the closest div with the specified class
Use This:-
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
<div class="subContent" style = 'background-color:red;'>div1</div>
<div class="subContent" style = 'background-color:red;'>div2</div>
<div class="subContent" style = 'background-color:red;'>div3</div>
</div>
</div>
</html>
<script>
$('#search').on('keypress', function(){
$(this).next().css( "background-color", "blue" );
});
</script>
For some reason, i have this two functions in my javascript, and both seems to work.
The first one, is when user click on one of two divs, it will show the other div, depending on wich was clicked.
The second one, is when the user is on the second div, and clicks on back.
All this is working, but when the user return to the first div, and i click on one of two divs, this isnt going to the second div.
It's closing both divs.
First Div with two options:
<div class="firstQuestion">
<div class="male" onclick="secondQuestion(this);"></div>
<div class="female" onclick="secondQuestion(this);"></div>
</div>
Second div, with back button:
<div class="secondQuestion">
<form class="formAconselhamento" id="male">
<input type="button" id="save_value_male" class="back" name="save_value" onclick="comeBack(this); return false;"/>
<input type="button" id="save_value_male" class="next" name="save_value" />
</form>
</div>
Javascript functions:
function secondQuestion(divID)
{
var clicado = $("#"+$(divID).attr('class'));
$(".firstQuestion").hide();
$("#"+$(divID).attr('class')).show();
}
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(".secondQuestion").hide();
$(".firstQuestion").show();
}
}
How can i resolve my issue?
In comeBack function you hide <div class="secondQuestion"> instead of <form class="formAconselhamento" id="male">
Try something like:
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(divID).closest("form").hide();
$(".firstQuestion").show();
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.maincat{background: #eef;}.subcat{background: #abc;}
</style>
</head>
<body>
<div class="maincat">
<div class="type" rel='one'>first</div>
<div class="type" rel='two'>second</div>
<div class="type" rel='three'>third</div>
</div>
<div class="subcat" style="display: none">
back
<div id="one">
first content
</div>
<div id="two">
second content
</div>
<div id="three">
third content
</div>
</div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".type").click(function(){
$(".maincat").hide();
$("#" + $(this).attr('rel')).show().siblings().hide();
$('.subcat').show();$('.back').show();
});
$(".back").click(function(){
$('.subcat').children().hide();$(".maincat").show();
});
</script>
</body>
</html>
I'm using the Multi Page Template (all pages and javascriot in one html file). I just restructure my jQuery mobile app:
Before: all JavaSripts in the html file, example:
<div data-role="page>.....<script></script> </div>
Now: all JavaScripts are outsourced in a own file. But now comes the problem:
I'm searching after addresses at one page. Each result is stored in a history (localStorage). So the user can use the search or click on old history search results.
Since I outsourced the script for this page, the history doesn't work. I will show you the working code and the not working code:
Working code - pre outsourced:
This code works. JavaScript is in page div:
<div data-role="page" id="searchPage" class="bg-light">
<div data-role="content">
<div id="content-search">
<p><input type="text" name="address" id="address" class="stored" value="" /></p>
<p><input type="submit" id="submitAddress" value="Search" data-theme="a" data-corners="false" /></p>
</div>
<div id="searchHistory">
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-c">
<h3>History:</h3>
</div>
<div class="ui-body ui-body-c">
<div id="lastResults" class="ui-body ui-body-c ui-corner-all"></div>
</div>
</div>
</div>
</div>
<script>
......
// check and show previous results in **lastResults** div
if (localStorage.getItem("history") != null) {
var historyTemp = localStorage.getItem("history");
var oldhistoryarray = historyTemp.split("|");
oldhistoryarray.reverse();
$("#lastResults").empty();
jQuery.each( oldhistoryarray, function( i, val ) {
$("#lastResults").append(
"<ul data-role=\"listview\" data-inset=\"true\" >" +
// store history in localStorage
"<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
"</ul>"
);
// max. history
if (i==3) {
return false;
}
});
} else {
// hide search history
console.log("no history");
$("#searchHistory").hide();
}
function getHistory(i){
localStorage.setItem('address', oldhistoryarray[i]);
}
</script>
</div>
Not Working code - JS outsourced in own file:
JavaScript is now in own file (function.js):
index.html:
detail code see above
<div data-role="page" id="searchPage" class="bg-light">
<div data-role="content">
</div>
<script></script>
</div>
function.js:
// check and show previous results in **lastResults** div
if (localStorage.getItem("history") != null) {
var historyTemp = localStorage.getItem("history");
var oldhistoryarray = historyTemp.split("|");
oldhistoryarray.reverse();
$("#lastResults").empty();
jQuery.each( oldhistoryarray, function( i, val ) {
$("#lastResults").append(
"<ul data-role=\"listview\" data-inset=\"true\" >" +
// store history in localStorage
"<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
"</ul>"
);
// max. history
if (i==3) {
return false;
}
});
} else {
// hide search history
console.log("no history");
$("#searchHistory").hide();
}
function getHistory(i){
localStorage.setItem('address', oldhistoryarray[i]);
}
if you are not executing your script after the page has finished loading, there's a chance queries like $("#searchHistory") might be returning empty.
Make sure you execute your script in a callback that is called at the onload event.
so I'd suggest something like this (please also check that you initialize your "history")
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="function.js"></script>
<script>
$(document).on( "pagecreate", function( event ) {
console.log("page created")
$('#submitAddress').on('click',function(){
makeHistory();
})
});
</script>
</head>
<body>
<div data-role="page" id="searchPage" class="bg-light">
<div data-role="content">
<div id="content-search">
<p><input type="text" name="address" id="address" class="stored" value="" /></p>
<p><input type="submit" id="submitAddress" value="Search" data-theme="a" data-corners="false" /></p>
</div>
<div id="searchHistory">
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-c">
<h3>History:</h3>
</div>
<div class="ui-body ui-body-c">
<div id="lastResults" class="ui-body ui-body-c ui-corner-all"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
function.js then would be
// check and show previous results in **lastResults** div
function makeHistory()
{
if (localStorage.getItem("history") != null) {
var historyTemp = localStorage.getItem("history");
var oldhistoryarray = historyTemp.split("|");
oldhistoryarray.reverse();
$("#lastResults").empty();
jQuery.each( oldhistoryarray, function( i, val ) {
$("#lastResults").append(
"<ul data-role=\"listview\" data-inset=\"true\" >" +
// store history in localStorage
"<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
"</ul>"
);
// max. history
if (i==3) {
return false;
}
});
} else {
// hide search history
console.log("no history");
//and you probably need to initialize your history here, something like
localStorage.setItem("history", "lalala");
$("#searchHistory").hide();
}
}
function getHistory(i){
localStorage.setItem('address', oldhistoryarray[i]);
}
Now the pagecreate event also binds a behaviour to your search button to actually update the history each time it is clicked.