Skip to main content

jQuery a href and button -


it's easy <a href> , button can have same functions, it's not working.

this sample link of website: http://cocopop12.site11.com/search/. it's youtube plugin has 2 buttons on right side, preview , select.

the problem if click preview should play youtube video. it's not working. code below.

this link (the link working, copy on thumbnails):

<a class="videothumb4" href="http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '"> ' . $yvalue['description'] . ' </a>

this button want replace on hover.

<input class="videothumb4" onclick="location.href=\'http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '\'" type="button" name="previewsel" value="preview" id="previewbut">

the jquery code:

$(function() { <!-- videothumb css class found in foreach list class="videothumb". ytvideo holder id set div id--> $(".videothumb4").ytplaylist({ holderid: 'ytvideo4', html5: true, playerwidth: '520', autoplay: false, sliding: false, listsliding: true, social: true, autohide: false, playfirst: 0, playonload: false, modestbranding: true, showinfo: false }); }); // hover $(document).ready(function(){ $("input[type=button]#previewbut, #selectbut").hide(); $("li#static").hover( function() { $(this).find('#previewbut, #selectbut').fadein(); }, function() { $(this).find('#previewbut, #selectbut').fadeout(); }); });

the full code:

<!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>youtube search</title> <meta name="description" content="youtube keyword playlist jquery , php gdata api version2" /> <meta name="copyright" content="www.cfconsultancy.nl" /> <meta name="web_author" content="ceasar feijen" /> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <!-- remove above if including file --> <!-- needed youtube player --> <link rel="stylesheet" type="text/css" href="./css/youtubeplaylist.css" /> <!-- example css playlist right. see example 3 --> <link rel="stylesheet" type="text/css" href="./css/youtubeplaylist-right-with-thumbs.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.youtubeplaylist-min.js"></script> <script type="text/javascript"> $(function() { <!-- videothumb css class found in foreach list class="videothumb". ytvideo holder id set div id--> $(".videothumb4").ytplaylist({ holderid: 'ytvideo4', html5: true, playerwidth: '520', autoplay: false, sliding: false, listsliding: true, social: true, autohide: false, playfirst: 0, playonload: false, modestbranding: true, showinfo: false }); }); // hover $(document).ready(function(){ $("input[type=button]#previewbut, #selectbut").hide(); $("li#static").hover( function() { $(this).find('#previewbut, #selectbut').fadein(); }, function() { $(this).find('#previewbut, #selectbut').fadeout(); }); }); </script> <!-- css --> <style> /************** code demo **************/ /* containing element */ /* static image shown before hover */ a#static{ z-index:1; } input[type=button]#previewbut { background-color: #9b9b9b; color: #ffffff; text-decoration:none; border:0px; width:100px; } input[type=button]#previewbut { position: absolute; margin-top:-45px; margin-left:50px; cursor: pointer; font-size: 12px; line-height: 11px; padding: 10px 5px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 1px 1px 2px #5c5c5c; -webkit-box-shadow: 1px 1px 2px #5c5c5c; box-shadow: 1px 1px 2px #5c5c5c; } input[type=button]#previewbut:hover { background-color: #007073; color: #ffffff; text-decoration:none; } input[type=button]#selectbut { background-color: #9b9b9b; color: #ffffff; text-decoration:none; border:0px; } input[type=button]#selectbut { position: absolute; margin-top:-45px; margin-left:170px; width:100px; cursor: pointer; font-size: 12px; line-height: 11px; padding: 10px 5px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 1px 1px 2px #5c5c5c; -webkit-box-shadow: 1px 1px 2px #5c5c5c; box-shadow: 1px 1px 2px #5c5c5c; } input[type=button]#selectbut:hover { background-color: #007073; color: #ffffff; text-decoration:none; } </style> </head> <body> <!-- needed youtube player example 3 --> <div class="youtubeplayer"> <?php //if ( !isset( $_post['subkw'] ) ) { ?> <h2>search</h2> <form method="post" action="<?php echo htmlentities( $_server['php_self'] ); ?>"> input keyword : <input type="text" name="kw" value=""> <br /> <input type="submit" name="subkw" value="search"> </form> <?php //} else { ?> <h2>yt playlist <a href="index.php">back</a></h2><!-- end --> <div class="yt_holder yt_holder_right"> <div id="ytvideo4"></div> <!--up , down arrow --> <div class="you_up"><img src="css/up_arrow.png" alt="+ slide" title="hide" /></div> <div class="you_down"><img src="css/down_arrow.png" alt="- slide" title="show" /></div> <!-- end --> <div class="youplayer ytplayerright"> <ul class="videoyou videoytright"> <?php //$kw = $_post['kw']; //global $kw; // use this. include_once('class/class.youtubelist.php'); //in example playlist //$video = new youtubelist('playlist'); //keywords $video = new youtubelist('keywords'); $video->set_keywords( /*$kw*/ 'yoga' ); //this link playlist. //http://www.youtube.com/playlist?list=plaead0fc99564ba7f //remove pl string if there pl after list= $video->set_playlist('aead0fc99564ba7f'); $video->set_max(50); $video->set_order('none'); // retrieve actual video's $video->set_cachexml(false); $video->set_cachelife(86400); $video->set_xmlpath('./cache/'); $video->set_start(1); // --set text , description length $video->set_descriptionlength(85); $video->set_titlelength(25); if ( $video->get_videos() !=null ) { foreach ($video->get_videos() $ykey => $yvalue) { echo ' <li id="static"> <p>' . $yvalue['title'] . '</p> <span class="time timeright">' . $yvalue['time'] . '</span> <a class="videothumb4" href="http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '"> ' . $yvalue['description'] . ' </a> <!--<a class="videothumb4" id="previewbut" href="http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '"> preview </a>--> <a class="videothumb4" id="previewbut" href="http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '"> preview </a> <!--<input class="videothumb4" onclick="location.href=\'http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '\'" type="button" name="previewsel" value="preview" id="previewbut">--> <input class="videothumb4" type="button" name="selectsel" value="select" id="selectbut"> </li> '; } }else{ echo '<li>sorry, no video\'s found</li>'; } ?> </ul> </div> <!-- remove if don't want footer shadow --> <div style="height:0px; font-size:0em;clear:both;">&nbsp;</div> <div class="ytfooter ytfooterright">&nbsp;</div> <!-- end --> </div> <?php //} ?> </div> <!-- end youtube player --> </body> </html>

jquery href , button - stack overflow

learn, share, build

each month, on 50 million developers come stack overflow learn, share knowledge, , build careers.

join world’s largest developer community.

sign up

up vote 1 down vote favorite

it's easy <a href> , button can have same functions, it's not working.

this sample link of website: http://cocopop12.site11.com/search/. it's youtube plugin has 2 buttons on right side, preview , select.

the problem if click preview should play youtube video. it's not working. code below.

this link (the link working, copy on thumbnails):

<a class="videothumb4" href="http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '"> ' . $yvalue['description'] . ' </a>

this button want replace on hover.

<input class="videothumb4" onclick="location.href=\'http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '\'" type="button" name="previewsel" value="preview" id="previewbut">

the jquery code:

$(function() { <!-- videothumb css class found in foreach list class="videothumb". ytvideo holder id set div id--> $(".videothumb4").ytplaylist({ holderid: 'ytvideo4', html5: true, playerwidth: '520', autoplay: false, sliding: false, listsliding: true, social: true, autohide: false, playfirst: 0, playonload: false, modestbranding: true, showinfo: false }); }); // hover $(document).ready(function(){ $("input[type=button]#previewbut, #selectbut").hide(); $("li#static").hover( function() { $(this).find('#previewbut, #selectbut').fadein(); }, function() { $(this).find('#previewbut, #selectbut').fadeout(); }); });

the full code:

<!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>youtube search</title> <meta name="description" content="youtube keyword playlist jquery , php gdata api version2" /> <meta name="copyright" content="www.cfconsultancy.nl" /> <meta name="web_author" content="ceasar feijen" /> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <!-- remove above if including file --> <!-- needed youtube player --> <link rel="stylesheet" type="text/css" href="./css/youtubeplaylist.css" /> <!-- example css playlist right. see example 3 --> <link rel="stylesheet" type="text/css" href="./css/youtubeplaylist-right-with-thumbs.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.youtubeplaylist-min.js"></script> <script type="text/javascript"> $(function() { <!-- videothumb css class found in foreach list class="videothumb". ytvideo holder id set div id--> $(".videothumb4").ytplaylist({ holderid: 'ytvideo4', html5: true, playerwidth: '520', autoplay: false, sliding: false, listsliding: true, social: true, autohide: false, playfirst: 0, playonload: false, modestbranding: true, showinfo: false }); }); // hover $(document).ready(function(){ $("input[type=button]#previewbut, #selectbut").hide(); $("li#static").hover( function() { $(this).find('#previewbut, #selectbut').fadein(); }, function() { $(this).find('#previewbut, #selectbut').fadeout(); }); }); </script> <!-- css --> <style> /************** code demo **************/ /* containing element */ /* static image shown before hover */ a#static{ z-index:1; } input[type=button]#previewbut { background-color: #9b9b9b; color: #ffffff; text-decoration:none; border:0px; width:100px; } input[type=button]#previewbut { position: absolute; margin-top:-45px; margin-left:50px; cursor: pointer; font-size: 12px; line-height: 11px; padding: 10px 5px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 1px 1px 2px #5c5c5c; -webkit-box-shadow: 1px 1px 2px #5c5c5c; box-shadow: 1px 1px 2px #5c5c5c; } input[type=button]#previewbut:hover { background-color: #007073; color: #ffffff; text-decoration:none; } input[type=button]#selectbut { background-color: #9b9b9b; color: #ffffff; text-decoration:none; border:0px; } input[type=button]#selectbut { position: absolute; margin-top:-45px; margin-left:170px; width:100px; cursor: pointer; font-size: 12px; line-height: 11px; padding: 10px 5px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 1px 1px 2px #5c5c5c; -webkit-box-shadow: 1px 1px 2px #5c5c5c; box-shadow: 1px 1px 2px #5c5c5c; } input[type=button]#selectbut:hover { background-color: #007073; color: #ffffff; text-decoration:none; } </style> </head> <body> <!-- needed youtube player example 3 --> <div class="youtubeplayer"> <?php //if ( !isset( $_post['subkw'] ) ) { ?> <h2>search</h2> <form method="post" action="<?php echo htmlentities( $_server['php_self'] ); ?>"> input keyword : <input type="text" name="kw" value=""> <br /> <input type="submit" name="subkw" value="search"> </form> <?php //} else { ?> <h2>yt playlist <a href="index.php">back</a></h2><!-- end --> <div class="yt_holder yt_holder_right"> <div id="ytvideo4"></div> <!--up , down arrow --> <div class="you_up"><img src="css/up_arrow.png" alt="+ slide" title="hide" /></div> <div class="you_down"><img src="css/down_arrow.png" alt="- slide" title="show" /></div> <!-- end --> <div class="youplayer ytplayerright"> <ul class="videoyou videoytright"> <?php //$kw = $_post['kw']; //global $kw; // use this. include_once('class/class.youtubelist.php'); //in example playlist //$video = new youtubelist('playlist'); //keywords $video = new youtubelist('keywords'); $video->set_keywords( /*$kw*/ 'yoga' ); //this link playlist. //http://www.youtube.com/playlist?list=plaead0fc99564ba7f //remove pl string if there pl after list= $video->set_playlist('aead0fc99564ba7f'); $video->set_max(50); $video->set_order('none'); // retrieve actual video's $video->set_cachexml(false); $video->set_cachelife(86400); $video->set_xmlpath('./cache/'); $video->set_start(1); // --set text , description length $video->set_descriptionlength(85); $video->set_titlelength(25); if ( $video->get_videos() !=null ) { foreach ($video->get_videos() $ykey => $yvalue) { echo ' <li id="static"> <p>' . $yvalue['title'] . '</p> <span class="time timeright">' . $yvalue['time'] . '</span> <a class="videothumb4" href="http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '"> ' . $yvalue['description'] . ' </a> <!--<a class="videothumb4" id="previewbut" href="http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '"> preview </a>--> <a class="videothumb4" id="previewbut" href="http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '"> preview </a> <!--<input class="videothumb4" onclick="location.href=\'http://www.youtube.com/watch?v=' . $yvalue['videoid'] . '\'" type="button" name="previewsel" value="preview" id="previewbut">--> <input class="videothumb4" type="button" name="selectsel" value="select" id="selectbut"> </li> '; } }else{ echo '<li>sorry, no video\'s found</li>'; } ?> </ul> </div> <!-- remove if don't want footer shadow --> <div style="height:0px; font-size:0em;clear:both;">&nbsp;</div> <div class="ytfooter ytfooterright">&nbsp;</div> <!-- end --> </div> <?php //} ?> </div> <!-- end youtube player --> </body> </html>
share|improve question
    
in not familiar youtube plugin... .ytplaylist() function handle click event well? perhaps need place code within .on('click') handler... – lix jul 7 '12 @ 12:17
    
please show generated html, not php code. – jjj jul 7 '12 @ 12:20
4  
huh -1 not fair.. downvoters should comment why downvoted thats how people learn while posting questions : me question looks ok code , explanation.. – suave nti jul 7 '12 @ 12:23
    
man that's lot of code you've posted. please limit code pertinent question. – utkanos jul 7 '12 @ 12:48
    
im sorry first time. .on('click') same value href? – user1506189 jul 7 '12 @ 12:53

your answer

 
discard

posting answer, agree privacy policy , terms of service.

browse other questions tagged or ask own question.


Comments

Post a Comment

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> </head> <body> <button id="cmd_create_event" name="cmd_create_event" type="button">create new `event`</button> <script type="text/javascript"> var eventmodel = backbone.model.extend({ initialize : function() { console.log("`event` initialized. id: " + this.cid); this.bind("change:status", function() { console.log(this.get("status") + " value `status`"); }); this.bind("error", function(model, e...
Read more

php - Get uncommon values from two or more arrays -

is there function in php give array of uncommon values 2 or more arrays? for example: $array1 = array( "green", "red", "blue"); $array2 = array( "green", "yellow", "red"); .... $result = function_needed($array1, $array2,...); print_r($result); should give output: array("blue", "yellow", ...); use array_diff , array_merge : $result = array_merge(array_diff($array1, $array2), array_diff($array2, $array1)); here's demo. for multiple arrays, combine callback , array_reduce : function unique(&$a, $b) { return $a ? array_merge(array_diff($a, $b), array_diff($b, $a)) : $b; } $arrays = array( array('green', 'red', 'blue'), array('green', 'yellow', 'red') ); $result = array_reduce($arrays, 'unique'); and here's demo of that.
Read more

Adding duplicate array rows in Php -

i create function in php adds rows of array shared column value. so input. $test = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); and output. $testduplicatefree = array( array("c", 7, 9), array("test", 5, 6) ) ); i'm thinking function combine_duplicates($array,$col){ ... ... return $duplicatefreearray; } where $col duplicate free array. so, in case, combine_duplicates($test,0); would me desired output. this. <?php function combine_duplicates($array,$col) { $index = array(); foreach ($array $row) { $key = $row[$col]; if (!isset($index[$key])) { $index[$key] = $row; } else { ($i = 0; $i < count($row); ++$i) { if ($i != $col) { $index[$key][$i] += $row[$i]; } } } } return array_values($index); } $array = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); print_r(combine_duplicates($array, 0)); try here: http://codepad.org/mdhesqhi
Read more