I've been trying to get this code to work for the past day whilst searching through these forums but without any success.
I'm looking to hide a container div if one of the div's inside has no content.
The script I've got is below:
$('.video-centre').each(function(){
if ($(this).find('.video-thumb p').text().length == "")
$(this).find('.video-centre').css("display", "none");
});
The HTML that I'm trying to apply this to is below:
<div class="video-centre">
<div class="video-point">
<img src="<?php echo get_bloginfo('template_url') ?>/images/video-point.jpg" alt="video pointer" />
</div>
<div class="video-thumb">
<?php the_field('testimonials'); ?>
</div>
<p class="video-more">
View More
</p>
<div id="expandable-1">
<div class="video-thumb">
<?php the_field('testimonials_hidden'); ?>
</div>
<p class="video-close">
Close
</p>
</div>
</div>
Basically, within wordpress, the client will have the opportunity to add videos, it's a bit long winded but they get wrapped in p tags. However if they don't upload anything to a specific area, I would like the container div to have display:none, resulting in only containers being shown if videos have been uploaded.
If there's an easier way to look at the div and say if it's empty then get container div to display none I'd be happy to try that.
Use :empty pseudoclass
if ($(this).find('.video-thumb p').is(':empty'))
this checks if you have an empty paragraph (<p></p>), while
if ($(this).find('.video-thumb').is(':empty'))
checks an empty .video-thumb element
After your edit: if you have spaces inside div the condition return false so it's better to simple check
if ($(this).find('.video-thumb p').length === 0)
Example Fiddle : http://jsfiddle.net/6nyF8/6/
You could do it in several ways.
$('.video-centre').each(function(){
if($(this).find('div.video-thumb').html('') == '')
$(this).hide();
});
OR
$('.video-centre').each(function(){
if($(this).find('div.video-thumb').children().length == 0)
$(this).hide();
});
if ($(this).find('.video-thumb p').text() == "")
or
if ($(this).find('.video-thumb p').is(':empty'))
Hope I understand the Q, here's the fiddle I came up with. Nice and simple.
if ($('.video-centre').find('div:hidden').size() > 0) {
$('.video-centre').children().hide();
}
i would try remowing line feeds between html tags and
<div class="video-thumb">
<?php the_field('testimonials'); ?>
</div>
should be
<div class="video-thumb"><?php the_field('testimonials'); ?></div>
but you could also do the trick in PHP:
<?php if (the_field('testimonials')=="") $style=" style='display:none'";?>
<div class="video-thumb" <?php print $style;?>>
<?php the_field('testimonials'); ?>
</div>
You can also check string with striptags function so from your "testimonials" value remove tags using php in built function "striptags" so now only text will remain which can be compare easily.
Related
I know there are already a few questions like mine but I wasn't able to fix my problem with their solutions.
I got this code in an external html file to include it in others files:
<div class="header">
<h1 class="replace-me">I'am a placeholder</h1>
</div>
The "file" above gets included into this "file":
<h2 style="display: none" class="variable">Hey, I'm a variable</h2>
The Variable from the second code should replace the content of the h1 tag in the first code. I know this isn't a forum to get free codes, I just want some inspirations or suggestions. Thanks Guys!
You can replace the html of one element with the html of another element, like so:
$(".replace-me").html($(".variable").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<h1 class="replace-me">I'am a placeholder</h1>
</div>
<h2 style="display: none" class="variable">Hey, I'm a variable</h2>
However, as Rama Schneider pointed out, you might want to get your content in a different way than html.
Also note that this jQuery-solution is done client-side. If you already know the content when serving the initial HTML, you want to do this server-side.
If you have control over the external file, I'd suggest rewriting things so the external file serves a json object of some sort and work with your data from there.
Otherwise it's a simple matter of using JQuery to get the html contents from the variable and use that value to replace the html contents of the 'replace-me'.
You should solve this on server-side if you can. Make the common template a function, like this:
function getHeader($content) { ?>
<div class="header">
<h1 class="replace-me"><?php echo $content; ?></h1>
</div> <?php
}
calculate $content before you call the function and pass it to the function. If you cannot make this a function and you get this as it is from a third-party source, then you can do it via Javascript, like this:
<script type="text/javascript">
document.getElementsByClassName("header")[0].getElementsByClassName("replace-me")[0].innerHTML = "<?php echo $content; ?>";
</script>
Make sure you add this script after the header tag was loaded.
I can avoid some div elements using conditions, like
<% if (true) %>{
<div> </div>
<%}%>
can I do this on JavaScript side?
You can do it like this.
if(true){
document.getElementById("div1").style.visibility = "hidden";
}
Fiddle Demo
You can use an if/else statement to avoid specific conditions.
if (something === true ){
//target or add specific div
}else {
//bypass or remove/hide specific div
}
JS can't be used inline the way you wish in your example, but if you really need to do inline Div manipulation, you can use PHP if your server supports it. IN the following example, the div id "content" will only be added to the DOM if "somecondition" is met. Otherwise, it remains hidden (not added to the DOM).
<body>
<?php if (somecondition){ ?>
<div id="content">
Foo
</div>
<?php } ?>
</body>
I am using this wonderful jquery plugin called justified gallery. Below is a simplified html syntax to use this plugin, followed by javascript syntax.
HTML
<div id="my-gallery">
<a href="path/to...............">
<img src="path/to/............1.jpg" />
</a>
<a href="path/to...............">
<img src="path/to/............2.jpg" />
</a>
.......
</div>
JAVASCRIPT
<script>jQuery("#my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});</script>
ISSUE - With the above code the plugin is working just fine BUT only for the first instance of the html syntax. Meaning, if I try <div id="my-gallery">......</div> twice or more on the same page, it only works on the first instance. Since there is going to be multiple galleries on a same page I need this to loop.
I can handle php well but yet to start learning javascript so unable to hack the javascript. If it was only php I would have generated different ids for each gallery with something like the code below.
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}
The code above would have resulted to this in the view-source.
<div id="my-gallery-0">first_gallery</div><br>
<div id="my-gallery-1">second_gallery</div><br>
<div id="my-gallery-2">third_gallery</div><br>
So the question is, is my logic correct to solve this, if yes then (since my javascript is nill) how do I solve this in context of my javascript. Any response if appreciated. TIA.
You are not allowed to have multiple element with identical id's... so having two or more <div id="my-gallery"> is invalid HTML.
Instead give each one a class, and use that class name as the selector in your jQuery.
<div id="my-gallery1" class="my-gallery-class">
...
</div>
<div id="my-gallery2" class="my-gallery-class">
...
</div>
$(function(){
$(".my-gallery-class").each(function(){
$(this).justifiedGallery({
rowHeight : 120,
margins : 0
});
});
});
Use a class instead. An ID must be unique. Having multiple identical IDs is invalid HTML. Output as follows:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
foreach($arr as $a){
echo '<div class="my-gallery">'.$a. '</div><br>';
}
And use Javascript then like this. (Note that a document ready event might be required!)
<script>
$(document).ready(function() {
$(".my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>
Using br in HTML for this purpose is discouraged. If your elements are block elements and are not floated or absolutely positioned, you won't need br. If you want some space between them you can set a margin is CSS (and remove br):
.my-gallery {margin: 24px auto;}
If you want to keep the unique ID on the gallery items (I don't know why, it seems pointless and needless markup to me, but anyway) you can do it like this:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div class="my-gallery" id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}
As others have suggested you can give each gallery a common class and use that in your JavaScript
eg:
<div class="gallery" id="my-gallery-0">first_gallery</div><br>
<div class="gallery" id="my-gallery-1">second_gallery</div><br>
<div class="gallery" id="my-gallery-2">third_gallery</div><br>
<script>
jQuery(".gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>
I have
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: </span><i **FROM HERE**>'.$wiersz['likes'].'</i><i>'.$wiersz['unlikes'].'</i></div>';
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: <i>Thank you</i></span><i **OVERHERE**>'.$wiersz['likes'].'</i> <i>'.$wiersz['unlikes'].'</i></div>';
How Can I go FROM (FROM HERE) to the (OVER HERE) by selectors in jQuery?
I'm hiding first div and showing second div. I need to increase innerText of OVERHERE but I dont know how to go there by selectors.
I did:
$(this).parent().next()
this lead me to second div but still cant go into OVERHERE in second div.
try this..
$(this).parent().next().children()[2]
Assuming this is how the rendered HTML looks like
<div>
<span>data<i> added by: username</i></span>
<span>Rate: </span>
<i onclick="$(this).closest('div').next().find('i').eq(2).text(parseInt($(this).text(),10))">25 Likes</i>
<i>unlikes</i>
</div>
<div>
<span>data<i> added by: username</i></span>
<span>Rate: <i>Thank you</i></span><i>Will be overwritten </i> <i>unlikes</i>
</div>
Or $(this).parent().next() instead. However closest is safer in case you wrap your <i> in something
I've got a table row where it retrieves data from MySQL and I have included a .onclick function where it opens up a text editor with data inside, but the text editor is only opening for the first row and not the rest in the table.
This is the jQuery code: The first opens the text editor and the second switches the textarea for the text editor which is ckeditor.
<script type="text/javascript">
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
});
});
window.onload = function()
{
CKEDITOR.replace("editor1");
};
</script>
and this here is echo for the table, I am using a foreach.
echo '
<tr class="trClass" id="'.$counter.'">
<td class="marker">
<i class="fa fa-align-left"></i>
</td>
<td class="title">
'.$article_title.'
</td>
<td class="content">
'.$article_content.'
</td>
</tr>
<section id="d_'.$counter.'" style="display:none;">
<textarea id="editor1">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>
';
$counter++;
}
I cannot figure out how to make the CKEDITOR.replace("editor1"); load for every table, I tried using .click function within it but it does not work as it doesn't load. Here is the problem, if you click on the first row it opens the text editor if you click on the second it does not; http://www.goo.gl/dQrLPN
Typically the id attribute should be unique for each element. Applying properties across multiple elements is usually accomplished with a class. Knowing this, CKEditor is probably just grabbing the first instance of an object with the given id (probably using document.GetElementById behind the scenes).
(According to the documentation, CKEDITOR.replace(var) will either take a DOM element, ID, or name.)
Given that, you have a couple of options. One is to defer loading the CKEditor until you actually click on the table row. This would look something like this... (note how each textarea has a unique id)
<section id="d_' . $counter . '" style="display:none;">
<textarea id="editor_'.$counter.'">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
CKEDITOR.replace('editor_'+id);
});
});
The second option would be to loop through all of the textarea elements and call replace on each one of them on-load. I wouldn't really recommend this, unless there's some specific reason you want to load everything up-front.
EDIT: Although this should fix your issue, you should look in to the HTML issues the other answerers have put forward. <section> doesn't belong as a child of <table> :-)
Try targeting the table and filtering by the rows using the .on() method.
$(document).ready(function()
{
$('#table_id').on('click','.trClass',function() {
var id = $(this).attr('id');
$('#d_'+id).css('display', 'block');
$('#table_id').css('display', 'none');
});
});
Details on .on() are here: https://api.jquery.com/on/
And as noted in the comments above, there are some overall issues with your HTML that you should probably fix before proceeding further.