javascript - How do I make my thumbnail as a link and the title append to the right? -

-

want create thumbnail link, as, putting title right of thumbnail.

i tried using after , messed html see if can span them next each other.

how go doing so?

here js:

$(function(){     var search = function(term, el){         $.get('https://www.googleapis.com/youtube/v3/search', {             part: 'snippet',             key: 'aizasya8dm-n-qcxpgkvkwii0lky0ak4zpgfp3c',             q: term,             maxresults: 25         }, function(data){             display(data.items, el);         });          };      var display = function(videos, el){         el.empty();         $.each(videos, function(index, video){             var thumbnail = video.snippet.thumbnails.default.url;             var vidtitle = video.snippet.title;             var vidid = video.id.videoid;             var container = $('<span/>', { 'class': 'video-container' });             var thumbcontainer = $('<div/>', { 'class': 'thumbnail' });             var thumbnailelement = $('<img/>', { 'src': thumbnail });             var thumbnaillink = $('<a/>', {'src': thumbnail});                 thumbcontainer.append(thumbnailelement).append(thumbnaillink);              var titlecontainer = $('<span/>', { 'class': 'title' });             var titleelement = $('<a/>', {                     'href': 'https://www.youtube.com/watch?v='+vidid,                 'target': '_blank',                 'html': vidtitle,                            });              titlecontainer.append(titleelement);              container.append(thumbcontainer).append(titlecontainer);              el.append(container);         });     };      //jquery event listeners     $('.search-btn').on('click', function(event){         event.preventdefault();         var searchinput = $('.search-field').val();         search(searchinput, $('#search-results'));     }); });

here html:

<body>     <div class="container">         <div class="master-nav">             <form class="search-nav">                 <span>                     <img src="https://www.thinkful.com/learn/static/shared/images/tf-logo-blue-t-1200x1200.png">                 </span>                 <span class="brand">                     <h1>hinkful tube</h1>                 </span>                 <span class="search-query"><input class="search-field">                     <button class="search-btn">submit</button>                 </span>             </form>         </div>         <div id="search-container">             <div id="search-results">                 <span class="video-container"></span>                 <span class="title"></span>             </div>         </div>       </div> </body>

here css:

.container {     margin: 0 auto;      font-family: arial;     color: #4628fb; }  .master-nav {     background-color: white;     height: 4.375rem;     width: 100%;     border-bottom: 1px solid #4628fb;     z-index: 9999; }  .search-nav {     width: 1000px;     margin: 0 auto; }  .search-query{     float: right;     padding: 10px 10px;  }  .brand{     float: left;     padding-left: 0px;   }  #search-results {  }  #search-container {      width: 1000px;     margin: 10px auto; }  .search-nav img {     width: 5%;     float:left;     padding-top: 10px } 

<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <style> .video-container{display:inline-block; width:100%} .thumbnail{float:left;}   .container {     margin: 0 auto;      font-family: arial;     color: #4628fb; }  .master-nav {     background-color: white;     height: 4.375rem;     width: 100%;     border-bottom: 1px solid #4628fb;     z-index: 9999; }  .search-nav {     width: 1000px;     margin: 0 auto; }  .search-query{     float: right;     padding: 10px 10px;  }  .brand{     float: left;     padding-left: 0px;   }  #search-results {  }  #search-container {      width: 1000px;     margin: 10px auto; }  .search-nav img {     width: 5%;     float:left;     padding-top: 10px } </style>  </head> <body> <div class="container">         <div class="master-nav">             <form class="search-nav">                 <span>                     <img src="https://www.thinkful.com/learn/static/shared/images/tf-logo-blue-t-1200x1200.png">                 </span>                 <span class="brand">                     <h1>hinkful tube</h1>                 </span>                 <span class="search-query"><input class="search-field">                     <button class="search-btn">submit</button>                 </span>             </form>         </div>         <div id="search-container">             <div id="search-results">                 <span class="video-container"></span>                 <span class="title"></span>             </div>         </div>       </div> <script type="text/javascript"> $(function(){     var search = function(term, el){         $.get('https://www.googleapis.com/youtube/v3/search', {             part: 'snippet',             key: 'aizasya8dm-n-qcxpgkvkwii0lky0ak4zpgfp3c',             q: term,             maxresults: 25         }, function(data){             display(data.items, el);         });          };      var display = function(videos, el){         el.empty();         $.each(videos, function(index, video)         {             var thumbnail = video.snippet.thumbnails.default.url;             var vidtitle = video.snippet.title;             var vidid = video.id.videoid;              var element = "<span class='video-container'><div class='thumbnail'><a href='https://www.youtube.com/watch?v="+vidid+"' target='_blank'><img src='"+thumbnail+"'></a></div><span class='title'>"+vidtitle+"</span></span>";             el.append(element);         });     };      //jquery event listeners     $('.search-btn').on('click', function(event){         event.preventdefault();         var searchinput = $('.search-field').val();         search(searchinput, $('#search-results'));     }); }); </script>  </body> </html>

Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more