We Keep Coding

How do I get justifiedGallery plugin to work with multiple galleries?

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>

TypeError: tinymce.get(...) is null - Does not seem to be finding ID properly

I'm using tinymce in Wordpress for some custom needs. It was working fine yet now seems to be throwing an error that I previously did not have.
From Firebug:
TypeError: tinymce.get(...) is null
geqqo_new: tinymce.get('geqqo-editor-new').getContent()
However things look perfectly reasonable - they were working before - so please double check me:
JS:
tinymce.get('geqqo-editor-new').getContent()
GENERATED HTML:
<form action="" method="post" target="_blank">
<div id="wp-geqqo-editor-new-wrap" class="wp-core-ui wp-editor-wrap html-active">
<link rel='stylesheet' id='editor-buttons-css' href='http://localhost/hawaii/somelocal/wp-includes/css/editor.min.css?ver=3.9' type='text/css' media='all' />
<div id="wp-geqqo-editor-new-editor-tools" class="wp-editor-tools hide-if-no-js">
<div id="wp-geqqo-editor-new-media-buttons" class="wp-media-buttons"><span class="wp-media-buttons-icon"></span> Add Media</div>
<div class="wp-editor-tabs"><a id="geqqo-editor-new-html" class="wp-switch-editor switch-html" onclick="switchEditors.switchto(this);">Text</a>
<a id="geqqo-editor-new-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">Visual</a>
</div>
</div>
<div id="wp-geqqo-editor-new-editor-container" class="wp-editor-container"><textarea class="wp-editor-area" rows="20" autocomplete="off" cols="40" name="content" id="geqqo-editor-new"></textarea></div>
</div>
</form>
So with all considered, why am I getting an error such as stated above?
Also, this is using Wordpress's tinymce functionality, so perhaps there is a curve-ball being thrown as of this latest version?

Try these step by step and see if they fix the problem:
Replace your existing theme with 2014
Disable all plugins

OnClick is not working with checkbox created by PHP

Well... I don't know what's going on. I have this code which works normally but the checkbox doesn't append anything or doesn't notify the script which really puzzles me. The php code creating the checkbox is:
echo '<div id ="school_content"><h3>School</h3>';
while($row = mysqli_fetch_array($result))
{
echo '<p><input type="checkbox" onClick="ILike()" />'.$row["School"].'</p>';
}
echo '</div>';
Here is the plain HTML File:
<div id="container" class="row">
<div id="School" class="col"></div>
<div id="Department" class="col"></div>
<div id="Level" class="col"></div>
<div id="Source" class="col"></div>
<div id="Coding" class="col"></div>
</div>
<input type='submit' value='Show Result' id='result' onClick=""/>
<div id="dump_here">The dumping area:</div>
And here is the javascript code appending. I don't know why this is not working:
$('#dump_here').append("test");
function ILike(){
$('#dump_here').append("test");
}
It feels really weird. The first line is working fine. By the way... The function is enclosed inside a document ready but putting it outside document ready doesn't work.
jQuery imports properly as I am using AJAX there too.

onClick("ILike()") isn't the right syntax. It should be:
onClick="ILike()"

change it like this
echo '<div id ="school_content"><h3>School</h3>';
while($row = mysqli_fetch_array($result))
{
echo '<p><input type="checkbox" onclick="ILike()" />'.$row["School"].'</p>';
}
echo '</div>';

this is incorrect onClick("ILike()")
The right way is onClick onClick="ILike();"

your syntax in the input element is incorrect. The correct is:
<input type="checkbox" onclick="ILike()" />
You can use your browser console to find issues like that one, which can greatly help you :D
Also, I recommend you to put javascript code in the head of your HTML document:
<head>
<script type="text/javascript">
$().ready(function(){
$(".checkboxILike").click(function(){
ILike();
});
});
</script>
</head>
Of course, you will need put a class named checkboxILike in every checkbox that will call the function

If div is empty, set the container div to "display:none"

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.

Javascript & JQuery Troubles - Grabbing & Writing YouTube Data to Page

I would say I have a little experience with Javascript and JQuery, but in the time spent working on one of my newer sites, nothing is going my way. Basically, I use PHP to write a video ID to javascript code, which then executes to get a YouTube video's title, uploader, views, and length. Everything is working fine on my other site ('Latest Videos' sidebar on Mechabyte.com) but on my newer one, FirstPersonTheater.net, nothing works. I've included the JQuery library, but my scripts aren't writing the information to each post's div fields. I've rationalized that this could simply be an effect of using a barebones theme (I'm building my own, but want to get the kinks worked out as I build it), but since I have all the requirements (JQuery library in header + scripts) I think it should still work. Here's a peek at my source code, you can also visit the site and inspect some of the elements to see if I'm missing anything.
Basic layout (Assume video ID is 0000000000000:
<div class="index_post">
<a href="<?php the_permalink() ?>">
<div class="image">
<div class="container" style="background:url('http://img.youtube.com/vi/0000000000000/0.jpg');">
</div>
<div id="data_time<?php the_ID(); ?>" style="position:absolute;z-index:9;text-decoration:none;bottom:2px;right:2px;font-size:10px;color:#fff;background:#000;padding:0px 2px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;opacity:0.75;">
3RR:0R!
</div>
</div>
<div class="postinfo">
<div class="data_uploadedby<?php the_ID() ?>"></div>
<div class="data_views<?php the_ID() ?>"></div>
</div>
<div class="extras">
<script type="text/javascript">
function ytindex<?php the_ID(); echo time() ?>( data )
{
$('#data_time <?php the_ID() ?>').html( secondsToHms( data.entry[ "media$group" ][ "yt$duration" ].seconds ) );
$('.data_postedby<?php the_ID() ?>').html( 'by ' + data.entry[ "author" ][ 0 ].name.$t );
$('.data_uploadedby<?php the_ID() ?>').html( data.entry[ "title" ].$t );
$('.data_views<?php the_ID() ?>').html( data.entry[ "yt$statistics" ].viewCount + ' views</h3>' );
}
</script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/0000000000000?v=2&callback=ytindex<?php the_ID(); echo time() ?>"></script>
</div>
</a>
</div>
Here's the result (CSS elements like thumbnail display fine, because they're handled w/ PHP, none of the other elements load): http://i.stack.imgur.com/0HYKQ.png (link b/c of SO rep)
Thanks in advance! From experience I can say most of the people on this site are awesome helpers! -Matt

the jquery library is already included in the current versions of wordpress. Use wp_enqueue_script to add the jquery library.
Don't just add the script to your header.php file...
Then you'll also need to use this ready function for compatibility with wordpress.
jQuery(document).ready(function($){
// now you can use jQuery code here with normal $ shortcut formatting
});