I want to remove a Parent div using js or jquery but I am unable to do so because it is multiple cards made dynamically. Here is my code:
<?php
for($ter as $term)
{
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
<?php
echo $term->name;
?>
</h2>
</div>
<div class="row-joinee">
<?php echo $term->data; ?>
</div>
</div>
}
?>
main.js file:
jQuery(document).live(function($) {
if ( $('.row-joinee').text().length == 0 ) {
// length is 0
$('.row-joinee').closest(".wrapper-newjoinee-custom").remove();
}
});
please help me to make display none of wrapper-newjoinee-custom class if row-joinee class is empty
You could try something like this:
$(".row-joinee").filter(
function() { return $(this).text().trim() == ""})
.closest(".wrapper-newjoinee-custom").hide()
This will hide those .wrapper-newjoinee-custom that has en empty <div class="row-joinee">
Demo
$(".row-joinee").filter(function() { return $(this).text().trim() == ""}).closest(".wrapper-newjoinee-custom").hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name
</h2>
</div>
<div class="row-joinee">
data
</div>
</div>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name im empty
</h2>
</div>
<div class="row-joinee"></div>
</div>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name
</h2>
</div>
<div class="row-joinee">
data
</div>
</div>
Related
I want to return HTML Code from a .js file.
Here is my code:
HTML:
...
..
.
<script id="message-response-template" type="text/x-handlebars-template">
<div class="sender-message-line table-content vivify swoopInBottom">
<div class="table-content-cell" id="ava">
<img src="/static//img/pro_2.png" alt="DP" class="avatar">
</div>
<div class="msg-conatiner">
<div class="actual-msg"></div>
<span>Message</span>
<div class="">
<div class="message-seen text-right">{{time}}</div>
</div>
</div>
</div>
</script>
...
..
.
JS
setTimeout(function () {
var contextResponse = {
response:$('HTML CODE I WANT TO RETURN').html(),
time: this.getCurrentTime()
};
I can only return string files but when I want to return the whole HTML code that I wrote up there, nothing shows up
I tried :
response: $('<script id="message-response-template" type="text/x-handlebars-template"> <div class="sender-message-line table-content vivify swoopInBottom"> <div class="table-content-cell" id="ava"> <img src="/static//img/pro_2.png" alt="DP" class="avatar"> </div> <div class="msg-conatiner"> <div class="actual-msg"></div> <span>Message</span> <div class=""> <div class="message-seen text-right">{{time}}</div> </div> </div> </div> </script>').html()
If you're using Jquery:
$("#yourDiv").load('yourhtmlfile.html #readMe');
And add the id to your html:
<div><div id="readMe"><p>text</p></div></div>
I have a button in HTML, and I want to increase a JavaScript variable value when clicked:
<a id="right-btn" onclick="increasePokemon_ID()">
Here is the script:
var pokemon_ID = 1;
function increasePokemon_ID() {
pokemon_ID++;
}
I also tried this way, but none of them worked:
document.getElementById("right-btn").onclick = function() {
increasePokemon_ID();
}
The value is outputted in this div:
document.getElementById("id-number").innerHTML="no. 00" + pokemon_ID;
<div id="id-number"></div>
What is wrong in the code?
Full code:
<?php
require 'database.php';
$id = null;
if ( !empty($_GET['id'])) {
$id = $_REQUEST['id'];
}
if ( null==$id ) {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM pokemons where id = ?";
$q = $pdo->prepare($sql);
$q->execute(array($id));
$data = $q->fetch(PDO::FETCH_ASSOC);
Database::disconnect();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="pokedex">
<div id="left">
<div id="top-left">
<div id="top-leds">
<div id="top-red-led"></div>
<div id="top-yellow-led"></div>
<div id="top-green-led"></div>
</div>
</div>
<div id="led"></div>
<div id="left-triangle"></div>
<div id="screen-border">
</div>
<div id="screen">
<div class="name"><?php echo $data['name'];?></div>
</div>
<div id="cross">
<div id="center">
<div id="cross-center">
<div id="center-circle"></div>
</div>
<div id="up-btn">
<div id="upAr"></div>
</div>
<a id="right-btn" onclick="increasePokemon_ID()">
<div id="rightAr"></div>
</a>
<div id="left-btn">
<div id="leftAr"></div>
</div>
<div id="down-btn">
<div id="downAr"></div>
</div>
</div>
</div>
<div id="id-number"></div>
<div id="blue-btn"></div>
</div>
<div id="middle">
<div id="charniere-haute"></div>
<div id="charniere-basse"></div>
</div>
<div id="right">
<div id="info-screen"></div>
<div id="right-triangle"></div>
<div id="left-arrow-button">
<div id="left-arrow"></div>
</div>
<div id="right-arrow-button">
<div id="right-arrow"></div>
</div>
<div id="keyboard">
<div class="top-key"></div>
<div class="top-key"></div>
<div class="top-key"></div>
<div class="top-key"></div>
<div class="top-key"></div>
<div class="bottom-key"></div>
<div class="bottom-key"></div>
<div class="bottom-key"></div>
<div class="bottom-key"></div>
<div class="bottom-key">Help</div>
</div>
<div id="type-display1"><?php echo $data['type'];?></div>
<div id="type-display2"></div>
</div>
</div>
<script>
var pokemon_ID = 0;
function increasePokemon_ID() {
pokemon_ID++;
document.getElementById("id-number").innerHTML="no. 00" + pokemon_ID;
}
document.getElementById("right-btn").onclick = function() {
increasePokemon_ID();
}
</script>
</body>
</html>
The value is actually being incremented, but you're not showing the updated value to the div.
Try this:
var pokemon_ID = 0;
var el = document.getElementById("id-number");
function increasePokemon_ID() {
pokemon_ID++;
el.innerHTML = "no. 00" + pokemon_ID;
}
<a id="right-btn" onclick="increasePokemon_ID()">
<div id="id-number">0</div>
This is because you are not updating the HTML on click, but just updating the value of a variable. You can add the document.getElementById("id-number").innerHTML="no. 00" + pokemon_ID; to your onclick function or to the increasePokemon_ID function.
I am loading a grid of news stories and want to append two DFP adverts at a particular place in the grid - which is define by a data attribute data-adposition
Here's the HTML of the divs
<div class="aggregator">
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="<?php echo $dfpPos; ?>">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="<?php echo $dfpHalfPos; ?>">
<h2>Test DFP TWO</h2>
</div>
</div>
I am then looping through and currently using detach() to preserve the data but remove it from the document.
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
Having no luck currently! The detach() works as it stores the data when I console.log but does no append to the position defined in the data-adposition
it works for me. what are you getting back from the php expression for data-adposition?
$(document).ready(function(){
var selector = ".aggregator";
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aggregator">
<div class="news-item">n1 </div>
<div class="news-item">n2 </div>
<div class="news-item">n3 </div>
<div class="news-item">n4 </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="1">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="2">
<h2>Test DFP TWO</h2>
</div>
</div>
I'm currently trying to select any h2 element inside of a certain div that does not have content in it and remove it. This is my html code:
<div class="skipToContainer">
<h2 class="vidSkipTo">Hello </h2>
<h2 class="vidSkipTo"></h2>
<h2 class="vidSkipTo"></h2>
<h2 class="vidSkipTo"></h2>
</div>
These are a couple jQuery codes I have tried to no avail:
jQuery(".skipToContainer .vidSkipTo").each (function () {
if (jQuery(this).text().trim() === '')
jQuery(this).remove();
}
jQuery(".skipToContainer h2").each (function () {
if (jQuery(this).text().trim() === '')
jQuery(this).remove();
}
jQuery(".skipToContainer h2").each (function () {
if (jQuery(this).text() === '')
jQuery(this).remove();
}
Any suggestions?
Note: I'm doing these tests on a local WordPress site. Not sure if that matters but just to let you know.
Try
jQuery(".skipToContainer h2").filter(":empty").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="skipToContainer">
<h2 class="vidSkipTo">Hello </h2>
<h2 class="vidSkipTo"></h2>
<h2 class="vidSkipTo"></h2>
<h2 class="vidSkipTo"></h2>
</div>
$('.skipToContainer > .vidSkipTo:empty').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="skipToContainer">
<h2 class="vidSkipTo">Hello </h2>
<h2 class="vidSkipTo"></h2>
<h2 class="vidSkipTo"></h2>
<h2 class="vidSkipTo"></h2>
</div>
I'm working on a UI that has Twitter feeds. I want to be able to open a panel in the middle of two tweets, pushing the tweet below downwards. This functionality can be seen in tweet clients like TweetBot. As each new tweet in the stream popped up it would push each one below it down as well. Tool bar would be the same for all tweets.
Here is what I have for the JS:
$(document).ready(function() {
hidden = true;
$("div#tweetcontainer").click(function() {
if (hidden == false) {
$("div#toolbar").slideUp('fast');
hidden = true;
} else {
$("div#toolbar").slideDown('fast');
hidden = false;
}
});
});
Here is the markup of the HTML:
<div id="wrapper">
<!------------- Indivdual Tweet -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!------------- Indivdual Tweet 2 -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<div id="toolbar">
<div class="toolset">reply</div>
<div class="toolset">Retweet</div>
<div class="toolset">Favorite</div>
<div class="toolset">Track</div>
<div class="toolset">Details</div>
</div>
</div>
Do
$toolbar = $(.toolbar).clone();
$(this).after($toolbar);
I guess you will have to do something like
$(.toolbar).addClass("hidden");
before you appending it to the div, and then do
if ($(.toolbar)).hasClass("hidden"){
...pulldown...
}
or something to keep it disappeared and make it pullDown after appending.