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
});
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 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>
This is sort of a condensed version of the code, the real version is too long to post but this is enough to represent the concept. I am using this to switch guitar diagrams based on several choices represented by anchors with the corresponding id in the href="". After spending several days getting it to work just right on a static html page, the script won't work in a Wordpress page which is where I intend to use it. I have tried it with the script in the head or inline (which shouldn't matter) - but either way it will not function. I know that Wordpress and certain plugins use Jquery so there may be a version mismatch causing conflicts. I am not (yet) an expert in javascript but I know there are several ways to skin a cat as the saying goes, I just need to find one that plays nice with Wordpress. Any help would be greatly appreciated...
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var divswitch = $('div.diagram_container a');
divswitch.bind('click',function(event){
var $anchor = $(this);
var ids = divswitch.each(function(){
$($(this).attr('href')).hide();
});
$($anchor.attr('href')).show();
event.preventDefault();
});
});
</script>
<style>
.diagram {
margin: 0;
width: 100%;
}
.diagram_container {
width: 100%;
}
</style>
<div id="RH_RW_Div" class="diagram_container" style="float:left; display:block;">
<div class="diagram_menu">
<a class="checked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="unchecked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/RH_RW.gif' /><br />
</div>
<div id="LH_RW_Div" class="diagram_container" style="float:left; display:none;">
<div class="diagram_menu">
<a class="unchecked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="checked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/LH_RW.gif' /><br />
</div>
Wordpress uses by default jQuery.noConflict(). This is to assure that there is no conflict by other libraries using the $ variable. That's why your console says it's not a function.
However, obviously, the jQuery variable still works, and you should use that, and passing to your function the $ variable yourself to enable the shorthand version of jQuery.
So your code should look like this:
jQuery(document).ready(function($){
// Your functions go here
});
My guess is that your Wordpress install or a plugin is already loading up jQuery in the head. Check to see if it exists there, and if it does, don't call it again.
If that doesn't do it and you have this site online, send me the link and I'll take a look.
Calling jQuery twice will often lead to problems. There is also a proper way to load jQuery and override the Wordpress version if you specifically need 1.8.3 (wp_register_script and wp_enqueue_script), but I don't think you need to go down that route yet.
im not much of a coder. just sort of self taught through wordpress. i have a site I've hacked together from a blank theme and I've taken it pretty far.
the last step i want to do is have my #brick open the permalink page with either rel, or class of fancybox.
using WP fancybox plugin.
here is what I'm doing to make the div clickable in the first place
<div id="brick" onclick="location.href='<?php the_permalink(); ?>';" style="cursor:pointer;">
where in this line would i add rel="fancybox" or class="fancybox"?
thank you in advance.
Since you already have the href set in your <a> tag, like this part of your code.
<h2 class="entry-title"><a rel="bookmark" title="Permalink to Art and commerce in the digital age" href="http://throughthelattice.com/art-and-commerce-in-the-digital-age/">Art and commerce in the digital age</a></h2>
... then, I would do :
Remove this line
<script src="//throughthelattice.com/wp-content/themes/lh_wordpress_blank_theme/js/jquery-1.7.1.min.js"></script>
... you already loaded jQuery v1.8.3 in your <head> section
Replace all id="brick" by class="brick"
Replace this script
<script>
$('#brick').fancybox();
</script>
... by this :
<script>
jQuery(document).ready(function () {
jQuery("a[rel='bookmark']").fancybox({
"type": "iframe"
});
}); // ready
</script>
See JSFIDDLE
Rather straight forward to add rel or class properties to an element:
<div id="brick" onclick="location.href='<?php the_permalink(); ?>';" style="cursor:pointer;" rel="fancybox" class="fancybox">
And the JavaScript could be:
$("div.fancybox").fancybox();
or whatever selector you'd like to use. Since you can select with jQuery using a combination of class, id or tag name.
i am using jquery version 1.3.2. i face a strange issue. in IE9 my application works fine , but in IE8 this functon not working
jQuery('.mutulafriends').live('click',function(){});
i just put an alert inside this function but not working , seems it is not identifying the click. in the console i can see a error
SCRIPT87: Invalid argument.
jquery-1.3.2.min.js, line 12 character 12949
when i use this function with the alert
jQuery('.mutulafriends').click(function(){
alert("");
});
works perfectly. but the error is also shown:
SCRIPT87: Invalid argument.
jquery-1.3.2.min.js, line 12 character 12949
seems that error is not affecting the click. i know that for jquery version 1.3.2 live('change' is not working but why live('clck' is not working? any ideas , please help. thanks in advance. this is my HTML. it may be too long , but i think it may help.
<div class="component-list-wrapper">
<?php if(is_array($result) && count(array_filter($result)) > 0) {
foreach($result as $record) {
?>
<div class="eliment-component-list eliment-divider">
<div class="user-profile-img-holder">
<img alt="Profile image"
src=<?php if(isset($record['ProfileImg'])){echo $img_url.md5($record['ProfileID'])."/default/".$record['ProfileImg'];}else{echo $this->config->item('ivory_img_path')."/thumb-img.png";} ?> />
</div>
<div class="user-des-container">
<div class="user-des-left">
<div class="namecontainer">
<label class="darkcolour-large"><?php echo $record['FirstName']; if($record['PrivacySettingFriend']){echo " ".$record['LastName'];} ?></label> <label
class="lblsub"><?php echo $record['StateName'].', '.$record['CityName']; ?></label>
</div>
<div class="friendcontainer">
<label img_url="<?php echo $img_url; ?>" req_type="recieved" friend_id="<?php echo $record['ProfileID']; ?>" class="darkcolour margine-top20 mutulafriends btndialogMutualFriends"><?php if(!isset($record['CommonFriendCount'])){echo "0 Friends in Common";}else if($record['CommonFriendCount']!=1){echo $record['CommonFriendCount']." Friends in Common";}else{echo $record['CommonFriendCount']." Friend in Common";} ?></label>
</div>
</div>
<div class="user-des-right">
<div class="user-des-right-inner">
<img width="13" height="13" class="btnDialogDelete request_del_dialog_open_but" req_type="recieved" prof_friend_id="<?php echo $record['ProfileFriendID']; ?>"
src="<?php echo $this->config->item('ivory_img_path'); ?>close_button.png"
alt="Profile image">
<div class="button-wrapper">
<input type="button" class="btnRequest btn-white-small request_accept_dialog_open_but" name="" prof_friend_id="<?php echo $record['ProfileFriendID']; ?>"
tabindex="123456" value="Accept">
</div>
<div class="button-wrapper">
<input type="button" class="btnDialogAssign btn-grey-small request_decline_dialog_open_but" prof_friend_id="<?php echo $record['ProfileFriendID']; ?>"
name="" tabindex="123456" value="Decline">
</div>
</div>
</div>
</div>
</div>
<?php }
} else {?>
<div class="no-records-found">No records found</div>
<?php } ?>
</div>
try using a the latest jQuery. It might solve your problems. There might be some bugs/deficiencies in that version that could have been addressed in the later versions of jQuery.
the current version as of this answer is 1.7.2 and .live() has been deprecated, and it's replacement is .on().
Also, I pretty much assume you are relying solely on the end error alert, which ends up in the jQuery library. It's not very informative. check your stack traces to check where your errors might possibly originate. try adding break points to know what the values are at a certain part of execution. I have confidence in jQuery and it might just be that you have provided some wrong values to it. check for typos also.
Your class 'mutulafriends' doesnt required dynamic binding,so 'click' is enough i think
Wrap it in
$(document).ready(function(){
jQuery('.mutulafriends').click(function(){
alert('And update your JQuery to the latest one :=)');
});
});
//Delegate method
$(document).ready(function(){
jQuery('div.component-list-wrapper').delegate('.mutulafriends','click',function(){
alert('And update your JQuery to the latest one :=)');
});
});
Live or delegate methods are used only for latebindings which means elements that are generated after page load,Eg generated via an ajax call