Requirement:
Div1 float left, width auto.
Div2 width auto.
Div2 inner can padding,magrin.
Image :
Thứ Hai, 16 tháng 3, 2015
Thứ Tư, 11 tháng 3, 2015
DNP News Module custom load K2 Source
Module Name: DNP New Modules
Folder Name: mod_dnp_news
Descritption:
This version Not support K2 Source
Custome code for k2 Source
Result:
Solution:
This module not Free- so I have just share 4 files need edit.
-
Add select K2 category at admin
#1: mod_dnp_news-K2-Source\admin\elements\categoriesmultiple.php
https://drive.google.com/file/d/0B785Epf6q5XlRlA2elBMYmwyVGc/view?usp=sharing
-
Module .xml add field K2 param
#2: mod_dnp_news-K2-Source\mod_dnp_news.xml
https://drive.google.com/file/d/0B785Epf6q5XlTzY3YXYtUEVfWlE/view?usp=sharing
-
Edit helper load k2 items from database
#3: mod_dnp_news-K2-Source\helper.php
https://drive.google.com/file/d/0B785Epf6q5XlczRxWTFVWWdaTmM/view?usp=sharing
-
Edit view load k2 item
#4: mod_dnp_news-K2-Source\tmpl\swiper.php
https://drive.google.com/file/d/0B785Epf6q5Xlb1kzOHdYZ1I0WlU/view?usp=sharing
Folder Name: mod_dnp_news
Descritption:
This version Not support K2 Source
Custome code for k2 Source
Result:
Solution:
This module not Free- so I have just share 4 files need edit.
-
Add select K2 category at admin
#1: mod_dnp_news-K2-Source\admin\elements\categoriesmultiple.php
https://drive.google.com/file/d/0B785Epf6q5XlRlA2elBMYmwyVGc/view?usp=sharing
-
Module .xml add field K2 param
#2: mod_dnp_news-K2-Source\mod_dnp_news.xml
https://drive.google.com/file/d/0B785Epf6q5XlTzY3YXYtUEVfWlE/view?usp=sharing
-
Edit helper load k2 items from database
#3: mod_dnp_news-K2-Source\helper.php
https://drive.google.com/file/d/0B785Epf6q5XlczRxWTFVWWdaTmM/view?usp=sharing
-
Edit view load k2 item
#4: mod_dnp_news-K2-Source\tmpl\swiper.php
https://drive.google.com/file/d/0B785Epf6q5Xlb1kzOHdYZ1I0WlU/view?usp=sharing
Thứ Hai, 2 tháng 3, 2015
Easy MP3 HTML5 Playlist
Include: css, html, script
<style>
#Audio_Container {
width: 320px;
position:relative;
}
.Audio_inner {
background: none repeat scroll 0 0 #333;
border-radius: 5px;
display: inline-block;
width:100%;
}
audio{
border-radius:5px;
height:30px;
width:250px;
}
#playlist{
background:#333;
display:none;
margin: 1px 0;
padding: 0;
position: absolute;
width: 100%;
}
#playlist .active a {
color:#5DB0E6;
}
#playlist li a {
color:#eeeedd;
background:#333;
padding:5px;
display:block;
text-decoration:none;
}
#playlist li{
padding-left:15px;
}
.playlist_button{
float:left;
color:#FFF;
cursor:pointer;
padding:5px 10px;
}
.playlist_button:hover{
color:#cecece;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--HTML-->
<div id="Audio_Container">
<div class="Audio_inner">
<div class="playlist_button" href="#">Playlist</div>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">Sorry, your browser does not support HTML5 audio.
</audio>
</div>
<ul id="playlist">
<li class="active">
<a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a>
</li>
</ul>
</div>
<!--EndHTML-->
<!--SCRIPT_AUDIO-->
<script type="text/javascript">
var audio;
var playlist;
var tracks;
var current;
Audio_init();
function Audio_init() {
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .10;
audio[0].play();
playlist.find('a').click(function (e) {
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended', function (e) {
current++;
if (current == len) {
current = 0;
link = playlist.find('a')[0];
} else {
link = playlist.find('a')[current];
}
run($(link), audio[0]);
});
/*PlayListClick*/
$('.playlist_button').click(function() {
/*Hidden*/
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(playlist).slideUp();
}
/*View*/
else{
$(this).addClass('active');
$(playlist).slideDown();
}
});
}
function run(link, player) {
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
</script>
<!--END_SCRIPT_AUDIO-->
Link download https://drive.google.com/file/d/0B785Epf6q5XlTHA5bFNrMnc5azQ/view?usp=sharing
<style>
#Audio_Container {
width: 320px;
position:relative;
}
.Audio_inner {
background: none repeat scroll 0 0 #333;
border-radius: 5px;
display: inline-block;
width:100%;
}
audio{
border-radius:5px;
height:30px;
width:250px;
}
#playlist{
background:#333;
display:none;
margin: 1px 0;
padding: 0;
position: absolute;
width: 100%;
}
#playlist .active a {
color:#5DB0E6;
}
#playlist li a {
color:#eeeedd;
background:#333;
padding:5px;
display:block;
text-decoration:none;
}
#playlist li{
padding-left:15px;
}
.playlist_button{
float:left;
color:#FFF;
cursor:pointer;
padding:5px 10px;
}
.playlist_button:hover{
color:#cecece;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--HTML-->
<div id="Audio_Container">
<div class="Audio_inner">
<div class="playlist_button" href="#">Playlist</div>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">Sorry, your browser does not support HTML5 audio.
</audio>
</div>
<ul id="playlist">
<li class="active">
<a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a>
</li>
</ul>
</div>
<!--EndHTML-->
<!--SCRIPT_AUDIO-->
<script type="text/javascript">
var audio;
var playlist;
var tracks;
var current;
Audio_init();
function Audio_init() {
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .10;
audio[0].play();
playlist.find('a').click(function (e) {
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended', function (e) {
current++;
if (current == len) {
current = 0;
link = playlist.find('a')[0];
} else {
link = playlist.find('a')[current];
}
run($(link), audio[0]);
});
/*PlayListClick*/
$('.playlist_button').click(function() {
/*Hidden*/
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(playlist).slideUp();
}
/*View*/
else{
$(this).addClass('active');
$(playlist).slideDown();
}
});
}
function run(link, player) {
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
</script>
<!--END_SCRIPT_AUDIO-->
Link download https://drive.google.com/file/d/0B785Epf6q5XlTHA5bFNrMnc5azQ/view?usp=sharing
Đăng ký:
Bài đăng (Atom)